require.js模塊化

require.js簡單來講就是把js代碼分裝模塊化了

模塊化 模塊就是實現特定功能的一組方法。只要把不一樣的函數（以及記錄狀態的變量）簡單地放在一塊兒，就算是一個模塊。

我拿一個運動框架來解釋一下require.js模塊化

首先要在html頁面中插入require.js插件

<script src="require.js"></script>
以後就是建立js文件來分裝js代碼

define(function(require,exports,module){
    exports.getStyle=function (obj,name) {
        if(obj.currentStyle){
            return obj.currentStyle[name];
        }else{
            return getComputedStyle(obj,false)[name];
        }
    };
});
這個函數是獲取對象屬性的函數
exports是當前模塊的導出對象，用於導出模塊公有方法和屬性簡單說就是構造一個公用的函數

define(function(require,exports,module){
    var getStyle=require("getStyle").getStyle;
    exports.startMove=function (obj,json,complete){
        clearInterval(obj.timer);
        complete = complete||{};
        complete.dur = complete.dur||1000;
        complete.easing = complete.easing||'ease-out';
        var count=parseInt(complete.dur/30);
        var start = {};
        var dis = {};
        for(name in json){
            start[name]=parseFloat(getStyle(obj,name));
            dis[name] = json[name]-start[name];
        }
        var sum=0;
        obj.timer=setInterval(function(){
            sum++;
            for(name in json){
                var a=sum/count;
                switch(complete.easing){
                    case 'linear':
                        var cur = start[name]+a * dis[name];
                        break;
                    case 'ease-in':
                        var cur = start[name]+Math.pow(a,3) * dis[name];
                        break;
                    case 'ease-out':
                        var a=1-sum/count;
                        var cur = start[name]+(1-Math.pow(a,3))* dis[name];
                        break;
                }
                if(name=='opacity'){
                    obj.style[name]=cur;
                    obj.style.filter='alpha('+cur*100+')';
                }else{
                    obj.style[name] = cur + 'px';
                }
            }
            if(sum==count){
                clearInterval(obj.timer);
                complete.fn && complete.fn();
            }
        },30)
    }
})
這個是運動框架的核心代碼

var getStyle=require("getStyle").getStyle;
函數用於在當前模塊中加載和使用別的模塊，傳入一個模塊名，返回一個模塊導出對象。require

define(function(require,exports,module){
    var move=require("startMove").startMove;
    exports.slider=function () {
        var oUl=document.getElementById("pics");
        var aBtn=document.getElementsByTagName("span");
        var aLi=oUl.children;
        oUl.style.width=aLi.length*aLi[0].offsetWidth+"px";
        for(var i=0;i<aBtn.length;i++){
            aBtn[i].index=i;
            aBtn[i].onclick=function(){
                for(var j=0;j<aBtn.length;j++){
                    aBtn[j].className="";
                }
                aBtn[this.index].className="on";
                move(oUl,{left:-this.index*aLi[0].offsetWidth},{easing:"ease-out"});
            }
        }
    }
});
這個是調用運動框架裏的函數傳入實參來實現效果

var move=require("startMove").startMove;
這個是將以前寫過的js文件傳入進來，就是一個模塊，調用這個模塊

require(['tab'],function(mod){
    mod.slider('play');
})
調用以前寫的那個js模塊而後經過在<script>添加data-main="init"來將寫的模塊傳入進來就能實現效果

<script src="require.js" data-main="init"></script>說白了require.js的好處就是js文件有依賴性有的時候順序js文件傳入順序不對的話就會報錯他有依賴性require.js將這個問題給解決了讓js文件即便傳入順序不對也能夠執行