零起步学习如何写jQuery框架

jQuery大概是怎样工作的，我假定你已经具备了一些基本的javascript知识，如果基础不够推荐你阅读《JavaScript高级程序设计》和《悟透JavaScript》这两本书。本文不适合对js里面的类、对象、函数、prototype等概念没有了解的朋友。

我们从最开始的说起:

首先构造一个对象给使用者，假定我们这个框架叫 Shaka

var Shaka = function(){}; 

这里我们创建了一个空函数，里面什么也没有，这个函数实际上就是我们的构造函数。为了让我们生成的对象能够调用在prototype里定义出来的方法, 我们需要用原型的方式(把Shaka当作是一个类)给Shaka添加一些方法，于是定义：

Shaka.fn =  Shaka.prototype = {};

这里的Shaka.fn相当于Shaka.prototype的别名，方便以后使用，它们指向同一个引用。

OK，我们添加一个sayHello的方法, 给Shaka添加一个参数，这样这个框架最基本的样子已经有了，如果它有生命的话那么它现在是1岁， 看代码：

<script type="text/javascript">
var Shaka = function(age){ this.age = age; };
Shaka.fn = Shaka.prototype = { sayHello: function() { alert('I am a little baby, my age is ' + this.age + ' years old.'); }};
var babyShaka = new Shaka(1);
babyShaka.sayHello();
</script>

好啦，先别激动, 我们注意到这个框架跟jQuery在使用上是有一些差别的, 比如在jq 中我们可以这样写：

jQuery('#myid').someMethod();

这是怎样做到的呢, 也就是说 jQuery()这个构造函数返回了一个jQuery的对象实例，因此我们可以在上面调用它的方法，所以Shaka的构造函数应该返回一个实例，它看起来应该是这个样子：

var Shaka = function(){ return //返回Shaka的实例; };

那么我们要如何取得一个Shaka的实例呢, 我们先来回顾一下使用prototype方式来模拟类的时候 var someObj = new  MyClass(); 这个时候实际上是创建一个新对象someObje，把新对象作为this指针，调用 MyClass函数,即类的构造函数, 然后 someObj 就获得了在 MyClass.prototype里面定义的方法, 这些方法内的this指针指当前对象实例。

在jQuery中使用了一个工厂方法来创建一个实例，这个方法位于jQuery.prototype中, 现在我们重新来定义Shaka.prototype, 给它添加一个init方法用于返回一个Shaka的实例, 并且把Shaka的构造函数稍稍改变一下：

var Shaka = function(age) { return new Shaka.fn.init(age); };

Shaka.fn = Shaka.prototype = {
       init: function(age) { this.age = age; return this; },
       sayHello: function() { alert('I am a little baby, my age is ' + this.age + ' years old.'); }
};

Shaka.fn.init.prototype = Shaka.fn;//这里new Shaka.fn.init(age)创建的对象具有init方法的prototype指向对象的方法 , 因此我们将init方法的prototype指向 Shaka的prototype, 这样创建出来的对象就具有了Shaka.prototype里面定义的方法。