【转】如何自己开发一款js或者jquery插件

什么是jQuery插件？jQuery插件如何使用？
第一个问题，jQuery插件就是用来扩展jQuery原型对象的一个方法，简单来说就是jQuery插件是jQuery对象的一个方法。其实回答了第一个问题，也就知道第二个问题的答案了，jQuery插件的使用方式就是jQuery对象方法的调用。

我们先看个例子：$("a").css("color","red")。我们知道每个jQuery对象都会包含jQuery中定义的DOM操作方法,这里使用$方法来选择a元素，返回一个a元素的jQuery对象，这个对象就可以使用jQuery中定义的DOM操作方法。那么jQuery对象是如何获取这些方法的呢？其实jQuery内部定义了一个jQuery.fn对象，查看jQuery源码可以发现jQuery.fn=jQuery.prototype，也就是说jQuery.fn对象是jQuery的原型对象,jQuery的DOM操作方法都在jQuery.fn对象上定义的，然后jQuery对象就可以通过原型继承这些方法。

jquery插件开发模式

jquery插件一般有三种开发方式：

通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建

第一种$.extend()相对简单，一般很少能够独立开发复杂插件，第三种是一种高级的开发模式，本文也不做介绍。第二种则是一般插件开发用到的方式，本文着重讲讲第二种。

插件开发

1、第二种插件开发方式一般是如下定义

$.fn.pluginName = function() {
    //your code here
}

2、链式调用jquery插件

$.fn.changeStyle = function(colorStr) {
        this.css('color', colorStr);                                                                                                      	return this;
}

使用：$("p").changeStyle("red").addClass("red-color");

3、插件开发，我们一般运用面向对象的思维方式

例如定义一个对象

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($){
    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
            });
        }
    }
    $.fn.myPlugin = function(options) {
        //创建haorooms的实体
        var haorooms= new Haorooms(this, options);
        //调用其方法
        return haorooms.changecss();
    }
})(jQuery)

把你的插件代码包裹在上面里面，就是一个简单的插件了。（注js插件和jquery插件都是如此）

还有一个问题

把你的插件包裹在

；(function(){

})()

基本上可以说是完美了。但是为了让你开发的插件应用更加广泛，兼容性更加好，还要考虑到用插件的人的一些特殊的做法，例如，有些朋友为了避免jquery和zeptojs冲突，将jquery的前缀“$”,修改为“jQuery”，还有些朋友将默认的document等方法修改。为了让你的插件在这些东西修了了的情况下照常运行，那么我们的做法是，把代码包裹在如下里面：

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

就可以避免上面的一些情况了！

至此，你开发的插件就算完美了！

来源：1、http://www.haorooms.com/post/js_jquery_chajian

2、http://www.jianshu.com/p/518d424d4994