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 入门教程