1.3.1.RequireJS
1.Introduction
RequireJS用於client端的模塊管理, 實現動態加載或異步加載, 模塊管理遵守AMD規範
2.用法
define: 定義模塊, RequireJS要求每個模塊要放在一個獨立的文件中, 模塊可分為兩種:
1.獨立模塊
如果被定義的模塊不需要依賴其他模塊, 則可以用define方法生成
將對象寫成一個函數, 該函數的回傳值就是輸出的模塊. e.g.,
define(function () { return { method1: function() {}, method2: function() {}, }; });
2.非獨立模塊
如果被定義的模塊需要依賴其他模塊, 則define必須採用以下方式:
第1個參數: 定義模塊名稱, 是相對於require.js的路徑
第2個參數: 此模塊所需要使用到的模塊
第3個參數: 函數的參數內容需要對應到第2個參數陣列, 該函數的回傳值就是輸出的模塊, 供其他模塊調用
e.g.,
define('login/LogInReact', [ 'react', 'react-dom', 'strings', 'knockout', 'koMapper', 'LogonService', 'GAUTH', ], function (React, ReactDOM, strings, ko, koMapper, LogonService, GAUTH) { var self = this; self.init = function (containerId, component, userNameProp, gAuthHostUrlProp, garminOAuthClientIdProp, localeProp, gAuthCSSUrlProp, ssoRedirectUrlProp, languageCodeProp, guidProp) { }; return self; })
require: 調用模塊
第1個參數: 要調用的模塊, 可以是複數
第2個參數: 函數的參數內容需要對應到第1個參數陣列
e.g.,
require(['login/LogInReact'], function (LogInReact) { var userName = getCookie("UserName"); var guid = getParameterByName("guid"); var gAuthHostUrl = "@gAuthHostUrl"; var OAuthClientId = "@OAuthClientId"; var locale = "@locale"; var gAuthCSSUrl = "@gAuthCSSUrl"; var ssoRedirectUrl = "@ssoRedirectUrl"; var languageCode = "@languageCode"; LogInReact.init('#LogInBoxWidget', LogInReact.LoginComponent, userName, gAuthHostUrl, OAuthClientId, locale, gAuthCSSUrl, ssoRedirectUrl, languageCode, guid); });
另一種作法: 將require方法用在define方法内部
e.g.,
define(function ( require ) { var isReady = false, foobar; require(['foo', 'bar'], function (foo, bar) { isReady = true; foobar = foo() + bar(); }); return { isReady: isReady, foobar: foobar }; });
3.參考資料
Last updated
Was this helpful?