seajs模块路径解析 简单总结
最近在试着用 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模块路径解析 简单总结的更多相关文章
- [webpack]--webpack 如何解析代码模块路径
前言 webpack是如何解析代码模块路径 webpack 中有一个很关键的模块 enhanced-resolve 就是处理依赖模块路径的解析的,这个模块可以说是 Node.js 那一套模块路径解析的 ...
- requirejs:让人迷惑的路径解析
接触过requirejs的童鞋可能都知道,无论是通过define来定义模块,还是通过require来加载模块,模块依赖声明都是很重要的一步.而其中涉及到的模块路径解析,对于新手来说,有的时候会让人觉得 ...
- 转:requirejs:让人迷惑的路径解析(~~不错)
接触过requirejs的童鞋可能都知道,无论是通过define来定义模块,还是通过require来加载模块,模块依赖声明都是很重要的一步.而其中涉及到的模块路径解析,对于新手来说,有的时候会让人觉得 ...
- nodejs系列笔记02---模块路径解析
模块路径解析规则 参考这篇博客 我们已经知道,require函数支持斜杠(/)或盘符(C:)开头的绝对路径,也支持./开头的相对路径.但这两种路径在模块之间建立了强耦合关系,一旦某个模块文件的存放位置 ...
- seajs模块标识命名和解析规则
模块标识采用路径形式,但要注意与路径的区别.require.require.async的第一个参数是模块标识.而seajs.use第一个参数为文件路径. use是全局的,require是局部的.模块标 ...
- python模块介绍- HTMLParser 简单的HTML和XHTML解析器
python模块介绍- HTMLParser 简单的HTML和XHTML解析器 2013-09-11 磁针石 #承接软件自动化实施与培训等gtalk:ouyangchongwu#gmail.comqq ...
- grunt任务之seajs模块打包
grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我们做一些重复度很高的事情,如压缩,合并,js语法检查等.通过定义grunt的配置文件Gruntfile ...
- perl6 JSON::Fast模块json解析的使用
关于JSON: JSON (JavaScript Object Notation)是一种轻量级的数据交换格式,语法简单,各种语言都有相应的库或者模块支持. 因为JSON非常小巧,解析起来又非常简单,我 ...
- 多模块分布式系统的简单服务访问 - OSGI原形(.NET)
多模块分布式系统的简单服务访问 - OSGI原形(.NET) 先描述一下本篇描述的适用场景(3台server, 各个模块分布在各个Server上,分布式模块互相依赖.交互的场景): 多个OSIG引擎交 ...
随机推荐
- Android-Camera+SurfaceView
Camera相机是属于硬件,每台设备的Camera硬件配置的参数都是不一样的,Camera通常是用来拍照,扫描二维码等等 AndroidManifest.xml配置Camera需要的权限: <! ...
- 学生信息系统(json模块解决数据持久化)
将学生管理的案例,学生信息由原来的只有姓名,拓展为包含,姓名,年龄,两个属性:完成对应的增.删.查.改,操作 import json,os,time,sys student_list = [] Fil ...
- CentOS6.4 X86_64 kvm+PXE备忘
Install 安装 1 2 3 4 5 # yum install qemu-kvm qemu-img # 使用kvm至少要安装的包,一个提供用户级别kvm模拟器,一个提供磁盘镜像的管理 # 安装虚 ...
- 购买小米成功 散分mhn
之前,我们都没办法解决近来的寡言,面对越来越少的语言,只能是憋得气闷.却没想后来这么一件事可以解开那个尴尬. 前两天晚上,他被我一次次闪躲去看小说伤害,难受,却还是不想和我争吵什么.后来,偶然的机会让 ...
- HTML5 LocalStorage Demo
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- C++不存在从std::string转换为LPCWSTR的适当函数
LPCWSTR是什么类型呢? 看看如何定义的: typedef const wchar_t* LPCWSTR; 顾名思义就是: LPCWSTR是一个指向unicode编码字符串的32位指针,所指向字符 ...
- Android 如何查看源码 (eclipse 按住 ctrl )
首先要确认 Android SDK Manager 下载并安装了 sources.然后在代码中按住 ctrl 在点一个类名, 如果打开的页面是找不到源码,就点那个按钮,然后找到源码所在的文件夹,就可以 ...
- Spring Boot启动过程(六):内嵌Tomcat中StandardHost、StandardContext和StandardWrapper的启动
看代码有助于线上出现预料之外的事的时候,不至于心慌... StandardEngine[Tomcat].StandardHost[localhost]的启动与StandardEngine不在同一个线程 ...
- mxonline实战10,课程列表页,课程详情页1
对应github地址:第10天 一. 课程列表页 1. 拷贝course-list.html到templates目录中 2. 编写url和view 在courses/views.py中新加
- python中mysql的存储
1. 连接mysql import pymysql db = pymysql.connect(host=', port=3306) cursor = db.cursor() cursor.execut ...