できるだけシンプルにしようと思います：
jqueryuiの助けを借りて jquery ウィジェットを作成しました(themeroller に移動し、テーマをダウンロードして解凍すると、そのフォルダーに というdevelopment-bundleフォルダーが見つかります。次に、この例を実行するためuiの のみを含めます)。jquery.ui.widget.js
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>jQuery widget construction & Events</title>
<style>
h1 {
color: #808080;
}
h1:hover {
color: #000000;
text-decoration: none;
cursor: pointer;
}
a {
color: #808080;
background-color: #CCFF33;
}
</style>
</head>
<body>
<h1>Click Me</h1>
<div class=content>
<p>
<a href="http://speckyboy.com/2010/01/20/25-tutorials-and-resources-for-learning-jquery-ui/">spekyboy</a>
</p>
<p>
<a href="http://www.learningjquery.com/">learning jquery</a>
</p>
</div>
<script src="../jquery-1.7.1.js"></script>
<script src="../jquery.ui.widget.js"></script>
<script>
////////////////////////Plugin Creation (Widget Factory)////////////////////////
///////////////////////////mycompany.linkLocation///////////////////////////////
(function( $ ) {
//1. use jQuery.widget() method, the Widget factory, to create plugins
//--------------------------------------------------------------------
$.widget( "mycompany.linkLocation", {
//2. widget properties "foreground" and "background" (see docs)
//-------------------------------------------------------------
options: {
color: "black",
"background-color": "transparent",
done: false,
//3. a callback from the relevant widget event: linkLocation_onapply (see docs)
//-----------------------------------------------------------------------------
//where does this refers to (???)
//evt refers to the custom jquery event object
_onapply: function(evt, options){
var attrs='';
for(prop in this)
attrs+=prop+', ';
alert('from _onapply, this:\n'+attrs);
attrs='';
for(prop in evt)
attrs+=prop+'='+evt[prop]+'\n';
alert('from _onapply 1st arg, evt:\n'+attrs);
//4. where is the reference to widget linkLocation for evt.target?
//----------------------------------------------------------------
$(evt.target).css(options);
}
},
//5. used during construction by the Widget Factory (see docs)
//------------------------------------------------------------
//this refers to the object built by the Widget Factory
_create: function() {
},
//6. used after initialization (see docs)
//---------------------------------------
//called as $("selector").widgetname("option", option_object)
//or,
//$("selector").widgetname("option", "key", "value")
//this refers to the object built by the Widget Factory
_setOption: function(key, value){
this.options[ key ] = value;
},
//7. public method apply()
//------------------------
//this refers to the object built by the Widget Factory
apply: function(evt){
if(!this.options.done){
//create a jquery object that wraps a specific dom element accessed
//through the this.element provided by the Widget Factory
var $this = $(this.element);
this._css($this);
////////////////////////////////////////////////////////////////////////////
//8. maybe one reason we done all these: add memory and execute only once!//
////////////////////////////////////////////////////////////////////////////
//--------------------------------------------------------------------------
this.options.done = true;
//9. if apply() is called once then, _onapply() is called once
//------------------------------------------------------------
//event linkLocation_onapply will trigger method _onapply(), see docs
this._trigger("_onapply", evt, {color: "white", "background-color": "purple"});
}
},
//10. a private method _css()
//--------------------------
//this refers to the object built by the Widget Factory
_css: function($elem){
$elem.css({
"background-color": this.options.background,
"color": this.options.foreground
});
}
});
}( jQuery ));
//11. user overwites public property: this.options
//------------------------------------------------
//for the objects created by the Widget Factory
var options2 = {
color: "blue",
"background-color": "yellow"
};
//12. construct an object for every <a> element using the Widget Factory
$( "a" ).linkLocation(options2);
//13. call widget apply() methods
//-------------------------------
$('h1').on('click', function(evt) {
//14. the jquery $(h1) object
var attrs='';
for(prop in this)
attrs+=prop+', ';
alert('From h1 tag onclick event, this:\n'+attrs);
$( "a" ).linkLocation("apply").on("linklocation_onapply",
//15. never executed???
function(evt, data){
attrs='';
for(prop in data)
attrs+=prop+': '+data[prop]+'\n';
alert('From linklocation_onapply event function, data:\n'+attrs);
}
);
});
</script>
</body>
</html>
(コードのコメントで私の番号を参照してください) 今、私たちがしているのは(12)何もしない(5)いくつかのオプション(2)を持つウィジェットを作成することだけです。ユーザーは構築中にデフォルトのオプションを変更できます(11)。ユーザーはパブリック メソッド(7)を呼び出して、ウィジェット オプションに基づいてアンカーの前景と背景の色を変更できますが、カスタム jquery イベント(9)でトリガーされるコールバックも定義したいと考えていました。apply()
ユーザーが h1 タグ(13)をクリックするたびに、呼び出されてアンカー要素(12)にアタッチされたすべてのウィジェットからメソッドapply() (7)が実行されますが、 1 回だけです (if..else 内にコードを配置します)。前述したように、メソッドはアンカーの色を変更し、コールバック関数をトリガーします。linkLocationapply()
私の質問:
a)thisコールバック_onapply() (3)は、コメント(14)からのメッセージでわかるように、ウィジェットの public メソッドを実際に呼び出す jquery オブジェクトですか? メッセージは次のとおりです。
From h1 tag onclick event, this:
jQuery17102845835909852654, align, click, focus, blur, title, lang, dir, dataset,
itemScope, itemType, itemId, itemRef, itemProp, properties, itemValue, hidden,
tabIndex, accessKey, ...
ウィジェット メッセージが続きます。
from _onapply, this:
jQuery17102845835909852654, toString, href, target, download, ping, rel, hreflang,
type, text, coords, charset, name, rev, shape, protocol, host, hostname ...
と
from _onapply 1st arg, evt:
type=linklocation_onapply
timeStamp=1382545296011
jQuery17102845835909852654=true
...
_onapply比較すると、追加のプロパティがあることがわかります-なぜそうなのですか?
toString, href, target, download, ping, rel, hreflang, type, text, coords, charset,
name, rev, shape, protocol, host, hostname, port, pathname, search, hash
b) コメント(15)のイベント ハンドラーが実行されないのはなぜですか?
c) jQuerynjquery オブジェクトのプロパティで n=number となるこの常に変化するプロパティは何ですか? jquery はシングルトン オブジェクトではないようで、ウィジェット オブジェクトの場合のように dom 要素のステータスをメモリに保持したい場合は、帯域幅が広いようです。それらはjqueryオブジェクトに保存されていますが、常に自分自身を複製しているときはどれですか?
d) コメント(4)でわかるようにlinkLocation、カスタム イベントをトリガーする特定の要素のウィジェットへの参照はどこにありますか?
本当に、ライブラリが約束する抽象化を見つけることができません....ソースコードを検索して答えを探し続けてください...ありがとう。