前端自動(dòng)化構(gòu)建,前端工程化,模塊化,組件化,

1:前端自動(dòng)構(gòu)建工具webpack等,是為了前端的規(guī)范化,模塊化,提高代碼質(zhì)量

在開發(fā)階段:維護(hù)各種編譯,檢測(cè),語法,JS,Css壓縮,Less語法,語法降級(jí),圖片優(yōu)化處理等插件,進(jìn)行統(tǒng)一的管理;

在發(fā)布階段:進(jìn)行代碼編譯,錯(cuò)誤檢查,代碼壓縮,空格,注釋處理,測(cè)試,發(fā)布

2:前端工程化

前端工程化是根據(jù)業(yè)務(wù)的特點(diǎn),將前端的開發(fā)流程的規(guī)范化,標(biāo)準(zhǔn)化,它包括? 開發(fā)流程,基礎(chǔ)選型,代碼規(guī)范,構(gòu)建發(fā)布等,用于提升前端工程師的的開發(fā)的開發(fā) 效率和代碼質(zhì)量

3:前端模塊化

模塊化開發(fā)的思想,commonJs,AMD,CMD,ES6等模塊化思想

后端模塊化:

commonJs:不支持瀏覽器端,是后端nodejs用來進(jìn)行模塊化開發(fā)的,每一個(gè)js文件里面是一個(gè)模塊,里面的變量和方法否是獨(dú)立的,對(duì)外提供統(tǒng)一的的調(diào)用方法;

每一個(gè)js獨(dú)立一個(gè)文件,通過module.export={name:name}對(duì)外提供訪問的接口,外部則需要通過require('./js路徑')來進(jìn)行導(dǎo)出訪問;

前端模塊化:

AMD,需要配合require.js,一起使用,來支持瀏覽器

CMD,需要配合seajs.js,來一起使用,來支持瀏覽器

ES6,每一個(gè)模塊的js單獨(dú)放置一個(gè)js文件,通過export {name:name}來對(duì)外提供js的接口,外部的js通過,import name from './js地址'來進(jìn)行訪問,需要通過babel的降級(jí)處理,兼容瀏覽器

4:前端組件化

前端組件化:從ui設(shè)計(jì)的思想上,每一個(gè)交互部分,例如,導(dǎo)航,輪播圖,側(cè)邊導(dǎo)航進(jìn)行管理,每一個(gè)組件放在一個(gè)文件夾里面,文件家里面的組件不依賴于外部的代碼,可以重復(fù)利用;