亚洲乱码卡一卡二卡三永久-亚洲乱码一二三四区-亚洲乱码一区二区三区在线观看-亚洲伦理一区-成人在色线视频在线观看免费大全-成人在线91

為什么使用 Sea.js ？

Sea.js 追求簡(jiǎn)單、自然的代碼書寫和組織方式，具有以下核心特性：

• 簡(jiǎn)單友好的模塊定義規(guī)范：Sea.js 遵循 CMD 規(guī)范，可以像 Node.js 一般書寫模塊代碼。
• 自然直觀的代碼組織方式：依賴的自動(dòng)加載、配置的簡(jiǎn)潔清晰，可以讓我們更多地享受編碼的樂趣。

Sea.js 還提供常用插件，非常有助于開發(fā)調(diào)試和性能優(yōu)化，并具有豐富的可擴(kuò)展接口。

兼容性

Sea.js 具備完善的測(cè)試用例，兼容所有主流瀏覽器：

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

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

隨著互聯(lián)網(wǎng)的飛速發(fā)展，前端開發(fā)越來越復(fù)雜。本文將從實(shí)際項(xiàng)目中遇到的問題出發(fā)，講述模塊化能解決哪些問題，以及如何使用 Sea.js 進(jìn)行前端的模塊化開發(fā)。

惱人的命名沖突

我們從一個(gè)簡(jiǎn)單的習(xí)慣出發(fā)。我做項(xiàng)目時(shí)，常常會(huì)將一些通用的、底層的功能抽象出來，獨(dú)立成一個(gè)個(gè)函數(shù)，比如

function each(arr) {
  // 實(shí)現(xiàn)代碼
}

function log(str) {
  // 實(shí)現(xiàn)代碼
}

并像模像樣地把這些函數(shù)統(tǒng)一放在 util.js 里。需要用到時(shí)，引入該文件就行。這一切工作得很好，同事也很感激我提供了這么便利的工具包。

直到團(tuán)隊(duì)越來越大，開始有人抱怨。

小楊：我想定義一個(gè) each 方法遍歷對(duì)象，但頁頭的 util.js 里已經(jīng)定義了一個(gè)，我的只能叫 eachObject 了，好無奈。

小高：我自定義了一個(gè) log 方法，為什么小明寫的代碼就出問題了呢？誰來幫幫我。

抱怨越來越多。團(tuán)隊(duì)經(jīng)過一番激烈的討論，決定參照 Java 的方式，引入命名空間來解決。于是 util.js 里的代碼變成了

var org = {};
org.CoolSite = {};
org.CoolSite.Utils = {};

org.CoolSite.Utils.each = function (arr) {
  // 實(shí)現(xiàn)代碼
};

org.CoolSite.Utils.log = function (str) {
  // 實(shí)現(xiàn)代碼
};

不要認(rèn)為上面的代碼是為了寫這篇文章而故意捏造的。將命名空間的概念在前端中發(fā)揚(yáng)光大，首推 Yahoo! 的 YUI2 項(xiàng)目。下面是一段真實(shí)代碼，來自 Yahoo! 的一個(gè)開源項(xiàng)目。

if (org.cometd.Utils.isString(response)) {
  return org.cometd.JSON.fromJSON(response);
}
if (org.cometd.Utils.isArray(response)) {
  return response;
}

通過命名空間，的確能極大緩解沖突。但每每看到上面的代碼，都忍不住充滿同情。為了調(diào)用一個(gè)簡(jiǎn)單的方法，需要記住如此長(zhǎng)的命名空間，這增加了記憶負(fù)擔(dān)，同時(shí)剝奪了不少編碼的樂趣。

作為前端業(yè)界的標(biāo)桿，YUI 團(tuán)隊(duì)下定決心解決這一問題。在 YUI3 項(xiàng)目中，引入了一種新的命名空間機(jī)制。

YUI().use('node', function (Y) {
  // Node 模塊已加載好
  // 下面可以通過 Y 來調(diào)用
  var foo = Y.one('#foo');
});

YUI3 通過沙箱機(jī)制，很好的解決了命名空間過長(zhǎng)的問題。然而，也帶來了新問題。

YUI().use('a', 'b', function (Y) {
  Y.foo();
  // foo 方法究竟是模塊 a 還是 b 提供的？
  // 如果模塊 a 和 b 都提供 foo 方法，如何避免沖突？
});

看似簡(jiǎn)單的命名沖突，實(shí)際解決起來并不簡(jiǎn)單。如何更優(yōu)雅地解決？我們按下暫且不表，先來看另一個(gè)常見問題。

煩瑣的文件依賴

繼續(xù)上面的故事。基于 util.js，我開始開發(fā) UI 層通用組件，這樣項(xiàng)目組同事就不用重復(fù)造輪子了。

其中有一個(gè)最被大家喜歡的組件是 dialog.js，使用方式很簡(jiǎn)單。

<script src="util.js">script>
<script src="dialog.js">script>
<script>
  org.CoolSite.Dialog.init({ /* 傳入配置 */ });
script>

可是無論我怎么寫文檔，以及多么鄭重地發(fā)郵件宣告，時(shí)不時(shí)總會(huì)有同事來詢問為什么 dialog.js 有問題。通過一番排查，發(fā)現(xiàn)導(dǎo)致錯(cuò)誤的原因經(jīng)常是

<script src="dialog.js">script>
<script>
  org.CoolSite.Dialog.init({ /* 傳入配置 */ });
script>

在 dialog.js 前沒有引入 util.js，因此 dialog.js 無法正常工作。同樣不要以為我上面的故事是虛構(gòu)的，在我待過的公司里，至今依舊有類似的腳本報(bào)錯(cuò)，特別是在各種快速制作的營(yíng)銷頁面中。

上面的文件依賴還在可控范圍內(nèi)。當(dāng)項(xiàng)目越來越復(fù)雜，眾多文件之間的依賴經(jīng)常會(huì)讓人抓狂。下面這些問題，我相信每天都在真實(shí)地發(fā)生著。

1. 通用組更新了前端基礎(chǔ)類庫(kù)，卻很難推動(dòng)全站升級(jí)。
2. 業(yè)務(wù)組想用某個(gè)新的通用組件，但發(fā)現(xiàn)無法簡(jiǎn)單通過幾行代碼搞定。
3. 一個(gè)老產(chǎn)品要上新功能，最后評(píng)估只能基于老的類庫(kù)繼續(xù)開發(fā)。
4. 公司整合業(yè)務(wù)，某兩個(gè)產(chǎn)品線要合并。結(jié)果發(fā)現(xiàn)前端代碼沖突。
5. ……

以上很多問題都是因?yàn)槲募蕾嚊]有很好的管理起來。在前端頁面里，大部分腳本的依賴目前依舊是通過人肉的方式保證。當(dāng)團(tuán)隊(duì)比較小時(shí)，這不會(huì)有什么問題。當(dāng)團(tuán)隊(duì)越來越大，公司業(yè)務(wù)越來越復(fù)雜后，依賴問題如果不解決，就會(huì)成為大問題。

文件的依賴，目前在絕大部分類庫(kù)框架里，比如國(guó)外的 YUI3 框架、國(guó)內(nèi)的 KISSY 等類庫(kù)，目前是通過配置的方式來解決。

YUI.add('my-module', function (Y) {
  // ...
}, '0.0.1', {
    requires: ['node', 'event']
});

上面的代碼，通過 requires 等方式來指定當(dāng)前模塊的依賴。這很大程度上可以解決依賴問題，但不夠優(yōu)雅。當(dāng)模塊很多，依賴很復(fù)雜時(shí)，煩瑣的配置會(huì)帶來不少隱患。

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

使用 Sea.js 來解決

Sea.js 是一個(gè)成熟的開源項(xiàng)目，核心目標(biāo)是給前端開發(fā)提供簡(jiǎn)單、極致的模塊化開發(fā)體驗(yàn)。這里不多做介紹，有興趣的可以訪問 seajs.org 查看官方文檔。

使用 Sea.js，在書寫文件時(shí)，需要遵守 CMD （Common Module Definition）模塊定義規(guī)范。一個(gè)文件就是一個(gè)模塊。前面例子中的 util.js 變成

define(function(require, exports) {
  exports.each = function (arr) {
    // 實(shí)現(xiàn)代碼
  };

  exports.log = function (str) {
    // 實(shí)現(xiàn)代碼
  };
});

通過 exports 就可以向外提供接口。這樣，dialog.js 的代碼變成

define(function(require, exports) {
  var util = require('./util.js');

  exports.init = function() {
    // 實(shí)現(xiàn)代碼
  };
});

關(guān)鍵部分到了！我們通過 require('./util.js') 就可以拿到 util.js 中通過 exports 暴露的接口。這里的require 可以認(rèn)為是 Sea.js 給 JavaScript 語言增加的一個(gè) 語法關(guān)鍵字，通過 require 可以獲取其他模塊提供的接口。

這其實(shí)一點(diǎn)也不神奇。作為前端工程師，對(duì) CSS 代碼一定也不陌生。

@import url("base.css");

#id { ... }
.class { ... }

Sea.js 增加的 require 語法關(guān)鍵字，就如 CSS 文件中的 @import 一樣，給我們的源碼賦予了依賴引入功能。

如果你是后端開發(fā)工程師，更不會(huì)陌生。Java、Python、C# 等等語言，都有 include、import 等功能。JavaScript 語言本身也有類似功能，但目前還處于草案階段，需要等到 ES6 標(biāo)準(zhǔn)得到主流瀏覽器支持后才能使用。

這樣，在頁面中使用 dialog.js 將變得非常簡(jiǎn)單。

<script src="sea.js">script>
<script>
seajs.use('dialog', function(Dialog) {
  Dialog.init(/* 傳入配置 */);
});
script>

首先要在頁面中引入 sea.js 文件，這一般通過頁頭全局把控，也方便更新維護(hù)。想在頁面中使用某個(gè)組件時(shí)，只要通過 seajs.use 方法調(diào)用。

好好琢磨以上代碼，我相信你已經(jīng)看到了 Sea.js 帶來的兩大好處：

1. 通過 exports 暴露接口。這意味著不需要命名空間了，更不需要全局變量。這是一種徹底的命名沖突解決方案。

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

小結(jié)

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

1. 模塊的版本管理。通過別名等配置，配合構(gòu)建工具，可以比較輕松地實(shí)現(xiàn)模塊的版本管理。

2. 提高可維護(hù)性。模塊化可以讓每個(gè)文件的職責(zé)單一，非常有利于代碼的維護(hù)。Sea.js 還提供了 nocache、debug 等插件，擁有在線調(diào)試等功能，能比較明顯地提升效率。

3. 前端性能優(yōu)化。Sea.js 通過異步加載模塊，這對(duì)頁面性能非常有益。Sea.js 還提供了 combo、flush 等插件，配合服務(wù)端，可以很好地對(duì)頁面性能進(jìn)行調(diào)優(yōu)。

4. 跨環(huán)境共享模塊。CMD 模塊定義規(guī)范與 Node.js 的模塊規(guī)范非常相近。通過 Sea.js 的 Node.js 版本，可以很方便實(shí)現(xiàn)模塊的跨服務(wù)器和瀏覽器共享。

模塊化開發(fā)并不是新鮮事物，但在 Web 領(lǐng)域，前端開發(fā)是新生崗位，一直處于比較原始的刀耕火種時(shí)代。直到最近兩三年，隨著 Dojo、YUI3、Node.js 等社區(qū)的推廣和流行，前端的模塊化開發(fā)理念才逐步深入人心。

前端的模塊化構(gòu)建可分為兩大類。一類是以 Dojo、YUI3、國(guó)內(nèi)的 KISSY 等類庫(kù)為代表的大教堂模式。在大教堂模式下，所有組件都是顆粒化、模塊化的，各組件之間層層分級(jí)、環(huán)環(huán)相扣。另一類是以 jQuery、RequireJS、國(guó)內(nèi)的 Sea.js、OzJS 等類庫(kù)為基礎(chǔ)的集市模式。在集市模式下，所有組件彼此獨(dú)立、職責(zé)單一，各組件通過組合松耦合在一起，協(xié)同完成開發(fā)。

這兩類模塊化構(gòu)建方式各有應(yīng)用場(chǎng)景。從長(zhǎng)遠(yuǎn)來看，小而美更具備寬容性和競(jìng)爭(zhēng)力，更能形成有活力的生態(tài)圈。

總之，模塊化能給前端開發(fā)帶來很多好處。如果你還沒有嘗試，不妨從試用 Sea.js 開始。