jQuery大大的改變了使用者撰寫javascript的風格，
最大的功能，就是讓撰寫javascript的門檻降低，
讓筆者比較驚奇的是，為什麼javacript可以藉由class library的方式，
衍生出一個副語言，覺得jQuery已自成一個語言平台，在平台上成了一個ECO SYSTEM生態圈，
衍生了不少工作機會。
除了選取器的部分，一部分接收CSS大部分常用的語法，一部分用最簡便的語法$()來操作.
在EVENT上也看得出jQuery團隊對api的設計，非常獨到。
其中chain method的設計也是高超易用性的一部分。
在iT邦有兩篇相關的文章，一篇是tony1223（台灣jsdc的創辦人／發起人）jQuery method chain reviewhttp://ithelp.ithome.com.tw/question/10090856，
另一篇是aaroms9733的JQuery Chaininghttp://ithelp.ithome.com.tw/question/10090569，
第一篇，提到了chain的原理，提出了要達到這種功能，程式的架構的撰寫原理（會讓人想要看看jQuery實作的一點衝動，但後來，真這樣做時，就後悔了。
這兩篇都提到，除了取值類型的方法外，可以說所有 " 操作 " 類型的方法都可以使用 Chaining 這個特色語法，這段話，好像從RETURN 的角度來看，

基本上 method chain 基本實作方式，
就是把本來 setter 或一般操作等原本無回傳值的函式，
改成回傳操作者自己。

，好像沒有做實驗的必要，因為getter就是回傳你想要get的值，
所以不回傳整個jQuery物件。

筆者做了一個小的片段，想要TRACE一下jQuery在遇到chain method時，調用的動作。
有沒有像前述作者所述的原理，

  <script src="http://code.jquery.com/jquery-latest.js"></script>


        <div id="myDiv">This is the first div</div>
         <div>This is the 2nd div</div>
<script>
  
$("div:first").click(function () {
    $("#myDiv").css("color","red")  
        .css("background","white")
        .fadeOut("slow")
        .fadeIn("slow")   //css("boder: 1px solid #FFF").
        .slideDown("slow")
        .slideUp("slow")
        .slideDown("slow")  
        .hide()
        .show()      
        ;
});       

</script>


​

中斷點就設在
$("#myDiv").css("color","red")

，然後進入jQuery,
先是這種形式的CHAIN，

.css("color","red")  
.css("background","white")

call stack呼叫的堆疊，

jQuery.extend.style (jquery-latest.js:6621)
jQuery.extend.type (jquery-latest.js:509)
jQuery.extend.isFunction (jquery-latest.js:493)
jQuery.extend.access (jquery-latest.js:843)
jQuery.fn.css (jquery-latest.js:6574)
(anonymous function) (chain.html:13)
jQuery.event.dispatch (jquery-latest.js:3332)
jQuery.event.add.elemData.handle.eventHandle (jquery-latest.js:2941)

區域變數是

arguments: Arguments[2]
name: "color"
this: jQuery.fn.jQuery.init[1]
value: "red"

比較精典的寫法

jQuery.fn.css = function( name, value ) {
	return jQuery.access( this, function( elem, name, value ) {
		return value !== undefined ?
			jQuery.style( elem, name, value ) :
			jQuery.css( elem, name );
	}, name, value, arguments.length > 1 );
};

沒幾行，但是繞了好久，
而另一部分，effects的部分，
呼叫順序是

Query.fn.extend.queue (jquery-latest.js:2146)
jQuery.fn.extend.animate (jquery-latest.js:8626)
jQuery.each.jQuery.fn.(anonymous function) (jquery-latest.js:8722)
(anonymous function) (chain.html:15)
jQuery.event.dispatch (jquery-latest.js:3332)
jQuery.event.add.elemData.handle.eventHandle (jquery-latest.js:2941)

比較值得注意的是

// Generate shortcuts for custom animations
jQuery.each({
	slideDown: genFx( "show", 1 ),
	slideUp: genFx( "hide", 1 ),
	slideToggle: genFx( "toggle", 1 ),
	fadeIn: { opacity: "show" },
	fadeOut: { opacity: "hide" },
	fadeToggle: { opacity: "toggle" }
}, function( name, props ) {
	jQuery.fn[ name ] = function( speed, easing, callback ) {
		return this.animate( props, speed, easing, callback );
	};
});

特別的EACH用法。

一個jQuery裏很關鍵的fn，fn是什麼？
fn: function ( elem, name, value )，到處都出現。

小結：發現，這個過程真得很漫長，然後，就在不到一萬行的程式裏，會重覆呼叫幾個特定的METHOD，
重覆了幾次，讓人記憶慢慢深刻起來 。加深對jQuery設計的印象。
程式的進入點會不一樣，除了進入點 jQuery.fn.jQuery.init，是比較直覺的，
其他的進入點，像EFFECTS的進入點，讓人想不透。
繞了好幾圈，在chain的過程中，沒用整個物件的RETURN，可以一直一個effect接著一個effect的追蹤，大概也是chain的體現，chain借用了點的形式，這種風格算直覺，
讓user看次範例就能上手，設計上的高明之處。