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

jQuery( object )

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// 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的代码构造，写了下面这段代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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