如何本身開發一款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);

就能夠避免上面的一些狀況了！

至此，你開發的插件就算完美了！