web前端模組化 一 前言

2021-10-22 05:42:16 字數 817 閱讀 7097

將乙個複雜的程式依據一定的規則規範封裝成幾個塊檔案,並進行組合在一起。

內部資料與實現是私有的,只是向外暴露一些介面方法與外部其他模組通訊。

1.全域性function模式-把不同的功能封裝成不同的全域性函式

2.命名空間模式-基於簡單的物件封裝,

劣勢:資料不安全,外部可以直接修改模組內部的資料;所有成員都暴露在外;

let obj = ,

func2: () => () {},

}obj.data = 'aaa';

obj.func1();

3.匿名函式自執行方式(閉包)

向window物件上新增全域性屬性,也有的把這種方法叫做新增命名空間,目的是向外暴露介面,其實這種方式很好,方法是私有的,只能通過外部介面來小左,但是多個模組有依賴關係的時候就不好辦了。

4.匿名函式的模式增加:向入口傳入依賴的模組

const var module1 = (function(m) 

return m;

})(window.module1 || {})

劣勢:這種方式引入的js檔案、模組必須要有一定的先後順序,否則會報錯(各種undefined)

避免命名衝突(減少命名空間汙染)

更好的分離,按需載入

更高的復用性,更高的可維護性

引入多個script之後,會不可避免的出現引用交叉。

這就導致真正意義上的模組化的出現,也就是後來的common.js, amd, es6, cmd.

Web前端 模組化程式設計

匯出 let cat let dog let name 測試文字 function sum a,b 同下 簡寫 exports 同下 簡寫 module.exports 同上,原生 module.exports 匯入 可以匯出全部 const m require exportes51 可以匯出部分 ...

前端模組化

前端模組化解決什麼問題?有了模組,我就可以很方便的使用別人的 想要什麼功能,就用載入什麼模組。但是,這樣做需要有乙個前提,那就是大家必須以同樣的方式編寫模組,否則就亂套了。所以組內需要有一套統一的模組規範。如何實現模組?1 物件字面量的變體 2 js設計模式的模組模式 3 採用成熟的庫檔案。前兩種方...

前端模組化

定義 具有相同屬性和行為的事物的集合 在前端中 將一些屬性比較類似和行為比較類似的內容放在同乙個js檔案裡面,把這個js檔案稱為模組 目的 為了每個js檔案只關注與自身有關的事情,讓每個js檔案各行其職 模組化 指的就是遵守commonjs規範,解決不同js模組之間相互呼叫問題 commonjs a...