上个月学了 require.js
现在顺便来学学 sea.js.
对比下这两种的区别,看自己喜欢哪个,就在接下来的项目中去使用它吧.
seajs中的所有 JavaScript 模块都遵循 CMD 模块定义.
在 CMD 规范中,一个模块就是一个文件.
主要API有
define
define(factory);
// define 用来定义模块 factory 可以是一个函数,也可以是一个对象或字符串.
define({"foo":"bar"});
define("This is a string.");
// 当 factory 为 函数时,表示模块的构造方法.执行该构造方法可以得到模块向外提供的接口.
// factory 方法执行时,默认传入三个参数: require,exports 和 module;
define(function(require,exports,module){
// 模块代码
});
// define还能接收两个以上参数.
// id 为 字符串,是 模块标识, deps 为 数组,是依赖的模块
// 该方式不属于 CMD 规范
define(id,[deps],function(require,exports,module){
// 模块代码
});
define.cmd // 用来检测是否有 CMD 模块加载器
require
// require 是 factory 函数的第一个参数,也是一个方法.用来接收 模块标识
require(id)
require.async(id,callback?)
// require 是同步往下执行, require.async 是异步回调执行,一般用来加载可延迟异步加载的模块
exports
// exports 是一个对象,用来向外提供模块接口
module
// module 也是一个对象,存储了当前模块的一些属性和方法
常用的 API 有 define,require,require.async,exports,module.exports 这五种.
关于seajs的配置
seajs.config({
// 别名配置
alias:{
"jquery":"./jquery"
},
// require('jquery') => 加载的是 ./jquery.js
// 路径配置
paths:{
"jquery":"./jquery"
},
// require('jquery/jquery') => 加载的是 ./jquery/jquery.js
// 变量配置
vars:{
"locale":"zh-cn"
},
// require('./common/{locale}.js') => 加载的是 ./common/zh-cn.js
// 映射配置
map:[
['.js' , '-min.js']
],
// require('./jquery'); => 加载的是 jquery.min.js
// 预加载项
preload:[
this.JSON ? '' : 'json'
],
// 当 this.JSON 为空时,加载 json 模块
// 调试模式
debug:true,
// 开启调试时,不会删除动态插入的 script 标签
// 基础路径
base:"./base/",
// 文件编码
charset:"utf-8"
});
// seajs.config 可以多次运行,每次运行都会合并当前操作, 如果存在则覆盖
在项目中利用 seajs
目录结构为
│ .gitignore
│ gulpfile.js
│ package.json
│ README.md
│
├─app
│ index.html
│ seajsConfig.js
│
├─debug
│ └─js
│ │ main.js
│ │
│ ├─forum
│ │ detail.js
│ │ index.js
│ │ post.js
│ │
│ ├─main
│ │ index.js
│ │ str.js
│ │
│ ├─other
│ │ │ swiper-3.2.7.jquery.min.js
│ │ │
│ │ ├─jquery
│ │ │ jquery.js
│ │ │
│ │ └─seajs
│ │ sea.js
│ │
│ └─user
│ index.js
│ user.js
app文件夹下的 index.html引用 seajs 和 入口文件
<script src="./js/other/seajs/sea.js"></script>
<script src="./seajsConfig.js"></script>
将 seajs 一些配置写在入口文件里
if(location.href.indexOf('?dev') > 0){
// 根据字段判断是否进入调试模式
seajs.config({
base:"../debug/js",
debug:true,
});
}else{
// 进入发布状态
seajs.config({
base:"./js",
map:[
['.js','.min.js']
],
});
}
seajs.config({
// 路径配置
paths:{
'user':'user',
'forum':'forum',
'main':'main'
},
// 别名配置
alias:{
'jquery':'other/jquery/jquery',
'swiper':'other/swiper-3.2.7.jquery',
}
})
seajs.use('main/index');
seajs.use('forum/index');
debug/js/main/index.js
define(function(require){
// require 添加依赖
// 依赖先加载所以先输出 str 里的 console.log
var str = require('main/str');
var swi = require('swiper');
console.log('这是在 main/index 里');
console.log(str);
});
debug/js/main/str.js
define(function(require,exports,module){
// 通过 module.exports 输出内容
module.exports = "这是一个 STR";
// 或者 通过 exports 暴露部分内容
// exports.str1 = "这是 str 1";
// exports.str2 = "这是 str 2";
console.log("这是在 main/str 里");
});
打开 index.html,将会发现依赖是已经按顺序加载并执行
可以看到 js 都会按顺序加载并执行.
为什么需要打包?
可以看到上面的例子里, 网页将会加载更多的 js 文件,造成更多的响应,反而会拖慢网站的速度.为此我们需要将其打包起来.
本例中采用 gulp 和 gulp-seajs-pack 去打包这些js
'use strict';
var gulp = require('gulp');
var pack = require('gulp-seajs-pack');
gulp.task('default',function(){
console.log('test')
});
gulp.task('seajs',function(){
var config = {
// 设置要打包的目录
base:"./debug/js",
paths:{
'user':'user',
'forum':'forum',
'main':'main'
},
alias:{
'jquery':'other/jquery/jquery',
'swiper':'other/swiper-3.2.7.jquery',
},
output:[
//"first/index.js"
]
};
return gulp.src([
"./debug/js/**/*.js",
// 第三方包
"!./debug/js/other/**/*.js"
])
// 选择 打包目录下的所有JS
.pipe(pack(config))
// 开始打包
.pipe(gulp.dest("./app/js"));
// 将打包后的 JS 输出到 目标目录里
});
然后执行
$ gulp seajs
即可完成打包.
生成的目录如下:
├─forum
│ detail.js
│ index.js
│ post.js
│
├─main
│ index.js
│ str.js
│
└─user
index.js
user.js
文件还是太大,先进行压缩
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
gulp.task('web-js-ug',function(){
gulp.src([
"./debug/js/other/**/*.js",
"./app/js/**/*.js",
"!./app/js/**/*.min.js",
"!./app/js/other/**/*.js",
])
.pipe(gulp.dest('./app/js'))
.pipe(uglify())
.pipe(rename({
extname:".min.js"
}))
.pipe(gulp.dest('./app/js'))
});
执行
$ gulp web-js-ug
再刷新 index.html 时,
这样就算打包完毕.
项目地址在 GitHub