您当时的方位:主页 > 言语编程 > jQuery

jQuery结构实例代码剖析

2014-10-28  

跟着年代开展,javascript阵营里边呈现了越来越多的优异的结构,大大简化了咱们的开发作业,在咱们运用这些结构的时分是不是也应该饮水思源想想它们都是怎样构建起来的呢?假如你不满足于仅仅是运用一些现成的API,而是深化了解它们内部的完成机制(照或人的说法, API是价值降低最快的东西),最好的办法便是阅览它们的源代码了,条件是你读得懂。

最近两天研讨了一下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岁, 看代码:

运转代码框

[Ctrl+A 悉数挑选 提示:你可先修正部分代码,再按运转]

好啦,先别激动, 咱们注意到这个结构跟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指针指当时目标实例。