iT邦幫忙

7

javascript的範例學習:以jQuery為例

  • 分享至 

  • xImage
  •  

本來是要以源碼解析為主題,這部份工作已有大陸同胞以jQuery1.2.6經典版解析過了,看了他的一百多頁大作(PDF檔),發現筆者的程度,除了看不懂,也看得很無趣。 而且要程度好一點比較能體會。

Youtube上有一段老外分享:從jQuery學到的10件事,老外除了講話像喝醉酒,程度不好還是看不懂。

總結:綜合以上,想了又想,以一些自己看得懂的源碼,做一些小測試來瞭解javascript語言特性。
筆者的環境,XAMPP(PHP/mysql在這裡用不到), 一個WEB SERVER, 編輯器是BlueFish 2.2.2,javascript的除錯環境是chrome/工具/JavaScript控制台。

首先,在jQuery官網下載源碼,目前是v1.7.2,development uncompressed code開發者解壓版,可讀性高,有空行,有註解,共9404行, 看到這數字,還挺驚訝, 在JS界著名的類別庫,2006年發展至今,人氣居高不下的類別庫的核心竟不到一萬行,挺引發人好奇, 逐行看下去,PAGE UP /PAGE DOWN按快點,一下就按完,筆者看到200多行就停住,
第一個疑問(困擾了好幾天),
jQuery的架構是:
1.

(function( window, undefined ) {
//所有的code

})( window );

如果是
2.

function( window, undefined ) {
//所有的code

}

jQuery :function( window, undefined ) {
//所有的code

}


4.

var jQuery = (function( window, undefined ) {
//所有的code

})( window );

一開始,就不懂,而且editor也會誤判,Blue Fish 和Notepad++的程式開合,Blue Fish
(function( window, undefined ) {
會開合在982行, Notepad++整個包進來。

因為查https://developer.mozilla.org/en/JavaScript
mozilla JS guide,知到function的一些用法,從常見的,
到不常見的。
比較起來,jQuery這樣寫,屬於Closures的寫法,
如有錯誤的部分, 還請網友指教。

筆者想試一下,改成這樣試試,

javascript 的error有時只是不WORK, 並不會中斷或在前端報錯,用javascript console可看出明顯的error message.

我做了兩個實驗,
先從jQuery手冊抄來的範例

把1個div加上框。

LAB 1。

//(function( window, undefined ) {

//})(  );

註解掉。
這時候,整個測試畫面,在load jquery-1.7.2.js時,疑似進入一個無窮圈。
如下圖:

因為chrome會快取,所以你要先清除快取,
如下圖:

再測,效果就出來了。

LAB2:
把參數物件拿掉,

//(function(  ) { //window, undefined

//})(  );


程式執行正常。

結論:javascript的function學問很大,在類別裏,是method,可以沒有名字,匿名函數,
或是把函數指定給一個物件,或是在函數裏還可以包進函數。
在jQuery裏,開頭結尾的這個不具名函數,是一定要寫的,不寫會導致異常,
而參數物件可以省略不寫。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
ted99tw
iT邦高手 1 級 ‧ 2012-07-20 20:41:29

先推再說~~XD

0
timloo
iT邦研究生 2 級 ‧ 2012-07-23 15:22:16

今天在找callback的意思時,發現
台灣國人
eddy先生的這篇大作http://blog.joomla.org.tw/javascript/54-general/81-javascript-functon-basic.html
發現其中有一段,這樣寫,

另一個匿名函數的應用是Self-invoking(自我調用)的函數,這種函數在宣告處會執行,而且只能執行一次,一般用在初始化或只需執行一次的任務,知名的JQuery函式庫的Plug-in的寫法就是使用自我調用的函數。

<pre class="c" name="code">(function(name) {  
        alert('Hello ' + name);  
    }  
)('Eddy');

其實,筆者最不懂的jQuery本體的寫法,
就是自我調用的寫法。
所以jQuery本身,自己也是一個Plug-in。
eddy把自我調用的使用時機定義的很清楚,
初始化或只需執行一次的任務,這解釋了筆者的疑惑,
看到這樣寫時,會疑惑到底會被執行幾次呢?原來這樣寫,就只會執行一次。
所以其他情況不能這樣寫,尤其是多次呼叫call的例子,這樣寫就慘了。

因為筆者沒看過經典的,「Javascript: The Good Parts」,
Object-Oriented Javascrip,對這段的體驗真是不深刻啊。

而文中所提的> 函數均會有回傳值,如果沒有回傳值的程式碼部份(即用return回傳的數值),則視回傳值為undefined


也讓筆者覺得另有體會。

0
timloo
iT邦研究生 2 級 ‧ 2012-07-23 16:23:04

原來覺得怪異的,不只有筆者一人。

http://xiayuanfeng.iteye.com/blog/304565

自調用函數。

自古有雞生蛋,蛋生雞的問題,

如果是自調用,就是雞生雞,蛋生蛋,
就沒這個問題了。

但另一個問題,是這樣的語句寫法,只是一個包成一大包的函數,看起來沒有函式call它,沒人觸發它,但它真得invoke起來(有run/execute,從語義上看不出來,但它裏面的成員,方法都能被引用,反証它被invoke起來),變成一個global全域變數 。

http://dreamerslab.com/blog/tw/javascript-call-and-apply/
台灣對JS語義有鑽研的網友,真是蠻多的。

我要留言

立即登入留言