這篇文章給大家介紹前端模塊化要解決的兩個(gè)問(wèn)題分別是什么,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
專注于為中小企業(yè)提供網(wǎng)站制作、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)泉山免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長(zhǎng),幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
前言
前端模塊化,主要是解決兩個(gè)問(wèn)題“命名空間沖突”,“文件依賴管理”。
坑___命名空間沖突
我自己測(cè)試好的代碼和大家合并后怎么起沖突了?
頁(yè)面腳本的變量或函數(shù)覆蓋了公有腳本的。
坑___文件依賴管理
明明項(xiàng)目需要引入的包都引進(jìn)來(lái)了怎么還報(bào)缺少包?
手動(dòng)管理依賴,有天要更換某個(gè)插件,要深入代碼內(nèi)部進(jìn)行修改
如下圖,顯示的代碼加載,依賴關(guān)系復(fù)雜。在F.js中,分不清某個(gè)變量是來(lái)自C.js,還是E.js
兩次加載同一個(gè)模塊。比如引入了兩遍JQ
其他的坑
為了實(shí)現(xiàn)腳本復(fù)用,將一個(gè)很大的公用public文件引入各個(gè)頁(yè)面中,其中的某些函數(shù),只有個(gè)別頁(yè)面用到。
某個(gè)功能的函數(shù)群函數(shù),與另一個(gè)功能的函數(shù)群擺在一起,使用注釋來(lái)分隔。
目前解決的方法是:模塊化
命名空間:各個(gè)模塊的命名空間獨(dú)立。A模塊的變量x不會(huì)覆蓋B模塊的變量x。
模塊的依賴關(guān)系:通過(guò)模塊管理工具如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)起來(lái)超乎你的想象。適合一些小型的封裝,如一些配置。
二、立即執(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ū)分私有成員和公有成員。公有變量和方法,和之前一樣可以直接通過(guò)module.name的方式修改。私有變量和方法,是無(wú)法訪問(wèn)的,除非給你個(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è)模塊。
四、其他的方式
放大模式等是以往用來(lái)管理大型模塊,進(jìn)行文件拆分的方法?,F(xiàn)在webpack等模塊化工具都很完善的情況下,已經(jīng)顯得有點(diǎn)落后了。就不介紹了。
告別刀耕火種的時(shí)代模塊化構(gòu)建工具(解決依賴管理)
我了解js模塊是從立即執(zhí)行函數(shù)開(kāi)始的。但是等到真正使用構(gòu)建工具的時(shí)候,卻發(fā)現(xiàn)業(yè)界采用的模塊化方案,卻并非是一個(gè)一個(gè)由立即函數(shù)+閉包形成的集群。
而是用了諸如AMD/CMD/CommonJS/ES6模塊等等模塊化實(shí)現(xiàn)。
這里面的原因可能有這幾個(gè),一,閉包的性能問(wèn)題。二,當(dāng)模塊增多的時(shí)候,需要解決模塊間的依賴管理問(wèn)題。
關(guān)于依賴管理,目前項(xiàng)目里碰到了幾個(gè)不舒服的地方:
僅此一圖,無(wú)須多言
HTML中引入了兩遍的jq,導(dǎo)致腳本報(bào)錯(cuò)。
有一個(gè)公用腳本,包含了N多的公用模塊。有些頁(yè)面明明只用到了一個(gè)模塊,也必須全部加載一遍。
因此,必須使用模塊化管理工具!
幾個(gè)概念
包管理工具: 安裝、卸載、更新、查看、搜索、發(fā)布包。比如你需要安裝個(gè)jq等,通過(guò)npm來(lái)安裝。npm里有依賴管理,假如jq或者說(shuō)express升級(jí)了,原來(lái)代碼不能用了。幫助你解決這個(gè)問(wèn)題的就是npm。
模塊化構(gòu)建工具:webpack/requireJS/seaJS,等是用來(lái)組織前端模塊的構(gòu)建工具(加載器)。通過(guò)使用模塊化規(guī)范(AMD/CMD/CommonJS/es6)的語(yǔ)法來(lái)實(shí)現(xiàn)按需加載。舉個(gè)栗子,如果有一天你不用維護(hù)一個(gè)很長(zhǎng)很長(zhǎng)的公用腳本文件,這得感謝它。
模塊化規(guī)范::AMD/CMD/CommonJS/es6模塊等等規(guī)范,規(guī)范了如何來(lái)組織你的代碼。一般這種方式寫(xiě)的代碼瀏覽器不認(rèn),需要用模塊化構(gòu)建工具來(lái)打包編譯成瀏覽器可以識(shí)別的文件。
從我的表格里,可以看出我的推薦搭配———— npm +webpack + es6模塊。
理由如下:
npm與bower比較:
原來(lái)bower的使用優(yōu)勢(shì)就是適合前端模塊管理,而npm被視為只適合后端的管理。但是隨著webpack的流行,這個(gè)已經(jīng)毫無(wú)疑問(wèn)是npm勝出了。npm+webpack,可以實(shí)現(xiàn)良好的前端模塊管理。
webpack和requireJS比較:
幾種模塊化規(guī)范比較:
所以就決定是你了! npm + webpack + es6模塊。
關(guān)于前端模塊化要解決的兩個(gè)問(wèn)題分別是什么就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
文章名稱:前端模塊化要解決的兩個(gè)問(wèn)題分別是什么
文章網(wǎng)址:http://muchs.cn/article42/ihdsec.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站收錄、品牌網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航、網(wǎng)站策劃、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)