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会赋值为 ,没有特别的必要建议不要传入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,例如一下写法: