JavaScript模块化开发之SeaJS
前言
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。
SeaJS本身遵循KISS（Keep it Simple,Stupid）理念进行开发，后续的几个版本更新也都是吵着这个方向迈进。
如何使用SeaJS
下载及安装在这里不赘述了，不了解的请查询官网。
基本开发原则
•一切皆为模块：SeaJS中的模块概念有点类似于面向对象中的类--模块可以拥有数据和方法，数据和方法可以定义为公共或私有，公共数据和方法可以供别的模块调用。
•每个模块应该都定义在一个单独的js文件中，即一个对应一个模块。
模块的定义和编写
模块定义函数define
SeaJS中使用define函数定义一个模块。define可以接收三个参数：
/**
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
//code of function…
}
define可以接收的参数分别是模块ID，依赖模块数组及工厂函数。
•如果只有一个参数，则赋值给factory
•如果有两个参数，第二个赋值给factory，第一个如果是数组则赋值给deps，否则赋值给id
•如果有三个参数，则分别赋值
但是，包括SeaJS官网示例在内几乎所有用到define的地方都只传递一个工厂函数进去，类似于如下代码：
define(function(require,exports,module){
//code of the module
})
个人建议遵循SeaJS官方示例的标准，用一个参数的define定义模块。那么id和deps会怎么处理呢？
id是一个模块的标识字符串，define只有一个参数时，id会被默认赋值为此js文件的绝对路径。如example.com下的a.js文件中使用define定义模块，则这个模块的ID会赋值为 http://example.com/a.js ，没有特别的必要建议不要传入id。deps一般也不需要传入，需要用到的模块用require加载即可。
工厂函数factory解析
工厂函数是模块的主体和重点。它的三个参数分别是：
•require：模块加载函数，用于记载依赖模块
•exports：接口点，将数据或方法定义在其上则将其暴露给外部调用
•module：模块的元数据
这三个参数可以根据需要选择是否需要显示指定。
module是一个对象，存储了模块的元信息，具体如下：
•module.id：模块的ID
•module.dependencies：一个数组，存储了此模块依赖的所有模块的ID列表。
•module.exports：与exports指向同一个对象
三种编写模块的模式
第一种是基于exports的模式：
define(function(require,exports,module){
var a=require('a');
var b=require('b'); //引入模块
var data1=1; //私有数据
var fun1=function(){//私有方法
return a.run(data1);
}
exports.data2=2; //公有数据
exports.fun2=function(){
return 'hello';
}
})
上面是一种比较“正宗”的模块定义模式。除了讲公共数据和方法附加在exports上，也可以直接返回一个对象表示模块，如下面的代码与上面的代码功能相同：
define(function(require){
var a=require('a');
var b=require('b'); //引入模块
var data1=1;
var fun1=function(){
return a.run(data1);
}
return{
data2:2,
fun2:function(){
return 'hello';
}
}
})
如果模块定义没有其他代码，只返回一个对象，还可以有如下简化写法：
define({
data2:2,
fun2:function(){
return 'hello';
}
})
第三种写法对于定义纯JSON数据的模块非常合适。
根据应用场景的不同，SeaJS提供了三个载入模块的API，分别是：seajs.use,require和require.async。
seajs.use
seajs.use主要用于载入入口模块。入口模块相当于C语言的main函数，同时也是整个模块依赖树的根。seajs.use
的用法如下：
//第一模式
seajs.use('./a');
//回调模式
seajs.use('./a',function(a){
a.run();
})
//多模块模式
seajs.use(['./a','./b'],function(a,b){
a.run();
b.run();
})
其中多模块的用法和KISSY中的模块加载方法类似，不亏是一个人写的啊！
一般seajs.use只用在页面载入入口模块，SeaJS会顺着入口模块解析所有依赖模块并将它们加载。如果入口模块只有一个，也可以通过给引入seajs的script标签加入“data-main”属性来省略seajs.use，例如一下写法：
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>TinyApp</title> </head> <body> <p class="content"></p> <script src="./sea.js" data-main="./init"></script> </body> </html> require
require是seajs主要的模块加载方法，当在一个模块中需要用到其他模块时一般用require加载：
var m=require('./a');
require.async
上文说过seajs会在html页面打开时通过静态分析一次性记载所有需要的js文件，如果想要某个js文件在用时才加载，可以使用require.async。
这样只有在用到这个模块时，对应的js文件才会被下载，也就实现了JavaScript代码的按需加载。
SeaJS的全局配置
seajs提供了一个seaj.configd的方法可以设置全局配置，接收一个表示全局配置的配置对象，具体方法如下：
seajs.config({
base:'path',
alias:{
'app':'path/app/'
},
charset:'utf-8',
timeout:20000,
debug:false
})
其中，
•base表示基址路径
•alias可以对较长的常用路径设置缩写
•charset表示下载js时script标签的charset属性。
•timeout表示下载文件的最大时长，以毫秒为单位。
Seajs如何与现有的JS库配合使用
要将现有的JS库与seajs一起使用，只需根据seajs的模块定义规则对现有库进行一个封装。例如，下面是对jQuery的封装方法：
define(function(){
/*
此处为jquery源码
*/
})
一个完整的例子：
上文说了那么多，知识点比较分散，所以最后我打算用一个完整的SeaJS例子把这些知识点串起来，方便朋友们归纳回顾。这个例子包含如下文件：
•index.html 主页面
•sea.js
•jquery.js
•init.js init模块，入口模块，依赖data、jquery、style三个模块，又主页面载入
•data.js data模块，纯json数据模块
•style.css css样式表
html：
<!DOCTYPE HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="content">
<p class="author"></p>
<p class="blog"><a href="#">Blog</a></p>
</div>
<script src="sea.js"></script>
<script>
seajs.use('init');
</script>
</body>
</html>
javascript:
//init.js
define(function(require, exports, module) {
var $ = require('./jquery');
var data = require('./data');
var css = require('./style.css');
$('.author').html(data.author);
$('.blog').attr('href', data.blog);
});
//data.js
define({
author: 'ZhangYang',
blog: 'http://blog.codinglabs.org'
});
css:
.author{color:red;font-size:10pt;}
.blog{font-size:10pt;}
请注意：
1.请讲jquery.js源码文件包含在seajs模块加载代码中；
2.在Sea.js < 2.3.0版本之前是可以加载css文件的，新版本中此功能移除，为了兼容考虑，加载css功能将作为一个插件存在。
使用方法
•可以在sea.js标签后引入这个插件使用
•也可以将插件代码混入sea.js当中
•和seajs-style的区别 •seajs-css是使 Sea.js 能够加载一个css文件，和link标签一样
•seajs-style是指提供一个seajs.importStyle方法用于加载一段 css 字符串
以上内容是小编给大家分享的JavaScript模块化开发之SeaJS，希望对大家学习javascript模块化开发有所帮助，谢谢大家一直以来对我们网站的支持。！
相关推荐
-
seajs模块之间依赖的加载以及模块的执行
本文介绍的是seajs模块之间依赖的加载以及模块的执行,下面话不多说直接来看详细的介绍. 入口方法 每个程序都有个入口方法,类似于c的main函数,seajs也不例外.系列一的demo在首页使用了seajs.use() ,这便是入口方法.入口方法可以接受2个参数,第一个参数为模块名称,第二个为回调函数.入口方法定义了一个新的模块,这个新定义的模块依赖入参提供的模块.然后设置新模块的回调函数,用以在loaded状态之后调用.该回调函数主要是执行所有依赖模块的工厂函数,最后在执行入口方法提供的回调.
-
seajs模块压缩问题与解决方法实例分析
本文实例讲述了seajs模块压缩问题与解决方法.分享给大家供大家参考,具体如下: 在优化整理项目代码时,想使用seajs来把代码模块化.看了下官方5分钟上手教程,觉得很不错,也没多想就一直开发下去了,也没出什么问题.等一同事说把代码打包个放到设备上去测试一下,发现怎么也跑不起来,郁闷了. 于是单步调试一把,发现模块一直加不进来.看了一下seajs的原码,明白了是怎么回事. define模块解析依赖有两种途径,一种是从define(id, deps, factory)中的deps来:还有一种是解析
-
seajs中模块依赖的加载处理实例分析
本文实例讲述了seajs中模块依赖的加载处理.分享给大家供大家参考,具体如下: 最近在做项目的时候发现一些关于模块依赖问题,特记录下: 比如现有3个文件: /*init.js*/ define(function(require, exports, module){ require('jquery'); require('jquery.plugA'); }) /*jquery.plugA.js*/ define(function(require, exports, module){ require
-
把jQuery的类、插件封装成seajs的模块的方法
注:本文使用的seajs版本是2.1.1一.把Jquery封装成seajs的模块 复制代码 代码如下: define(function () { //这里放置jquery代码 把你喜欢的jquery版本放进来就好了 return $.noConflict();}); 调用方法:这样引进就可以像以前一样使用jquery 复制代码 代码如下: define(function (require, exports, module) { var $ = require('./js/jquery');
-
深入探寻seajs的模块化与加载方式
由于一直在使用,所以了解了下seajs的源代码.这里是我对下面几个问题的理解: 1.seajs的require(XXX)的方法是怎样实现模块加载的? 2.为什么需要预加载? 3.为什么需要构建工具? 4.构建前后的代码究竟有些什么区别,为什么要这么做? 问题1: seajs的require(XXX)的方法是怎样实现模块加载的? 代码逻辑比较绕,对源代码的理解放在文章的末尾,这里先简单梳理下模块加载的逻辑: 1.从seajs.use方法入口,开始加载use到的模块. 2.use到的模块这时mod缓
-
基于gulp合并压缩Seajs模块的方式说明
之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块合并压缩的问题. 然后一开始在解决这个问题的时候,并不是很顺利,在npm上并没有那种特别流行的专门用来做seajs合并压缩的gulp插件,虽然在seajs的github上也看了不少的issue,但是大多数都是只能将所有的模块文件合并成一个总的文件,这对于单页面的应用来说肯定没有问题,但是对于多页面的
-
seaJs的模块定义和模块加载浅析
SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css模块样式.SeaJS非常小巧,小巧在于压缩和gzip后体积只有4K,而且接口和方法也非常少,SeaJS 就两个核心:模块定义和 模块的加载及依赖关系.SeaJS非常强大,SeaJS可以加载任意 JavaScript 模块和css模块样式,SeaJS会保证你在使用一个模块时,已经将所依赖的其他模块载入到脚本运行环境中.玉伯的说法,SeaJS可以让你享受写代码的乐趣,
-
Seajs 简易文档 提供简单、极致的模块化开发体验
非官方文档,整理来自己官方文档的文字与实例,方便速查. 为什么使用 Sea.js ? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. 自然直观的代码组织方式:依赖的自动加载.配置的简洁清晰,可以让我们更多地享受编码的乐趣. Sea.js 还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口. 兼容性 Sea.js 具备完善的测试用例,兼容所有主流浏览器: C
-
seajs中模块的解析规则详解和模块使用总结
seajs github 模块标识已经说的相对清楚了.但并没有面面俱到,特别是当你需要手写 [模块ID]和[模块依赖]的时候,或者自己写自动化工具来做 transport 的时候(ps:spm貌似适应性不是很强也不易用,毕竟每个项目的目录结构可能相差很大,且不易改变.当然如果他的定位是包管理工具就别指望它来做你的项目的自动化构建工具了),ID的解析规则就需要了解透彻了.注意事项:1. 顶级标识始终相对 base 基础路径解析.2. 绝对路径和根路径始终相对当前页面解析.3. require 和
-
seajs学习之模块的依赖加载及模块API的导出
前言 SeaJS非常强大,SeaJS可以加载任意 JavaScript 模块和css模块样式,SeaJS会保证你在使用一个模块时,已经将所依赖的其他模块载入到脚本运行环境中. 通过参照上文的demo,我们结合源码分析在简单的API调用的背后,到底使用了什么技巧来实现各个模块的依赖加载以及模块API的导出. 模块类和状态类 首先定义了一个Module类,对应与一个模块 function Module(uri, deps) { this.uri = uri this.dependencies = d