seajs中模块的解析规则详解和模块使用总结


Posted in Javascript onMarch 12, 2014

seajs github 模块标识已经说的相对清楚了。但并没有面面俱到,特别是当你需要手写 【模块ID】和【模块依赖】的时候,或者自己写自动化工具来做 transport 的时候(ps:spm貌似适应性不是很强也不易用,毕竟每个项目的目录结构可能相差很大,且不易改变。当然如果他的定位是包管理工具就别指望它来做你的项目的自动化构建工具了),ID的解析规则就需要了解透彻了。
注意事项:
1. 顶级标识始终相对 base 基础路径解析。
2. 绝对路径和根路径始终相对当前页面解析。
3. require 和 require.async 中的相对路径相对当前模块路径来解析。
4. seajs.use 中的相对路径始终相对当前页面来解析。

seajs中,模块的ID大致可分为三种:【相对标识】、【顶级标识】、【普通路径】,
普通路径包括 “绝对路径”、“根路径”,等。

这里重点说明 【相对标识】 和 【顶级标识】。
相对标识 是指 "./","../" 开头的,如:"./OtherModule", "../lib/Base"。
顶级标识 是指 以文件或目录(可以包含:字母、-、_)开头的,如:"app/widget/Select"

需要写模块ID的地方有三处:

define("id (1)",["../id2 (2)"], function(require, exports, module){
    var moduleA = require('./moduleA (3)');
})

注意:无论是define第一个参数【模块ID】还是第二个参数【依赖模块的ID】还是【require模块ID】,最终的比对标准是【解析后的文件URI】。
因此,这三处需要写ID 的地方可以以任意一种方式来写,只要最终解析为同一个URI,即被认为是同一个模块。
在解析ID的过程中,会预先经过 seajs.config 中定义的 alias 和 paths 的处理。

base 路径解析规则
(第 1 层,本身的路径不依赖于任何设置)
1. 不可使用【顶级标识】,因为顶级标识就是相对于 base 基础路径来解析的,因此 base 本身只能使用【相对标识】或【根路径】等。
2. base 默认路径为 seajs 的目录,其他情况参见seajs官网,如果不是seajs推荐的源码目录结构,尽量手动设置 base 路径。
3. 【相对标识】:相对于 当前页面 解析。
paths 中路径解析规则
(第 1 层,本身的路径不依赖于任何设置)
1. 【相对标识】:在哪里被引用,相对的解析位置视被引用的地方而定,遵循当地的规则。
2. paths中的字段会被以变量的方式在被使用的地方替换,然后再解析。
比如:

//代码块(1)
//path定义:
seajs.config({
    base:"./app/src",
    path:{
        "a":"../lib", //(1) 相对路径
        "lib":"path/to/lib", //(2) 顶级标识
        "l2":"/lib" //(3) 根路径
    }
});
//模块 mod/m/m.js: 
...
require("a/jquery");
//=> 转换为:"../../lib/jquery"
//=> 加载:mod/lib/jquery (特别注意 1)
...
//模块 mod/f.js:
...
require("a/jquery");
//=> 转换为:"../../lib/jquery"
//=> 加载:lib/jquery (特别注意 2)
...

alias 中路径解析规则
(第 2 层,本身的路径可以依赖于paths的设置)
1. alias 的规则类似于 paths,并且 alias 路径也可以使用 paths 中的“变量”
2. 提醒:paths、alias 中尽量使用【顶级标识】、【根路径】、【绝对路径】,不要使用【相对标识】,因为在不同深度的模块引用时会解析为不同的路径。
3. 【相对标识】:在哪里被引用,相对的解析位置视被引用的地方而定,遵循当地的规则。
seajs.use 路径解析规则
【相对标识】:相对于 当前页面 解析。
define 定义模块 ID 解析规则 (1)

(第 3 层,路径可以相对于 alias 或 paths 来设置)
可以使用:【相对标识】、【顶级标识】、【根路径】
推荐使用【顶级标识】,如果模块的位置不在 base 基础路径内,则使用【相对标识】或【根路径】。
【相对标识】:相对 当前页面 解析

// 代码块(2)
//config -- 还使用 [代码块 (1)]中的配置
// 模块1,无歧义,根路径解析
define("/app/src/module/Base", ..);
// 模块2,无歧义,顶级标识,相对于 base 基础路径来解析
define("app/src/module/Base", ..);
// 模块3,有歧义,相对标识,此处相对于 当前页面(引用到这个模块的html页面)
// 但其他地方即便使用 【表面上相同的“ID”】,也可能会被解析不同的模块
define("./app/src/module/Base",..);

模块依赖ID 解析规则 (2)

(第 3 层,路径可以相对于 alias 或 paths 来设置)
【相对标识】:相对 base 基础路径解析

//代码块(3)
//config -- 还使用 [代码块 (1)]中的配置
//无歧义,相对于根路径解析
define("..", ["/app/src/module/Base"], ..)
// 无歧义,顶级标识,相对于 base 基础路径解析
define("..", ["app/src/module/Base"], ..)
//有歧义,相对标识,此处相对于 当前模块 来解析
//此处的依赖看起来是依赖于【代码块(2)】中的 `模块3`
//但如果当前模块跟当前页面不在同一层目录下,就不会被解析为 `模块3`

define("..", ["./app/src/module/Base"],..)
模块内 require 其他模块的ID 解析规则 (3)
(第 3 层,路径可以相对于 alias 或 paths 来设置)
【相对标识】:相对 base 基础路径解析
//代码块(4)
//config -- 还使用 [代码块 (1)]中的配置
define("..", [..], function(require){
    //无歧义,相对于根路径解析
    require("/app/src/module/Base");
});
define("..", [..], function(require){
    // 无歧义,顶级标识,相对于 base 基础路径解析
    require("app/src/module/Base");
});
define("..", [..], function(require){
    //有歧义,相对标识,此处相对于 当前模块 来解析
    //此处的依赖看起来是依赖于【代码块(2)】中的 `模块3`
    //但如果当前模块跟当前页面不在同一层目录下,就不会被解析为 `模块3`
    require("./app/src/module/Base");
})

特别提醒:模块内三处需要写ID的地方,不需要使用看起来相同的字符串,只要被解析为相同的模块即可。

总结:
1.paths 和 alias 的设置仅仅相当于一个变量,在哪里使用,就在那里替换为设定的值,然后再解析。
2.尽可能的使用【顶级标识】。
3.如果不能使用【顶级标识】,比如目录跨越比较大等,则尽量设置 alias 或 paths 通过一个【非相对路径】 标识 定位到一个目录,然后在这个标识下,再定义ID。

Javascript 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
Vue指令实现OutClick的示例
Nov 16 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 #Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 #Javascript
Jquery实现自定义弹窗示例
Mar 12 #Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 #Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 #Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 #Javascript
JavaScript中奇葩的假值示例应用
Mar 11 #Javascript
You might like
玩转图像函数库―常见图形操作
2006/09/03 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
php 可变函数使用小结
2018/06/12 PHP
Javascript 对象的解释
2008/11/24 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
Python动态导入模块的方法实例分析
2018/06/28 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
《草原的早晨》教学反思
2014/04/08 职场文书
大学生求职信范文
2014/05/24 职场文书
体育比赛口号
2014/06/09 职场文书
公司股东出资证明书
2014/11/01 职场文书
大学生学年个人总结
2015/02/15 职场文书
培根随笔读书笔记
2015/07/01 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书