[[191009]]

隨著大數(shù)據(jù)將各行各業(yè)的用戶、方案提供商、服務(wù)商、運(yùn)營(yíng)商以及整個(gè)生態(tài)鏈上游廠商融合到一個(gè)大環(huán)境中，大數(shù)據(jù)應(yīng)用前端開發(fā)變得越來越復(fù)雜。最早JS(javascript)需求簡(jiǎn)單，是一種面向過程的寫法，也就是寫函數(shù)，后來引入面向?qū)ο蟮拈_發(fā)思想，到現(xiàn)在寫成類。隨著應(yīng)用程序的增多，JS代碼復(fù)雜度越來越高，如何管理、組織、優(yōu)化成為擺在企業(yè)技術(shù)部門面前的一個(gè)現(xiàn)實(shí)問題。

模塊化開發(fā)并不新鮮，但在 國內(nèi)Web 領(lǐng)域，無論是前端開發(fā)還是新生崗位，都保留著比較落后的編碼習(xí)慣。直到近年，隨著各種前端框架的推廣和流行，模塊化開發(fā)理念才被廣泛接受和應(yīng)用。本文將從實(shí)際項(xiàng)目中遇到問題出發(fā)，講述模塊化可以解決JS代碼中的哪些問題，以及如何使用 Sea.js 進(jìn)行前端模塊化開發(fā)。

惱人的命名沖突

在項(xiàng)目開發(fā)過程中，我們通常會(huì)將一些通用的、底層的功能抽象出來，獨(dú)立成一個(gè)個(gè)函數(shù)，一種面向過程的寫法，并像模像樣地把這些函數(shù)統(tǒng)一放在 base.js 里。需要時(shí)，引入該文件即可。這是一個(gè)很好的編碼習(xí)慣，通用功能被封裝成一個(gè)便利的工具包，方便以后使用。

但這一方式有個(gè)致命缺點(diǎn)，就是它只適用于團(tuán)隊(duì)人數(shù)較少時(shí)，如果人數(shù)不斷增多，就會(huì)出現(xiàn)命名沖突、函數(shù)被覆蓋等問題。如何解決?我們發(fā)現(xiàn)，如果借鑒后端語言命名空間的方式，將前端也引入命名空間來組織函數(shù)，通過命名空間，就能緩解沖突。但這一方式同時(shí)也帶來了另一問題，就是為了調(diào)用一個(gè)簡(jiǎn)單的方法，需要記住很長(zhǎng)的命名空間，結(jié)果就是代碼量上去了，增加了系統(tǒng)記憶負(fù)擔(dān)。

煩瑣的文件依賴

另一個(gè)問題，基于 base.js編寫的前端通用函數(shù)庫，節(jié)省了重復(fù)建設(shè)時(shí)間。但當(dāng)項(xiàng)目團(tuán)隊(duì)中的A某某調(diào)用到某個(gè)通用函數(shù)后，頁面總是提示錯(cuò)誤。經(jīng)過排查，發(fā)現(xiàn)原因是頁面沒有引入base.js，進(jìn)而導(dǎo)致頁面無法正常工作，這是在做前端開發(fā)時(shí)經(jīng)常遇到的問題。如果在項(xiàng)目初期，則上面的文件依賴還在可控范圍內(nèi)，但當(dāng)項(xiàng)目逐漸推進(jìn)，越來越復(fù)雜時(shí)，眾多文件之間的依賴就會(huì)讓人抓狂。

之所以出現(xiàn)上面問題，是因?yàn)槲募蕾嚊]有很好的管理起來。在前端頁面里，大部分腳本的正常運(yùn)行還是目前依舊是通過人為檢測(cè)代碼的方式來保證。當(dāng)團(tuán)隊(duì)較小時(shí)，這一方式不會(huì)出現(xiàn)什么問題。但當(dāng)團(tuán)隊(duì)越來越大，業(yè)務(wù)越來越復(fù)雜后，這一問題就會(huì)凸顯，而依賴問題如果不解決，為后續(xù)工作展開帶來許多問題。

Sea.js解決兩大困擾

Sea.js 是一個(gè)成熟的開源項(xiàng)目，目標(biāo)是給前端開發(fā)提供簡(jiǎn)單、***的模塊化開發(fā)體驗(yàn)。

使用 Sea.js編寫JS文件時(shí)，需要遵守 CMD模塊定義規(guī)范。一個(gè)文件就是一個(gè)模塊，通過define來定義模塊， exports 向外提供接口(define、exports、require都可簡(jiǎn)單理解為Sea.js中的語法關(guān)鍵字)。

通過 require('./base.js') 可以拿到 base.js 中通過 exports 暴露的接口。這是一項(xiàng)簡(jiǎn)單的工作，作為前端工程師，對(duì) CSS這一代碼并不陌生:

@import url("base.css");

Sea.js 增加的 require 語法關(guān)鍵字，就如 CSS 文件中的 @import 一樣，給我們的源碼賦予了依賴引入功能。如果你是后端開發(fā)工程師，對(duì)這一方式更不會(huì)陌生，Java、Python、C# 等語言中，都有 include、import 等功能。通過這一方式，在頁面中使用 base.js 將變得非常簡(jiǎn)單。

Sea.js是如何解決上面遇到的兩個(gè)問題的呢?

首先，利用 exports 暴露接口意味著不需要命名空間，更不需要全局變量。這是一種徹底解決命名沖突的方案。

其次，通過 require 引入依賴，可以讓依賴內(nèi)置，開發(fā)者只需關(guān)心當(dāng)前模塊的依賴，其他事情 Sea.js 會(huì)自動(dòng)處理好。對(duì)模塊開發(fā)者來說，這是一種很好的關(guān)注度分離，可以讓編碼人員專注于自己的模塊。

除了可以解決命名沖突和依賴管理問題，使用 Sea.js 進(jìn)行模塊化開發(fā)還可以帶來以下好處：

1.模塊的版本管理。通過簡(jiǎn)單配置，可以比較輕松地實(shí)現(xiàn)模塊的版本管理。

2.提高可維護(hù)性。模塊化可以讓每個(gè)文件的職責(zé)單一，有利于代碼維護(hù)。

3.前端性能優(yōu)化。Sea.js使用的異步加載模塊，對(duì)提高頁面性能非常有益。

模塊化開發(fā)給前端編碼帶來了解決數(shù)據(jù)量急劇增加所產(chǎn)生問題的新思路和方法，Sea.js在編碼中的應(yīng)用，不僅減輕了編碼人員的工作量，也大大提升了頁面性能，合理利用這一技術(shù)，對(duì)前端編碼人員大有裨益。