你在这里

jQuery 开发插件小结

主标签

本文作者简介

Casio(大家通常叫他“表”),是我之前在shift2的同事,最近他专门为我们的Drupal中国站点写了点jQuery方面的总结,与大家分享一下他的编写jQuery插件的经验,在此感谢表!

 

在龙马的Drupal中国(http://drupalchina.cn/)站里看到关于jQuery的插件开发还处于空缺状态,就想反正也有时间就总结个吧,写得不好,希望大家多多指教。

jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我也写过一些插件,所以写这个小结仅对入门的人了解探讨。

开发插件基础

  • 样式

说到样式想到的肯定是CSS,我们讨论的不是好看的页面效果和漂亮的设计,我们只是了解CSS基本样式,其实也就是CSS的一些属性如:position,margin,padding,width,height,left,top,float,border,background...掌握css应该从简单做起,从基本入手,在实践中运用并不断深入。

  • JS脚本

我们同样需要对JavaScript有着深刻的理解,对dom, xhr, Regex, call-apply, prototype等都应该有一定的了解。有人会说要这些有啥用啊,对dom的操作其实通过getElementById, getElementsByTagName以及其他的API都可以轻松的完成,这话是没错,当思路确定后,思想才是重点,一段代码是精华还是糟粕很容易就可以区分出来,究其原因还是取决你自己,举个简单的例子,在开发中有时候会用到大量的html组装,如:

A写的代码:

var a = new Array(10);
var menu = '';  
for (var i = 0; i < a.length; i++) {
  menu += '<li class="style_' + a[i] + '" >' + a[i] + '</li>';
}

B写的代码

String.prototype.format = function() {
    var args = arguments;
    return this.replace(/{(\d{1})}/g, function() {
        return args[arguments[1]];
    });
};
var a = new Array(1,2,3,4,5,6,7,8,9,0);
var m = '<li class="style_{0}">{0}</li>';
for (var i = 0; i &lt; a.length; i++) {
    menu += m.format(a[i]);
}

同样都能达到相同的效果,你会选择那个?很显然是在实现方式明确的情况下,高效的代码显然更具吸引力。

好了,了解完这些基础之后,我们正式踏上我们的开发插件之旅。可能很枯燥,但之要你坚持看完你一定能有所收获。

jQuery插件的开发包括两种:(1)是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,(2)是对象级别的插件开发,即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:

1.1 添加一个新的全局函数

添加一个全局函数,我们只需如下定义:

jQuery.foo = function() {
alert('This is a test. This is only a test.');
}; 

1.2 增加多个全局函数

添加多个全局函数,可采用如下定义:

jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
jQuery.bar = function(param) {
alert('This function takes a parameter, which is "' + param + '".');
};

调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

1.3 使用jQuery.extend(object);

jQuery.extend({   
  foo: function() {   
    alert('This is a test. This is only a test.');   
  },   
  bar: function(param) {   
    alert('This function takes a parameter, which is "' + param +'".');   
  }  
});

1.4 使用命名空间

虽然在jQuery命名空间中,我们禁止使用了大量的JavaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间。

jQuery.myPlugin = {       
  foo:function() {       
    alert('This is a test. This is only a test.');       
  },       
  bar:function(param) {       
    alert('This function takes a parameter, which is "' + param + '".'); 
  }      
};

采用命名空间的函数仍然是全局函数,调用时采用的方法:

$.myPlugin.foo();      
$.myPlugin.bar('baz');

通过这个技巧(使用独立的插件名),我们可以避免命名空间内函数的冲突。

论坛: 

猜你喜欢