プラグインをjQueryでカプセル化する方法
10167 ワード
リード
今ネット上でjsとjqueryパッケージのプラグインについてとても多くて、私はちょうど先端に接触する时、とてもあれらの自分でプラグインを书く牛达に敬服します!彼らがウェブサイトにもっと便利さを開発して、多くのホームページの効果、ネット上の多くの既成のプラグインです!では、これらのプラグインはどのように書かれていますか?まず、しっかりしたjsとjqueryの技術基礎があり、次にプラグインを書く方法とテクニックがあります.jsとjqueryの技術基礎について、それはゆっくりと蓄積する過程である.しかし、プラグインを書く上での注意やテクニックについては、後でプラグインを書くときに使えるように少し紹介します.
jQueryが最も成功した場所といえば、その拡張性が多くの開発者を引きつけてプラグインを開発し、生態系を構築したと思います.これは大企業がプラットフォームを争うように、プラットフォームを手に入れる者が天下を得る.アップル、マイクロソフト、グーグルなどの大手は、それぞれのプラットフォームと生態圏を持っている.
jQueryの使用を学ぶのは難しくありません.簡単で学びやすいので、jQueryに触れた後も多くのプラグインを使用したり熟知したりしていると信じています.能力を段階的に上げるには、自分のプラグインを書くのがいいです.
jqueryプラグイン開発モード
ソフトウェア開発の過程では、開発を指導するために一定の設計モデルが必要であり、モデルがあれば、私たちはコードをよりよく組織することができ、これらの先人がまとめたモデルから多くの良い実践を学ぶことができます.
「jQuery高度プログラミング」の説明によると、jqueryプラグインには一般的に3つの開発方法があります.
$.extend() jQuery
$.fn jQuery
$.widget() jQuery UI 通常,第2の方法を用いて簡単なプラグイン開発を行い,第3の方法に対して簡単であると述べた.第三の方式は、より高度なjQuery部品を開発するために用いられ、このモードで開発された部品は、プラグインの状態情報の自動保存、プラグインに関する一般的な方法など、多くのjQuery内蔵の特性を備えており、非常に親切であり、ここでは詳しくは述べない.
第1の方法はあまりにも簡単で、jQueryネーミング空間やjQueryに静的な方法を追加したと理解しているだけです.だから私たちは$を呼び出しました.extend()に追加された関数は、DOM要素($('#example')を選択することなく、$記号で直接呼び出されます($.myfunction()).myfunction()).
$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'Dude') + '!');
}
})
$.sayHello(); //
$.sayHello('test'); // しかし、この方法ではjQueryの強力なセレクタがもたらす便利さを利用することはできません.DOM要素を処理し、選択した要素にプラグインをよりよく適用するには、第2の開発方法が必要です.ご覧のプラグインや使用するプラグインの多くは、このような方法で開発されています.
プラグイン開発
第2のプラグインの開発方式は一般的に以下の定義である.
$.fn.pluginName = function() {
//your code here
}プラグイン開発では、一般的にオブジェクト向けの考え方を用いて、例えばオブジェクトを定義します.
var testObj= function(el, opt) {
this.$element = el,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
},
this.options = $.extend({}, this.defaults, opt)
}
// testObj
testObj.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 testIndividual= new testObj(this, options);
//
return testIndividual.changecss();
}このプラグインを呼び出すには、次のようにします.
$(function() {
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px'
});
})上記の開発方法の問題
以上の開発手法では,グローバルなtestObjを定義し,プラグインの互換性などの各方面でよくないという深刻な問題がある.もし他の場所でtestObjを使ったら、あなたのコードは悲しくなります!上のコードをパッケージし、自己呼び出し匿名関数(ブロックレベルの役割ドメインまたはプライベート役割ドメインとも呼ばれる)でパッケージすると、この問題は発生しません.jsプラグインの開発も含めて、私たちは匿名関数を呼び出して自分の書いたコードを包んで、いいです!小包の方法は以下の通りです.
(function(){
})()上のこれで包んでください.しかしもう一つの問題は、牛のコードを研究するとき、前によく「;」があります.それはコードマージなどの不要なエラーを避けるためです.たとえば、関数を任意に定義します.
var testFunction=function(){
}
(function(){
})()testFunction()という関数の後ろにプラス記号がないため、コードエラーが発生します.このような状況を避けるために、通常はこのように書きます.
;(function(){
})()基本的には完璧と言えるでしょう.しかし、開発したプラグインの応用をより広くし、互換性を向上させるためには、プラグインを使用する人の特殊な方法も考慮しなければなりません.例えば、jqueryとzeptojsの衝突を避けるために、jqueryの接頭辞「$」を「jQuery」に変更したり、デフォルトのdocumentを変更したりする友人もいます.あなたのプラグインをこれらのものを修理したまま実行させるために、コードを次のように包みます.
;(function($,window,document,undefined){
// 。。
})(jQuery,window,document);上の状況を避けることができます!これで、あなたが開発したプラグインは完璧です!
補足
JQカード標準のパッケージ---閉パッケージ
<script type="text/javascript">
(function ($) {
//
})(jQuery);
script>これはjQueryの公式のプラグインの開発規範で、このように書くのは作用します:1.グローバル依存を避ける.2.第三者の破壊を避ける.3.jQueryオペレータ'$'と'jQuery'の互換性
このコードは、解析時に次のコードと同じになります.
var jq = function($) {
// Code goes here
};
jq(jQuery);==============2016年2月4日に更新されました.
プラグインの作成
$(function () {
$.fn. = function (options) {
var defaults = {
Event : "click", //
msg : "Holle word!" //
};
var options = $.extend(defaults, options);
var $this = $(this); //
//
//
$this.live(options.Event, function (e) {
alert(options.msg);
});
}
});プラグインの呼び出し
$(function () {
//
$("#test"). ({
Event : "click", //
msg : " !" //
});
});レイアウト
<input type = "button" id = "test" value = " " / >記事の出典:
http://www.haorooms.com/post/js_jquery_chajian
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
転載先:https://www.cnblogs.com/zcynine/p/5028207.html