JS中的自執行函數

本來規划的是2013年，狠狠的將JS學習下，誰知計划趕不上變化，計划泡湯了。13年的我對JS來說可以說是屬於跟風，對它的理解和認識也僅僅是皮毛而已，也是因為要完成《ArcGIS API for JavaScipt開發教程》而臨陣磨槍。

在接觸JS一段時間后，覺得還是比較靈活的，靈活的前提是要更深入的了解，就像兩個陌生的人，相處的時間長了，了解的時間長了，難免會產生感情一樣。對於JS也開始產生了感情，這種感情體現在工作中，體現在周圍的環境中。

目前很多開發者紛紛加入JS的陣營，看來這已經不是跟風，而是趨勢，這種趨勢可能還會一直持續下去。

沒有系統的學習過JS，只能在工作內外，抽出時間來學習，來理解，在自己的博文中也不知道寫了多少篇，雖然轉載的占據了大部分。

雖然自己以前是C#這類語言的使用者，但是心里明白，所謂的語言都是為了解決一些特定的問題，有一些特定使用的場合，不同的語言，其語法，數據類型，甚至運行機制有所差異，但是其思想大同小異，萬變不離其宗。

語言種類很多，但是都有其數據類型，int，long等，有循環，有函數，有字符串和數組的操作，這些都是一樣的，幾乎在一種語言上能找到另外一種語言對應的。

在學習開發的時候，都會讓將自己的邏輯結構封裝起來，以便日后重復使用，在C#中我們可以寫成一個類，或者一個dll，在C#中寫過類，也寫過dll，但是要達到真正的復用，真正的模塊獨立，我還是欠缺火候，這一點一直是心中的痛呀，

恨不當初，有那么好的實習機會，卻沒有好好的利用，慚愧萬分。

在JS中，也常常需要復用，將一些常見的操作封裝起來，目前看到的很多JS庫，比如JQuery就是非常典型的，那么如何在JS中寫一個可復用的呢？雖然在JS中有類的這個說法，但是我對這個玩意還是很抵觸的，但是存在即合理。JS中的類是通過函數來模擬的，也就是說JS中的函數具有雙重角色，用new關鍵字的將函數視為類，不用new的，它就是一個普普通通的函數。

我們知道，類就是一個數據類型，這個數據類型由屬性和方法（函數）組成，如果函數只有屬性，沒有方法，那么這樣的類，一般就單純的表示為一個數據，增加上一些方法，那么類的功能將會有質的變化。既然在JS中，函數可以表示為類，而類中又有方法，那么在JS中函數內部新定義一個函數，也就不足為怪。

JS中最為強大的內容，我認為除了原型，就是閉包，這里就討論閉包，閉包其實就是在一個函數內部定義一個新的函數，在執行的時候，會將這個函數返回，也可能是返回一個對象。下面就是一個簡單的閉包：

  var MathTest = function (x, y) { var x = x; var y = y; var add = function () { return x + y; } return add; }

 var x = MathTest(3, 4); alert(x());

在執行的時候MathTest就是內部的add函數，調用MathTest的時候，相當於執行了x+y，這其實並不起卦，可以將add認為是function內部的一個變量，只是這個變量的值是一個函數，內部的函數是可以訪問它的上一個級別的數據，所以我們可以得到正確的值。

var Img = function () { var T$ = function (id) { return document.getElementById(id); } var ua = navigator.userAgent, isIE = /msie/i.test(ua) && !window.opera; var i = 0, sinDeg = 0, cosDeg = 0, timer = null; var rotate = function (target, degree) { target = T$(target); var orginW = target.clientWidth, orginH = target.clientHeight; clearInterval(timer); function run(angle) { if (isIE) { // IE
                    cosDeg = Math.cos(angle * Math.PI / 180); sinDeg = Math.sin(angle * Math.PI / 180); with (target.filters.item(0)) { M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); } target.style.top = (orginH - target.offsetHeight) / 2 + 'px'; target.style.left = (orginW - target.offsetWidth) / 2 + 'px'; } else if (target.style.MozTransform !== undefined) {  // Mozilla
                    target.style.MozTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.OTransform !== undefined) {   // Opera
                    target.style.OTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.webkitTransform !== undefined) { // Chrome Safari
                    target.style.webkitTransform = 'rotate(' + angle + 'deg)'; } else { target.style.transform = "rotate(" + angle + "deg)"; } } timer = setInterval(function () { i += 10; run(i); if (i > degree - 1) { i = 0; clearInterval(timer); } }, 10); } return { rotate: rotate } } ();

調用代碼：

      Img.rotate('demo', 360);

 

這個是一個比較復雜的，但是不要怕，這里會牽扯到另外的知識，自執行函數和匿名函數。

所謂匿名函數就是沒有名字的函數，形式如下：

function () { }

既然沒有名字，那么如何調用呢：

var b=function () { }
b()

可以將匿名函數付給一個變量，這個變量現在就充當了這個函數的名稱，但是記住，這個不是名稱，我只是這么叫，如果覺得不妥的話，可以認為b現在就是這個匿名函數的代表，在用的時候用b就等同於使用右邊的函數。除了這種方式，還有就是自執行函數，形式如下：

（function(){ //代碼
        })();

自執行函數相當於我們上面兩步的結合：

var b=function () { }
b()

 

自執行函數是非常有用的，可以用它創建命名空間，只要把自己所有的代碼都寫在這個特殊的函數包裝內，在使用的時候只需要用這個奇怪的函數即可，偉大的JQuery就是通過這個奇怪的函數創建了一個$的對象，在這個匿名函數中，往往會定義一個屬於自己的命名空間，或者返回一個屬於自己的對象，上面的Img對象包含了旋轉圖片的操作，這操作中，調用了很多匿名函數中定義的其它方法，這些方法都是為Rotate來服務的。那么以后寫自己可服用的操作的時候，就可以通過這種做法。

我們見到的操作通常都是返回一個對象，但是也可以放回一個函數，下面的，但是調用的時候，寫法有所差異：

    var Img = function () { var T$ = function (id) { return document.getElementById(id); } var ua = navigator.userAgent, isIE = /msie/i.test(ua) && !window.opera; var i = 0, sinDeg = 0, cosDeg = 0, timer = null; var rotate = function (target, degree) { target = T$(target); var orginW = target.clientWidth, orginH = target.clientHeight; clearInterval(timer); function run(angle) { if (isIE) { // IE
                    cosDeg = Math.cos(angle * Math.PI / 180); sinDeg = Math.sin(angle * Math.PI / 180); with (target.filters.item(0)) { M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); } target.style.top = (orginH - target.offsetHeight) / 2 + 'px'; target.style.left = (orginW - target.offsetWidth) / 2 + 'px'; } else if (target.style.MozTransform !== undefined) {  // Mozilla
                    target.style.MozTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.OTransform !== undefined) {   // Opera
                    target.style.OTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.webkitTransform !== undefined) { // Chrome Safari
                    target.style.webkitTransform = 'rotate(' + angle + 'deg)'; } else { target.style.transform = "rotate(" + angle + "deg)"; } } timer = setInterval(function () { i += 10; run(i); if (i > degree - 1) { i = 0; clearInterval(timer); } }, 10); } return rotate ； } ();

調用代碼：

      Img('demo', 360);

這兩種方式，根據自己的習慣，我個人傾向前者。

 

介紹的有點倉促，很多概念沒有詳細介紹，大家可以看我的其它博文（http://www.cnblogs.com/zuiyirenjian/p/3473304.html）或者網上搜索，我寫的這篇的目的只是為了加深對自執行函數的理解，同時也是為了體驗如何在JS中達到所謂的”封裝“。

關於JS中自執行的函數寫法很多，可以看這里：http://www.cnblogs.com/snandy/archive/2011/02/28/1966664.html

新的一年即將開始，祝大家新年快樂！