資訊專欄INFORMATION COLUMN
摘要：的模塊化開發(fā)了解模塊化概念將一個(gè)復(fù)雜的程序依據(jù)一定的規(guī)則或者說是規(guī)范封裝成幾個(gè)塊，或者是文件，并進(jìn)行組合在一起，塊的內(nèi)部數(shù)據(jù)與實(shí)現(xiàn)是私有的，只是向外暴露一些接口或者是方法與其他的模塊進(jìn)行通信。
JS的模塊化開發(fā) 了解模塊化 1、概念
將一個(gè)復(fù)雜的程序依據(jù)一定的規(guī)則或者說是規(guī)范封裝成幾個(gè)塊，或者是文件，并進(jìn)行組合在一起，塊的內(nèi)部數(shù)據(jù)與實(shí)現(xiàn)是私有的，只是向外暴露一些接口或者是方法與其他的模塊進(jìn)行通信。
2、為什么要引入模塊化降低復(fù)雜度，提高解耦性
部署方便
避免命名沖突
更好的分離，按需加載
更高的維護(hù)性
3、隨著而來的問題請(qǐng)求過多
依賴模糊
難以維護(hù)
模塊化規(guī)范 1、CommonJS 規(guī)范說明每個(gè)文件都可以當(dāng)做一個(gè)模塊
在服務(wù)器端：模塊的加載運(yùn)行時(shí)同步的
在瀏覽器端：模塊需要提前編譯
模塊的暴露暴露的本質(zhì)：對(duì)象（exports對(duì)象）
module.exports = 一個(gè)值 exports.xxx = 一個(gè)值
需要注意的是：
1、當(dāng) exports 和 module.exports 同時(shí)存在的時(shí)候，module.exports 會(huì)蓋過 exports
2、當(dāng)模塊內(nèi)部全部是 exports 的時(shí)候， 就等同于 module.exports
3、最后 我們就可以認(rèn)定為 exports 其實(shí)就是 module.exports 的子集。
2、ES6 ES6的導(dǎo)出export用于對(duì)外輸出本模塊（一個(gè)文件就可以理解為一個(gè)模塊）變量的接口。
需要留心的是：export 可以導(dǎo)出的是一個(gè)對(duì)象中包含的多個(gè) 屬性，方法。 export default 只能導(dǎo)出 一個(gè) 可以不具名的 對(duì)象。
ES6的 import當(dāng)我們需要引入某個(gè)模塊的時(shí)候，可以通過ES6的import
3、AMD的RequireJS 異步模塊AMDAsynchronous Module Definition，中文名是異步模塊。它是一個(gè)在瀏覽器端模塊化開發(fā)的規(guī)范，由于不是js原生支持，使用AMD規(guī)范進(jìn)行頁(yè)面開發(fā)需要用到對(duì)應(yīng)的函數(shù)庫(kù)，也就是大名鼎鼎的RequireJS，實(shí)際上AMD是RequireJS在推廣過程中對(duì)模塊定義的規(guī)范化的產(chǎn)出。
解決的問題多個(gè)JS文件可能有依賴的關(guān)系，被依賴的文件需要早于依賴它的文件加載到瀏覽器
JS加載的時(shí)候?yàn)g覽器會(huì)停止頁(yè)面的渲染，加載的文件越多，頁(yè)面失去響應(yīng)的時(shí)間越長(zhǎng)
異步前置加載
4、CMD的seaJSdefine(id, deps, factory)
因?yàn)镃MD推崇一個(gè)文件一個(gè)模塊，所以經(jīng)常就用文件名作為模塊id；
CMD推崇依賴就近，所以一般不在define的參數(shù)中寫依賴，而是在factory中寫。
factory有三個(gè)參數(shù)：
function(require, exports, module){}
一，require
require 是 factory 函數(shù)的第一個(gè)參數(shù)，require 是一個(gè)方法，接受 模塊標(biāo)識(shí) 作為唯一參數(shù)，用來獲取其他模塊提供的接口；
二，exports
exports 是一個(gè)對(duì)象，用來向外提供模塊接口；
三，module
module 是一個(gè)對(duì)象，上面存儲(chǔ)了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法。
demo
// 定義模塊 myModule.js
define(function(require, exports, module) {
var $ = require("jquery.js")
$("div").addClass("active");
});
// 加載模塊
seajs.use(["myModule.js"], function(my){
});
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105298.html
摘要：常見模塊化方案是由社區(qū)提出的模塊化方案中的一種，遵循了這套方案。是模塊化規(guī)范中的一種，遵循了這套規(guī)范。中的模塊化能力由兩個(gè)命令構(gòu)成和，命令用于規(guī)定模塊的對(duì)外接口，命令用于輸入其他模塊提供的功能。 為什么需要模塊化 在ES6出現(xiàn)之前，JS語(yǔ)言本身并沒有提供模塊化能力，這為開發(fā)帶來了一些問題，其中最重要的兩個(gè)問題應(yīng)當(dāng)是全局污染和依賴管理混亂。 // file a.js var name =...
摘要：的主要思想是異步模塊，主邏輯在回調(diào)函數(shù)中執(zhí)行，這和瀏覽器前端所習(xí)慣的開發(fā)方式不謀而合，應(yīng)運(yùn)而生。是目前開發(fā)中使用率最高的模塊化標(biāo)準(zhǔn)。 原文鏈接: http://yanjiie.me 偶然的一個(gè)周末復(fù)習(xí)了一下 JS 的模塊標(biāo)準(zhǔn)，刷新了一下對(duì) JS 模塊化的理解。 從開始 Coding 以來，總會(huì)周期性地突發(fā)奇想進(jìn)行 Code Review。既是對(duì)一段時(shí)期的代碼進(jìn)行總結(jié)，也是對(duì)那一段時(shí)光的...
摘要：所有依賴這個(gè)模塊的語(yǔ)句，都定義在一個(gè)回調(diào)函數(shù)中，等到所有依賴加載完成之后前置依賴，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。如果將前面的代碼改寫成形式，就是下面這樣定義了一個(gè)文件，該文件依賴模塊，當(dāng)模塊加載完畢之后執(zhí)行回調(diào)函數(shù)，這里并沒有暴露任何變量。 模塊化是我們?nèi)粘ｉ_發(fā)都要用到的基本技能，使用簡(jiǎn)單且方便，但是很少人能說出來但是的原因及發(fā)展過程?，F(xiàn)在通過對(duì)比不同時(shí)期的js的發(fā)展，將JavaScript模...
摘要：概述從去年短時(shí)間內(nèi)對(duì)現(xiàn)有系統(tǒng)的改造到如今穩(wěn)定實(shí)施，已經(jīng)好幾個(gè)月，這套流程滿足了日常前端開發(fā)的流程。在講這之前簡(jiǎn)單說下前端模塊化歷程。模塊化以上是在規(guī)范出來之前的編碼方式，大家應(yīng)該非常熟悉。只要在代碼中用來異步加載模塊即可。 概述 從去年短時(shí)間內(nèi)對(duì)現(xiàn)有系統(tǒng)的改造到如今穩(wěn)定實(shí)施，已經(jīng)好幾個(gè)月，這套流程滿足了日常前端開發(fā)的流程。由于之前項(xiàng)目組的模塊化本身做的不是很好，基本算是推到一半重來，雖...
摘要：若不存在則模塊標(biāo)識(shí)應(yīng)該默認(rèn)定義為在加載器中被請(qǐng)求腳本的標(biāo)識(shí)。這也是目前很多插件頭部的寫法，就是用來兼容各種不同模塊化的寫法。語(yǔ)句輸出的值是動(dòng)態(tài)綁定的，綁定其所在的模塊。 前言 歷史上，js沒有模塊化的概念，不能把一個(gè)大工程分解成很多小模塊。這對(duì)于多人開發(fā)大型，復(fù)雜的項(xiàng)目形成了巨大的障礙，明顯降低了開發(fā)效率，java，Python有import，甚至連css都有@import,但是令人費(fèi)...
閱讀 3904·2021-09-27 13:35
閱讀 1083·2021-09-24 09:48
閱讀 2912·2021-09-22 15:42
閱讀 2353·2021-09-22 15:28
閱讀 3156·2019-08-30 15:43
閱讀 2624·2019-08-30 13:52
閱讀 2981·2019-08-29 12:48
閱讀 1460·2019-08-26 13:55
