三、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. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐