* require define 需要引用某个依赖的时候 都要单独写上 // 例1. 配置require参数 baseUrl paths _______________________________________________________________ require.config({ // 配置文件不要和require define写到一个JS里 单独放在主html页面里 // 方便以后合并 // 配置require加载的文件目录 // 该位置相对于引入app.js的文件 baseUrl : 'scripts/c', // 当baseUrl不能满足路径需求时 // 可以用paths设置具体的文件的路径 // 键名可以随便命名 但是下面的require加载时必须写该键名 // 键值是需要加载的文件的具体路径+文件名 paths : { // paths 可以添加备选参数 键值:'参数1, 参数2, ...' // 如果第一个参数加载失败就加载第2个参数 aa : ['fileA/a', 'fileA/a2'], bb : 'fileB/b', jquery : 'fileA/jquery' } }); // require引入的依赖JS 使用自定义的名字 require(['aa', 'bb'], function (a, b){ console.log(b); }); // 例2. 独立模块 define _______________________________________________________________ // 独立模块方法一 define({ method1 : function (){}, method2 : function (){} }); // 独立模块方法二 define(function (){ return { method1 : function (){}, method2 : function (){} } }); // 例3. 非独立模块 define _______________________________________________________________ // 非独立模块 // 严格按照依赖的顺序加载js 这里要注意加载顺序 define(['module1', 'module2', 'module3'], function (m1, m2, m3){ }); // 非独立模块方法二 // 当引用很多模块的时候 可以使用这种简易写法 define(function (require){ var m1 = require('m1'); var m2 = require('m2'); var m2 = require('m3'); var m2 = require('m4'); var m2 = require('m5'); var m2 = require('m6'); var m2 = require('m7'); var m2 = require('m8'); ... }); // 例4. 自定义ID _______________________________________________________________ /* * id : 定义模块的名字 其他模块可以根据这个变量名去引用该模块 * 自定义名字 只在一个页面有多个define时使用 * 添加了id的模块只能被引用时才能执行 * exports.变量 这种方式等价于 return 返回值 * ['bb', 'exports'] 引入其他模块时 如果需要使用module require exports时 需要显示的引入module require exports模块 */ define('id', ['bb', 'exports'], function (bb, exports){ // exports是一个空对象 它定义的值获取后是一个对象 exports.foo = 'name'; }); // 根据上一个模块的名字引用上个模 define(['id'], function (val){ // 输出上个模块定义的值 {foo : name} console.log(val); }); /* * id : 定义模块的ID 其他模块可以根据这个变量名去引用该模块 * exports.变量 这种方式等价于 return 返回值 * 添加了id的模块只能被引用时才能执行 * 自定义名字 只在一个页面有多个define时使用 * ['bb', 'module'] 引入其他模块时 如果需要使用module require exports时 需要显示的引入module require exports模块 */ define('id', ['bb', 'module'], function (b, module){ // exports是一个空对象 它定义的值获取后是一个对象 module.exports = 'name'; }); // // 根据上一个模块的名字引用上个模块 define(['id'], function (val){ // 输出上个模块定义的值 {foo : name} console.log(val); }); // 例5. 配置非AMD规范的JS _______________________________________________________________ require.config({ baseUrl : 'scripts', // 配置引用的JS // 引用patch是为了缩短引用的框架的名字 // A : 随便起的名字 表示引用的zepto.js // B : 随便起的名字 表示引用的jquery.js paths : { 'A' : 'zepto', 'B' : 'jquery' }, // 配置非AMD规范的库 // shim : 配置非AMD规范文件的输出 // 如果配置了paths 这里的键名必须和paths定义的键名一致 // 如果没有配置paths 这里的键名必须是引用的框架名 例如 // 'zepto' : {exports : $} shim : { 'A' : { // deps : 新配置加载的库依赖某个库 // 如果依赖多个库 需要写成 ['B1', 'B2', ...] // 引用依赖文件的路径要写正确 deps : ['B'], // 该模块输出变量名 exports : 'objA' }, // 如果没有配置paths 被依赖的模块名必须是文件名 'B' : { // 该模块输出的变量名 exports : 'objB' } } }); define(['A'], function (p){ console.log(p); }); // 例6. 合并的配置文件 _______________________________________________________________ { // 这个文件夹下的所有文件将会被复制到dir参数标注的文件夹下 appDir: "./", // 合并哪个目录下的JS文件 如果省略该参数 name的参数里要加上路径 baseUrl: "js", // 如果在html页面里写了配置文件require.config 如果该文件里有paths 则需要在build里 // 添加paths 告诉压缩的具体路径 否则压缩会报错 paths : { zepto : 'common/zepto', phone : 'module/phone', verificationPhone : 'module/verificationPhone', verificationCode : 'module/verificationCode', getPhoneValue : 'module/getPhoneValue' }, // 如果在html页面里写了配置文件require.config 如果该文件里有shim 则需要在build里 // 添加shim 告诉压缩的具体路径 否则压缩会报错 shim: { 　　　　zepto: { 　　　　　　exports : '$' 　　　　} 　　} // 输出目录 所有应用程序文件将会被复制到这个文件下 dir: "a", // 如果优化CSS文件 该参数设置优化后的CSS优化规则 // 根据参数不同 每个CSS压缩规则不同 // 参数包括 'none', 'standard', 'standard.keepLines', 'standard.keepComments', // 'standard.keepComments.keepLines' optimizeCss : 'standard.keepComments', // 过滤复制文件的正则 任何与此规则匹配的文件或文件夹都将不会被复制到输出目录 // 该正则是过滤r.js build.js 合并以后这几个JS将不出现在dir规定的目录下 fileExclusionRegExp : /^r|build/, // 是否删除已经被合并的文件 // true : 删除已经被合并过的文件 只保留合并后的总文件 // false : 不删除已经被合并过的文件 总文件和被合并的文件都保留 removeCombined : true, // 需要合并的JS文件数组 // 如果只合并一个js文件 可以直接写name : 'page1' 不用写modules // 必须把需要合并的JS都列出来 否则require只会压缩代码 不会把依赖的JS合并进来 modules: [ // 需要合并的page1.js // page1是require的入口文件 (page1.html引用) // name的名字必须是paths的名字 { name : 'phone' }, // 需要合并的page2.js // page2是require的入口文件 (page2.html引用) // name的名字必须是paths的名字 { name : 'verificationPhone' } ] }