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文件即使传入顺序不对也可以执行