欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Seajs 模块化 require 模块 基础详解

程序员文章站 2024-03-26 12:41:47
...

seajs 介绍–CMD

是国内的一套模块化开发框架,有淘宝工程师王伯写的,有中文文档,学习简单
开源代码库
https://github.com/seajs/seajs
Seajs出现的比较晚,因此借鉴了,nodejs的commonjs规范(加载时同步的),但是前端使用文件是要异步加载文件的,加载完成之后才能使用,又借鉴了前端的AMD规范,seajs的规范称之为cmd规范,这套框架在使用的时候,建议我们使用commonjs规范

1.1: seajs

引入seajs之后会向全局暴露二个变量:seajs  和define

在模块化外部引入其他的模块要使用use方法
第一个参数是模块化文件的地址,是数组,数组中的每一项都是一个模块地址(如果引入的只有一个文件,可以省略数组)

第二个参数:回调函数:
函数中的参数就是前面模块向外暴露的功能,作用域:window
seajs引入的文件的路径是相对于seajs所在的文件目录(seajs所在的目录就是根目录),通常我们将seajs放在最外面(与index.html)同一目录,为了引用seajs方便

seajs对JS文件敏感,因此可以省略JS的后缀名称

  1. seajs本身就是一个对象,对象中包含各种功能函数以及相关信息
  2. seajs.config 是规定如何配置模块的
  3. seajs.use 是规定如何使用模块的

1.2:定义模块:define函数

一:传递一个参数

define 函数用来定义模块的,可以接受三个参数!

因此提供传递的是值类型的时候(数字,字符串,Boolean),这种传递数据的方式会直接作为接口暴露出来

define(1);

传递的是引用类型的时候(arr,obj)
也是作为接口直接暴露出来

define("abc");

传递一个函数的时候(fn),fn有三个参数:

  1. require 用来引入其他模块
  2. exports 向外暴露功能
  3. modules 模块信息
    作用域是window

二:传递二个参数

第一个参数:
如果是字符串:表示模块的ID
如果是数组:表示模块依赖的集合

第二个参数:回调函数

define("abc", function() {
define("modules/main", function() {
	console.log(this);
	console.log(arguments);
})
 define(["modules/dom"], function() {
	console.log(this);
	console.log(arguments);
})
 

三:传递三个参数

第一个参数:字符串表示模块的ID
第二个参数:数组表示模块的集合
第三参数:回调函数

define("abc", ["modules/dom"], function() {
define("modules/main", ["modules/dom"], function() {
	console.log(this);
	console.log(arguments);
})

1.3:require:模块

在一个模块中想要引入其他模块分为两步:
第一步:找到这个模块对应的文件
第二步:在这个文件中读取这个模块
require是根据模块的ID加载这个模块的

注意

  1. require:不能简写
  2. require:不能被修改
  3. require:不能被赋值
  4. require:不能赋值给其他的变量
  5. require:不能作为子函数的参数传递
  6. require:不能在子函数中修改
  7. require:参数只能是一个字符串,不能拼接
// require不能被简写
define(function(req, exports, module) {
	// 引入color.js
	var color = req("js/color");
	console.log(color)

})

// require不能被修改
define(function(require, exports, module) {
	// 1 require不能被赋值
	require = 123;
	// 2 requier不能赋值其它变量
	var a = require;
	// 3 不能在子函数中作为参数传递
	function demo(require) {
		// 4 require不能在子函数中修改
		require = 123;
		var color = require("js/color");
		console.log(color)
	}
	demo(require);
	// 引入color.js
	var color = a("js/color");
	console.log(color)
})

//不能拼接
define(function(require, exports, module) {
	// 引入color.js
	var color = require("js" + "/" + "color.js");
	console.log(color)
})

1.4:加载具有id的模块

加载具有id的模块需要分两步走:
第一步:在依赖集合中加载该模块
第二步: 通过require去加载指定的ID模块

<script type="text/javascript">
	// 使用use方法引入main.js
	seajs.use(["js/main"], function(main) {
	})
	</script>
一个参数:
define(function(require, exports, module) {
	var dom = require("js/dom");
	console.log(dom);
})
二个参数:
define(["js/dom"], function(require, exports, module) {
	var dom = require("myid");
	console.log(dom);
})

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

define("myid", function(require, exports, module) {
	exports.a = 11;
})
define("myid", function(require, exports, module) {
	exports.a = 10;
})

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

//两个没有id的模块
define(function(require, exports, module) {
	exports.a = 11;
})
define(function(require, exports, module) {
	exports.a = 10;
})

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

// 两个不同id的模块
define("myId", function(require, exports, module) {
	exports.a = 10;
})
define("myId1", function(require, exports, module) {
	exports.a = 11;
})