以前一直好奇和膜拜jQuery这样强大的类库它到底是怎样实现的。能让js变得如此方便快捷。
趁着最近在看《javascript框架设计》也十分想实现一个自己的移动端库,以便于项目运用。于是开始琢磨起了jQuery。
首先亮杀器!
首先我们用一个闭包的方式,将我们的代码封闭起来避免过多的全局变量注入。然后在最后将我们的构造函数挂载到window.x暴露出去即可。
如果你看过jQuery源码的话,应该对它的无new创建对象模式非常的熟悉。
它的奇妙之处也就在于,kodo构造函数每次被调用的时候都会return 了一个新的对象。
而这个对象其实就是kodo构造函数原型链上的init方法,为了让init这个对象,也要拥有kodo上的方法以便链式调用。
所以我们在最后必须让 kodo.prototype.init的prototype 指向 kodo的prototype。
也就是 kodo.prototype.init.prototype = kodo.prototype 这句代码的作用。接着我们就只需要在kodo构造函数的原型链上挂载各种方法和属性即可。
然后避免我们的kodo构造函数原型链指向错误,我们要手动将constructor重新指向kodo。
这基本就是一个大体的框架格式构建。接着我们来观察一下jQuery选择元素之后会有什么样的反馈,了解了后我们才知道$(‘xx’)是如何运作起来的。
其实通过log我们可以发现,通过选择dom之后会返回一个类数组对象,而正是因为拥有这个类数组对象才能让被选择的jqdom对象能链式调用jq上的方法。
那这就有个问题如何构造这个类数组对象呢?
很简单我们只需要在我们的原型上增加2个对象即可
length的作用就是为了可以循环jqdom对象然后对dom进行一些操作,这个length的设置就是选择了dom的数量。接着让我们完善一下init方法和color来测试测试。
增加这些代码之后,我们先来看看选择器是否正常运作。
嗯,看上去还挺不错,一切正常。直接k(‘li’).color(‘red’)也是可以直接调用的。到此为止我们的整体框架结构就算是搭建好了。
接着又有一个问题那$.ajax 这样的方法又是如何挂载上去调用的呢?仔细想想可以知道,其实我们的构造函数也是一个对象。所以!我们可以直接这样
同样在控制台只需要k.ajax()即可调用。到这里算是把jq所有的疑惑都解开了。噢吼吼吼
最后给出完整的demo代码。
have a nice day
>>>>>原文地址<<<<<