前端模組化

2022-08-19 15:51:10 字數 1453 閱讀 3553

使用模組模組化的好處避免變數汙染,命名衝突

提高**復用性

提高維護性

依賴關係的管理

基本思想

//使用立即執行函式

//閉包思想,內層作用域才能訪問外層作用域

var module = (function

() ;

let m2 = function() ;

let m3 = function

()

return

})()

前端模組化比較commonjs基於nodejs的模組化方案,同步的載入在充滿非同步的瀏覽器中會產生很多問題乙個檔案就是乙個模組,擁有自己的作用域

//

a.js

//被require的時候,只會執行一次這個函式,然後把結果存起來

var a = 100;

a+=100;

module.exports =

//

b.js

var a = require('./a.js'); //

//

c.js

var a = require('a.js'); //

123

//require定義模組

define(function

()

return

add})

require.config()方法進行配置,相當於給你的路徑制定乙個簡單的名字

123

//

a.js

define(['b'],()=>)

//

b.js

define(()=>)

控制台最終結果

123

//

a.js

//錯誤示例

define(function

(require,exports,module)

})//

同樣需要先指定你所依賴的模組

//修訂之後

//require定義模組

define(["./b"],function

(require,exports,module)

})

//

b.js

define((require,exports,module)=>)

最終結果:

前端模組化

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

前端模組化

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

前端模組化

當多人開發同一專案時,很容易就會產生命名衝突的問題,尤其是js檔案,任何的js引入順序的打亂都可能導致專案執行失敗,為了解決命名衝突的問題,在es6之前,可以使用函式閉包來解決這個問題。即可能像這樣 function 這樣雖然可以解決命名衝突的問題,但也使得 的復用性變得極差,因為其它的檔案將無法再...