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

更新时间：2014年03月12日 15:31:33 作者：

这篇文章主要介绍了seajs中模块的解析规则详解和模块使用总结,需要的朋友可以参考下

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。

您可能感兴趣的文章:

seaJs的模块定义和模块加载浅析
这篇文章主要介绍了seaJs的模块定义和模块加载浅析,以及模块间的依赖关系等问题,需要的朋友可以参考下
2014-06-06
把jQuery的类、插件封装成seajs的模块的方法
这篇文章主要介绍了把jQuery的类、插件封装成seajs的模块的方法,需要的朋友可以参考下
2014-03-03
seajs中模块的解析规则详解和模块使用总结
这篇文章主要介绍了seajs中模块的解析规则详解和模块使用总结,需要的朋友可以参考下
2014-03-03
深入探寻seajs的模块化与加载方式
本文是对Sea.js 提供seajs的模块化与加载方式的讲解，对学习JavaScript编程技术有所帮助,与大家分享。有需要的小伙伴可以参考下。
2015-04-04
sea.js常用的api简易文档
现在使用sea.js的公司越来越多，比如阿里巴巴，淘宝网，百姓网，支付宝，有道云笔记等。模块化的javascript开发带来了可维护、可扩展性，尤其在多人协作开发的时候不用再担心文件依赖和函数命名冲突的问题，本文给大家分享了sea.js常用的api简易文档，下面来一起看看吧
2016-11-11
Seajs 简易文档提供简单、极致的模块化开发体验
这篇文章主要介绍了Seajs 简易文档提供简单、极致的模块化开发体验,非官方文档，整理来自己官方文档的文字与实例，方便速查。需要的朋友可以参考下
2016-04-04
seaJs使用心得之exports与module.exports的区别实例分析
这篇文章主要介绍了seaJs使用心得之exports与module.exports的区别,结合实例形式分析了exports与module.exports具体功能、使用方法及相关操作注意事项,需要的朋友可以参考下
2017-10-10
SeaJS入门教程系列之完整示例（三）
这篇文章主要介绍了SeaJS入门教程系列之完整示例,演示了一个完整的SeaJS开发例子,需要的朋友可以参考下
2014-03-03
详解Sea.js中Module.exports和exports的区别
最近在看Seajs时，看到了exports.doSomething和module.exports，想对这两者的区别一探究竟。所以下面这篇文章主要介绍了Sea.js中Module.exports和exports的区别，需要的朋友可以参考借鉴，一起来看看吧。
2017-02-02
seajs模块之间依赖的加载以及模块的执行
做前端项目已经离不开SeaJS了，现在的很多的网站都用了SeaJS，对这个JS模块加载器原理的越来越感兴趣。这篇文章我们来一起学习seajs模块之间依赖的加载以及模块的执行，感兴趣的朋友们下面来一起看看吧。
2016-10-10