jquery插件开发规范

来源于:https://github.com/woodens/

 

jQuery插件开发方式主要有三种：

• 通过$.extend()来扩展jQuery

• 通过$.fn 向jQuery添加新的方法

• 通过$.widget()应用jQuery UI的部件工厂方式创建

  第一种方式太简单，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而已，所以我们调用通过$.extend()添加的函数时直接通过$符号调用（$.myfunction()）而不需要选中DOM元素($('#example').myfunction())，这种方式无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用第二种开发方式
  通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等

请按照以下的方式（安全结构良好的代码）编写插件

;(function($,window,document,undefined){
    //我们的代码。。 //blah blah blah... })(jQuery,window,document);

例：

;(function($, window, document,undefined) {
    //定义Beautifier的构造函数 var Beautifier = function(ele, opt) { this.$element = ele, this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration': 'none' }, this.options = $.extend({}, this.defaults, opt) } //定义Beautifier的方法 Beautifier.prototype = { beautify: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize, 'textDecoration': this.options.textDecoration }); } } //在插件中使用Beautifier对象 $.fn.myPlugin = function(options) { //创建Beautifier的实体 var beautifier = new Beautifier(this, options); //调用其方法 return beautifier.beautify(); } })(jQuery, window, document);

编写中的注意事项：

• • 在代码开头加一个分号
    用来充当自调用匿名函数的第一对括号容易与别人定义的函数相连，中间没有分号造成我们的代码无法正常解析进而报错,所以好的做法是我们在代码开头加一个分号，这在任何时候都是一个好的习惯
  • 将系统变量以参数形式传递到插件内部可以提高访问速度
    至于这个undefined，稍微有意思一点，为了得到没有被修改的undefined，我们并没有传递这个参数，但却在接收时接收了它，因为实际并没有传，所以‘undefined’那个位置接收到的就是真实的'undefined'了
  • 命名规范
    • a:变量及函数命名 一般使用驼峰命名法（CamelCase）
    • b:在JavaScript中多用单引号
  • 插件开发请使用面向对象思维
    因为如果不这样，你可能需要一个方法的时候就去定义一个function，当需要另外一个方法的时候，再去随便定义一个function，同样，需要一个变量的时候，毫无规则地定义一些散落在代码各处的变量
  • 保护好默认参数
    • 示例代码a

    var defaults = {
        'color': 'red', 'fontSize': '12px' }; var settings = $.extend(defaults, options);

    • 示例代码b

    var defaults = {
        'color': 'red', 'fontSize': '12px' }; var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数

    示例代码a中调用extend时会将defaults的值改变，这样不好，因为它作为插件因有的一些东西应该维持原样，另外就是如果你在后续代码中还要使用这些默认值的话，当你再次访问它时它已经被用户传进来的参数更改了
    示例代码b中将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值
  • 让插件接收参数
    一个强劲的插件是可以让使用者随意定制的，这要求我们提供在编写插件时就要考虑得全面些，尽量提供合适的参数
  • 支持链式调用
    要让插件不打破jQuery支持链式调用的特性（选择好DOM元素后可以不断地调用其他方法），只需return一下即可