為什么使用 Sea.js ？

Sea.js追求簡(jiǎn)單，自然的代碼編寫(xiě)和組織，具有以下核心功能：

簡(jiǎn)單友好的模塊定義規(guī)范：Sea.js遵循CMD規(guī)范，可以編寫(xiě)Node.js等模塊代碼。自然直觀的代碼組織：依賴自動(dòng)加載，簡(jiǎn)單明了的配置，讓我們享受編碼的樂(lè)趣。

Sea.js還提供了通用插件，這些插件對(duì)開(kāi)發(fā)調(diào)試和性能優(yōu)化非常有用，并且具有豐富且可擴(kuò)展的接口。

兼容性

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

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

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

隨著互聯(lián)網(wǎng)的快速發(fā)展，前端開(kāi)發(fā)變得越來(lái)越復(fù)雜。本文將從實(shí)際項(xiàng)目中遇到的問(wèn)題入手，討論模塊化可以解決的問(wèn)題以及如何使用Sea.js進(jìn)行前端的模塊化開(kāi)發(fā)。

惱人的命名沖突

我們從一個(gè)簡(jiǎn)單的習(xí)慣開(kāi)始。當(dāng)我做項(xiàng)目時(shí)，我經(jīng)常將一些常見(jiàn)的低級(jí)函數(shù)抽象為單獨(dú)的函數(shù)，例如

函數(shù)each（arr）{//implementation code} function log（str）{//implementation code}

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

在團(tuán)隊(duì)變得越來(lái)越大之前，有些人開(kāi)始抱怨。

Xiao Yang：我想定義一個(gè)遍歷對(duì)象的每個(gè)方法，但是已經(jīng)定義了一個(gè)頭文件中的util.js。我只能調(diào)用eachObject，所以我很無(wú)奈。

小高：我已經(jīng)定制了一個(gè)日志方法。為什么小明寫(xiě)的代碼有問(wèn)題？誰(shuí)會(huì)幫助我。

投訴越來(lái)越多。經(jīng)過(guò)激烈的討論，團(tuán)隊(duì)決定引用Java并引入命名空間來(lái)解決它。因此util.js中的代碼變?yōu)?/p>Var org={}; org.CoolSite={}; org.CoolSite.Utils={}; org.CoolSite.Utils.each=function（arr）{//implementation code}; org.CoolSite.Utils.log=function （str）{//實(shí)現(xiàn)代碼};

不要認(rèn)為上述代碼是為了撰寫(xiě)本文而故意編造的。名稱空間的概念在前端進(jìn)行，雅虎的YUI2項(xiàng)目是第一個(gè)推出的項(xiàng)目。下面是一個(gè)真實(shí)的代碼，一個(gè)來(lái)自Yahoo!的開(kāi)源項(xiàng)目。

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

通過(guò)命名空間，它可以真正緩解沖突。但每當(dāng)我看到上面的代碼時(shí)，我都忍不住要充滿同情。為了調(diào)用一個(gè)簡(jiǎn)單的方法，你需要記住這么長(zhǎng)的命名空間，這會(huì)增加內(nèi)存負(fù)擔(dān)并剝奪很多編碼的樂(lè)趣。

作為前端行業(yè)的基準(zhǔn)，YUI團(tuán)隊(duì)決心解決這個(gè)問(wèn)題。 YUI3項(xiàng)目中引入了一個(gè)新的命名空間機(jī)制。

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

YUI3通過(guò)沙箱機(jī)制解決了名稱空間過(guò)長(zhǎng)的問(wèn)題。但是，它也帶來(lái)了新的問(wèn)題。

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

看似簡(jiǎn)單的命名沖突，實(shí)際解決方案并不簡(jiǎn)單。如何更優(yōu)雅地解決它？我們先來(lái)看看另一個(gè)常見(jiàn)問(wèn)題。

麻煩的文件依賴

繼續(xù)上面的故事?；趗til.js，我開(kāi)始在UI層開(kāi)發(fā)通用組件，以便項(xiàng)目團(tuán)隊(duì)的同事不必重新創(chuàng)建輪子。

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

但無(wú)論我如何編寫(xiě)文檔，以及電子郵件的宣布程度如何，總會(huì)有同事問(wèn)為什么dialog.js有問(wèn)題。通過(guò)一些調(diào)查，經(jīng)常發(fā)現(xiàn)錯(cuò)誤的原因是

在dialog.js之前沒(méi)有引入U(xiǎn)til.js，所以dialog.js不起作用。也不要以為上面的故事是虛構(gòu)的。在我留下的公司中，仍然有類似的腳本被報(bào)道，特別是在各種快速制作營(yíng)銷(xiāo)頁(yè)面中。

上述文件依賴性仍在可控范圍內(nèi)。隨著項(xiàng)目變得越來(lái)越復(fù)雜，許多文件之間的依賴往往令人沮喪。我相信，以下問(wèn)題每天都會(huì)發(fā)生。

環(huán)球集團(tuán)更新了前端基類庫(kù)，但很難推廣全站點(diǎn)升級(jí)。該業(yè)務(wù)組希望使用新的通用組件，但發(fā)現(xiàn)無(wú)法使用幾行代碼完成。舊產(chǎn)品需要新功能，最終評(píng)估只能繼續(xù)基于舊類庫(kù)開(kāi)發(fā)。該公司整合其業(yè)務(wù)，并將兩個(gè)產(chǎn)品線合并。事實(shí)證明，前端代碼沖突。

上述許多問(wèn)題都是由于文件依賴性得不到很好的管理。在前端頁(yè)面中，大多數(shù)腳本的依賴性仍然由人類肉體保證。當(dāng)團(tuán)隊(duì)很小時(shí)，這不會(huì)是一個(gè)問(wèn)題。隨著團(tuán)隊(duì)規(guī)模的擴(kuò)大和公司業(yè)務(wù)變得更加復(fù)雜，如果不解決依賴性問(wèn)題將成為一個(gè)大問(wèn)題。

文件依賴性目前在大多數(shù)類庫(kù)框架中，例如外部YUI3框架，國(guó)內(nèi)KISSY和其他庫(kù)，這些庫(kù)目前通過(guò)配置解決。

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

上述代碼通過(guò)要求等指定當(dāng)前模塊的依賴性。這可以在很大程度上解決依賴問(wèn)題，但不夠優(yōu)雅。當(dāng)有很多模塊且依賴性很復(fù)雜時(shí)，繁瑣的配置會(huì)帶來(lái)很多隱患。

命名沖突和文件依賴性是前端開(kāi)發(fā)過(guò)程中的兩個(gè)經(jīng)典問(wèn)題。讓我們看看如何通過(guò)模塊化開(kāi)發(fā)來(lái)解決它。為了便于描述，我們使用Sea.js作為模塊化開(kāi)發(fā)框架。

使用Sea.js來(lái)解決

Sea.js是一個(gè)成熟的開(kāi)源項(xiàng)目，其核心目標(biāo)是為前端開(kāi)發(fā)提供簡(jiǎn)單，極端模塊化的開(kāi)發(fā)體驗(yàn)。這里沒(méi)有太多介紹。如果您有興趣，可以訪問(wèn)seajs.org上的官方文檔。

使用Sea.js時(shí)，您必須在編寫(xiě)文件時(shí)遵循CMD（通用模塊定義）模塊定義規(guī)范。文件是一個(gè)模塊。上一個(gè)示例中的util.js變?yōu)?/p>定義（function（require，exports）{exports.each=function（arr）{//implementation code}; exports.log=function（str）{//implementation code};}）;

可以通過(guò)導(dǎo)出在外部提供接口。這樣，dialog.js的代碼變?yōu)?/p>定義（function（require，exports）{var util=require（'./util.js'）; exports.init=function（）{//implementation code};}）;

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

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

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

Sea.js添加了require語(yǔ)法關(guān)鍵字，就像CSS文件中的@import一樣，為我們的源代碼提供了依賴項(xiàng)導(dǎo)入功能。

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

這樣，在頁(yè)面上使用dialog.js將非常簡(jiǎn)單。

首先，您應(yīng)該在頁(yè)面中引入sea.js文件，該文件通常由頁(yè)眉控制，并且更新和維護(hù)也很方便。如果要在頁(yè)面中使用組件，只需通過(guò)seajs.use方法調(diào)用它。

仔細(xì)看看上面的代碼，我相信你已經(jīng)看到了Sea.js的兩個(gè)好處：

通過(guò)導(dǎo)出公開(kāi)接口。這意味著不需要命名空間，也不需要全局變量。這是一個(gè)完整的命名沖突解決方案。

通過(guò)require引入依賴項(xiàng)。這允許內(nèi)置依賴項(xiàng)。開(kāi)發(fā)人員只需要關(guān)心當(dāng)前模塊的依賴關(guān)系，以及Sea.js將自動(dòng)處理它的其他事情。對(duì)于模塊開(kāi)發(fā)人員來(lái)說(shuō)，這是一個(gè)很好的關(guān)注點(diǎn)分離，允許程序員更多地享受編碼。

摘要

除了解決命名沖突和依賴關(guān)系管理之外，使用Sea.js進(jìn)行模塊化開(kāi)發(fā)還可以帶來(lái)許多好處：

模塊的版本管理。使用別名配置和其他配置工具，使用構(gòu)建工具實(shí)現(xiàn)模塊版本管理更容易。

提高可維護(hù)性。模塊化允許對(duì)每個(gè)文件負(fù)責(zé)，這對(duì)代碼維護(hù)非常有利。 Sea.js還提供了nocache，調(diào)試等插件，具有在線調(diào)試和其他功能，可以顯著提高效率。

前端性能優(yōu)化。 Sea.js異步加載模塊，這對(duì)頁(yè)面性能非常有利。 Sea.js還提供插件，如組合和刷新，可用于調(diào)整服務(wù)器的頁(yè)面性能。

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

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

前端的模塊化結(jié)構(gòu)可分為兩大類。一個(gè)是由Dojo，YUI3和國(guó)內(nèi)KISSY圖書(shū)館代表的大教堂模型。在大教堂模式中，所有組件都是顆粒狀和模塊化的，并且組件是分層分層和互鎖的。另一種是基于jQuery，RequireJS，國(guó)內(nèi)Sea.js，OzJS和其他庫(kù)的市場(chǎng)模型。在市場(chǎng)模式中，所有組件彼此獨(dú)立并且具有單一責(zé)任。組件松散地耦合在一起并協(xié)同開(kāi)發(fā)。

這兩種類型的模塊化構(gòu)造方法具有應(yīng)用場(chǎng)景。從長(zhǎng)遠(yuǎn)來(lái)看，小而美的更具寬容性和競(jìng)爭(zhēng)力，更能夠形成一個(gè)充滿活力的生態(tài)系統(tǒng)。

簡(jiǎn)而言之，模塊化可以為前端開(kāi)發(fā)帶來(lái)許多好處。如果您尚未嘗試過(guò)，請(qǐng)先嘗試Sea.js.

標(biāo)簽:＆amp; nbsp＆amp; nbsp沈陽(yáng)前端開(kāi)發(fā)＆amp; nbsp沈陽(yáng)html5前端開(kāi)發(fā)