1、前言 javascript
浏览器自己并不提供模块管理的机制,过去网页开发中,为了使用各类模块,不得不在加入一大堆script标签。这样就使得网页体积臃肿,难以维护,还产生大量的HTTP请求,拖慢显示速度,影响用户体验。为了解决这个问题,前端的模块管理器应运而生。它能够轻松管理各类JavaScript脚本的依赖关系,自动加载各个模块,使得网页结构清晰合理。html
最先的模块管理器是RequireJs,能够实现异步加载模块,以后出现了Brower、component、seaJs,还有模块化组织工具webpack等,各类模块加载器都有着共同的目标。今天让咱们讲讲seaJs,本人工做中,常常会使用到sea.js,发现这个加载器确实有好用之处。前端
sea.js是一个前端代码模块加载器,经过sea.js能够吧大量的js代码封装成一个一个小模块,实现模块的加载和依赖管理。有了sea.js,在前端开发过程当中,开发人员能够分工书写各类模块,这种方法对协做开发、后续维护、性能调优都有很大的帮助。java
”Sea.js初衷是帮助前端开发工程师将大文件拆分红小文件,能保持小颗粒度的模块化开发,同时不须要过多考虑依赖关系,让依赖管理轻松自如,让模块化开发变得更天然,就像浏览器原生提供的同样。Sea.js的本质意义是经过模块化开发,来提升代码的可维护性。对工程师而言,是关注度分离,更将更多精力聚焦在代码自己的逻辑上。”-----玉伯(前端模块化开发框架SeaJS的创始人)。node
sea.js的核心设计思想:webpack
除了保持简单,Sea.js的设计理念还有职责清晰、性能优先和适度完备。web
2、开始使用浏览器
一、引入sea.js框架
<script type="text/javascript" src="./sea.min.js"></script>异步
二、定义模块
seajs.config({ alias: { 'plIndex' : 'js/poplayer/index.js?v=01190new012?v=19910', 'taskAnimate': 'js/poplayer/taskAnimate.js',
'a' : 'js/a.js'
} })
三、编写对应小模块,好比编写taskAnimate.js
define(function(require, exports, module){ exports.initTaskAnimation = initTaskAnimation;//exports是暴露的接口 function initTaskAnimation(data){ /*逻辑代码*/ } });
3、3种载入的方式
一、seajs.use
seajs.use('./a'); //回调模式 seajs.use('./a', function(a) { a.run(); }); //多模块模式 seajs.use(['./a', './b'], function(a, b) { a.run(); b.run(); });
注意这种写法,预加载a模块
define(['a'],function(require, exports, module){ //这个['a']是预加载这个模块,可是并不会执行里面的代码,只是引入 var _a = require('a'); //这个才会正在执行a里面的语句 });
二、require
函数用来访问其余模块提供的 API。
注意:只接受模块标识(如上面定义的模块)做为惟一参数,且参数是字符串。
define( function(require, exports, module) { var a = require("./a"); a.dosomething(); //或者能够是完整的路径 var b = require("//static.XXXXXX"); });
三、require.async
该方法可用来异步加载模块,并在加载完成后执行回调函数。
define(function(require, exports, module) { // 加载一个模块 require.async('./b', function(b) { b.doSomething(); }); // 加载多个模块 require.async(['./c', './d'], function(c, d) { // do something }); });
四、require和require.async区别
a、require没法完成条件加载,
以下代码会同时加载a模块个b模块(底层是调用函数的toString()方法)
define(function(require){ if(false) { require("./a); } else { require("./b"); } });
b、require.async能够按条件加载,且参数能够加入一个callback,而require不行!
4、最后讲讲seaJs的特色
seaJs遵循的是CMD(通用模块定义)规范,而CMD有延迟执行,推崇就近依赖,职责单一等特色。关于AMD和CMD的区别,以及和node所遵循的commonJs规范区别,可看另外一篇博文《commonJs 、AMD、 CMD》。
以上就是最简单的sea.js的使用,使用sea.js以后,能够把大的js文件,拆分为一个一个小的模块,大大提升开发效率。