【jquery】 【jQuery技术内幕】阅读笔记 一

jQuery( object )

jquery在构造对象时，除了可以用十分好用的css选择器来查找DOM，还可以传入一个javascript对象来生成一个jquery对象。

// JS
var foo = {name:"foo",hello:"word"};
var $foo = $(foo);
$foo.on("custom",function(){
	console.log(this.name +" "+ this.hello);
});

$(function(){
	$("#btn").bind('click',function(){
		$foo.trigger("custom");
	});
});

// html
<button id="btn">触发</button>

　　

为什么要在构造函数jQuery() 内部用运算符new创建并返回另一个构造函数的实例

对于jquery的构造函数，其实可以换个方法进行理解，因此我根据jquery的代码构造，写了下面这段代码：

(function(window,undefined){
	var factory = (function(obj){
		var NewObj = function(obj){
			return new NewObj.fn.init(obj);
		}

		NewObj.fn = NewObj.prototype={
			constructor:NewObj,
			init:function(obj){
				this.context = {
					name:obj
				};
				return this;
			},
			print:function(){
				console.log(this.context.name);
			}
		}
		NewObj.fn.init.prototype = NewObj.fn;
		return NewObj ;
	})();

	window.factory = window.FC = factory;

})(window);

FC("hello word").print();

在源码中，上面这段代码中的factory和NewObj其实都是写作Jquery，这样比较容易导致概念混乱。因此我换了一个名称，好予以区分。

我们可以清晰地看到，jquery的整体架构其实可以相当于一个工厂模式。factory根据外部传入的对象obj，在内部new创建生成一个NewObj对象。

这样在创建NewObj对象时，可以省略new运算符。从而更方便的创建和调用NewObj对象。

getElementById浏览器兼容问题

IE7以下及某些Opera版本的时候，用getElementById获取元素时，会按name进行查找。好坑爹啊，这也可以？？！！

调用createDocumentFragment进行文档插入可以非常明显地提升性能，（待确认！）