SeaJS入门教程系列之SeaJS介绍(一)


Posted in Javascript onMarch 03, 2014

前言
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。
传统开发
使用传统的开发方法,各个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的写法:
//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的使用。
Javascript 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
javascript history对象详解
Feb 09 Javascript
JS作用域链详解
Jun 26 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 Javascript
js的hasownproperty使用示例
Mar 02 #Javascript
javascript对象的使用和属性操作示例详解
Mar 02 #Javascript
使用js显示当前时间示例
Mar 02 #Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 #Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 #Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 #Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 #Javascript
You might like
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
php页面防重复提交方法总结
2013/11/25 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
日期 时间js控件
2009/05/07 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
python 文件操作删除某行的实例
2017/09/04 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
电子商务专业学生的自我鉴定
2013/11/28 职场文书
如何填写个人简历自我评价
2013/12/10 职场文书
安全生产标语
2014/06/06 职场文书
素质教育标语
2014/06/27 职场文书
工作检讨书怎么写
2014/10/10 职场文书
经验交流材料格式
2014/12/30 职场文书
《落花生》教学反思
2016/02/16 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python