什麼是模組化?模組化怎麼實現?

2021-10-08 04:31:54 字數 2772 閱讀 6737

前言 : 增加印象,留下腳印 ,忘記還可以翻一翻 奧利給。

1,什麼是模組化

公司裡乙個專案是有很多程式設計師一起開發的,例如 「多人運動」 這個專案

有程式設計師a ,程式設計師b ,程式設計師c

程式設計師a 寫了 aaa.js 裡面有幾千行 幾萬行**

程式設計師b 寫了 bbb.js 裡面有幾千行 幾萬行**

程式設計師c寫了 ccc.js 裡面有幾千行 幾萬行**

隨著前端越來越np,**量越來越多,那麼維護**就是一件很困難的事情

會出現 全域性變數同名問題,a程式設計師 var flag = ture;b程式設計師 var flag = false;

b程式設計師 加班到夜裡2點 找自己**也找不出問題,他不可能看a的**,那麼又是幾個晚上,

所以就有了模組化

模組化早期是用閉包體現出來的 使用模組作為出口

a程式設計師 匯出

var modulea =

(function()

// 小明

var name =

'小明'

var age =

22function

sum(num1, num2)

var flag =

true

if(flag)

obj.flag = flag;

obj.sum = sum;

return obj})

()

b程式設計師匯入

;

(function()

// 2.使用sum函式

console.

log(modulea.

sum(40,

50));

})()

隨著前端的發展,我們定義了很多模組規範

常見的有commonjs , cmd , amd , es6 modules

2,commonjs模組化實現(一點了解)

commonjs匯出:

commonjs匯入:

node.js 的 commonjs

這樣你是沒有用的需要有人給你解析 ,那麼怎麼做呢 看一下我另一篇文章

webpack模組化打包工具入門

我們現在去看一下es6模組化實現吧

3,es6 modules模組化實現匯入

var name =

'小明'

var age =

18var flag =

true

function

sum(num1, num2)

if(flag)

// 1.匯出方式一:

export

// 2.匯出方式二:

export

var num1 =

1000

;export

var height =

1.88

// 3.匯出函式/類

export

function

mul(num1, num2)

export

class

person

}//預設匯出 注意 只能寫乙個 你瀏覽器也只能乙個預設吧 不用我說原因了吧

export

default

function

(argument)

匯出

// 1.匯入的{}中定義的變數

import

from

"./aaa.js";if

(flag)

// 2.直接匯入export定義的變數

import

from

"./aaa.js"

;console.

log(num1)

;console.

log(height)

;// 3.匯入 export的function/class

import

from

"./aaa.js"

;console.

log(

mul(30,

50));

const p =

newperson()

;p.run(

)// 4.匯入 export default中的內容

import addr from

"./aaa.js"

;addr

('你好啊');

// 5.統一全部匯入

// import from "./aaa.js";

import

*as aaa from

'./aaa.js'

console.

log(aaa.flag)

;console.

log(aaa.height)

;

注意

這時候引用就不一樣了,上一下 index.html吧

type = 「module」 你的瀏覽器會幫你模組化的

什麼是模組化?模組化的好處

1.高內聚低耦合,有利於團隊作戰,當專案很複雜的時候,將專案劃分為子模組分給不同的人開發,最後再組合在一起,這樣可以降低模組與模組之間的依賴關係體現低耦合,模組又有特定功能體現高內聚。2.可重用,方便維護,模組的特點就是有特定功能,當兩個專案都需要某種功能的時候,我們定義乙個特定的模組來實現該功能,...

什麼是模組化?模組化的好處

什麼是模組化?j a 應用架構設計 模組化模式與 osgi 一書中對它的定義是 模組化是一種處理複雜系統分解為更好的可管理模組的方式。所謂的模組化開發就是封裝細節,提供使用介面,彼此之間互不影響,每個模組都是實現某一特定的功能。模組化開發的基礎就是函式。模組化開發使 耦合度降低,模組化的意義在於最大...

什麼是模組化,模組化的好處又是什麼?

模組化 模組化的好處 第一,把乙個系統分解成各個不同的子模組,不同的開發者專注於對其中某一模組的開發,一方面實現了勞 動的分工,另一方面也提高了自由軟體開發的效率。基於模組化的性質,每個模組在開發出來以後都可以通過乙個被稱作是核心的原系統進行資訊交流,發揮整個模組的功能,同時也並不會影響其他模組功能...