感觉jQuery1.5最大的改变有两个,jQuery子类与异步列队,本文只谈jQuery子类 。
首先要明白为何要推出此功能,是强化它那基本为零的OO功能吗?不是,从下面的源码你应该知道它不是让你自定义类 。但这也是个愚蠢的问题,因为这样,这方法就叫Class,而不是subclass 。
- subclass: function(){
- function jQuerySubclass( selector, context ) {
- return new jQuerySubclass.fn.init( selector, context );
- }
- jQuerySubclass.superclass = this;
- jQuerySubclass.fn = jQuerySubclass.prototype = this();
- jQuerySubclass.fn.constructor = jQuerySubclass;
- jQuerySubclass.subclass = this.subclass;
- jQuerySubclass.fn.init = function init( selector, context ) {
- if (context && context instanceof jQuery && !(context instanceof jQuerySubclass)){
- context = jQuerySubclass(context);
- }
- return jQuery.fn.init.call( this, selector, context, rootjQuerySubclass );
- };
- jQuerySubclass.fn.init.prototype = jQuerySubclass.fn;
- var rootjQuerySubclass = jQuerySubclass(document);
- return jQuerySubclass;
- },
我想它真正的用意是为了改善其插件机制 。
jQuery的插件是很容易开发,随便在其原型链上添加个方法就叫称“插件”,因此jQuery的插件很多,垃圾插件也很多,由于停止更新变成垃圾的也很多 。
- jQuery.fn.garbage = function(){
- alert("这是垃圾插件!")
- }
当然这是在最理想的情况下,插件才这么简单(好像一个函数算一个插件也蛮多的) 。比如你开发一个插件,然后你同事也开发了一个同名的插件,这时出问题吧 。还有这种情况:
- (function($){
- $.fn.extend({
- a:function(){
- this.b()
- },
- b:function(){}
- })
- })(jQuery);
- (function(){
- $.fn.extend({
- c:function(){
- this.b()
- },
- b:function(){}
- })
- })(jQuery);
这时这两个插件混用就有问题了,插件一的b与插件二的b可能不是一个东西,这机率还很大,因为插件一可能是美国的菜鸟开发,插件二是德国的菜鸟开发的,而且外国人都非常喜欢把他们的插件放到jQuery官网的插件展示区,国内的懒鬼兼菜鸟就很容易踩雷了 。
插件混乱之灾随着jQuery的流行日益严重,由于jQuery易学易用,公司前端不够人手,随便抓个后台就行了 。于是前端也像中国楼市那样出现泡沫了,一个页面引用N个插件,满屏的选择器,维护成本超高,近乎不可能 。
归根结底,问题是大家都在污染jQuery与jQuery.fn这个两个对象,就像以前大家都爱到全局作用域那里拉屎那样 。全局作用域是公厕,去那儿是不可避免的,但我们可以用子类来转移jQuery,jQuery.fn的负担 。
在jQuery1.5中,我们就应该这样写插件 。
- var MyjQuery = jQuery.subclass();
- MyjQuery.fn.writeHello = function(){ this.text(Hello World); };
- MyjQuery(p).writeHello();
由于MyjQuery是jQuery的子类,因此拥有其所有能力,链式操作一样没问题 。
- MyjQuery(div).css(border, 1px red solid).writeHello();
我们还可以对jQuery原有方法进行修改,不用因为某些隐性bug而改源码了:
- MyjQuery.fn.text = function(val) {
- var orig = jQuery.fn.text;
- if(typeof val === "string") {
- return orig.call(this, "!!"+ val +"!!");
- } else {
- return orig.apply(this, arguments);
- }
- };
- MyjQuery(.aaa).text("text");
- MyjQuery(.aaa).text();
-
-
- jQuery(.aaa).text(text);
当然这也带来一个问题,插件都变为绑定到新的命名空间上了,重新跑到全局作用域上……看来进一步的救赎要等其包加载机制出来了 。因此少用插件,提高自身的javascript(非jQuery)能力才是基本 。
原文链接:http://www.cnblogs.com/rubylouvre/archive/2011/01/21/1940935.html