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不敏感
预加载插件（比较重要）
第一步在seajs文件之后引入seajs-preload.js插件
第二步配置preload
值是一个数组，数组中的成员就是要预先加载的文件（加载时间实在use方法之后，模块加载之前去执行，所以预加载的配置我们一般要放在最前面
// 配置preload seajs.config({ preload: ["jquery-1.7.2.js"] }) seajs.use("main", function() { console.log($); })
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/219348.html原文链接：https://javaforall.net
