為什么使用 Sea.js ？

Sea.js追求簡單，自然的代碼編寫和組織，具有以下核心功能：

簡單友好的模塊定義規范：Sea.js遵循CMD規范，可以編寫Node.js等模塊代碼。自然直觀的代碼組織：依賴自動加載，簡單明了的配置，讓我們享受編碼的樂趣。

Sea.js還提供了通用插件，這些插件對開發調試和性能優化非常有用，并且具有豐富且可擴展的接口。

兼容性

Sea.js具有與所有主流瀏覽器兼容的全面測試用例：

Chrome 3+ Firefox 2+ Safari 3.2+ Opera 10+ IE 5.5+

Sea.js在Mobile端運行，包括Hybrid模式應用程序。理論上，Sea.js可以在任何瀏覽器引擎上運行

隨著互聯網的快速發展，前端開發變得越來越復雜。本文將從實際項目中遇到的問題入手，討論模塊化可以解決的問題以及如何使用Sea.js進行前端的模塊化開發。

惱人的命名沖突

我們從一個簡單的習慣開始。當我做項目時，我經常將一些常見的低級函數抽象為單獨的函數，例如

函數each（arr）{//implementation code} function log（str）{//implementation code}

并將這些函數放在util.js中就像一個體面的。如果需要，可以引入該文件。這一切都很順利，我的同事們很感激我提供了這么方便的工具包。

在團隊變得越來越大之前，有些人開始抱怨。

Xiao Yang：我想定義一個遍歷對象的每個方法，但是已經定義了一個頭文件中的util.js。我只能調用eachObject，所以我很無奈。

小高：我已經定制了一個日志方法。為什么小明寫的代碼有問題？誰會幫助我。

投訴越來越多。經過激烈的討論，團隊決定引用Java并引入命名空間來解決它。因此util.js中的代碼變為

Var org={}; org.CoolSite={}; org.CoolSite.Utils={}; org.CoolSite.Utils.each=function（arr）{//implementation code}; org.CoolSite.Utils.log=function （str）{//實現代碼};

不要認為上述代碼是為了撰寫本文而故意編造的。名稱空間的概念在前端進行，雅虎的YUI2項目是第一個推出的項目。下面是一個真實的代碼，一個來自Yahoo!的開源項目。

if（org.cometd.Utils.isString（response））{return org.cometd.JSON.fromJSON（response）;} if（org.cometd.Utils.isArray（response））{return response;}

通過命名空間，它可以真正緩解沖突。但每當我看到上面的代碼時，我都忍不住要充滿同情。為了調用一個簡單的方法，你需要記住這么長的命名空間，這會增加內存負擔并剝奪很多編碼的樂趣。

作為前端行業的基準，YUI團隊決心解決這個問題。 YUI3項目中引入了一個新的命名空間機制。

YUI（）。use（'node'，function（Y）{//加載Node模塊//var foo=Y.one（'＃foo'）;}）;

YUI3通過沙箱機制解決了名稱空間過長的問題。但是，它也帶來了新的問題。

YUI（）。use（'a'，'b'，function（Y）{Y.foo（）; //模塊a或b提供的foo方法是什么？//如果模塊a和b都提供了foo方法，如何避免沖突？}）;

看似簡單的命名沖突，實際解決方案并不簡單。如何更優雅地解決它？我們先來看看另一個常見問題。

麻煩的文件依賴

繼續上面的故事。基于util.js，我開始在UI層開發通用組件，以便項目團隊的同事不必重新創建輪子。

最受歡迎的組件之一是dialog.js，它易于使用。

但無論我如何編寫文檔，以及電子郵件的宣布程度如何，總會有同事問為什么dialog.js有問題。通過一些調查，經常發現錯誤的原因是

在dialog.js之前沒有引入Util.js，所以dialog.js不起作用。也不要以為上面的故事是虛構的。在我留下的公司中，仍然有類似的腳本被報道，特別是在各種快速制作營銷頁面中。

上述文件依賴性仍在可控范圍內。隨著項目變得越來越復雜，許多文件之間的依賴往往令人沮喪。我相信，以下問題每天都會發生。

環球集團更新了前端基類庫，但很難推廣全站點升級。該業務組希望使用新的通用組件，但發現無法使用幾行代碼完成。舊產品需要新功能，最終評估只能繼續基于舊類庫開發。該公司整合其業務，并將兩個產品線合并。事實證明，前端代碼沖突。

上述許多問題都是由于文件依賴性得不到很好的管理。在前端頁面中，大多數腳本的依賴性仍然由人類肉體保證。當團隊很小時，這不會是一個問題。隨著團隊規模的擴大和公司業務變得更加復雜，如果不解決依賴性問題將成為一個大問題。

文件依賴性目前在大多數類庫框架中，例如外部YUI3框架，國內KISSY和其他庫，這些庫目前通過配置解決。

YUI.add（'my-module'，function（Y）{//.}，'0.0.1'，{required: ['node'，'event']}）;

上述代碼通過要求等指定當前模塊的依賴性。這可以在很大程度上解決依賴問題，但不夠優雅。當有很多模塊且依賴性很復雜時，繁瑣的配置會帶來很多隱患。

命名沖突和文件依賴性是前端開發過程中的兩個經典問題。讓我們看看如何通過模塊化開發來解決它。為了便于描述，我們使用Sea.js作為模塊化開發框架。

使用Sea.js來解決

Sea.js是一個成熟的開源項目，其核心目標是為前端開發提供簡單，極端模塊化的開發體驗。這里沒有太多介紹。如果您有興趣，可以訪問seajs.org上的官方文檔。

使用Sea.js時，您必須在編寫文件時遵循CMD（通用模塊定義）模塊定義規范。文件是一個模塊。上一個示例中的util.js變為

定義（function（require，exports）{exports.each=function（arr）{//implementation code}; exports.log=function（str）{//implementation code};}）;

可以通過導出在外部提供接口。這樣，dialog.js的代碼變為

定義（function（require，exports）{var util=require（'./util.js'）; exports.init=function（）{//implementation code};}）;

關鍵部分在這里！我們可以通過require（'。/util.js'）獲取util.js中導出的接口。這里的require可以被視為Sea.js添加到JavaScript語言的語法關鍵字。 require接口可用于獲取其他模塊提供的接口。

這實際上并不神奇。作為前端工程師，您必須熟悉CSS代碼。

@import url（'base.css'）;＃id {.} .class {.}

Sea.js添加了require語法關鍵字，就像CSS文件中的@import一樣，為我們的源代碼提供了依賴項導入功能。

如果您是后端開發工程師，那么您將不會感到陌生。 Java，Python，C＃等具有包含，導入和其他功能。 JavaScript語言本身具有類似的功能，但它仍處于草案階段，需要等到主流瀏覽器支持ES6標準。

這樣，在頁面上使用dialog.js將非常簡單。

首先，您應該在頁面中引入sea.js文件，該文件通常由頁眉控制，并且更新和維護也很方便。如果要在頁面中使用組件，只需通過seajs.use方法調用它。

仔細看看上面的代碼，我相信你已經看到了Sea.js的兩個好處：

通過導出公開接口。這意味著不需要命名空間，也不需要全局變量。這是一個完整的命名沖突解決方案。

通過require引入依賴項。這允許內置依賴項。開發人員只需要關心當前模塊的依賴關系，以及Sea.js將自動處理它的其他事情。對于模塊開發人員來說，這是一個很好的關注點分離，允許程序員更多地享受編碼。

摘要

除了解決命名沖突和依賴關系管理之外，使用Sea.js進行模塊化開發還可以帶來許多好處：

模塊的版本管理。使用別名配置和其他配置工具，使用構建工具實現模塊版本管理更容易。

提高可維護性。模塊化允許對每個文件負責，這對代碼維護非常有利。 Sea.js還提供了nocache，調試等插件，具有在線調試和其他功能，可以顯著提高效率。

前端性能優化。 Sea.js異步加載模塊，這對頁面性能非常有利。 Sea.js還提供插件，如組合和刷新，可用于調整服務器的頁面性能。

跨環境共享模塊。 CMD模塊定義規范與Node.js的模塊規范非常相似。 Sea.js的Node.js版本可以輕松地跨服務器和瀏覽器共享模塊。

模塊化開發并不新鮮，但在Web領域，前端開發是一項新工作，而且它始終處于原始大刀闊斧的時代。直到最近兩三年，隨著Dojo，YUI3，Node.js等社區的推廣和普及，前端模塊化開發理念逐漸普及。

前端的模塊化結構可分為兩大類。一個是由Dojo，YUI3和國內KISSY圖書館代表的大教堂模型。在大教堂模式中，所有組件都是顆粒狀和模塊化的，并且組件是分層分層和互鎖的。另一種是基于jQuery，RequireJS，國內Sea.js，OzJS和其他庫的市場模型。在市場模式中，所有組件彼此獨立并且具有單一責任。組件松散地耦合在一起并協同開發。

這兩種類型的模塊化構造方法具有應用場景。從長遠來看，小而美的更具寬容性和競爭力，更能夠形成一個充滿活力的生態系統。

簡而言之，模塊化可以為前端開發帶來許多好處。如果您尚未嘗試過，請先嘗試Sea.js.

標簽:＆amp; nbsp＆amp; nbsp沈陽前端開發＆amp; nbsp沈陽html5前端開發