Когда nodeType(), используемый в объекте, ведет себя по-разному в версиях jQuery "1.11.2" и "3.1.1",

Я очень хочу знать, почему версии jQuery "1.11.2" и "3.1.1" ведут себя двумя разными способами при использовании функции nodeType() в объекте jQuery.

Чтобы проиллюстрировать это, у меня есть две ссылки для скриптов для этих двух версий.

JQuery-1.11.2
https://jsfiddle.net/38z9m9j9/9/

JQuery-3.1.1
https://jsfiddle.net/38z9m9j9/8/

И в этом случае у меня есть условие, что

this.options.data == data.colors[0];

Это становится равным только в версии '1.11.2' при использовании функции nodeType() 'для объекта' this.options.data.colors [0] ', где не работает в' 3.1 0,1'. Итак, как работает "nodeType()" в "1.11.2"?

Спасибо заранее.

Ответ 1

Причина проблемы в разнице в реализации функции isPlainObject в этих двух версиях jQuery.

Текущий isPlainObject в 1.4 тестах .nodeType, потому что IE делает dom-узлы похожими на объекты. Это имеет побочный эффект: $.isPlainObject({nodeType:...}); вернет false, когда он вернет true. (Из jQuery Forum)

Использовать jQuery 1.11.2

var data = {
  colors: {
    id: 1,
    color: "red",
    nodeType: function () {},
  }
};

function logPlain (value, log) {
	value && value.color == "red" && $('#plain').text(log);
}

//from release of jQuery UI-1.12.1
$.widget.extend = function( target ) {
	var widgetSlice = Array.prototype.slice;
  var input = widgetSlice.call( arguments, 1 );
	var inputIndex = 0;
	var inputLength = input.length;
	var key;
	var value;

	for ( ; inputIndex < inputLength; inputIndex++ ) {
		for ( key in input[ inputIndex ] ) {
			value = input[ inputIndex ][ key ];
			if ( input[ inputIndex ].hasOwnProperty( key ) && value !== undefined ) {

				// Clone objects
				if ( $.isPlainObject( value ) ) {
          logPlain(value, 'true');
					target[ key ] = $.isPlainObject( target[ key ] ) ?
						$.widget.extend( {}, target[ key ], value ) :

						// Don't extend strings, arrays, etc. with objects
						$.widget.extend( {}, value );

				// Copy everything else by reference
				} else {
          logPlain(value, 'false');
					target[ key ] = value;
				}
			}
		}
	}
	return target;
};

$(function() {
  $.widget("custom.widget2", {
    options: {
      data: null
    },
    _create: function() {
      var isDataEqual = this.options.data == data.colors;
      $('#equal').text(isDataEqual ? "true" : "false");
    },
  });

  $("#my-widget1").widget2({
    data: data.colors
  });

});

#equal, #plain {
  background-color: rgba(0, 128, 0, 0.31);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div>
  <div id="my-widget1">Testing 'nodeType' in jQuery version-1.11.2</div>
  <div>isPlainObject: <span id="plain"></div>
  <div>isDataEqual: <span id="equal"></span></div>
</div>

Ответ 2

Вот ваша разница в сравнении, когда я сравниваю обе версии jquery, я нашел разницу в методе jQuery isPlainObject. Если вы замените метод 3.x isPlainObject из метода 1.x isPlainObject, вы получите тот же результат, что и 1.x

найдите скриншот для сравнения.