如何本身开发一款js或者jquery插件

 

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);

就能够避免上面的一些状况了！

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