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里面定义的方法。
OK,现在我们的小宝宝变成大一点的宝宝了,打个招呼先:
<script type="text/javascript"> 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 big baby, my age is ' + this.age + ' years old.'); } }; Shaka.fn.init.prototype = Shaka.fn; Shaka(2).sayHello(); </script>嗯,好象有点样子了,但是光这样还不行,来点实际的, 我们在新框架中实现jquery里val()方法的部分功能,这个方法不加参数调用时返回指定ID的input的值,加参数时为设定这个input的值,与jQery一样,我们约定使用id来查找对象时使用"#"符号。把要查找的目标ID作为构造函数的参数传进去,我们给Shaka.prototype添加一个val()方法, 给Shaka添加一个selector的属性用于存储我们要查找的目标。
Shaka.fn = Shaka.prototype = { init: function(selector) { this.selector = selector; return this; }, val: function(newValue) { //方法实现代码 } }; var Shaka = function(selector) { return new Shaka.fn.init(selector); }; <form method="post" action="" name="myform"> 我几岁了? <br /> <input id="myInput" type="text" value="Hello world!" size="50" /> </form> <script type="text/javascript"> var Shaka = function(selector) { return new Shaka.fn.init(selector); }; Shaka.fn = Shaka.prototype = { init: function(selector) { if(selector) this.selector = selector; return this; }, val: function(newValue) { //start val function body if(!(this.selector && this.selector.indexOf('#') == 0 && this.selector.length != 1)) return; //简单地判断传入值非法, 最好使用正则 var id = this.selector.substring(1); var obj = document.getElementById(id); if(obj)//如果对象存在 { if(newValue == undefined) return obj.value;//获取目标对象的值. obj.value = newValue;// 将目标对象的value属性设置为newValue. return this; //为了使方法可以连续调用。 } //end val function body } }; Shaka.fn.init.prototype = Shaka.fn; alert('object old value is '+Shaka('#myInput').val()); alert(Shaka('#myInput').val('I am 3 years old now!').val()); </script>到目前为止我们已经创建一个可以工作的框架雏形,为了使程序可以更方便地被调用,比如jQuery可以使用$符号来简写,我们也弄一个,在此之前我们先来回顾两个东西:
1. 我们在脚本中可以这样定义变量:
var foo = 'someThing'; bar = 'otherthing';