[TOC] > [自制demo](https://github.com/idcpj/gulp_demo) `define` 和 `require` 这两个定义模块、调用模块的方法，合称为AMD模式 ## define方法创建模块 ### 独立模块 方式一: ``` define({ method1: function() {}, method2: function() {}, }); ``` 方式二: 更灵活,可在 `return` 前放置代码 导出对象 ``` define(function () { return { a: function() {}, b: function() {}, }; }); ``` 方式三:只导出一个模块 导出函数 ``` define(function(){ return function(){ document.querySelector("body").innerHTML="asd" } }); ``` ### 非独立模块 方式一: ``` define(['module1', 'module2'], function(m1, m2) { return { method: function() { m1.methodA(); m2.methodB(); } }; }); ``` 方式二: ``` define( function (require) { var dep1 = require('dep1'), dep2 = require('dep2'), } }); ``` demo:通过判断浏览器是否为IE，而选择加载zepto或jQuery ``` define(('__proto__' in {} ? ['zepto'] : ['jquery']), function($) { return $; }); ``` ## 调用模块 ``` require(['foo', 'bar'], function ( foo, bar ) { foo.doSomething(); }); ``` require方法也可以用在define方法内部 ``` define(function (require) { var otherModule = require('otherModule'); }); ``` 动态加载 require ``` define(function ( require ) { var isReady = false, foobar; require(['foo', 'bar'], function (foo, bar) { isReady = true; foobar = foo() + bar(); }); return { isReady: isReady, foobar: foobar }; }); ``` ## 调用不支持 amd 的模块 c.js ``` var show = function(){ alert('调用了c'); } ``` 配置config ``` shim : { c : { exports : 'show' } } ``` 调用 ``` require(['c'], function( c){ console.log(c); }); ``` ## 配置 require.js 文件 ``` require.config({ baseUrl: 'js/lib', paths: { jquery: [ '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js', 'lib/jquery' ] }, shim: { "backbone": { deps: [ "underscore" ], exports: "Backbone" }, "underscore": { exports: "_" } } }); ``` 1. baseUrl 基础路径 2. paths 可以有多个路径,如果一个加载不通,则加载第二个 3. shim:不支持 AMD 规范使用 `shim`, `deps` 指定依赖关系, `exprots` 指定输出符号 ## 优化器r.js 例子:在根目录创建 `build.js` ``` ({ appDir: '../src', //app源码的根目录 // baseUrl: "../src/js", //error: has a source path that is same as output dir:"../release", //app发布代码的根目录，r.js把构建后的代码存放于此 mainConfigFile:'../src/js/config.js', paths: { one: "mod/one", two: "mod/two", three: "mod/three" }, modules:[{ //合并策略，如one.js和two.js，合并成combine.js name:"combine", include:[ 'one', 'two' ] }, }) ``` * **appDir**：项目目录，相对于参数文件的位置 * **baseUrl**：js文件的位置。 * **dir**：输出目录。 * **modules**：一个包含对象的数组，每个对象就是一个要被优化的模块。 * **fileExclusionRegExp**：凡是匹配这个正则表达式的文件名，都不会被拷贝到输出目录。 * **optimizeCss**: 自动压缩CSS文件，可取的值包括“none”, “standard”, “standard.keepLines”, standard.keepComments”, “standard.keepComments.keepLines”。 * **removeCombined**：如果为true，合并后的原文件将不保留在输出目录中。 * **paths**：各个模块的相对路径，可以省略js后缀名。 * **shim**：配置依赖性关系。如果某一个模块不是AMD模式定义的，就可以用shim属性指定模块的依赖性关系和输出值。 * **generateSourceMaps**：是否要生成source map文件。 ## 例子 ### 多页面应用例子 [guthub 官方例子](https://github.com/requirejs/example-multipage)