jQuery1.5新特征之插件机制的救赎

开发 前端
感觉jQuery1.5最大的改变有两个,jQuery子类与异步列队,本文只谈jQuery子类。首先要明白为何要推出此功能,是强化它那基本为零的OO功能吗?不是,从下面的源码你应该知道它不是让你自定义类。但这也是个愚蠢的问题,因为这样,这方法就叫Class,而不是subclass。

感觉jQuery1.5***的改变有两个,jQuery子类与异步列队,本文只谈jQuery子类。

首先要明白为何要推出此功能,是强化它那基本为零的OO功能吗?不是,从下面的源码你应该知道它不是让你自定义类。但这也是个愚蠢的问题,因为这样,这方法就叫Class,而不是subclass。

  1. subclass: function(){    
  2.     function jQuerySubclass( selector, context ) {    
  3.         return new jQuerySubclass.fn.init( selector, context );    
  4.     }    
  5.     jQuerySubclass.superclass = this;    
  6.     jQuerySubclass.fn = jQuerySubclass.prototype = this();    
  7.     jQuerySubclass.fn.constructor = jQuerySubclass;    
  8.     jQuerySubclass.subclass = this.subclass;    
  9.     jQuerySubclass.fn.init = function init( selector, context ) {    
  10.         if (context && context instanceof jQuery && !(context instanceof jQuerySubclass)){    
  11.             context = jQuerySubclass(context);    
  12.         }    
  13.         return jQuery.fn.init.call( this, selector, context, rootjQuerySubclass );    
  14.     };    
  15.     jQuerySubclass.fn.init.prototype = jQuerySubclass.fn;    
  16.     var rootjQuerySubclass = jQuerySubclass(document);    
  17.     return jQuerySubclass;    
  18. },  

我想它真正的用意是为了改善其插件机制。

jQuery的插件是很容易开发,随便在其原型链上添加个方法就叫称“插件”,因此jQuery的插件很多,垃圾插件也很多,由于停止更新变成垃圾的也很多。

  1. jQuery.fn.garbage = function(){    
  2.     alert("这是垃圾插件!")    
  3. }   

当然这是在最理想的情况下,插件才这么简单(好像一个函数算一个插件也蛮多的)。比如你开发一个插件,然后你同事也开发了一个同名的插件,这时出问题吧。还有这种情况:

  1. (function($){//插件一    
  2.      $.fn.extend({    
  3.              a:function(){//插件的主体    
  4.                 this.b()    
  5.            },    
  6.             b:function(){}//辅助函数    
  7.        })    
  8.  })(jQuery);    
  9.   (function(){//插件二    
  10.      $.fn.extend({    
  11.             c:function(){//插件的主体    
  12.                 this.b()    
  13.            },    
  14.             b:function(){}//辅助函数       
  15.       })    
  16. })(jQuery);  

这时这两个插件混用就有问题了,插件一的b与插件二的b可能不是一个东西,这机率还很大,因为插件一可能是美国的菜鸟开发,插件二是德国的菜鸟开发的,而且外国人都非常喜欢把他们的插件放到jQuery官网的插件展示区,国内的懒鬼兼菜鸟就很容易踩雷了。

插件混乱之灾随着jQuery的流行日益严重,由于jQuery易学易用,公司前端不够人手,随便抓个后台就行了。于是前端也像中国楼市那样出现泡沫了,一个页面引用N个插件,满屏的选择器,维护成本超高,近乎不可能。

归根结底,问题是大家都在污染jQuery与jQuery.fn这个两个对象,就像以前大家都爱到全局作用域那里拉屎那样。全局作用域是公厕,去那儿是不可避免的,但我们可以用子类来转移jQuery,jQuery.fn的负担。

在jQuery1.5中,我们就应该这样写插件。

  1. var MyjQuery = jQuery.subclass();    
  2. MyjQuery.fn.writeHello = function(){ this.text('Hello World'); };    
  3. MyjQuery('p').writeHello();  

由于MyjQuery是jQuery的子类,因此拥有其所有能力,链式操作一样没问题。

  1. MyjQuery('div').css('border''1px red solid').writeHello();  

我们还可以对jQuery原有方法进行修改,不用因为某些隐性bug而改源码了:

  1. MyjQuery.fn.text = function(val) {    
  2.   var orig = jQuery.fn.text;    
  3.   if(typeof val === "string") {    
  4.     return orig.call(this"!!"+ val +"!!");    
  5.   } else {    
  6.     return orig.apply(this, arguments);    
  7.   }    
  8. };    
  9. MyjQuery('.aaa').text("text");    
  10. MyjQuery('.aaa').text();   
  11.    //!!text!!    
  12. //不影响jQuery自身    
  13. jQuery('.aaa).text('text'); //text  

当然这也带来一个问题,插件都变为绑定到新的命名空间上了,重新跑到全局作用域上……看来进一步的救赎要等其包加载机制出来了。因此少用插件,提高自身的javascript(非jQuery)能力才是基本。

原文链接:http://www.cnblogs.com/rubylouvre/archive/2011/01/21/1940935.html

【编辑推荐】

  1. 精益求精 jQuery代码的分析与优化
  2. jQuery1.5的六大细节改进:DOM操作更简单
  3. jQuery入门:数组的三种类型三种操作
  4. jQuery 1.5***个Beta版发布 付下载
  5. 10个超赞超实用的免费jQuery图片插件 附下载
  6. jQuery 1.5正式版发布 五大变化引人注目

责任编辑:陈贻新 来源: 司徒正美的博客
相关推荐

2011-06-09 17:26:17

Qt 插件 API

2021-06-22 06:52:46

Vite 插件机制Rollup

2011-01-19 08:59:30

jQueryWebAjax

2010-09-08 14:39:35

2009-12-11 10:29:03

PHP插件机制

2023-11-07 10:19:08

2024-07-17 09:23:58

Vite插件机制

2009-07-07 13:02:29

JDK1.5

2023-06-15 08:01:01

Vite插件机制

2020-05-22 09:10:10

前端框架插件

2019-12-19 08:56:21

MybatisSQL执行器

2011-04-01 11:13:57

jQuery

2021-03-04 08:19:29

插件机制代码

2021-12-19 07:21:48

Webpack 前端插件机制

2021-12-03 15:59:30

Nuxt3插件机制

2012-04-27 10:00:43

jQuery插件

2012-09-24 01:49:48

jQueryjQuery插件Web

2011-06-20 13:05:53

Qt 4.7 Qt Quick

2011-03-01 16:08:46

2011-02-14 14:35:40

jQueryAjaxWeb
点赞
收藏

51CTO技术栈公众号