seajs

前言

SeaJS是一個遵循CommonJS規範的JavaScript模塊加載框架，能夠實現JavaScript的模塊化開發及加載機制。

SeaJS的主要目的是令JavaScript開發模塊化並能夠輕鬆愉悅進行加載，將前端工程師從繁重的JavaScript文件及對象依賴處理中解放出來，能夠專一於代碼自己的邏輯。

SeaJS的做者是淘寶前端工程師玉伯。

SeaJS自己遵循KISS（Keep It Simple, Stupid）理念進行開發，其自己僅有個位數的API，所以學習起來毫無壓力。在學習SeaJS的過程當中，到處能感覺到KISS原則的精髓——僅作一件事，作好一件事。

使用SeaJS

SeaJS項目目前託管在GitHub上，主頁爲 https://github.com/seajs/seajs/ 。

下載完成後,經過<script>標籤將其引入頁面

 

<script src="../sea.js"></script>

 

使用SeaJS開發JavaScript的基本原則就是：一切皆爲模塊。引入SeaJS後，編寫JavaScript代碼就變成了編寫一個又一個模塊，SeaJS中模塊的概念有點相似於面向對象中的類——模塊能夠擁有數據和方法，數據和方法能夠定義爲公共或私有，公共數據和方法能夠供別的模塊調用。

另外，每一個模塊應該都定義在一個單獨js文件中，即一個對應一個模塊。

模塊的定義

defineSeaJS中使用"define"函數定義一個模塊

 

 

define(function(require, exports, module) {

    require("./module1");

    exports.add = function(x, y) {

        return x + y;

    };

});

 

裏面的這個函數是模塊的主體和重點:

• require: 模塊加載函數,用於加載依賴的模塊

• exports: 接口對象,將變量或方法定義其上並暴露給外部調用

• module: 模塊的元數據

requirerequire是SeaJS主要的模塊加載方法, 當在一個模塊中須要用到其餘模塊時通常用require加載:

 

var module1 = require("../module1");

 

加載流程:SeaJS會首先下載入口模塊,而後順着入口模塊使用正則表達式匹配代碼中全部的require,在根據require中的文件路徑標識下載相應的JS文件,對下載來的js文件進行相似操做.傳給require的路徑標識必須是字符串字面量,不能是表達式,以下面使用require的方法是錯誤的:

 

require("module" + 1);

require("MODULE".toLowerCase());

 

seajs.configSeaJS提供了一個config方法能夠設置全局配置,接收一個表示全局配置的配置對象:

 

seajs.config({

    base: 'path/to/jslib/',

    alias: {

        'app': 'path/to/app/'

    },

    charset: 'utf-8',

    timeout: 20000,

    debug: false

});

 

• base: 表示基址尋址時的基址路徑

• alias: 經常使用路徑設置縮寫

• charset: 表示下載js時script標籤的charset屬性

• timeout: 表示下載文件的最大時長, 以毫秒爲單位

• debug: 表示是否工做在調試模式下

seajs.use該方法主要用於載入入口模塊,入口模塊表示是一個程序的入口

 

seajs.use("./main", function(main) {

    //some code here

})

 

第一個參數爲須要載入的文件的路徑,能夠不加後綴,默認爲.js文件.第二個參數爲加載成功以後的回調函數.

Seajs如何與現有JS庫配合使用

要將現有JS庫如jQuery與SeaJS一塊兒使用，只需根據SeaJS的的模塊定義規則對現有庫進行一個封裝。例如，下面是對jQuery的封裝方法：

 

define(function() {

    //jquery原有代碼

    return $.noConflict();

});

 

seajs + handlebars

1. 在 seajs 中使用 handlebars, 須要引入 seajs-text.js, 用來載入模板.

2. 使用 seajs 加載 modules/handlebars.seajs.min

3. 模塊中操做:

 

 

 

 

 

`