Seajs 模块化 require 模块 基础详解
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的后缀名称
- seajs本身就是一个对象,对象中包含各种功能函数以及相关信息
- seajs.config 是规定如何配置模块的
- seajs.use 是规定如何使用模块的
1.2:定义模块:define函数
一:传递一个参数
define 函数用来定义模块的,可以接受三个参数!
因此提供传递的是值类型的时候(数字,字符串,Boolean),这种传递数据的方式会直接作为接口暴露出来
define(1);
传递的是引用类型的时候(arr,obj)
也是作为接口直接暴露出来
define("abc");
传递一个函数的时候(fn),fn有三个参数:
- require 用来引入其他模块
- exports 向外暴露功能
- 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加载这个模块的
注意
- require:不能简写
- require:不能被修改
- require:不能被赋值
- require:不能赋值给其他的变量
- require:不能作为子函数的参数传递
- require:不能在子函数中修改
- 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;
})
上一篇: Python Matplotlib的使用