RequireJS解决代码依赖问题,异步加载js,避免页面失去相应

<script>

<script>

加载

<script data-main="main" src="./require.js"></script>

<script src="js1.js""></script>
<script src="js2.js""></script>
<script src="js3.js""></script>
<script src="js4.js""></script>

AMD规范

//AND规范的写法
require(['依赖一', '依赖二', '依赖三'], function(依赖一的别名, 依赖三的别名, 依赖三的别名){
//code
})

require(['jquery', 'underscore', 'bankbone'], function($, _, Backbone) {
//code
})

配置

require.config({
baseUrl: '路径', // 设置js文件的根目录,默认是main.js的目录,这里写相对与main.js的相对路径
paths: {
jquery: '路径' // 为每个文件单独指定路径, 也可以是网络地址
}
shim: {
'模块名': {
exports: '模块别名',
deps: ['依赖一', '依赖二']
}
}
})

AMD模块的写法

define(['依赖'], function(依赖别名) {
//code

})

define(function(a, b) {
var add = function(a, b) {
return a + b;
}
return add
});
//这样写只能返回一个方法
//在main.js里用该模块的名字(a,b)调用

define(function(a, b) {
var add = function(a, b) {
return a + b;
}
var x = function(a, b) {
return a * b
}
return {
add: add,
x: x
}
});
//这样写只能返回多个方法
//在main.js里用该模块的名字.add(a,b)或者模块名字.x(a,b)调用

模块的压缩合并

bower install r.js

({
appDir: './', 　　 //项目根目录
out: 'main-build.js',　　//输出文件名
dir: './outdir',　　 //输出目录，全部文件打包后要放入的文件夹（如果没有会自动新建的）
　　　　/* 有了dir，就不能使用out配置项了，你在编译时它有非常明确的提示 */
baseUrl: './js/pages', 　　 //相对于appDir，代表要查找js文件的起始文件夹，下文所有文件路径的定义都是基于这个baseUrl的
modules: [
　　　　//要优化的模块 —— 里面的配置项即各页面的 相对baseUrl路径的 省略后缀“.js”的 入口文件(入口文件 ---- 即加载页面时引入require.js的script标签上data-main属性所指定的文件)
　　　　//该属性必不可少，因为一个程序至少需要有一个入口
{ name:'main'},
{ name:'index'}
],
　　fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/,　　 //正则匹配过滤文件，匹配到的文件将不会被输出到输出目录去，这里过滤掉的是 r.js、build.js、*.scss三类文件
　　optimizeCss: 'standard',
　　removeCombined: true, //如果为true，优化器将从输出目录中删除已合并的文件
　　paths: { //各模块相对baseUrl的路径，直接从require.config的path配置中烤取即可
"underscore": "../libs/underscore/underscore-min",
"backbone": "../libs/backbone/backbone-min",
　　},
shim:{// 配置不符合AMD规范的模块，直接从require.config的shim配置中烤取即可
"underscore": {
　　        exports: "_"
},
"backbone": {
　　        deps: ["underscore", "jquery"],
　　        exports: "Backbone"
},
}
})