[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)