學習 Sea.js 筆記(一)

爲學習某開源項目, 裏面使用了 sea.js, 爲此而學習, 網址是: http://seajs.org/docs/#docs

模塊化的價值 (解決什麼問題):

命名衝突問題. 命名空間可緩解衝突, 但太長難記憶. 如何優雅地解決?

煩瑣的文件依賴: 當項目愈來愈複雜, 文件依賴也快速增加. 如何優雅地解決?

前端開發的兩個經典問題: 命名衝突, 文件依賴.

== 使用 Sea.js 解決 ==

須要遵照 CMD(Common Module Definition)模塊定義規範.
一個文件就是一個模塊. 如:

define(function(require, exports) {
   var other = require('path-to-other-js');
   exports.func1 = function ... body;
   exports.func2 = etc...
});

經過 require 得到(其它模塊)經過 exports 暴露的接口. 可認爲是擴展出了一個關鍵字(by sea.js).
經過 exports 對象向外提供接口.

經過 require (仿關鍵字) 相似於 c #include, java,python import 等.

例子2:

seajs.use('some-thing', function(A-object) {
   A-object.foo(...);
}

須要作: 首先在頁面引入 sea.js, 其它地方想使用某個模塊, 則使用 seajs.use() 方法.

因而:
1. 經過 exports 暴露接口, 不須要依賴命名空間了.
2. 經過 require 引入依賴(模塊), 開發者不用關心太多了...

其它好處:
1. 模塊版本管理;
2. 提升可維護性: sea.js 提供 nocache, debug 等輔助插件
3. 前端性能優化: 模塊是異步加載的. 還提供 combo, flush 等插件.
4. 跨環境共享模塊: CMD 與 node.js 模塊規範接近, 方便與server端 js 共享.

前端模塊化構建兩大類:
1. 大教堂模式. (Dojo,YUI3,KISSY...)
2. 集市模式. (jQuery,RequireJS,Sea.js ...)

長遠來看, 小而美更具有寬容性和競爭力, 更能造成有活力的生態圈.