三、Seajs介绍
是国内的一套模块化开发框架，有淘宝工程师王伯写的，有中文文档，学习简单
开源代码库
https://github.com/seajs/seajs
Seajs出现的比较晚，因此借鉴了，nodejs的commonjs规范（加载时同步的），但是前端使用文件是要异步加载文件的，加载完成之后才能使用，又借鉴了前端的AMD规范，seajs的规范称之为cmd规范，这套框架在使用的时候，建议我们使用commonjs规范
3.1 体验seajs
引入seaja之后会向全局暴露两个变量: seajs, define
在模块外部引入其它模块要是用use方法
第一个参数是模块文件的地址，是一个数组，数组中的每一项都是一个模块地址（如果引入的只有一个文件，可以省略数组）
第二个参数是回调函数
函数中的参数就是前面模块向外暴露的功能
作用域是window
seajs引入文件的路径是相对于seajs所在的文件目录（seajs所在的目录就是根目录）
通常我们将seajs放在最外面（与index.html文件在同一目录）
为了引入seajs方便
seajs对js文件敏感， 因此可以省略js后缀名称
1 |
seajs:
1 2 seajs本身是一个对象， 对象中包含各种功能函数以及相关信息 3 seajs.config 是规定如何配置模块的 4 seajs.use 是规定如何使用模块的 |
define:
1 2 define: 规定如何定义模块 |
3.2 定义模块
define函数用来定于模块，可以接受3个参数，因此提供了六种定义模块的方式：
传递一个参数：
当传递的是值类型的时候（数字， 字符串， boolean）
这种传递数据的方式会直接作为接口暴露出来
当传递的是引用类型的时候（arr, obj）
这种方式会作为接口暴露
当传递一个函数的时候（90%以上都是使用这种方式，因为它是基于comminjs规范）
此时有三个参数，分别是：
require 用来引入其它模块的
exports 向外暴露功能的
module 模块信息
作用域是全局作用域，所以不要使用this添加属性或者方法
如果使用this 将会污染全局作用域
暴漏的接口是由exports或者module定义的
传递两个参数：
第一个参数如果是一个字符串
表示模块的id
此时，不能直接在use方法中使用这个模块的（要配合require方法使用）
第一个参数如果是一个数组
表示模块的依赖集合 （数组中的每一项，不管有没有使用，都会被加载）
第二个参数是回调函数 （同第三种定义模块方式中的函数表现一致）
传递三个参数：
第一个参数是一个字符串
表示模块的id
第二个参数是一个数组
表示模块的依赖集合
第三个参数是回调函数（同第三种定义模块方式中的函数表现一致）
2 // 定义模块的第一种方式 3 // 传递数字 4 define(1); 5 // 传递字符串 6 define("abc"); 7 // 传递布尔值 8 define(true); 9 10 // 第二种方式 11 // 传递数组 12 define([1, 2, 3]); 13 // 传递对象 14 define({ 15 color: "red", 16 width: 100 17 }) 18 19 // 第三种方式 20 define(function() { 21 console.log(this); 22 console.log(arguments); 23 }) 24 25 // 第四种方式 26 define("abc", function() { 27 define("modules/main", function() { 28 console.log(this); 29 console.log(arguments); 30 }) 31 32 // 第五种方式 33 define(["modules/dom"], function() { 34 console.log(this); 35 console.log(arguments); 36 }) 37 38 // 第六种方式 39 define("abc", ["modules/dom"], function() { 40 define("modules/main", ["modules/dom"], function() { 41 console.log(this); 42 console.log(arguments); 43 }) |
3.3 require模块
在一个模块中想要引入其它模块要分为两步：
第一步 找到这个模块的对应的文件
第二步 在这个文件中读取这个模块
Require是根据模块的id加载这个模块的
1 require 不能简写
1 // require不能被简写 2 define(function(req, exports, module) { 3 // 引入color.js 4 var color = req("js/color"); 5 console.log(color); 6 7 }) |
2 require 不能被修改
1 require不能被赋值
2 require不能赋值给其它变量
3 require不能作为子函数的参数传递
4 require不能在子函数中修改（上面的三点）
1 // require不能被简写 2 define(function(req, exports, module) { 3 // 引入color.js 4 var color = req("js/color"); 5 console.log(color) 6 7 }) 8 9 // require不能被修改 10 define(function(require, exports, module) { 11 // 1 require不能被赋值 12 // require = 123; 13 // 2 requier不能赋值其它变量 14 // var a = require; 15 // 3 不能在子函数中作为参数传递 16 function demo(require) { 17 // 4 require在子函数中不能被赋值 18 require = 123; 19 var color = require("js/color"); 20 console.log(color) 21 } 22 demo(require); 23 // 引入color.js 24 // var color = a("js/color"); 25 // console.log(color) 26 }) |
3 require参数只能是一个字符串，不能拼接
1 // 不能拼接 2 define(function(require, exports, module) { 3 // 引入color.js 4 var color = require("js" + "/" + "color.js"); 5 console.log(color) 6 }) |
3.4 加载具有id的模块
加载具有id的模块需要分为两步走：
第一步在依赖集合中加载该模块文件
第二步通过require去加载指定id模块
如果一个模块文件中有两个相同id的模块，前面的会覆盖后面
如果一个模块文件中有两个没有id的模块， 后面的会覆盖前面的
一个模块文件可以存在多个具有id的模块，引入的模块是以指定的id模块为准
1 // 两个相同id的模块 2 define("myid", function(require, exports, module) { 3 exports.a = 11; 4 }) 5 define("myid", function(require, exports, module) { 6 exports.a = 10; 7 }) 8 9 // 两个没有id的模块 10 define(function(require, exports, module) { 11 exports.a = 11; 12 }) 13 define(function(require, exports, module) { 14 exports.a = 10; 15 }) 16 17 // 两个不同id的模块 18 define("myId", function(require, exports, module) { 19 exports.a = 10; 20 }) 21 define("myId1", function(require, exports, module) { 22 exports.a = 11; 23 }) 24 25 26 |
3.5 暴露接口
1 console.log(arguments) 2 //第一种向外暴露接口的方式 3 exports.a = 10; 4 //这种方式是绝对不允许的 5 exports = { 6 b: 1 7 } 8 9 2 10 module.exports.a = 11; 11 12 3 13 module.exports = 123; 14 15 4 16 //这种方式会覆盖上面的方式 17 module.exports = { 18 a: 1, 19 b: 2 20 } 21 22 5 23 //外部使用的时候，要作为方法来使用 24 module.exports = function() { 25 console.log(123); 26 } 27 28 6 29 return 1; 30 return "abc" 31 32 7 33 return { 34 a: 1, 35 b: 2 36 } 37 38 8 39 return function() {} 40 41 }) 42 43 44 9 45 define(1); 46 define("1"); 47 48 10 49 define({ 50 a: 1 51 }) |
3.6 暴露接口优先级
return > module.exports > exports
3.7 模块信息
每一个模块，都有一个对象来存储模块的信息
id: 表示模块的id
uri: 模块的文件路径
默认情况下（如果一个模块没有显示的id）id与模块文件路径相统一
exports: 向外暴露内容的对象
dependencies: 模块依赖集合，是一个数组，数值中每一个文件就是依赖集合中的成员。
deps: 根据依赖集合产生的
status: 模块的状态
1 |
扫描下方二维码添加微信：haomei0452，领取 前端资料、项目实战视频教程 ！
爱创课堂是一家专门做前端培训的机构，由百度高级工程师，《JavaScript设计模式》作者张容铭老师亲自授课，全程20个项目实战，真正做到学习完即可到企业正常工作！
我们前端课程的五大优势：
1. 名师亲自授课，根据企业需求 实时跟进课程大纲，保证学员学到的都是最新的、企业最需要的前端知识点
2. 采取小班教学、上二休一的模式（一个班20—30人，保证老师可以照顾到每一位同学，学员有充足的时间练习）
3. 签订就业协议，帮助学员制作简历，投递简历，模拟面试，不用担心就业问题，目前学员平均就业薪资12K
4. 免费学习一周，不满意不收取任何费用
5. 与中国石油，中国电信，软通等知名企业合作，进行企业内训，并进行学员就业推荐
