摘要:一模塊化命名空間二命名空間庫名類別名方法名三規范一個文件為一個模塊,通過暴露快接口,通過引入模塊,同步執行文檔示例四規范使用定義模塊使用加載模塊依賴前置,提前執行規范文檔示例模塊名字模塊輸出模塊輸出等于在最前面聲明并初始化了要用到的模塊即使
一、js模塊化
</>復制代碼
命名空間
commonJS
AMD/CMD/UMD
ES6 module
二、命名空間
庫名.類別名.方法名
</>復制代碼
var NameSpace = {}
NameSpace.type = NameSpace.type || {}
NameSpace.type.method = function () {
}
三、commonJS規范
一個文件為一個模塊,通過module.export暴露快接口,通過require引入模塊,同步執行
commonJS 文檔
示例:
</>復制代碼
const Router = require("./router/route")
export = module.exports = createApplication;
四、AMD規范
</>復制代碼
Async Module Definition
使用define定義模塊
使用require加載模塊
RequireJS
依賴前置,提前執行
AMD規范文檔
示例:
</>復制代碼
define(
// 模塊名字
"alpha",
// 模塊輸出
["require", "exports", "beta"],
// 模塊輸出
function (require, exports, beta) {
exports.verb = function () {
return beta.verb();
return require("beta").verb();
}
}
)
define(
["a", "b", "c"],
function (a, b, c) {
// 等于在最前面聲明并初始化了要用到的模塊
if (false) {
// 即使沒用到模塊b,但b還是提前執行了
b.foo();
}
}
)
五、CMD
</>復制代碼
Common module definition
一個文件為一個模塊
使用define來定義一個模塊
使用require來加載一個模塊
SeaJS
盡可能懶加載
示例:
</>復制代碼
// 所有模塊都通過define定義
define(function (require, exports, module) {
// 通過require引入模塊
var $ = require("jquery");
var Spining = require("./spinning");
// 通過exports對外提供接口
exports.doSomething =
// 或者通過module.exports 提供整個接口
module.exports =
})
六、UMD
</>復制代碼
Universal Module definition
通用解決方法
三個步驟:
1.判斷是否支持AMD
2.判斷是否支持CommonJS
3.如果都沒有,使用全局變量
示例:
</>復制代碼
(function (root, factory) {
if (typeof define === "function" && define.amd) {
define([], factory);
} else if (typeof exports == "object") {
module.exports = factory();
} else {
root.returnExports = factory()
}
}(this, function () {
return {}
}))
七、ESM
</>復制代碼
esmascript module
一個文件一個模塊
export / import
示例:
</>復制代碼
// 加載模塊的變量或方法
import theDefault, {named1, named2} from "src/mylib"
import theDefault from "src/mylib"
import {named1, named2} from "src/mylib"
// 引入模塊進來并且將named1命名為Named1
import {named1 as myNamed1} from "src/mylib"
// 加載模塊里全部的變量和方法
import * as mylib from "src/mylib";
// 只加載,不做任何處理
import "src/mylib"
// 定義一個模塊,暴露的接口
export var name1 = "Bob";
export let name2 = "Bob";
export let NAME3 = "Bob";
export function myFunc() {}
export class MyClass {}
// 可以選擇暴露
const USERNAME = "Bob";
function myFunc() {}
export {USERNAME, myFunc};
export {USERNAME as NAME, myFunc as Fn};
// 引入其他文件的變量或方法,再暴露出去
export * from "src/other_module";
export {foo, bar} from "src/other_module";
export {foo as myFoo, bar} from "src/other_module";
export {foo as myFoo, bar} from "src/other_module"
八、webpack支持
</>復制代碼
AMD(require)
ES Modules 推薦
CommonJS
九、CSS模塊化
</>復制代碼
OOCSS
SMACSS
Atomic CSS
MCSS
AMCSS
BEM
CSS modules
Atomic CSS 每個類都是獨立的
MCSS 多層級的css
AMCSS 針對屬性來寫css
BEM:Block,Element,Modifier
</>復制代碼
Default Button
Success Button
Danger Button
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/54568.html
摘要:而前端要使用模塊化的原因或者要解決的問題就是解決命名沖突管理依賴提高代碼的可復用性相關模塊化規范常見的規范有規范規范是在推廣過程中對模塊定義的規范化產出,主要用于瀏覽器端。目前的各類全局變量都可以模塊化。 開發中明顯可以感覺到加載一個HTML需要依賴很多的JS文件依賴,比如到一定階段的HTML頁面,尾部就是這樣的: 隨著所需功能越來越多,我們就需引入更多的JS依...
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...
摘要:微內核架構在大型前端系統中的應用只討論架構,不討論框架名詞解釋由一群盡可能將數量最小化的軟件程序組成,他們負責提供實現一個操作系統所需要的各種機制和功能。而微內核架構已經在操作系統和很多的產品的后端服務及前端中經過了很多的實踐。 微內核架構在大型前端系統中的應用 只討論架構,不討論框架 1、名詞解釋 由一群盡可能將數量最小化的軟件程序組成,他們負責提供、實現一個操作系統所需要的各種機制...
摘要:要想讓模塊再次運行,必須清除緩存。模塊加載的順序,按照其在代碼中出現的順序。最近參加了公司開展的一次培訓,結構性思維培養。 序言 模塊化,大家用vue,react等東西,都會接觸到像exports,module.exports,export,export default,require,define,import等等字段,感覺很多人對于這些東西還是分不清,概念非常的模糊,便想著寫這么一...
摘要:文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰,必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式,樣式代碼保持一行,多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式; HTML文檔必須使用HTML5的標準文檔格式; HTMLCSS編寫規范...
閱讀 3994·2021-11-18 13:21
閱讀 4812·2021-09-27 14:01
閱讀 3123·2019-08-30 15:53
閱讀 2397·2019-08-30 15:43
閱讀 1743·2019-08-30 13:10
閱讀 1523·2019-08-29 18:39
閱讀 898·2019-08-29 15:05
閱讀 3352·2019-08-29 14:14