jsまたはjqueryプラグインを独自に開発する方法

リード
今ネット上でjsとjqueryパッケージのプラグインについてとても多くて、私はちょうど先端に接触する时、とてもあれらの自分でプラグインを书く牛达に敬服します!彼らがウェブサイトにもっと便利さを開発して、多くのホームページの効果、ネット上の多くの既成のプラグインです!では、これらのプラグインはどのように書かれていますか?まず、しっかりしたjsとjqueryの技術基礎があり、次にプラグインを書く方法とテクニックがあります.jsとjqueryの技術基礎について、それはゆっくりと蓄積する過程である.しかし、プラグインを書く上での注意やテクニックについては、後でプラグインを書くときに使えるように少し紹介します.
jqueryプラグイン開発モード
jqueryプラグインには一般的に3つの開発方法があります.
通過するextend()はjQueryを拡張する.通過するfnはjQueryに新しい方法を追加する.$を通過する.Widget()jQuery UIを適用する部品ファクトリ方式の作成;
第1種$.extend()は比較的簡単で,複雑なプラグインを独立して開発できることは一般的に少ないが,3つ目は高度な開発モデルであり,本稿では紹介しない.2つ目は一般的なプラグイン開発で用いられる方式であり,本稿では2つ目に重点を置いて述べる.
プラグイン開発
第2のプラグインの開発方式は一般的に以下の定義である.

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

上の状況を避けることができます!
これで、あなたが開発したプラグインは完璧です!
ソース:http://www.haorooms.com/post/js_jquery_chajian