seajs开篇：我为什么学习seajs，因为它的"预先下载,延迟执行"特性

最新推荐文章于 2017-06-09 10:27:18 发布

aitangyong

最新推荐文章于 2017-06-09 10:27:18 发布

阅读量1.5k

点赞数

分类专栏： seajs&CMD 文章标签： seajs入门 seajs的优势

本文链接：https://blog.csdn.net/aitangyong/article/details/49280923

版权

seajs&CMD 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

之前参与的2个项目都用到了js模块化工具requireJS框架，工作之余学习了这个框架，也熟悉了requireJS的基本用法以及AMD规范。本来对seaJS没有太大的兴趣，知道它实现了CMD规范，功能和requireJS类似仅此而已。最近在自己关注的微信订阅号"前端大全"看到了一篇文章"js模块化历程"，对seajs产生了极大的兴趣，因为它有"预先下载，延迟执行"的特性。

首先需要从官网下载seajs，我使用的是当前的最新版本seajs-3.0.0.zip。解压后得到如下结构，其中dist目录下的sea.js就是我们需要的seajs库。

我的例子代码目录结构如下：

examples/
  |-- lib      存放 seajs、jquery等第三方库
  |-- app      存放模块a和模块b
  |     |-- a.js
  |     |-- b.js
  |   
   -- index.html 首页
   --  main.js   js入口

首先利用seajs编写模块a、模块b、模块main，源码如下：

//a.js
define(function(){
     console.log('a.js');
     return {
          hello: function(){
               console.log('hello, a.js');
          }
     }
});

//a.js
define(function(){
     console.log('a.js');
     return {
          hello: function(){
               console.log('hello, a.js');
          }
     }
});

//main.js系统初始化入口
define(function(require, exports, module) {
	 console.log('main.js');

     var a = require('a');
     a.hello();    

     $('#b').click(function(){
          var b = require('b');
          b.hello();		  
     });

});

下面是index.html源码，主要就是引入seajs。这里需要注意:seajs对jquery的支持不好，无法按照模块的方式加载jquery，所以我直接在页面中引入jquery。

<html>
<head>
	<script src="./libs/jquery-1.11.1.min.js"></script>
	<script src="./libs/seajs-3.0.0/dist/sea.js"></script>
	<script>	
	seajs.config({
		base: ".",
		alias: {
			"a" : "app/a.js",
			"b" : "app/b.js"
		}
	});
	// 加载入口模块
	seajs.use("main");	
	</script>
</head>
<body>
	<button id="b">click me</button>
</body>
</html>

运行index.html，执行结果如下:

可以看到：浏览器下载了a.js和b.js，控制台打印了a.js却没有打印b.js。只有点击了"click me"按钮的时候，才需要加载(初始化)b模块。对于b模块来说，浏览器的确提前下载了文件，但是b模块的初始化是等到"click me"按钮点击的时候才执行。这就是所谓的"预先下载，延迟执行"。