【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进行文档插入可以非常明显地提升性能,(待确认!

 

posted @ 2014-12-26 17:30  のんきネコ  阅读(439)  评论(0编辑  收藏  举报