现在前端的页面都采用模块化来加载js;避免了js加载的延迟顺序依赖等问题;原理的东西这里不多做解释,我们这节只是介绍一下require的用法:
1.首先我们要下载require.js文件;
2.html引入<script src="../js/require.js" data-main="main"></script>;这里src是require.js的路径;data-main="是引入js主文件的路径";由于默认主文件是js这里就省去.js;
3.编写模块儿代码:必须用AMD规范;
例如:util.js这里没有依赖
define(function(){
var util={
logLocation:function(x,y){
return (x+y);
}
}
return util;
})
aUtil.js依赖于util就要这么写
define(['util'],function(util){
var autil={
aaa:function(x,y,z){
return util.logLocation(x,y)+z
}
}
return autil;
})
['util']为依赖的模块,这里是数组,可以是多个依赖,这里默认路径是相同的,不同可以用相对路径;function(uitl);这里的参数和前边的依赖是一一对应的是依赖返回的对象,我们调用的就是对象的方法;
主js这么写:
require(['aUtil'],function(autil){
console.log(autil.aaa(1,2,3));
})
这里是最终输出,需要将define,改为require,依赖和参数的写法同上;我们默认的是js路径一样;如果不一样需要配置config:
这里可以这样配置:
require.config({
baseUrl:"../js",
paths:"a-util"
})
或者:
require.config({
paths:"../js/a-util"
})
关于更多的配置操作,我们这里不做概述,如有错误望指正