sea.js
一,
sea.js 向全局中引入了两个变量 seajs,define;
1,seajs 用加载文件
seajs.use(deps,callback) 异步引入入口模块
路径要以 sea.js 文件所在的目录为准
参数:
deps: 可以是一个字符串, 也可以是一个数组; 如果是一个字符串表示要引入的文件地址; 如果是一个数组, 表示加载多个模块文件.
callback: 回调函数, 模块文件加载进来之后执行的事情
回调函数的参数是对应的模块向外暴露的内容
- eg:
- seajs.use(["js/A.js", "js/B.js"])
注意: seajs.use 不能引入具备 id 的模块, 因为第一个参数既是文件的路径又是文件的 id
2,define 定义模块
只有当参数是函数的时候才有意义
(1) 一个参数定义模块
define(content) 当 content 为非函数时, 定义即暴露; 当 content 是函数时, 暴露如下:
define(function(require, exports, module) {
这种定义方式默认暴露一个对象出去
})
(2) 两个参数定义模块
第一种方式: define(id,handler)
参数: id: 当前模块的 id;handler: 当前模块的函数体
第二种方式: define(deps,handler)
参数: deps: 当前模块所依赖的其他模块, 数组类型; handler: 当前模块的函数体
(3) 三个参数定义模块
define(id,deps,handler)
参数: id: 当前模块 id;deps: 当前模块所依赖的其他模块, 数组类型; handler: 当前模块的函数体
二, 模块暴露
(1) 定义即暴露
define(非函数)
(2) 使用 exports 向外暴露
打点或方括号添加属性
- define(function(require,exports,module){
- exports.a = 10;
- })
(3) 使用 module.exports 向外暴露
打点或方括号添加属性
module.exports.a = 10;
(4) 使用 this 向外暴露, 只可以打点向外暴露内容
(5) 使用 return 向外暴露
三, 加载具备 id 的模块
seajs.use 无法引入 具备 id 的模块
原因: seajs.use 方法的参数接收的既是文件的路径有事模块的 id, 所以能加载默认模块, 因为默认模块的路径和 id 一致;
当模块具备 id 时, seajs.use 只可以完成第一步: 加载文件; 但是第二步: 加载模块完成不了.
- // 把 A 文件作为入口文件, 然后把 BB(带 id 的模块) 模块暴露, 在 A 文件里面通过 require 引入 BB 模块文件; 在 index.html 文件中引入 A 模块文件
- // 想要引入 BB.js 模块文件中的 a 模块, 无法使用 seajs.use;
- // 所以使用 A.js 引入 BB.js 文件中的 a 模块
- index.html:
- seajs.use("A.js",function(b) {
- // console.log(b)
- })
- A.js:
- define(["js/BB.js"],function(require, exports, module) {
- var b = require("a")
- console.log(b)
- })
- BB.js:
- define("a",function(require,exports,module) {
- module.exports.a = 12;
- })
四, require.async() 用法同 seajs.use
五, 模块配置
配置需要使用 seajs.config 方法
1,paths: 值是一个对象, 用来配置路径, 方便跨目录调用
用法:
- seajs.config({
- psth:{
- key: value;// 用所有的 key 代替 value
- }
- });
案例:
- index.html:
- seajs.config({
- //paths 值是一个对象, 用来配置路径, 所有的 key 代替 value
- paths: {
- "j":"js"//AA.js 文件在 js 文件夹下, 用 j 来代替 js 路径
- }
- })
- // 此处在引用模块文件时就可以用 j
- seajs.use("j/AA",function(a) {
- console.log(a) // 输出 111
- })
- AA.js:
- define(function(require,exports,module) {
- module.exports.aa = 111;
- })
2,alias: 值是一个对象, 用来给文件起别名
用法:
- seajs.config({
- alias:{
- key: value;// 用所有的 key 代替 value
- }
- });
案例:
- index.html:
- seajs.config({
- //alias 给一个文件起别名
- alias: {
- "b": "js/AA" // 把 AA 模块文件起别名为 b
- }
- })
- // 此处引入 AA.js 文件时就可以用 b 代替
- seajs.use("b",function(a) {
- console.log(a) // 输出 111
- })
- AA.js:
- define(function(require,exports,module) {
- module.exports.aa = 111;
- })
3,map: 映射, 可用于路径转换; 例如, 将数组中的第一个全部按照规则映射成第二个
案例:
- seajs.config({
- // 映射
- map: [
- // 将数组中的第一个 全部按照规则映射成第二个
- ['http://example.com/js/app/', 'http://localhost/js/app/']
- ]
- });
4,vars: 变量配置
案例:
- index.html:
- seajs.config({
- vars: {
- a: "BB"
- }
- })
- seajs.use("js/AA",function(a) {
- })
- AA.js:
- define(["js/BB"],function(require,exports,module) {
- var lang = require("js/{a}")// 加载的是 js/BB.js
- console.log(lang) // 输出 12
- })
- BB.js:
- define(function(require,exports,module) {
- module.exports.dd = 12;
- })
5,base: 配置根目录
六, require.async: 模块内部异步加载一个或多个模块; 用法跟 seajs.use 一样.
案例:
- define(function(require){
- require.async(['aModule','bModule'],function(a,b){ // 异步加载多个模块, 在加载完成时, 执行回调
- a.func();
- b.func();
- })
- });
来源: http://www.bubuko.com/infodetail-2648865.html