一、概念:
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架。
在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范。该规范明确了模块的基本书写格式和基本交互规则。
在 CMD 规范中,一个模块就是一个文件。代码的书写格式如下:define(factory);
SeaJS解决了两个问题:
1.JavaScript的模块化
2.按模块加载
SeaJS在开发中的角色:在多人协作开发时,起着后勤人员的作用,协调 文件依赖、命名冲突、按需加载的作用;
二、用法:
1.引入sea.js
2.定义模块--define
3.对外提供接口--export
4.依赖接口--require
5.调用模块--seajs.use
例:
为了让 sea.js
内部能快速获取到自身路径,推荐手动加上 id
属性
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>seajs的使用方法</title> 6 <script type="text/javascript" src="sea/sea.js" id="seajs"></script> 7 <script> 8 /* 9 调用模块 10 语法: 11 seajs.use(url, callback); 12 参数说明: 13 url: 调用模块的地址, url默认根目录是sea.js所有文件夹 14 callback: 回调函数 15 内部工作原理: 16 填入url后,seajs会异步加载url的文件, 加载完成后执行 callback; 17 这样就实现了按模块加载JS,也可以说是按需加载。 18 */ 19 seajs.use(‘./js/test1.js‘,function(ex){ 20 21 //ex就是对外接口export 22 ex.tab(); 23 24 function tab(){ 25 alert(‘我是现写的,大家都是tab,但不冲突哦~~‘); 26 } 27 28 tab(); //很好的就解决了命名冲突 29 30 }); 31 32 </script> 33 </head> 34 35 <body> 36 </body> 37 </html>
目录层级关系如下 :
test1.js 如下:
1 // JavaScript Document 2 /* 3 定义模块 4 语法: 5 define(function (require, exports, module){ //参数写法是固定 6 //your code gose here 7 }); 8 参数说明: 9 require: 依赖的接口 10 exports: 对外提供的接口 11 module: 12 内部工作原理: 13 1.当调用require方法时,seajs会同步加载url的文件,这样就解决依赖问题了。如果想异步加载就用require.async(url, callback); 14 2.exports对象下包含的是对外提供的属性和方法,调用seajs.use时,callback函数的参数就是exports对象 15 */ 16 define(function(require, exports, module){ 17 18 //如果依赖的是一个普通JS文件 19 require(‘./test2.js‘); 20 21 //如果依赖的是一个用define写的JS模块 22 var ex = require(‘./test3.js‘); 23 24 function tab(){ 25 alert(‘我是test1模块的一个方法‘); 26 alert(‘test1‘ + a); 27 alert(‘test1‘ + ex.b) 28 } 29 30 exports.tab = tab; 31 32 });
test2.js 如下:
1 // JavaScript Document 2 3 var a = ‘依赖test2了, 我是test2的全局变量‘;
test3.js 如下:
1 // JavaScript Document 2 3 define(function(require,exports,module){ //参数写法是固定 4 5 exports.b = ‘依赖test3了,我是test3模块的局部变量‘; 6 7 });
上面说到了seajs中常用的4个方法,别外请参考管方的seajs常用的7个方法: https://github.com/seajs/seajs/issues/266
模块化开发,SesJS简单总结,布布扣,bubuko.com
原文:http://www.cnblogs.com/Ivangel/p/3824541.html