sea.js 入门

上个月学了 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