SeaJS入门教程系列之SeaJS介绍（一）
前言
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文件代码如下：
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及其所有下层依赖（注意顺序）：
<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：
<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的写法：
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介绍（一）的更多相关文章
- SeaJS入门教程系列之使用SeaJS（二）
SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJ ...
- WPF入门教程系列三——Application介绍(续)
接上文WPF入门教程系列二——Application介绍,我们继续来学习Application 三.WPF应用程序的关闭 WPF应用程序的关闭只有在应用程序的 Shutdown 方法被调用时,应用程序 ...
- WPF入门教程系列二——Application介绍
一.Application介绍 WPF和WinForm 很相似, WPF与WinForm一样有一个 Application对象来进行一些全局的行为和操作,并且每个 Domain (应用程序域)中仅且只 ...
- SeaJS入门教程系列之完整示例（三）
一个完整的例子上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾.这个例子包含如下文件: 1.index.html——主页面.2.sea.j ...
- WPF入门教程系列六——布局介绍与Canvas（一）
从这篇文章开始是对WPF中的界面如何布局做一个较简单的介绍,大家都知道:UI是做好一个软件很重要的因素,如果没有一个漂亮的UI,功能做的再好也无法吸引很多用户使用,而且没有漂亮的界面,那么普通用户会感 ...
- WPF入门教程系列四——Dispatcher介绍
一.Dispatcher介绍 微软在WPF引入了Dispatcher,那么这个Dispatcher的主要作用是什么呢? 不管是WinForm应用程序还是WPF应用程序,实际上都是一个进程,一个进程可以 ...
- WPF入门教程系列五——Window 介绍
一.窗体类基本概念 对于WPF应用程序,在Visual Studio和Expression Blend中,自定义的窗体均继承System.Windows.Window类.用户通过窗口与 Windows ...
- WPF入门教程系列二十三——DataGrid示例(三)
DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...
- Docker入门教程（一）介绍
http://dockone.io/article/101 Docker入门教程(一)介绍 [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第一篇,介绍了 ...
随机推荐
- Mac下Vim编辑快捷键小结(移动光标)
Mac下Vim编辑快捷键小结(移动光标) 1.移动到行尾"$",移动到行首"0"(数字),移动到行首第一个字符处"^" 2.移动到段首&qu ...
- 盖得化工--selenium翻页测试
Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...
- CentOS下的yum upgrade和yum update区别
说明:生产环境对软件版本和内核版本要求非常精确,别没事有事随便的进行yum update操作!! ! yum update:升级所有包同时也升级软件和系统内核 yum upgrade:只升级所有包,不 ...
- Linux记录-进程数和句柄数调整
1.cat /etc/security/limits.confwebuser soft nofile 65535webuser hard nofile 65535webuser soft nproc ...
- Hbase记录-Hbase基础概念
HBase是什么? HBase是建立在Hadoop文件系统之上的分布式面向列的数据库.它是一个开源项目,是横向扩展的. HBase是一个数据模型,类似于谷歌的大表设计,可以提供快速随机访问海量结构化数 ...
- idea常用快捷键及自定义快捷键汇总
以下都是挨个进行验证过的 生成get和set方法为:alt+insert 自动补全返回值,自动补全变量名称和属性名称:ctrl+alt+v 输入System.out.println()的快捷方法是:输 ...
- @ImportResource 导入Spring 的xml配置文件
在配置类尚标注此注解,等同于spring配置文件中的 <import resource="beans.xml"/> Spring Boot里面没有Spring的配置文件 ...
- 01、@ConfigurationProperties 将属性文件里的值映射到JavaBean
@ConfigurationProperties("person") //或是prefix属性 @Component //必须注册成容器中的bean被容器管理起来 public c ...
- CRLF攻击的一篇科普：新浪某站CRLF Injection导致的安全问题（转）
转:https://www.leavesongs.com/PENETRATION/Sina-CRLF-Injection.html 新浪某站CRLF Injection导致的安全问题 PHITHON ...
- dos 设置 Windows 网络命令
dos 设置Windows 命令: netsh interface ip set address name="本地连接" source=static addr=172.16.12. ...