快捷導(dǎo)航

SeaJS入門(mén)教程系列之SeaJS介紹（一）

更新時(shí)間：2014年03月03日 08:52:34 作者：

這篇文章主要介紹了SeaJS入門(mén)教程,講述了SeaJS的由來(lái),JavaScript傳統(tǒng)開(kāi)發(fā)模式和模塊化開(kāi)發(fā)的對(duì)比,需要的朋友可以參考下

前言
SeaJS是一個(gè)遵循CommonJS規(guī)范的JavaScript模塊加載框架，可以實(shí)現(xiàn)JavaScript的模塊化開(kāi)發(fā)及加載機(jī)制。與jQuery等JavaScript框架不同，SeaJS不會(huì)擴(kuò)展封裝語(yǔ)言特性，而只是實(shí)現(xiàn)JavaScript的模塊化及按模塊加載。SeaJS的主要目的是令JavaScript開(kāi)發(fā)模塊化并可以輕松愉悅進(jìn)行加載，將前端工程師從繁重的JavaScript文件及對(duì)象依賴(lài)處理中解放出來(lái)，可以專(zhuān)注于代碼本身的邏輯。SeaJS可以與jQuery這類(lèi)框架完美集成。使用SeaJS可以提高JavaScript代碼的可讀性和清晰度，解決目前JavaScript編程中普遍存在的依賴(lài)關(guān)系混亂和代碼糾纏等問(wèn)題，方便代碼的編寫(xiě)和維護(hù)。
SeaJS的作者是淘寶前端工程師玉伯。
SeaJS本身遵循KISS（Keep It Simple, Stupid）理念進(jìn)行開(kāi)發(fā)，其本身僅有個(gè)位數(shù)的API，因此學(xué)習(xí)起來(lái)毫無(wú)壓力。在學(xué)習(xí)SeaJS的過(guò)程中，處處能感受到KISS原則的精髓——僅做一件事，做好一件事。
本文首先通過(guò)一個(gè)例子直觀對(duì)比傳統(tǒng)JavaScript編程和使用SeaJS的模塊化JavaScript編程，然后詳細(xì)討論SeaJS的使用方法，最后給出一些與SeaJS相關(guān)的資料。

傳統(tǒng)模式 vs SeaJS模塊化
假設(shè)我們現(xiàn)在正在開(kāi)發(fā)一個(gè)Web應(yīng)用TinyApp，我們決定在TinyApp中使用jQuery框架。TinyApp的首頁(yè)會(huì)用到module1.js，module1.js依賴(lài)module2.js和module3.js，同時(shí)module3.js依賴(lài)module4.js。
傳統(tǒng)開(kāi)發(fā)
使用傳統(tǒng)的開(kāi)發(fā)方法，各個(gè)js文件代碼如下：

復(fù)制代碼代碼如下:

//module1.js
var module1 = {
    run: function() {
        return $.merge(['module1'], $.merge(module2.run(), module3.run()));
    }
}

//module2.js
var module2 = {
    run: function() {
        return ['module2'];
    }
}

//module3.js
var module3 = {
    run: function() {
        return $.merge(['module3'], module4.run());
    }
}

//module4.js
var module4 = {
    run: function() {
        return ['module4'];
    }
}

此時(shí)index.html需要引用module1.js及其所有下層依賴(lài)（注意順序）：

復(fù)制代碼代碼如下:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TinyApp</title>
    <script src="./jquery-min.js"></script>
    <script src="./module4.js"></script>
    <script src="./module2.js"></script>
    <script src="./module3.js"></script>
    <script src="./module1.js"></script>
</head>
<body>
    <p class="content"></p>
    <script>
        $('.content').html(module1.run());
    </script>
</body>
</html>

隨著項(xiàng)目的進(jìn)行，js文件會(huì)越來(lái)越多，依賴(lài)關(guān)系也會(huì)越來(lái)越復(fù)雜，使得js代碼和html里的script列表往往變得難以維護(hù)。
SeaJS模塊化開(kāi)發(fā)
下面看看如何使用SeaJS實(shí)現(xiàn)相同的功能。
首先是index.html：

復(fù)制代碼代碼如下:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TinyApp</title>
</head>
<body>
    <p class="content"></p>
    <script src="./sea.js"></script>
    <script>
        seajs.use('./init', function(init) {
            init.initPage();
        });
    </script>
</body>
</html>

可以看到html頁(yè)面不再需要引入所有依賴(lài)的js文件，而只是引入一個(gè)sea.js，sea.js會(huì)處理所有依賴(lài)，加載相應(yīng)的js文件，加載策略可以選擇在渲染頁(yè)面時(shí)一次性加載所有js文件，也可以按需加載（用到時(shí)才加載響應(yīng)js），具體加載策略使用方法下文討論。
index.html加載了init模塊，并使用此模塊的initPage方法初始化頁(yè)面數(shù)據(jù)，這里先不討論代碼細(xì)節(jié)。
下面看一下模塊化后JavaScript的寫(xiě)法：

復(fù)制代碼代碼如下:

//jquery.js
define(function(require, exports, module) = {

    //原jquery.js代碼...

    module.exports = $.noConflict(true);
});

//init.js
define(function(require, exports, module) = {
    var $ = require('jquery');
    var m1 = require('module1');

    exports.initPage = function() {
        $('.content').html(m1.run());    
    }
});

//module1.js
define(function(require, exports, module) = {
    var $ = require('jquery');
    var m2 = require('module2');
    var m3 = require('module3');

    exports.run = function() {
        return $.merge(['module1'], $.merge(m2.run(), m3.run()));    
    }
});

//module2.js
define(function(require, exports, module) = {
    exports.run = function() {
        return ['module2'];
    }
});

//module3.js
define(function(require, exports, module) = {
    var $ = require('jquery');
    var m4 = require('module4');

    exports.run = function() {
        return $.merge(['module3'], m4.run());    
    }
});

//module4.js
define(function(require, exports, module) = {
    exports.run = function() {
        return ['module4'];
    }
});

乍看之下代碼似乎變多變復(fù)雜了，這是因?yàn)檫@個(gè)例子太簡(jiǎn)單，如果是大型項(xiàng)目，SeaJS代碼的優(yōu)勢(shì)就會(huì)顯現(xiàn)出來(lái)。不過(guò)從這里我們還是能窺探到一些SeaJS的特性：
一是html頁(yè)面不用再維護(hù)冗長(zhǎng)的script標(biāo)簽列表，只要引入一個(gè)sea.js即可。
二是js代碼以模塊進(jìn)行組織，各個(gè)模塊通過(guò)require引入自己依賴(lài)的模塊，代碼清晰明了。
通過(guò)這個(gè)例子朋友們應(yīng)該對(duì)SeaJS有了一個(gè)直觀的印象，下面本文具體討論SeaJS的使用。

您可能感興趣的文章: