在理解模塊化的前提细层，我們要先弄明白什么是模塊腊嗡？
所謂的模塊，在變成中直白的說(shuō)域蜗，就是我們要將一個(gè)復(fù)雜的程序依據(jù)一定的規(guī)則或者說(shuō)規(guī)范封裝成幾個(gè)快(文件)缘屹，并將它們進(jìn)行組合在一起
快的內(nèi)部數(shù)據(jù)/實(shí)現(xiàn)? ? ?是私有的凛剥，我們只是向外暴露一些接口，讓其與外部其他的模塊進(jìn)行通信轻姿。
那么一個(gè)模塊的組成由那些部分呢犁珠？
首先是數(shù)據(jù)逻炊，我們?cè)诮M成模塊的時(shí)候必定要有數(shù)據(jù)為依據(jù)的，數(shù)據(jù)就是模塊的內(nèi)部屬性犁享，我們姑且可以這么認(rèn)為余素，而我們是通過(guò)什么來(lái)操作數(shù)據(jù)的呢？我們操作數(shù)據(jù)炊昆，也就是它的內(nèi)部屬性時(shí)通過(guò)它里面的函數(shù)來(lái)操作的桨吊。
在模塊化的定義中，我們必須要明白的是凤巨，我們將項(xiàng)目模塊化之后视乐，整個(gè)項(xiàng)目也就是一個(gè)模塊化的項(xiàng)目，編碼的時(shí)候就要按照模塊化一個(gè)一個(gè)的進(jìn)行編碼磅甩。
那么為什么要使用模塊化炊林？也就是說(shuō)使用模塊化的好處有哪些呢？
首先卷要，模塊化封裝性好渣聚，封裝的意義我們也知道，其實(shí)還有個(gè)概念就是僧叉，數(shù)據(jù)的不變性奕枝，我們可以讓你操作數(shù)據(jù)，但是不允許隨意改變我們?cè)瓉?lái)數(shù)據(jù)的內(nèi)容瓶堕。個(gè)人姑且這么認(rèn)為吧隘道。
第二，復(fù)用性好郎笆，我們可以在多個(gè)場(chǎng)合和情況下繼續(xù)使用谭梗，這樣我們就不會(huì)寫(xiě)太多一樣的代碼，造成浪費(fèi)時(shí)間浪費(fèi)空間宛蚓。代碼不冗余激捏。
第三，擴(kuò)展性好凄吏，也是和上面一樣的道理了远舅。
到這里，明白了模塊的具體意義之后痕钢，那么我們web前端中的模塊規(guī)范有哪些呢图柏？有好幾種，這里我們只需要明白commonJS任连、ES6這兩個(gè)蚤吹。AMD、CMD暫時(shí)就不管咯随抠。
commonJS中距辆，主要運(yùn)用在node.js服務(wù)器余佃，瀏覽器端的打包工具時(shí)Browserify暮刃。它的暴露模塊的方式是exports跨算。export.xxx = value。module.exports = value椭懊。引入模塊則是利用require ---- > var= module = require('模塊名/模塊相對(duì)路徑')
上面的都是基本語(yǔ)法诸蚕，那么我們其實(shí)應(yīng)該搞清楚，commonjs在暴露和引入模塊的時(shí)候都發(fā)生在什么時(shí)候氧猬？
在我們node運(yùn)行的時(shí)候背犯，會(huì)動(dòng)態(tài)同步的引入我們定義好的需要的模塊，這很中要盅抚，因?yàn)閚ode運(yùn)行之后漠魏，在瀏覽器端實(shí)現(xiàn)的時(shí)候會(huì)對(duì)模塊進(jìn)行編譯/轉(zhuǎn)譯/打包的處理。這時(shí)候是Browseify工作的事情了妄均。在B工作的時(shí)候柱锹，已經(jīng)將依賴(lài)的模塊包含進(jìn)來(lái)，運(yùn)行的時(shí)候生成打包的js文件丰包，我們?cè)谶\(yùn)行的時(shí)候不需要在從遠(yuǎn)程引入相關(guān)依賴(lài)的模塊了禁熏。
ES6規(guī)范中，ES6內(nèi)置了模塊化的實(shí)現(xiàn)邑彪，基本語(yǔ)法定義的暴露是export瞧毙，相對(duì)于commonjs來(lái)說(shuō)表面上就是少了個(gè)S而已。不同的是引入采用的是import寄症。
定義暴露模塊分為：默認(rèn)暴露宙彪，一次暴露多個(gè)
export default + 對(duì)象 ---->為默認(rèn)暴露
export var xxx? = value1、export let yyy = value2 -----> var xxx = value1 有巧、let yyy = value2? ---->export {xxx,yyy}
利用import 引入 默認(rèn)模塊import xxx from '模塊路徑/模塊名'
利用import引入其他模塊import {xxx,yyy} from '模塊路徑/模塊名'释漆，這邊{}內(nèi)采用的是ES6中的解構(gòu)賦值。這里不詳細(xì)說(shuō)了剪决。
在使用ES6的時(shí)候在瀏覽器端運(yùn)行也需要利用Broeserify來(lái)進(jìn)行打包處理灵汪。另外還有一點(diǎn)需要注意的是。在使用ES6的時(shí)候需要將其轉(zhuǎn)換為ES5的語(yǔ)法才能運(yùn)行柑潦。因?yàn)槟壳斑€有些瀏覽器不能ES6的語(yǔ)法享言。谷歌瀏覽器可以支持。先說(shuō)到這里好了渗鬼。
