[[191009]]

隨著大數據將各行各業的用戶、方案提供商、服務商、運營商以及整個生態鏈上游廠商融合到一個大環境中，大數據應用前端開發變得越來越復雜。最早JS(javascript)需求簡單，是一種面向過程的寫法，也就是寫函數，后來引入面向對象的開發思想，到現在寫成類。隨著應用程序的增多，JS代碼復雜度越來越高，如何管理、組織、優化成為擺在企業技術部門面前的一個現實問題。

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

惱人的命名沖突

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

但這一方式有個致命缺點，就是它只適用于團隊人數較少時，如果人數不斷增多，就會出現命名沖突、函數被覆蓋等問題。如何解決?我們發現，如果借鑒后端語言命名空間的方式，將前端也引入命名空間來組織函數，通過命名空間，就能緩解沖突。但這一方式同時也帶來了另一問題，就是為了調用一個簡單的方法，需要記住很長的命名空間，結果就是代碼量上去了，增加了系統記憶負擔。

煩瑣的文件依賴

另一個問題，基于 base.js編寫的前端通用函數庫，節省了重復建設時間。但當項目團隊中的A某某調用到某個通用函數后，頁面總是提示錯誤。經過排查，發現原因是頁面沒有引入base.js，進而導致頁面無法正常工作，這是在做前端開發時經常遇到的問題。如果在項目初期，則上面的文件依賴還在可控范圍內，但當項目逐漸推進，越來越復雜時，眾多文件之間的依賴就會讓人抓狂。

之所以出現上面問題，是因為文件依賴沒有很好的管理起來。在前端頁面里，大部分腳本的正常運行還是目前依舊是通過人為檢測代碼的方式來保證。當團隊較小時，這一方式不會出現什么問題。但當團隊越來越大，業務越來越復雜后，這一問題就會凸顯，而依賴問題如果不解決，為后續工作展開帶來許多問題。

Sea.js解決兩大困擾

Sea.js 是一個成熟的開源項目，目標是給前端開發提供簡單、***的模塊化開發體驗。

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

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

@import url("base.css");

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

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

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

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

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

1.模塊的版本管理。通過簡單配置，可以比較輕松地實現模塊的版本管理。

2.提高可維護性。模塊化可以讓每個文件的職責單一，有利于代碼維護。

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

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