SeaJS入門教程系列之SeaJS介紹（一）

時間 2019-11-20

標籤 seajs 入門教程系列介紹简体版

原文原文鏈接

這篇文章主要介紹了SeaJS入門教程,講述了SeaJS的由來,JavaScript傳統開發模式和模塊化開發的對比,須要的朋友能夠參考下html

前言
SeaJS是一個遵循CommonJS規範的JavaScript模塊加載框架，能夠實現JavaScript的模塊化開發及加載機制。與jQuery等JavaScript框架不一樣，SeaJS不會擴展封裝語言特性，而只是實現JavaScript的模塊化及按模塊加載。SeaJS的主要目的是令JavaScript開發模塊化並能夠輕鬆愉悅進行加載，將前端工程師從繁重的JavaScript文件及對象依賴處理中解放出來，能夠專一於代碼自己的邏輯。SeaJS能夠與jQuery這類框架完美集成。使用SeaJS能夠提升JavaScript代碼的可讀性和清晰度，解決目前JavaScript編程中廣泛存在的依賴關係混亂和代碼糾纏等問題，方便代碼的編寫和維護。
SeaJS的做者是淘寶前端工程師玉伯。
SeaJS自己遵循KISS（Keep It Simple, Stupid）理念進行開發，其自己僅有個位數的API，所以學習起來毫無壓力。在學習SeaJS的過程當中，到處能感覺到KISS原則的精髓——僅作一件事，作好一件事。
本文首先經過一個例子直觀對比傳統JavaScript編程和使用SeaJS的模塊化JavaScript編程，而後詳細討論SeaJS的使用方法，最後給出一些與SeaJS相關的資料。前端

傳統模式 vs SeaJS模塊化
假設咱們如今正在開發一個Web應用TinyApp，咱們決定在TinyApp中使用jQuery框架。TinyApp的首頁會用到module1.js，module1.js依賴module2.js和module3.js，同時module3.js依賴module4.js。jquery

傳統開發
使用傳統的開發方法，各個js文件代碼以下：編程

//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'];
    }
}

此時index.html須要引用module1.js及其全部下層依賴（注意順序）：前端工程師

<!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>

隨着項目的進行，js文件會愈來愈多，依賴關係也會愈來愈複雜，使得js代碼和html裏的script列表每每變得難以維護。框架

SeaJS模塊化開發
下面看看如何使用SeaJS實現相同的功能。
首先是index.html：模塊化

<!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頁面再也不須要引入全部依賴的js文件，而只是引入一個sea.js，sea.js會處理全部依賴，加載相應的js文件，加載策略能夠選擇在渲染頁面時一次性加載全部js文件，也能夠按需加載（用到時才加載響應js），具體加載策略使用方法下文討論。學習

index.html加載了init模塊，並使用此模塊的initPage方法初始化頁面數據，這裏先不討論代碼細節。
下面看一下模塊化後JavaScript的寫法：ui

//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'];
    }
});

乍看之下代碼彷佛變多變複雜了，這是由於這個例子太簡單，若是是大型項目，SeaJS代碼的優點就會顯現出來。不過從這裏咱們仍是能窺探到一些SeaJS的特性：
一是html頁面不用再維護冗長的script標籤列表，只要引入一個sea.js便可。
二是js代碼以模塊進行組織，各個模塊經過require引入本身依賴的模塊，代碼清晰明瞭。
經過這個例子朋友們應該對SeaJS有了一個直觀的印象，下面本文具體討論SeaJS的使用。spa

1. seajs入門教程
2. Seajs使用實例入門介紹
3. SeaJS入門
4. Seajs教程
5. seajs入門使用
6. 【SeaJS】【2】再識SeaJS
7. ☀【SeaJS】SeaJS Grunt構建
8. seajs
9. seaJS
10. SeaJS入門篇一怎麼使用query
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• YAML 入門教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。