到目前为止我们已经创建一个可以工作的框架雏形,为了使程序可以更方便地被调用,比如jQuery可以使用$符号来简写,我们也弄一个,在此之前我们先来回顾两个东西:
1. 我们在脚本中可以这样定义变量:
var foo = 'someThing'; bar = 'otherthing';
这样两种写法都是合法的,但是意义完全不同, 第一个语句创建了一个新的变量,而第二个是定义了window对象的一个属性,相当于window.bar = 'otherthing';, 因此我们想使我们的Shaka具有这样的调用方式能力: $.someMethod();就需要将Shaka设置为window的一个属性, 于是我们的Shaka构造函数就得写成这样:
var Shaka = window.Shaka = window.$ = function(selector) { return new Shaka.fn.init(selector); };
2. javascript的匿名函数.
创建并执行一个匿名函数的基本形式: (function(){ alert('Hello World!'); })(); 为什么要用到匿名函数呢,因为我们不想把Shaka的内部实现暴露出来,这样容易与其它代码冲突,只提供一个单一的入口,我们可以这样测试一下:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
然后,还有一个问题需要解决,俺们的框架做出来了但是还很简陋,在这之前我们需要让它与其它的框架协同工作,因此带来一个问题, 如果我们都使用$作为简写形式就会冲突了, 象jQuery一样,我们需要提供一个noConfilit的方法“出让”$的使用权。在我们的程序最开始处加入下面的代码:
var _$ = window.$;
意思是将此前定义的$对象引用放到 _$ 中, 然后我们再给Shaka扩展一个方法出来, 如果其它开发者需要自行扩展的话也可以使用这个方式(jQuery的extend方法提供了更为强大的功能,请大家自行研究):
(function($){ //extend method definition. })(Shaka);
意思是将Shaka作为这个匿名函数的参数来调用这个方法。 前面我们讲过 Shaka.fn 就是 Shaka.prototype 的别名,因此我们要在Shaka.prototype 里面添加新的方法就可以写成这样:
(function($){ $.fn.noConflict = function(){ window.$ = _$;//把$还给在开始处取得的引用. }; })(Shaka);
现在我们来看一个完整的:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
现在好象不错了,我们的Shaka baby已经5岁了;) , 当然这还只是个简陋的东西,要实现健壮而强大的功能还需要付出很多努力, 希望诸位爹妈把自己的孩子培养成人才, good luck!
经典论坛交流: http://bbs.blueidea.com/thread-2902038-1-1.html
本文链接:http://www.blueidea.com/tech/web/2010/7326.asp
出处:蓝色理想
责任编辑:bluehearts
上一页 从零开始写jQuery框架 [2] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|