摘要:默認會有三個參數,,也可以接受兩個以上的參數,字符串表示模塊標識。獲取模塊的接口調用模塊中的定義方法模塊內部異步加載模塊,并在加載完成后執行指定的回調函數。對象,這種方式可以將模塊內部多個屬性多個方法暴露出來。是在自己模塊的作用域中。
JS開發的問題
沖突
依賴
JS引入的文件,產生依賴.
使用命名空間解決:
命名空間的弊端
調用的時候 名字比較長.
只能減低沖突,不能完全避免
SeaJs使用引入sea.js的庫
如何變成模塊? define
如何調用模塊? exports 和 seajs.use
如何依賴模塊? require
//html:
//main.js define(function ( require,exports,module ) { var header = require("./header.js"); function show () { alert(123); } exports.show = show; });seajs.use()
加載一個或多個模塊
// 加載一個模塊 seajs.use("./main.js"); // 加載一個模塊,在加載完成時,執行回調 seajs.use("./main.js", function ( main ) { }); // 加載多個模塊,在加載完成時,執行回調 seajs.use(["./main.js", "./b"], function(a, b) { a.doSomething(); b.doSomething(); });
seajs.use 與 DOM ready 事件沒有任何關系。如果某些操作要確保在 DOM ready 后執行,需要使用 jquery 等類庫來保證。
seajs.use(["jquery","./main"],function ( $,main ) { $(function () { main.init(); }) });
use方法第一個參數一定要有,但是可以是null,也可以是一個變量
var app = ["app.js", "header.css", "header.js"]; seajs.use(app, function( app ) { //do something });
seajs.use() 只用于加載啟動, 不應該出現在define的模塊代碼中,如果模塊代碼里需要加載其它模塊時,使用 require() ,需要加載異步其它異步模塊時,使用 require.async()
seajs.use 是模塊加載器必備的一個接口
define函數當傳遞一個參數時候,那么這個參數就是一個模塊,參數可以是任意類型
傳遞一個字符串,那么這個模塊就是一個字符串模塊
傳遞一個對象的時候,那么這個模塊就是一個對象模塊
傳遞一個函數(最常用的方式)
這函數自帶三個參數
Require:引用其他模塊的工廠方法
Exports:返回的接口對象
Module:模塊module屬性
當傳遞過參數時(兩個,或者三個)
如果傳遞兩個參數的時候,第一個該模塊依賴的模塊數組集合,最后一個參數是function
如果傳遞三個參數的時候,第一個表示該模塊的名稱,第二個參數表示該模塊依賴的模塊集合,第三個
//第一個參數,當前模塊的ID,也就是當前模塊的地址 //第二個參數,以來模塊的地址的數組 define("./main.js",["./drag.js"],function( require,exports,moduels ){ });
三個參數解釋
require
require不能簡寫
require不能被重定義
不能賦值:var req = require
不能定義函數:function require
不能被子函數當成參數
不能在子函數作用域內重定義
// 錯誤 - 重命名 "require"!
var req = require, mod = req("./mod");
// 錯誤 - 重定義 "require"!
require = function() {};
// 錯誤 - 重定義 "require" 為函數參數!
function F(require) {}
// 錯誤 - 在內嵌作用域內重定義了 "require"!
function F() {
var require = function() {};
}
require的參數只能是完整的字符串 require(‘abc’ + ‘bcd’)是不允許的
exports
模塊的接口
第一種,直接對exports添加屬性,如exports.color = "red"
第二種,通過module來定義,module.exports.color = "red"
第三種,通過module來定義,module.exports = {color: "orange"}
第四種,通過return來定義, return {color: "green"}
在一個模塊中定義接口時候要用一種方式,不能混用
注意,不可以直接對exports賦值新對象
module
模塊的屬性
id:表示模塊的id
uri:表示該模塊文件對應的url
exports:表示模塊返回的接口集合
dependencies:表示依賴模塊集合(數組表示形式)
deps:表示依賴模塊集合(對象表示形式)
CMD 模塊定義規范一個模塊就是一個文件
define 是一個全局函數, 用來定義模塊
define( facotry )facotry可以是一個函數,也可以是一個對象或字符串
definde( { color: "tan" } );
當參數為 函數時。 默認會有三個參數 :require,exports,module
definde( function ( require,exports,module ) { } );define ([id,deps],factory)
define 也可以接受兩個以上的參數,字符串id表示模塊標識。deps是模塊依賴。
define("main",["mina.js"],function ( require,exports,module ) { //模塊代碼 });
id ,deps 參數省略,可以通過構建工具自動生成。
id和 deps 參數, 不屬于CMD規范。
require 是一個方法,接受 模塊標識 作為唯一參數,用來獲取其他模塊提供的接口。
deifne(function ( requrie,exports ) { //獲取模塊 main 的接口 var main = require("./main"); //調用 模塊 main 中的定義方法 main.init(); });
require.async(id,[cb]);
模塊內部異步加載模塊,并在加載完成后執行指定的回調函數。
require.async("./a",function(){}); //加載多個異步模塊 require.async(["./a","./b"],function(){});
//異步加載 所需要的模塊 define(function ( require,expotrs,module ) { var loadSync = false; if ( loadSync ) { var skin = require.async("./skin"); } else { var header = require.async("./header"); } });exports
exports , 用來向外提供模塊接口
define(function ( require, exports,module ) { // 對外提供 foo 屬性 exports.color = "pink"; // 對外提供 doSomething 方法 exports.doSomething = function() {}; });
通過return 提供接口
define(function () { //通過 return 直接提供接口 return { color: "deeppink", sayName: function () {} } });
CMD模塊中,經常使用的API 有:define,require,require.async,exports,module.expotrs
seajs 配置 seajs.config() alias定義模塊別名
當引用一些基礎庫的時候,涉及到基礎庫升級,在alias中定義這個模塊時,修改只需要修改這個別名配置。
seajs.config({ alias: { jquery: "lib/jquery.1.10.1" } });
模塊中使用
require("jquery");paths
定義模塊路徑
一些模塊創建目錄結構很深的時候,可以將這個層級定義成一個簡寫的path, 引用這個模塊的時候,直接通過 pathName+模塊名稱。
seajs.config({
paths: { hd: "./modules/header" }
});
模塊中使用
require("hd/header.js");vars
在某些情況下,模塊路徑在運行時才能確定,可以使用 vars 變量來配置。
seajs.config({ vars: { skin: "header/skin" } });
模塊中使用
require("{skin}/skin.js"); //需要使用 {} 來標識map
映射配置,匹配文件,做映射處理
開發完一些模塊時候,需要打包或壓縮處理,此時文件名可能會不同,可以通過map映射,來找到這個文件,修改成對應的文件名
seajs.config({ map: [ ["main.js","main-min.js"] ] }); seajs.use(["main"],function ( main ) { // do ... });base
設置模塊的根目錄
有時候開發用seajs不一定在當前頁面目錄下,此時想引用這個模塊比較麻煩,可以通過base來重定義該頁面模塊文件根目錄。
設置模塊的編碼格式
seajs.config({ charset: "utf-8" });
seajs.config({ charset: function(url) { // xxx 目錄下的文件用 gbk 編碼加載 if (url.indexOf("http://example.com/js/xxx") === 0) { return "gbk"; } // 其他文件用 utf-8 編碼 return "utf-8"; } });
常用的配置項: alias,paths,base
seajs插件 seajs-preload.js
加載js文件
seajs.config({ //預加載jquery文件 preload: ["jquery.js"] });
模塊中文件使用
definde(function ( require,exports,module ) { $(document).css("background","tan"); });seajs-css.js
加載css文件
definde(function ( require,expotrs,module ) { require("../css/css.css"); });requireJs
引入模塊文件時候,requirejs是根據引用了require文件的script標簽中data-main屬性對應的文件所在的目錄
define定義模塊傳遞一個對象可以
傳遞一個函數(commonjs規范的實現)
區別 在于module
模塊接口id表示模塊的id,id沒有后綴名(注意:seajs有后綴名)
沒有依賴的模塊集合
config配置屬性
在AMD規范定義的模塊中,沒有exports參數,只能通過return將接口暴露出來。
return 對象,這種方式可以將模塊內部多個屬性多個方法暴露出來。
return 方法,這種方式將一個方法返回出來,引用這個模塊就是引用這個接口方法,在它父模塊(引用它的模塊中)可以直接調用該方法。是在自己模塊的作用域中。
requirejs配置 baseUrl設置根目錄
用途:有時候啟動文件不在預期的位置,可以通過baseUrl來設置根目錄
require.config({ baseUrl: "lib" });paths
簡寫路徑
require.config({ paths: { hd: "module/header" } });map
當存在多個頁面,可能每個頁面引用代碼庫不一樣,可以通過map進行配置,對每個文件配置不同的代碼庫文件。
require.config({ map: { //modules 模塊下的dom模塊引用的是lib/dom "modules": { "dom": "lib/dom" }, //modules-new 模塊下的dom模塊引用的是lib/dom.2.0 "modules-new": { "dom": "lib/dom.2.0" } } });
使用css插件
requireJs 加載css 插件
//配置 require.config({ map: { "*": { "css": "lib/css" } } });
//使用 define(["css!css/index.css"],function () { });shim
表示配置模塊依賴關系
對于一些定義在全局作用域下的代碼庫,常常獲取不到這類庫的模塊,此時通過定義shim的莫開依賴關系,可以在模塊中獲取到這類代碼庫。
require.config({ shim: { "lib/jquery": { //依賴的模塊集合 deps: [], expotrs: "$" } } });
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79727.html
摘要:模塊載入策略的模塊分為兩類,一類為原生核心模塊,一類為文件模塊。最后傳入對象的,方法,,文件名,目錄名作為實參并執行。在這個主文件中,可以通過方法去引入其余的模塊。以上所描述的模塊載入機制均定義在中。 CommonJS規范? 早在Netscape誕生不久后,JavaScript就一直在探索本地編程的路,Rhino是其代表產物。無奈那時服務端JavaScript走的路均是參考眾多服務器端...
摘要:模塊載入策略的模塊分為兩類,一類為原生核心模塊,一類為文件模塊。最后傳入對象的,方法,,文件名,目錄名作為實參并執行。在這個主文件中,可以通過方法去引入其余的模塊。以上所描述的模塊載入機制均定義在中。 CommonJS規范? 早在Netscape誕生不久后,JavaScript就一直在探索本地編程的路,Rhino是其代表產物。無奈那時服務端JavaScript走的路均是參考眾多服務器端...
摘要:我們將簡單地創建一個匿名函數并立即執行它。注意這對包裹匿名函數的最外層括號。幸運的是,我們的匿名函數提供了簡單的變通方法。另外,它還維護了一個利用匿名函數閉包的私有的內置狀態。 本文譯自Ben Cherry的《JavaScript Module Pattern: In-Depth》。雖然個人不太認同js中私有變量存在的必要性,但是本文非常全面地介紹了Javascript中模塊化模...
摘要:打包出來的代碼快照如下,注意看注釋中的時序實際上,的處理同相差無幾,只是在定義模塊和引入模塊時會去處理標識,從而兼容其在語法上的差異。 前言 隨著 Web 技術的蓬勃發展和依賴的基礎設施日益完善,前端領域逐漸從瀏覽器擴展至服務端(Node.js),桌面端(PC、Android、iOS),乃至于物聯網設備(IoT),其中 JavaScript 承載著這些應用程序的核心部分,隨著其規模化和...
閱讀 917·2021-10-18 13:32
閱讀 3513·2021-09-30 09:47
閱讀 2155·2021-09-23 11:21
閱讀 1878·2021-09-09 09:34
閱讀 3479·2019-08-30 15:43
閱讀 1522·2019-08-30 11:07
閱讀 1061·2019-08-29 16:14
閱讀 724·2019-08-29 11:06