前端模組化

2021-10-09 18:32:53 字數 1491 閱讀 9456

1. 前端模組化的必需性:

• **原先只需要寫在標籤中即可

• 隨著**量的增多,同一程式需要有多個人來寫

• 我們將**組織在多個js檔案中,但會存在「全域性變數同名問題」和「js檔案的順序依賴問題」

• 我們希望在幾個檔案中的變數可以相互關聯使用而不衝突

因此,使用模組作為出口:

a. 建立匿名函式;

(function())()

b. 在匿名函式內部,定義乙個物件

c. 給物件新增各種需要暴露到外面的屬性和方法

d. 最後將物件返回,並在外面使用乙個moudlea接受

舉例:

《小明.js>:

var modulea =

(function()

//小明

var name=

'小明'

var age=

22//定義了乙個方法

function

sum(num1,num2)

//flag的定義和判斷

var flag =

true

if(flag)

obj.flag=flag;

obj.sum=sum;

return obj})

()

《小紅.js>:

var moduleb =

(function()

var name=

'小紅'

var flag=

false

console.

log(name)

;

obj.flag = flag

return obj})

()

:

<

!doctype html>

"en"

>

"utf-8"

>

document<

/title>

<

/head>

"小明.js"

>

<

/script>

"小紅.js"

>

<

/script>

<

/body>

<

/html>

結果顯示:

當小c想要使用小明的flag:

:

(

function()

// 2.使用sum函式

console.

log(modulea.

sum(40,

50));

})()

常用的模組化範例:commonjs、amd、cmd、也有es6的modules

前端模組化

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

前端模組化

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

前端模組化

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