如何实现一个jQuery的框架格式？

以前一直好奇和膜拜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

 

>>>>>原文地址<<<<<