sea.js

renweihub 發(fā)布于2019-08-19 17:48 / 3012人閱讀

摘要：目標(biāo)了解目前公司所用得代碼模塊式開(kāi)發(fā)。比較目前比較流行得框架。模塊化可以讓每個(gè)文件的職責(zé)單一，非常有利于代碼的維護(hù)。模塊定義規(guī)范與的模塊規(guī)范非常相近。一類是以國(guó)內(nèi)的等類庫(kù)為代表的大教堂模式。

目標(biāo)：1.了解目前公司所用得sea.js,代碼模塊式開(kāi)發(fā)。

 2.比較目前比較流行得bootstrap,angularJS,reactJS框架。

參考：http://seajs.org/docs/#docs
1）除了解決命名沖突和依賴管理，使用 Sea.js 進(jìn)行模塊化開(kāi)發(fā)還可以帶來(lái)很多好處：
1.模塊的版本管理。通過(guò)別名等配置，配合構(gòu)建工具，可以比較輕松地實(shí)現(xiàn)模塊的版本管理。

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

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

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

前端的模塊化構(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é)單一，各組件通過(guò)組合松耦合在一起，協(xié)同完成開(kāi)發(fā)。

AngularJs:開(kāi)源得javascript框架，適合于開(kāi)發(fā)客戶端得單頁(yè)面應(yīng)用，它實(shí)現(xiàn)了前端MVC架構(gòu)，專注于擴(kuò)展html功能，提供動(dòng)態(tài)技術(shù)綁定，且能與其他框架合作融洽。（大概有個(gè)概念，今后再詳細(xì)了解）

API 快速參考
1）seajs.config 用來(lái)對(duì) Sea.js 進(jìn)行配置。
https://github.com/seajs/seajs/issues/262
2）seajs.use 用來(lái)在頁(yè)面中加載一個(gè)或多個(gè)模塊。
https://github.com/seajs/seajs/issues/260
3）define 用來(lái)定義模塊。Sea.js 推崇一個(gè)模塊一個(gè)文件，遵循統(tǒng)一的寫法：
https://github.com/seajs/seajs/issues/242
https://github.com/seajs/seajs/issues/259
4）require 用來(lái)獲取指定模塊的接口
https://github.com/seajs/seajs/issues/242
https://github.com/seajs/seajs/issues/259
5）require.async 用來(lái)在模塊內(nèi)部異步加載一個(gè)或多個(gè)模塊。
https://github.com/seajs/seajs/issues/242
6）exports 用來(lái)在模塊內(nèi)部對(duì)外提供接口。
https://github.com/seajs/seajs/issues/242
7)module.exports 用來(lái)在模塊內(nèi)部對(duì)外提供接口。
https://github.com/seajs/seajs/issues/242

深度探討：
一.CMD 模塊得構(gòu)建過(guò)程
CMD模塊在構(gòu)建時(shí)，有兩個(gè)基本操作：
1.提取操作，用來(lái)提取模塊得標(biāo)識(shí)id和一來(lái)dependencies.

a.js

define(function(require, exports) {
  var b = require("./b");
})
經(jīng)過(guò)提取操作后，a.js 的源碼會(huì)轉(zhuǎn)換成臨時(shí)文件：

define("xxx/1.0.0/a", ["./b"], function(require, exports) {
  var b = require("./b");
})

2.壓縮操作。經(jīng)過(guò)上面得提取操作后，構(gòu)建工具就可以調(diào)用任何JS壓縮工具來(lái)進(jìn)行壓縮了，require 參數(shù)也可以被壓縮成任意字符。