Seajs 笔记

Seajs介绍

seajs是国内的一套模块化开发框架，有淘宝工程师王伯写的，有中文文档，学习简单

开源代码库

https://github.com/seajs/seajs

Seajs出现的比较晚，因此借鉴了，nodejs的commonjs规范（加载时同步的），但是前端使用文件是要异步加载文件的，加载完成之后才能使用，又借鉴了前端的AMD规范，seajs的规范称之为cmd规范，这套框架在使用的时候，建议我们使用commonjs规范

模块化开发分两步： 定义模块、 使用模块

①seajs的引入

seajs 引入之后会向全局添加两个变量， 第一个是seajs，第二个是define

seajs引入文件的目录是seajs为根目录引入文件的

通常我们把seajs放最外层（根目录最后就放在最最最外层的文件夹里，这样引入其他文件的时候不易出错）

seajs对js敏感，所以可以省略 . js后缀

seajs本身就是一个对象，对象中包含了一些函数和对象，还有一些相关信息

seajs . use 是规定如何使用模块

seajs.config 用来配置模块

 

②定义模块

1 传递一个参数

define（xx）xx：可以是数字，字符串，数组，对象，Boolean

以上定义参数的形式，定义什么就会向外暴露什么

如果参数是一个函数：

函数中就会有三个参数：

require：引入其他模块的方法

exports：是向外暴露内容的对象

module：模块的相关信息

暴露的接口是由exports或者是module定义

经常使用的就是这一种

 

seajs暴露接口的方法

exports.xx

module.exports.xx

module.exports = fn

return str

return {}

return fn

this.xx = xx 不推荐this

优先级： return > module.exports > exports = this

 

2 传递两个参数

define（str，fn）

str：字符串 表示模块id

fn： 定义模块的函数

具有id 的模块，seajs.use不能直接加载

define（arr，fn）

arr: 表示模块的依赖集合

arr中是模块的文件地址，写入这里的模块文件都会被加载，但是模块不会被指定

fn：定义模块的函数 require， exports， module ，require 方法指定arr中加载进来的这些模块文件中的所有模块的id

 

3 传递三个参数

define（str ，arr ，fn）id（同常写当前文件的路径） 依赖集合（需要加载的模块的文件地址） 回调函数（require， exports， module）

④ 引入带有id的模块

引入带有id的模块：

1 在依赖集合中加载模块文件

2 使用require指定模块的id （可以是字符串和数组）

require（“ID”， fn）requirejs中不可以使用字符串的形式

require（[ “ID” ]， fn）推荐，这个数组方法和requirejs一样

 

每个模块文件最终都会有一个id

如果一个模块文件中，有两个匿名的模块，以下面模块为准。

如果一个模块文件中， 有两个相同id的模块，是以第一个为准

如果一个模块文件中， 有多个不同id的模块，那么以require指定的id为准

⑤ seajs.use方法

seajs.use方法有两种使用方式

1 seajs.use(str, fn)

str: 模块的文件地址（表示引入了一个模块文件，通常是入口文件）

fn：回调函数，函数中的参数就是前面引入模块文件向外暴露的功能

 

2 seajs.use(arr , fn)

arr： 模块的依赖集合

fn： 回调函数，函数中的参数就是前面引入模块文件向外暴露的功能一一对应的

 

⑥配置seajs seajs插件

我们使用seajs.config方法来配置信息

配置：是框架本身就有的功能，只是被隐藏了，需要开启，所以要配置

插件：本身没有这个功能，只是别人实现了，需要引入文件才能使用

 

1 alias 用来简化文件用，如果文件名称过长，我们用这个简化

seajs.config({

    alias: {

    "m" : "modules/js/jquery-1.7.2"

    }

})

 

2 paths 用来简化路径 (paths只能用来简化路径)

seajs.config({

    paths: {

    "m" : "modules"

    }

})

3 map 批量处理文件，值是一个二维数组

数组中的第一个成员表示修改后的文件，第二个成员表示匹配的文件

// 使用config进行配置
seajs.config({
	// map
	map: [
		// [".js", ".min.js"]
		["jquery.js", "jquery.min.js"]
	]
})
// 引入模块文件
seajs.use("modules/js/jquery", function(jq) {
	console.log(jq)
})
// 这里不会影响main.js的引入
seajs.use("modules/main", function(main) {
	

4 vars 处理路径不能拼接的问题

seajs.config({

    paths: {

    "j" : "jquery"

    }

})
var jq = require("modules/js/{j}-1.7.2");

 

5 base 改变根目录 （常用）

seajs.config({

    paths: {

    base: "modules"

    }

})

插件

css插件

第一步在seajs文件后面引入seajs-css.js插件

第二步引入css文件即可

注意： 引入的css文件一定不能省略.css后缀， seajs对js敏感， 对css不敏感

<script type="text/javascript" src="sea.js"></script>
<script type="text/javascript" src="seajs-css.js"></script>
<script type="text/javascript">
// 引入css文件
seajs.use("css.css");

 

预加载插件（比较重要）

第一步在seajs文件之后引入seajs-preload.js插件

第二步配置preload

值是一个数组，数组中的成员就是要预先加载的文件（加载时间实在use方法之后，模块加载之前去执行，所以预加载的配置我们一般要放在最前面

// 配置preload
seajs.config({
preload: ["jquery-1.7.2.js"]
})

seajs.use("main", function() {
	console.log($);
})