最近在试着用 seajs + grunt 搭建项目雏形, 遇到的最大的问题就是 seajs 命名与调用, 简单总结一下。

模块调用

seajs中调用模块有两种方式,seajs.use(ID) 、 require(ID)。

ID命名

完整绝对路径 例如 "http://example.com/test/js/jquery/jquery.js"

以 "." 开头 例如 "./home/main","../main"

以 "/" 开头 例如 "/js/home/"

普通命名 例如 "home/main"

模块路径解析

替换alias

添加base前缀

可以在seajs.config()方法中设置ID别名和基础路径, 例如:

seajs.config({
base : 'js',
alias : {
jquery : "/jquery/jquery"
}
});


base添加规则

完整的绝对路径不会加base

以 "." 开头,会相对于当前(被调用的)模块解析地址。 如果不存在被调用的模块【如 seajs.use() 】, 则会相对于当前页面解析地址。

以 "/" 开头,相对于当前页面的根目录解析地址

普通命名,直接加上base前缀

base值

base 默认值是 seajs所在目录

seajs.config()中base的解析与ID命名解析规则相同

例如,有如下文件:

http://example.com/test/js/sea/sea.js

http://example.com/test/index.html

在 index.html 中调用了 sea.js

base 的默认值为 "http://example.com/test/js/sea/"

如果使用 seajs.config() 设置了 base

seajs.config({
base : "home"
// base值为 "http://example.com/test/js/sea/home"
}); seajs.confg({
base: "./home"
// base值为 "http://example.com/test/home"
}); seajs.conifg({
base: "/home"
// base值为 "http://example.com/home"
});

PS:seajs.config() 中的 base 与 seajs.use() 的ID一样, "." 开头的 ID 会相对于当前页面解析地址(因为不存在被调用的模块)

再例如,有如下文件:

http://example.com/test/js/sea/sea.js

http://example.com/test/js/home/main.js

http://example.com/test/js/home/tpl.js

http://example.com/test/index.html

index.html页面调用sea.js

seajs.config({
base : "./js",
// base为 "http://example.com/test/js"
alias : {
"jquery" : "jquery/jquery"
}
}); // 调用 mian
seajs.use("home/main");
// 解析后的路径为 "http://example.com/test/js/home/main.js" // 也可以这么写
seajs.use("./js/home/main");
// 解析路径为 "http://example.com/test/js/home/main.js" // main.js
define(function (require) {
var $ = require("jquery");
// "http://example.com/test/js/jquery/jquery.js"
// 调用 tpl
var tpl = require("./tpl");
// "http://example.com/test/js/home/tpl.js" // 也可以
var tpl = require("home/tpl");
// "http://example.com/test/js/home/tpl.js"
});

以上例子中的模块 define() 都没有定义 ID,实际上项目中打包时会根据配置自动为模块设定 ID, 打包到同一个文件中, 相关问题以后有时间再总结。

seajs模块路径解析 简单总结的更多相关文章

  1. [webpack]--webpack 如何解析代码模块路径

    前言 webpack是如何解析代码模块路径 webpack 中有一个很关键的模块 enhanced-resolve 就是处理依赖模块路径的解析的,这个模块可以说是 Node.js 那一套模块路径解析的 ...

  2. requirejs:让人迷惑的路径解析

    接触过requirejs的童鞋可能都知道,无论是通过define来定义模块,还是通过require来加载模块,模块依赖声明都是很重要的一步.而其中涉及到的模块路径解析,对于新手来说,有的时候会让人觉得 ...

  3. 转:requirejs:让人迷惑的路径解析(~~不错)

    接触过requirejs的童鞋可能都知道,无论是通过define来定义模块,还是通过require来加载模块,模块依赖声明都是很重要的一步.而其中涉及到的模块路径解析,对于新手来说,有的时候会让人觉得 ...

  4. nodejs系列笔记02---模块路径解析

    模块路径解析规则 参考这篇博客 我们已经知道,require函数支持斜杠(/)或盘符(C:)开头的绝对路径,也支持./开头的相对路径.但这两种路径在模块之间建立了强耦合关系,一旦某个模块文件的存放位置 ...

  5. seajs模块标识命名和解析规则

    模块标识采用路径形式,但要注意与路径的区别.require.require.async的第一个参数是模块标识.而seajs.use第一个参数为文件路径. use是全局的,require是局部的.模块标 ...

  6. python模块介绍- HTMLParser 简单的HTML和XHTML解析器

    python模块介绍- HTMLParser 简单的HTML和XHTML解析器 2013-09-11 磁针石 #承接软件自动化实施与培训等gtalk:ouyangchongwu#gmail.comqq ...

  7. grunt任务之seajs模块打包

    grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我们做一些重复度很高的事情,如压缩,合并,js语法检查等.通过定义grunt的配置文件Gruntfile ...

  8. perl6 JSON::Fast模块json解析的使用

    关于JSON: JSON (JavaScript Object Notation)是一种轻量级的数据交换格式,语法简单,各种语言都有相应的库或者模块支持. 因为JSON非常小巧,解析起来又非常简单,我 ...

  9. 多模块分布式系统的简单服务访问 - OSGI原形(.NET)

    多模块分布式系统的简单服务访问 - OSGI原形(.NET) 先描述一下本篇描述的适用场景(3台server, 各个模块分布在各个Server上,分布式模块互相依赖.交互的场景): 多个OSIG引擎交 ...

随机推荐

  1. 終于解決调用wordpress 4.3 xmlrpc api 发布包含分类的文章时返回“抱歉,文章类型不支持您的分类法”错误的問題

    這個問題我找了很多資料都沒有明說是如何解決,后來突發奇想得出我的解決方案如下,所以特此記錄一下: object postId = blogService.NewPost(0,"admin&q ...

  2. npm是干什么的?

    允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用. 其实npm ...

  3. [label][JavaScript扩展] JavaSCript扩展

    http://www.idangero.us/sliders/swiper/ ,swipper for mobile terminal.

  4. Android-系统绘图真相

    系统绘图真相:这篇博客是专门讲解,系统内部是如何控制图片的变化,例如:图片缩放/图片旋转/图片平移/等等 注意:⚠️在真实开发过程中:关于图片的 图片缩放/图片旋转/图片平移/等等 操作 是使用动画A ...

  5. Android应用安全解决方案

    Apk安全解决方案 背景 公司为政府做的App开发完了,需要上一些手段保证安全.这样客户才放心嘛. 防止第三方反编译篡改应用,防止数据隐私泄露,防止二次打包欺骗用户. 目录 Apk安全解决方案 背景 ...

  6. 对java位运算之异或运算的一点记录

    首先,异或运算是,每个位上的数不同为1,相同为0. 其次,对两个数值变量的值进行三次异或运算就等于是交换了两个变量的值. 例如: int a = 4; int b = 10; a = a ^ b; b ...

  7. php 命令行脚本运行php文件简单演示

    众说周知,php在web服务器领域有着很重要的角色,可是它不仅仅在web领域,只是在web领域表现更为优秀! 它基本有三种用途: web服务端脚本的编写 应用程序图形界面(类似windows自带的计算 ...

  8. 调用阿里云API 的demo示例(java/python)

    Java 示例 // 创建DefaultAcsClient实例并初始化 DefaultProfile profile = DefaultProfile.getProfile(vo.getAliRegi ...

  9. vsftp -samba-autofs

    摘要: 1.FTP文件传输协议,PAM可插拔认证模块,TFTP简单文件传输协议. 注意:iptables防火墙管理工具默认禁止了FTP传输协议的端口号 2.vsftpd服务程序三种认证模式?三种认证模 ...

  10. PTA——删除重复字符

    PTA 7-60 删除重复字符 #include<stdio.h> #include<string.h> #define N 85 int main() { ,flag; ch ...