sea.js学习（一）

时间 2019-12-05

原文原文链接

前言
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相关的资料。html

SeaJS模块化开发
下面看看如何使用SeaJS实现相同的功能。
首先是index.html：前端

复制代码代码以下:jquery

<!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的写法：前端工程师

复制代码代码以下:框架

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

    //原jquery.js代码...

});

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

1. 学习 Sea.js 笔记(一)
2. sea.js 学习
3. Sea.js学习笔记
4. 学习 Sea.js 笔记(三)
5. 学习 Sea.js 笔记(二)
6. sea.js
7. Sea.js
8. sea.js使用
9. sea.js说明文档
10. Sea.js框架构建
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Kotlin学习（一）基本语法
• Tomcat学习笔记（史上最全tomcat学习笔记）