jQueryカード書き方まとめおよび対象向け書き方まとめ
12419 ワード
前言
最近jQueryプラグインを振り回して、プラグインと書く目的は、このコードが次のプロジェクトで直接参照できるように、機能とプロジェクトを分離することです.これにより、プラグインを書くときに、プラグインが汎用性が高く、柔軟性が高く、構成可能で、互換性がよく、使いやすさが高く、結合度が低いなど、どのように書くかを考えなければなりません.次に以下のいくつかの書き方を分析します.最初の2つはjQueryプラグインで、後ろの2つはオブジェクトの形で開発されています.似ています.しかも書き方も多いので、このように書くメリットとデメリットを理解しなければなりません.もう一つの基礎文章:jQueryプラグインの書き方プラグイン本体
よびだし
コメント
1.自己呼び出し匿名関数
用途:匿名関数を定義することで、グローバルなネーミングスペースを破壊しない「プライベート」ネーミングスペースを作成します.この点は非常に有用でJSフレームワークがサポートしなければならない機能であり、jQueryは何千ものJavaScriptプログラムに適用され、jQueryが作成した変数が彼のプログラムをインポートするために使用した変数と衝突しないことを確保しなければならない.
2.匿名関数はなぜwindowに転送されるのか
Windows変数を入力することで、Windowsをグローバル変数からローカル変数に変更し、jQueryコードブロックでwindowにアクセスする場合、役割ドメインチェーンを最上位の役割ドメインに戻す必要がなく、より速くwindowにアクセスすることができる.これはまだ重要ではありません.もっと重要なのは、windowをパラメータとして入力し、コードを圧縮するときに最適化してjqueryを見ることができます.min.js:
3.グローバル変数this定義
プラグインの関数内でプラグインを指すthis 4を使用できるようにする.プラグインの構成
デフォルトのパラメータを設定します.また、プラグイン定義時に入力パラメータがデフォルト値5を上書きすることもできます.初期化関数の一般的なプラグインにはinit初期化関数があり、プラグインの末尾に初期化6があります.プライベート関数、パブリック関数プライベート関数:プラグイン内で使用、関数名で使用接頭辞として共有関数を識別する:プラグインの外で使用でき、関数名は「this.」接頭辞の識別として、プラグインの1つの方法として外部で使用する.return thisは最後にjQueryオブジェクトを返し、jQueryのチェーン操作の書き方の二主体構造を容易にする.
コメント1.美観プラグインの方法は外部に書く、プラグイン本体にthisを渡すことで呼び出す.プラグインのバージョン番号を定義しますが、ここでは使用していません.callについては、ここで最初のパラメータはthisを渡し、後のパラメータ構文は次のとおりです.
定義:現在のオブジェクトを別のオブジェクトに置き換えるメソッドを呼び出します.説明:callメソッドは、別のオブジェクトの代わりにメソッドを呼び出すために使用できます.callメソッドでは、関数のオブジェクトコンテキストを最初のコンテキストからthisObjによって指定された新しいオブジェクトに変更できます.thisObjパラメータが指定されていない場合、GlobalオブジェクトはthisObjとして使用されます.4.「this」についてプラグインの方法では、プラグインを指すthisと、イベントトリガを指すthisとが有用である可能性があるので、イベントトリガthisはeventで取得する:event.cuerrntTarget event.CurrentTarget:イベントにバインドされた要素を指し、イベントが泡を立てるように要素eventを上に見つける.target:常にイベント発生時の要素を指す
htmlコード
**jsコード**
結果出力
書き方三(原生書き方)主体構造
使用
コメント1.アトリビュートオーバーライド(オブジェクトの深さコピー)のオリジナル関数の実装方法について
demo:
jQueryベースの実装方法
var options = {id: "nav", class: "header"} var config = $.extend({id: "navi"}, options);//config={id: "nav", class: "header"}
** 2. このオブジェクトに関するすべてのメソッドのthisはこのオブジェクトを指しているので、書き方四主体構造を再指定する必要はありません.
コメントの書き方4と書き方3は実はあまり違いませんが、その違いを見ましたか?1.いずれもプロトタイプチェーンによるオブジェクトへの追加方法の書き方3:
書き方四:
書き方4をよく見ると、「オブジェクト直接量」の書き方でEditorUtilオブジェクトにメソッドを追加します.書き方3との違いは、書き方4がconsturctor属性を変更するconstructor属性を書くことです.現在のオブジェクトを作成するコンストラクション関数を常に指します.各関数にはデフォルトの属性prototypeがあり、このprototypeのconstructorはデフォルトでこの関数を指します.次の例を示します.
関数のprototypeを再定義すると(前の例との違いは、ここでは修正ではなく上書き)、constructorプロパティの動作が少しおかしくなります.次の例を示します.
どうしてですか.Personを覆ったからだprototypeの場合、次のコード操作を行うことに等価です.
constructorプロパティは常に自身のコンストラクション関数を作成することを指しているので、Person.prototype.constructor==Object、すなわち:
どうやってこの問題を修正しますか?方法も簡単で、Personを再上書きします.prototype.constructor:
最近jQueryプラグインを振り回して、プラグインと書く目的は、このコードが次のプロジェクトで直接参照できるように、機能とプロジェクトを分離することです.これにより、プラグインを書くときに、プラグインが汎用性が高く、柔軟性が高く、構成可能で、互換性がよく、使いやすさが高く、結合度が低いなど、どのように書くかを考えなければなりません.次に以下のいくつかの書き方を分析します.最初の2つはjQueryプラグインで、後ろの2つはオブジェクトの形で開発されています.似ています.しかも書き方も多いので、このように書くメリットとデメリットを理解しなければなりません.もう一つの基礎文章:jQueryプラグインの書き方プラグイン本体
(function($, window){
//
var _oDialogCollections = {};
//
$.fn.MNDialog = function (_aoConfig) {
// ，
var defaults = {
// string
sId : "",
// num
nWidth : 400,
// bollean
bDisplayHeader : true,
// object
oContentHtml : "",
// function
fCloseCallback : null
};
var _oSelf = this,
$this = $(this);
//
this.oConfig = $.extend(defaults, _aoConfig);
//
var _init = function () {
if (_oDialogCollections) {
//
// ， remove
}
//
_initData();
//
_loadEvent();
//
_loadContent();
}
//
var _initData = function () {};
var _loadEvent = function () {};
var _loadContent = function () {
// （ ， ， ， ， ）
if($.isFunction(_oSelf.oConfig.oContentHtml)) {
_oSelf.oConfig.oContentHtml.call(_oSelf, function(oCallbackHtml) {
//
_oSelf.html(oCallbackHtml);
//
_oSelf.oConfig.fLoadedCallback && _oSelf.oConfig.fLoadedCallback.call(_oSelf, _oSelf._oContainer$);
});
} else if ($.type(_oSelf.oConfig.oContentHtml) === "string") {
_oSelf.html(_oSelf.oConfig.oContentHtml);
_oSelf.oConfig.fLoadedCallback && _oSelf.oConfig.fLoadedCallback.call(_oSelf, _oSelf._oContainer$);
} else {
console.log(" ， function string。");
}
};
//
var _oEventAlias = {
click : 'D_ck',
dblclick : 'D_dbl'
};
//
this.close = function () {
_close();
}
//
_init();
//
return this;
};
//
})(jQuery, window);
よびだし
var MNDialog = $("#header").MNDialog({
sId : "#footer", //
fCloseCallback : dialog,//
oContentHtml : function(_aoCallback){
_aoCallback(_oEditGrpDlgView.el);
}
}
});
//
MNDialog.close;
function dialog(){
}
コメント
1.自己呼び出し匿名関数
(function($, window) {
// jquery code
})(jQuery, window);
用途:匿名関数を定義することで、グローバルなネーミングスペースを破壊しない「プライベート」ネーミングスペースを作成します.この点は非常に有用でJSフレームワークがサポートしなければならない機能であり、jQueryは何千ものJavaScriptプログラムに適用され、jQueryが作成した変数が彼のプログラムをインポートするために使用した変数と衝突しないことを確保しなければならない.
2.匿名関数はなぜwindowに転送されるのか
Windows変数を入力することで、Windowsをグローバル変数からローカル変数に変更し、jQueryコードブロックでwindowにアクセスする場合、役割ドメインチェーンを最上位の役割ドメインに戻す必要がなく、より速くwindowにアクセスすることができる.これはまだ重要ではありません.もっと重要なのは、windowをパラメータとして入力し、コードを圧縮するときに最適化してjqueryを見ることができます.min.js:
(function(a,b){})(jQuery, window); // jQuery a, window b
3.グローバル変数this定義
var _oSelf = this,
$this = $(this);
プラグインの関数内でプラグインを指すthis 4を使用できるようにする.プラグインの構成
this.oConfig = $.extend(defaults, _aoConfig);
デフォルトのパラメータを設定します.また、プラグイン定義時に入力パラメータがデフォルト値5を上書きすることもできます.初期化関数の一般的なプラグインにはinit初期化関数があり、プラグインの末尾に初期化6があります.プライベート関数、パブリック関数プライベート関数:プラグイン内で使用、関数名で使用接頭辞として共有関数を識別する:プラグインの外で使用でき、関数名は「this.」接頭辞の識別として、プラグインの1つの方法として外部で使用する.return thisは最後にjQueryオブジェクトを返し、jQueryのチェーン操作の書き方の二主体構造を容易にする.
(function($){
$.fn.addrInput = function(_aoOptions){
var _oSelf = this;
_oSelf.sVersion = 'version-1.0.0';
_oSelf.oConfig = {
nInputLimitNum : 9
};
//
$.extend(_oSelf.oConfig, _aoOptions);
// ， this
$.fn.addrInput._initUI.call(_oSelf, event);
$.fn.addrInput._initEvents.call(_oSelf);
//
this.close = function () {
_close();
}
// jQuery ， Jquery
return _oSelf;
}
$.fn.addrInput._initUI = function(event){
var _oSelf = this,
_oTarget = $(event.currentTarget);
}
$.fn.addrInput._initEvents = function(){}
})(window.jQuery);
コメント1.美観プラグインの方法は外部に書く、プラグイン本体にthisを渡すことで呼び出す.プラグインのバージョン番号を定義しますが、ここでは使用していません.callについては、ここで最初のパラメータはthisを渡し、後のパラメータ構文は次のとおりです.
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定義:現在のオブジェクトを別のオブジェクトに置き換えるメソッドを呼び出します.説明:callメソッドは、別のオブジェクトの代わりにメソッドを呼び出すために使用できます.callメソッドでは、関数のオブジェクトコンテキストを最初のコンテキストからthisObjによって指定された新しいオブジェクトに変更できます.thisObjパラメータが指定されていない場合、GlobalオブジェクトはthisObjとして使用されます.4.「this」についてプラグインの方法では、プラグインを指すthisと、イベントトリガを指すthisとが有用である可能性があるので、イベントトリガthisはeventで取得する:event.cuerrntTarget event.CurrentTarget:イベントにバインドされた要素を指し、イベントが泡を立てるように要素eventを上に見つける.target:常にイベント発生時の要素を指す
htmlコード
**jsコード**
$('#wrapper').click(function(e) {
console.log('#wrapper');
console.log(e.currentTarget);
console.log(e.target);
});
$('#inner').click(function(e) {
console.log('#inner');
console.log(e.currentTarget);
console.log(e.target);
});
結果出力
#inner
click here!
click here!
#wrapper
click here!
書き方三(原生書き方)主体構造
var MemberCard = function(_aoOption){
// （ ）
_aoOption || (_aoOption = {}) ;
//
_init(this);
}
var _init = function(_aoSelf) {
//
_initData(_aoSelf);
//
_aoSelf._timedHide();
}
var _initData = function ( _aoSelf ) {}
//
MemberCard.prototype._timedHide = function(_aoOptions) {
var _oSelf = this;
clearTimeout(this.iHideTimer);
// underscore.js extend
var oDefault = extend( { nHideTime: 300 }, _aoOptions );
_oSelf.iHideTimer = setTimeout( function(){
//
_oSelf.hide();
}, oDefault.nHideTime);
}
//
MemberCard.prototype.hide = function(_aoOptions) {}
使用
var oColleagueCard = new MemberCard({ nHideTime: 200 });
oColleagueCard.hide();
コメント1.アトリビュートオーバーライド(オブジェクトの深さコピー)のオリジナル関数の実装方法について
function getType(o){
return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();
}
function extend(destination,source){
for(var p in source){
if(getType(source[p])=="array"||getType(source[p])=="object"){
destination[p]=getType(source[p])=="array"?[]:{};
arguments.callee(destination[p],source[p]);
}else{
destination[p]=source[p];
}
}
}
demo:
var test={a:"ss",b:[1,2,3],c:{d:"css",e:"cdd"}};
var test1={};
extend(test1,test);
test1.b[0]="change"; // test1 b 0
alert(test.b[0]); // test， 1
alert(test1.b[0]); // change
jQueryベースの実装方法
jQuery.extend([deep], target, object1, [objectN]);
， 。
target， jQuery 。 jQuery 。 true， jQuery ， 。 ， 。 ， 。
demo:
var options = {id: "nav", class: "header"} var config = $.extend({id: "navi"}, options);//config={id: "nav", class: "header"}
** 2. このオブジェクトに関するすべてのメソッドのthisはこのオブジェクトを指しているので、書き方四主体構造を再指定する必要はありません.
function EditorUtil() {
this._editorContent = $( '#editor_content' );
this._picBtn = $( '#project_pic' );
this.ieBookmark = null;
}
EditorUtil.prototype = {
consturctor: EditorUtil,
noteBookmark: function() {
},
htmlReplace: function( text ) {
if( typeof text === 'string' ) {
return text.replace( /[<>"&]/g, function( match, pos, originalText ) {
switch( match ) {
case '':
return '>';
case '&':
return '&';
case '"':
return '"';
}
});
}
return '';
},
init: function() {
this._memBtn.bind( 'click', function( event ) {
$(".error_content").hide();
return false;
});
}
};
//
var editor = new EditorUtil();
editor.init();
コメントの書き方4と書き方3は実はあまり違いませんが、その違いを見ましたか?1.いずれもプロトタイプチェーンによるオブジェクトへの追加方法の書き方3:
MemberCard.prototype._timedHide
MemberCard.prototype.hide
書き方四:
EditorUtil.prototype = {
consturctor: EditorUtil,
noteBookmark: function(){},
htmlReplace: function(){}
}
書き方4をよく見ると、「オブジェクト直接量」の書き方でEditorUtilオブジェクトにメソッドを追加します.書き方3との違いは、書き方4がconsturctor属性を変更するconstructor属性を書くことです.現在のオブジェクトを作成するコンストラクション関数を常に指します.各関数にはデフォルトの属性prototypeがあり、このprototypeのconstructorはデフォルトでこの関数を指します.次の例を示します.
function Person(name) {
this.name = name;
};
Person.prototype.getName = function() {
return this.name;
};
var p = new Person("ZhangSan");
console.log(p.constructor === Person); // true
console.log(Person.prototype.constructor === Person); // true
//
console.log(p.constructor.prototype.constructor === Person); // true
関数のprototypeを再定義すると(前の例との違いは、ここでは修正ではなく上書き)、constructorプロパティの動作が少しおかしくなります.次の例を示します.
function Person(name) {
this.name = name;
};
Person.prototype = {
getName: function() {
return this.name;
}
};
var p = new Person("ZhangSan");
console.log(p.constructor === Person); // false
console.log(Person.prototype.constructor === Person); // false
console.log(p.constructor.prototype.constructor === Person); // false
どうしてですか.Personを覆ったからだprototypeの場合、次のコード操作を行うことに等価です.
Person.prototype = new Object({
getName: function() {
return this.name;
}
});
constructorプロパティは常に自身のコンストラクション関数を作成することを指しているので、Person.prototype.constructor==Object、すなわち:
function Person(name) {
this.name = name;
};
Person.prototype = {
getName: function() {
return this.name;
}
};
var p = new Person("ZhangSan");
console.log(p.constructor === Object); // true
console.log(Person.prototype.constructor === Object); // true
console.log(p.constructor.prototype.constructor === Object); // true
どうやってこの問題を修正しますか?方法も簡単で、Personを再上書きします.prototype.constructor:
function Person(name) {
this.name = name;
};
Person.prototype = new Object({
getName: function() {
return this.name;
}
});
Person.prototype.constructor = Person;
var p = new Person("ZhangSan");
console.log(p.constructor === Person); // true
console.log(Person.prototype.constructor === Person); // true
console.log(p.constructor.prototype.constructor === Person); // true