js插件开发

阅读更多

jquery插件开发模式
jquery插件一般有三种开发方式：
通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建
第一种$.extend()相对简单，一般很少能够独立开发复杂插件，第三种是一种高级的开发模式，本文也不做介绍。第二种则是一般插件开发用到的方式，本文着重讲讲第二种。
插件开发
第二种插件开发方式一般是如下定义
代码如下	复制代码
$.fn.pluginName = function() {
    //your code here
}
插件开发，我们一般运用面向对象的思维方式
例如定义一个对象
代码如下	复制代码
var Haorooms= function(el, opt) {
    this.$element = el,
        this.defaults = {
            'color': 'red',
            'fontSize': '12px',
            'textDecoration':'none'
        },
        this.options = $.extend({}, this.defaults, opt)
}
//定义haorooms的方法
haorooms.prototype = {
    changecss: function() {
        return this.$element.css({
            'color': this.options.color,
            'fontSize': this.options.fontSize,
            'textDecoration': this.options.textDecoration
        });
    }
}
$.extend({}, this.defaults, opt)有{}主要是为了创建一个新对象，保留对象的默认值。
代码如下	复制代码
$.fn.myPlugin = function(options) {
    //创建haorooms的实体
    var haorooms= new Haorooms(this, options);
    //调用其方法
    return Haorooms.changecss();
}
调用这个插件直接如下就可以
代码如下	复制代码
$(function() {
    $('a').myPlugin({
        'color': '#2C9929',
        'fontSize': '20px'
    });
})
上述开发方法的问题
上面的开发方法存在一个严重的问题，就是定义了一个全局的Haorooms，这样对于插件的兼容等等各个方面都不好。万一别的地方用到了Haorooms，那么你的代码就悲催了！现在我们把上面的代码包装起来，用一个自调用匿名函数包裹，就不会出现这个问题了！包括js插件的开发，也是一样的，我们用一个自调用匿名函数把自己写的代码包裹起来，就可以了！包裹方法如下：
代码如下	复制代码
(function(){
})()
用上面的这个包裹起来，就可以了。
但是还有一个问题，当我们研究大牛的代码的时候，前面经常看到有“；”，那是为了避免代码合并等不必要的错误。
例如，我们随便定义一个函数：
代码如下	复制代码
var haoroomsblog=function(){
}
(function(){
})()
由于haoroomsblog这个函数后面没有加分号，导致代码出错，为了避免这类情况的发生，通常这么写！
；(function(){
})()
把你的插件代码包裹在上面里面，就是一个简单的插件了。（注js插件和jquery插件都是如此）
还有一个问题
把你的插件包裹在
代码如下	复制代码
；(function(){
})()
基本上可以说是完美了。但是为了让你开发的插件应用更加广泛，兼容性更加好，还要考虑到用插件的人的一些特殊的做法，例如，有些朋友为了避免jquery和zeptojs冲突，将jquery的前缀“$”,修改为“jQuery”，还有些朋友将默认的document等方法修改。为了让你的插件在这些东西修了了的情况下照常运行，那么我们的做法是，把代码包裹在如下里面：
代码如下	复制代码
;(function($,window,document,undefined){
    //我们的代码。。
})(jQuery,window,document);
就可以避免上面的一些情况了！
一个通用的框架
在动手写自己的jQuery插件之前，自然是先研究一下别人写的插件了。其实写jQuery也基本有一个通用的框架。行，那咱也把这框架照搬过来吧。
代码如下	复制代码

(function($){
    $.fn.yourName = function(options){
//各种属性、参数 
    }
    var options = $.extend(defaults, options);
    this.each(function(){
//插件实现代码 
    });
};
})(jQuery);
有了这个，咱就可以往里面套东西了。
名号、参数和属性
好不容易开始闯荡江湖了，一定要有一个响亮的名号才行，这样走在江湖上，才能够?牛?煌?纭２恍牛?闾??思?ldquo;中国牙防组”！所以，咱这里一定要起个响亮的名号，一定要简单、明了、够权威。所以，决定了，就叫做“tableUI”了！
参数和属性也很简单，无非就是三个class的名称。就叫做：evenRowClass、oddRowClass和activeRowClass吧。
所以，上面的框架，咱就把上半身给填上了。
代码如下	复制代码

(function($){
    $.fn.tableUI = function(options){
        var defaults = {
            evenRowClass:"evenRow",
            oddRowClass:"oddRow",
            activeRowClass:"activeRow"
        }
        var options = $.extend(defaults, options);
        this.each(function(){
//实现代码 
        });
    };
})(jQuery);
这里重点说一下这一句：

var options = $.extend(defaults, options);
看上去很?诺囊痪洌?涫稻褪呛喜⒍喔龆韵笪?桓觥Ｕ饫锞褪牵?绻?阍诘饔玫氖焙蛐戳诵碌牟问??陀媚阈碌牟问??绻?挥行矗?陀媚?系牟问?Ｏ虢?徊搅私獾呐笥眩?梢圆慰?query的官方文档： http://api.jquery.com/jQuery.extend/
    开始下半身吧
ok，上半身填补完了，咱就可以填补下半身吧。无非就是找到基数行和偶数行（感谢jQuery提供了类似tr:even这种写法，使其及其简单），然后添加上相应的class。然后再给所有的tr，绑定mouseover和mouseout事件即可。下半身代码如下：
代码如下	复制代码

(function($){
    $.fn.tableUI = function(options){
        var defaults = {
            evenRowClass:"evenRow",
            oddRowClass:"oddRow",
            activeRowClass:"activeRow"
        }
        var options = $.extend(defaults, options);
        this.each(function(){
            var thisTable=$(this);
//添加奇偶行颜色 
            $(thisTable).find("tr:even").addClass(options.evenRowClass);
            $(thisTable).find("tr:odd").addClass(options.oddRowClass);
//添加活动行颜色 
            $(thisTable).find("tr").bind("mouseover",function(){
                $(this).addClass(options.activeRowClass);
            });
            $(thisTable).find("tr").bind("mouseout",function(){
                $(this).removeClass(options.activeRowClass);
            });
        });
    };
})(jQuery);
最重要的一步！
也许有些朋友觉得这样就算是完成了。但是切切相反，我们还有最重要的一步没有完成，那就是一定要在插件上方，写上插件的名称、版本号、完成日期、作者，作者的联系方式、出生日期、三围……等等。因为只有这样才能显的这个插件够专业。
代码如下	复制代码

/* 
 * tableUI 0.1
 * Date: 2010-03-30 
 * 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示 
 */
(function($){
    $.fn.tableUI = function(options){
        var defaults = {
            evenRowClass:"evenRow",
            oddRowClass:"oddRow",
            activeRowClass:"activeRow"
        }
        var options = $.extend(defaults, options);
        this.each(function(){
            var thisTable=$(this);
//添加奇偶行颜色 
            $(thisTable).find("tr:even").addClass(options.evenRowClass);
            $(thisTable).find("tr:odd").addClass(options.oddRowClass);
//添加活动行颜色 
            $(thisTable).find("tr").bind("mouseover",function(){
                $(this).addClass(options.activeRowClass);
            });
            $(thisTable).find("tr").bind("mouseout",function(){
                $(this).removeClass(options.activeRowClass);
            });
        });
    };
})(jQuery);
至此，你开发的插件就算完美了！