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 相关文章推荐
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
万能的php分页类
2017/07/06 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
小程序自定义日历效果
2018/12/29 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
关于Python面向对象编程的知识点总结
2017/02/14 Python
Python 处理数据的实例详解
2017/08/10 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
美国手机支架公司:PopSockets
2019/11/27 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
咖啡馆创业计划书
2014/01/26 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python