前端模塊化——技術(shù)選型

Doyle 發(fā)布于2019-08-20 11:10 / 2299人閱讀

摘要：前言前端模塊化，主要是解決兩個(gè)問題命名空間沖突，文件依賴管理。目前解決的方法是模塊化命名空間各個(gè)模塊的命名空間獨(dú)立。模塊化構(gòu)建工具，等是用來組織前端模塊的構(gòu)建工具加載器。

前言

前端模塊化，主要是解決兩個(gè)問題——“命名空間沖突”，“文件依賴管理”。

坑___命名空間沖突

我自己測(cè)試好的代碼和大家合并后怎么起沖突了？

頁(yè)面腳本的變量或函數(shù)覆蓋了公有腳本的。

坑___文件依賴管理

明明項(xiàng)目需要引入的包都引進(jìn)來了怎么還報(bào)缺少包？

手動(dòng)管理依賴，有天要更換某個(gè)插件，要深入代碼內(nèi)部進(jìn)行修改

如下圖，顯示的代碼加載，依賴關(guān)系復(fù)雜。在F.js中，分不清某個(gè)變量是來自C.js，還是E.js

兩次加載同一個(gè)模塊。比如引入了兩遍JQ

其他的坑

為了實(shí)現(xiàn)腳本復(fù)用，將一個(gè)很大的公用public文件引入各個(gè)頁(yè)面中，其中的某些函數(shù)，只有個(gè)別頁(yè)面用到。

某個(gè)功能的函數(shù)群函數(shù)，與另一個(gè)功能的函數(shù)群擺在一起，使用注釋來分隔。

目前解決的方法是:模塊化

命名空間：各個(gè)模塊的命名空間獨(dú)立。A模塊的變量x不會(huì)覆蓋B模塊的變量x。

模塊的依賴關(guān)系:通過模塊管理工具如webpack/requireJS/browserify等進(jìn)行管理。

模塊化的基本原理——解決命名空間沖突

JavaScript的缺陷，首當(dāng)其沖就是全局變量。這使得每想命名一個(gè)變量的時(shí)候都要三思又三思，生怕上方無(wú)窮遠(yuǎn)的地方有一個(gè)同事些的代碼和自己沖突。以下是一些防范方法

一、使用命名空間
代碼如下：

//定義
var module = {
    name: "rouwan",
    sayName:function(){
        console.log(this.name)
    }
}
//使用
var a = module.name;
console.log(a)

總結(jié)：直接修改name不會(huì)影響module.name，一定程度保護(hù)了命名空間。有兩個(gè)缺點(diǎn)，一，外部還是可以修改module的屬性和方法。二，命名空間有時(shí)長(zhǎng)起來超乎你的想象。適合一些小型的封裝，如一些配置。

二、立即執(zhí)行函數(shù) + 閉包（實(shí)現(xiàn)模塊的基本方法）
立即函數(shù)可以創(chuàng)建作用域，閉包則可以形成私有變量和函數(shù)

//創(chuàng)建
var module = (function(){
                var privateName = "inner";            //私有變量
                var privateFunc = function(){        //私有函數(shù)
                    console.log("私有函數(shù)")
                }

                return {                            
                    name: "rouwan",                    //公有屬性
                    sayName:function(){                //公有函數(shù)
                        console.log(this.name)
                    }
                }
            })()
//使用
module.sayName();    //"rouwan"

總結(jié)：這是目前比較常用的模塊定義方式，可以區(qū)分私有成員和公有成員。公有變量和方法，和之前一樣可以直接通過module.name的方式修改。私有變量和方法，是無(wú)法訪問的，除非給你個(gè)修改私有成員的公有方法。

三、在上述基礎(chǔ)上，引入其他模塊

//定義
var module1 = (function(mod){
                var privateName = "inner1";
                var privateFunc = function(){
                    console.log("私有函數(shù)1")
                }

                return {
                    name : "rouwan1",
                    sayName: function(){
                        console.log(this.name)
                    },
                    anotherName:mod.name,            //另一個(gè)模塊上的公有參數(shù)
                    sayAnotherName:mod.sayName       //另一個(gè)模塊上的公有方法
                }

            })(anotherModule)                        //引入了另一個(gè)模塊
//使用
module1.sayOtherName()

總結(jié)：在一個(gè)模塊中可以引入另一個(gè)模塊。

四、其他的方式
放大模式等是以往用來管理大型模塊，進(jìn)行文件拆分的方法?，F(xiàn)在webpack等模塊化工具都很完善的情況下，已經(jīng)顯得有點(diǎn)落后了。就不介紹了。

告別刀耕火種的時(shí)代——模塊化構(gòu)建工具（解決依賴管理）

我了解js模塊是從立即執(zhí)行函數(shù)開始的。但是等到真正使用構(gòu)建工具的時(shí)候，卻發(fā)現(xiàn)業(yè)界采用的模塊化方案，卻并非是一個(gè)一個(gè)由立即函數(shù)+閉包形成的集群。
而是用了諸如AMD/CMD/CommonJS/ES6模塊等等模塊化實(shí)現(xiàn)。
這里面的原因可能有這幾個(gè)，一，閉包的性能問題。二，當(dāng)模塊增多的時(shí)候，需要解決模塊間的依賴管理問題。
關(guān)于依賴管理，目前項(xiàng)目里碰到了幾個(gè)不舒服的地方：

僅此一圖，無(wú)須多言

HTML中引入了兩遍的jq，導(dǎo)致腳本報(bào)錯(cuò)。

有一個(gè)公用腳本，包含了N多的公用模塊。有些頁(yè)面明明只用到了一個(gè)模塊，也必須全部加載一遍。

因此，必須使用模塊化管理工具!

幾個(gè)概念

包管理工具: 安裝、卸載、更新、查看、搜索、發(fā)布包。比如你需要安裝個(gè)jq等，通過npm來安裝。npm里有依賴管理，假如jq或者說express升級(jí)了，原來代碼不能用了。幫助你解決這個(gè)問題的就是npm。
模塊化構(gòu)建工具：webpack/requireJS/seaJS，等是用來組織前端模塊的構(gòu)建工具（加載器）。通過使用模塊化規(guī)范（AMD/CMD/CommonJS/es6）的語(yǔ)法來實(shí)現(xiàn)按需加載。舉個(gè)栗子，如果有一天你不用維護(hù)一個(gè)很長(zhǎng)很長(zhǎng)的公用腳本文件，這得感謝它。
模塊化規(guī)范：：AMD/CMD/CommonJS/es6模塊等等規(guī)范，規(guī)范了如何來組織你的代碼。一般這種方式寫的代碼瀏覽器不認(rèn)，需要用模塊化構(gòu)建工具來打包編譯成瀏覽器可以識(shí)別的文件。

從我的表格里，可以看出我的推薦搭配———— npm +webpack + es6模塊。
理由如下：
npm與bower比較：

原來bower的使用優(yōu)勢(shì)就是適合前端模塊管理，而npm被視為只適合后端的管理。但是隨著webpack的流行，這個(gè)已經(jīng)毫無(wú)疑問是npm勝出了。npm+webpack，可以實(shí)現(xiàn)良好的前端模塊管理。

webpack和requireJS比較：

幾種模塊化規(guī)范比較：

所以就決定是你了！ npm + webpack + es6模塊。

入門實(shí)踐在我的另一篇文章 npm + webpack + es6 初體驗(yàn)

GPU云服務(wù)器云服務(wù)器技術(shù)選型阿里云服務(wù)器技術(shù)選型前端模塊化前端模塊

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80432.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Doyle

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Java設(shè)計(jì)模式之（二）——工廠模式

閱讀 3031·2021-11-18 10:07
數(shù)據(jù)庫(kù)平滑遷移方案與實(shí)踐分享

閱讀 3781·2021-11-17 17:00
iONcloud十一月：圣何塞優(yōu)化/洛杉磯月付11.11美元年付111.1美元

閱讀 2111·2021-11-15 18:01
身價(jià)過億的女總裁對(duì)小碼農(nóng)說你按鍵會(huì)了嗎

閱讀 938·2021-10-11 10:58
??Python實(shí)用工具之制作證件照（有界面、附源碼、贊關(guān)藏）??

閱讀 3390·2021-09-10 10:50
hncloud，中國(guó)香港云服務(wù)器測(cè)評(píng)分享，BGP國(guó)際多線+雙向CN2極速直連

閱讀 3465·2021-08-13 15:05
css盒子模型

閱讀 1234·2019-08-30 15:53
移動(dòng)端軟鍵盤彈出時(shí)文本輸入框下沉、獲取焦點(diǎn)并彈出軟鍵盤

閱讀 2659·2019-08-29 13:01

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

前端模塊化——技術(shù)選型

相關(guān)文章

方案設(shè)計(jì)--如何看待前端框架選型 ?

《從零構(gòu)建前后分離的web項(xiàng)目》：前端了解過關(guān)了嗎？前端基礎(chǔ)架構(gòu)和硬核介紹

《從零構(gòu)建前后分離的web項(xiàng)目》：前端了解過關(guān)了嗎？前端基礎(chǔ)架構(gòu)和硬核介紹

《從零構(gòu)建前后分離的web項(xiàng)目》：前端了解過關(guān)了嗎？前端基礎(chǔ)架構(gòu)和硬核介紹

珠峰前端架構(gòu)師培養(yǎng)計(jì)劃

發(fā)表評(píng)論

0條評(píng)論

Doyle

男|高級(jí)講師

TA的文章

Java設(shè)計(jì)模式之（二）——工廠模式

數(shù)據(jù)庫(kù)平滑遷移方案與實(shí)踐分享

iONcloud十一月：圣何塞優(yōu)化/洛杉磯月付11.11美元年付111.1美元

身價(jià)過億的女總裁對(duì)小碼農(nóng)說你按鍵會(huì)了嗎

??Python實(shí)用工具之制作證件照（有界面、附源碼、贊關(guān)藏）??

hncloud，中國(guó)香港云服務(wù)器測(cè)評(píng)分享，BGP國(guó)際多線+雙向CN2極速直連

css盒子模型

移動(dòng)端軟鍵盤彈出時(shí)文本輸入框下沉、獲取焦點(diǎn)并彈出軟鍵盤

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

前端模塊化——技術(shù)選型

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！