轉自：https://www.cnblogs.com/zuiyirenjian/p/3535126.html

在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