技术文章 | Technical articles

web前端开发源码笔记_大数据与git(下午)

三、Seajs介绍

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

开源代码库

https://github.com/seajs/seajs

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

 

3.1 体验seajs

引入seaja之后会向全局暴露两个变量: seajs, define

在模块外部引入其它模块要是用use方法

第一个参数是模块文件的地址,是一个数组,数组中的每一项都是一个模块地址(如果引入的只有一个文件,可以省略数组)

第二个参数是回调函数

函数中的参数就是前面模块向外暴露的功能

作用域是window

seajs引入文件的路径是相对于seajs所在的文件目录(seajs所在的目录就是根目录)

通常我们将seajs放在最外面(与index.html文件在同一目录)

为了引入seajs方便

 

seajsjs文件敏感, 因此可以省略js后缀名称

图片1.png

 

 

seajs:

图片2.png

seajs本身是一个对象, 对象中包含各种功能函数以及相关信息

seajs.config 是规定如何配置模块的

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

 

define:

图片3.png

define: 规定如何定义模块

 

3.2 定义模块

define函数用来定于模块,可以接受3个参数,因此提供了六种定义模块的方式:

传递一个参数:

当传递的是值类型的时候(数字, 字符串, boolean

这种传递数据的方式会直接作为接口暴露出来

当传递的是引用类型的时候(arr, obj

这种方式会作为接口暴露

当传递一个函数的时候(90%以上都是使用这种方式,因为它是基于comminjs规范

   此时有三个参数,分别是:

require 用来引入其它模块的

exports 向外暴露功能的

module 模块信息

作用域是全局作用域,所以不要使用this添加属性或者方法

如果使用this 将会污染全局作用域

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

 

传递两个参数:

第一个参数如果是一个字符串

表示模块的id

此时,不能直接在use方法中使用这个模块的(要配合require方法使用)

第一个参数如果是一个数组

表示模块的依赖集合 (数组中的每一项,不管有没有使用,都会被加载)

第二个参数是回调函数 (同第三种定义模块方式中的函数表现一致)

 

传递三个参数:

第一个参数是一个字符串

表示模块的id

第二个参数是一个数组

表示模块的依赖集合

第三个参数是回调函数(同第三种定义模块方式中的函数表现一致)

 

 

 

// 定义模块的第一种方式

// 传递数字

define(1);

// 传递字符串

define("abc");

// 传递布尔值

define(true);

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 不能简写

// require不能被简写

define(function(req, exports, module) {

// 引入color.js

var color = req("js/color");

console.log(color);

})

 

2 require 不能被修改

1 require不能被赋值

2 require不能赋值给其它变量

3 require不能作为子函数的参数传递

    4 require不能在子函数中修改(上面的三点)

// require不能被简写

define(function(req, exports, module) {

// 引入color.js

var color = req("js/color");

console.log(color)

})

// 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参数只能是一个字符串,不能拼接

// 不能拼接

define(function(require, exports, module) {

// 引入color.js

var color = require("js" + "/" + "color.js");

console.log(color)

})

 

3.4 加载具有id的模块

加载具有id的模块需要分为两步走:

第一步在依赖集合中加载该模块文件

第二步通过require去加载指定id模块

如果一个模块文件中有两个相同id的模块,前面的会覆盖后面

如果一个模块文件中有两个没有id的模块, 后面的会覆盖前面的

一个模块文件可以存在多个具有id的模块,引入的模块是以指定的id模块为准

 

// 两个相同id的模块

define("myid", function(require, exports, module) {

exports.a = 11;

})

define("myid", function(require, exports, module) {

exports.a = 10;

})

// 两个没有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 暴露接口

console.log(arguments)

//第一种向外暴露接口的方式

exports.a = 10;

//这种方式是绝对不允许的

exports = {

 b: 1

}

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: 模块的文件路径

默认情况下(如果一个模块没有显示的idid与模块文件路径相统一

exports: 向外暴露内容的对象

dependencies: 模块依赖集合,是一个数组,数值中每一个文件就是依赖集合中的成员。

deps: 根据依赖集合产生的

status: 模块的状态

图片4.png

 





扫描下方二维码添加微信:haomei0452,领取 前端资料、项目实战视频教程 !



爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战,真正做到学习完即可到企业正常工作!

 
我们前端课程的五大优势:

 
1. 名师亲自授课,根据企业需求 实时跟进课程大纲,保证学员学到的都是最新的、企业最需要的前端知识点
 
2. 采取小班教学、上二休一的模式(一个班20—30人,保证老师可以照顾到每一位同学,学员有充足的时间练习

3. 签订就业协议,帮助学员制作简历,投递简历,模拟面试,不用担心就业问题,目前学员平均就业薪资12K

4. 免费学习一周,不满意不收取任何费用

5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐


上一篇文章: web前端开发源码笔记_大数据与git(上午)
下一篇文章: 前端_模块化开发(上)

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>