热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了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。


推荐阅读
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 在使用 MUI 框架进行应用开发时,开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ... [详细]
  • 本文详细介绍了如何使用jQuery防止事件冒泡,确保子元素的点击事件不会触发父元素或祖先元素的相应事件。通过具体的代码示例和解释,帮助开发者更好地理解和应用这一技术。 ... [详细]
  • FineUI 是一款基于 jQuery 的专业级控件库,专为 ASP.NET WebForms 和 MVC 开发设计。它提供了丰富的用户界面组件,简化了复杂 Web 应用程序的开发过程。 ... [详细]
  • 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]
  • jQuery HooRay:一款自创的实用 jQuery 工具插件
    这款插件主要由作者在工作中积累的常用功能开发而成,旨在解决现有插件间的冲突及浏览器兼容性问题。通过整合和优化现有插件,确保其稳定性和高效性。 ... [详细]
  • 在现代Web应用中,当用户滚动到页面底部时,自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验,还优化了页面性能。本文将探讨如何实现这一功能,并介绍一些实际应用案例。 ... [详细]
  • 在网站制作中随时可用的10个 HTML5 代码片段
    HTML很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单。在这篇文章中,我收集了10个超有用的HTML代码片段,有HTML5启动模板、空白图片、打电话和发短信、自动完 ... [详细]
  • 基于JQuery实现的评分插件
    本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
  • 本文探讨了如何利用jQuery在客户端实现页面跳转,并详细介绍了如何确保页面在浏览器的顶层窗口中打开,而不是局限于当前框架内。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • 在PHP后端开发中遇到一个难题:通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]
author-avatar
码农
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有