模块化开发,SesJS简单总结

一、概念:
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

模块化开发,SesJS简单总结

上一篇:jQuery: Redirect to other URL


下一篇:PyQT5速成教程-1 简介与环境搭建