最近在试着用 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. [美国代购] Nexus 6 与 Moto X 询价聊天记录整理

    目前手上使用的是 Mi 3,使用了根本还不到一年,但是发现非常多的问题. 官方 APP 不能卸载: 手机的顶部(摄像头)处经常出现高温度现象,如果你长时间讲电话,那么这个温度真的可以烫到你的耳朵无法承 ...

  2. 使用memset初始化C++自定义类型

    当类型本身或者类型的成员变量带有虚函数以及像std::vector这类复杂数据结构的时候.就会出错,原因是memset把类型本身所带的一些隐含的信息也给置0了.如:虚表指针.std::vector的内 ...

  3. [C#] ??雙問號的意思及用法

    int? x = null; int y = x ?? -1; 上面二行中,第一行是將x變數放入null,為什麼int能放null,可以參考另一篇文章http://charleslin74.pixne ...

  4. 云主机文件系统readonly处理案例

    本文由作者朱益军授权网易云社区发布. 背景 维护巡检云主机时,发现有一台运行redis的云主机状态显示维护中,登录该实例查看,系统盘变成readonly.本文简单分析该问题出现原因,并为运维人员提供常 ...

  5. zun 不能创建 docker 容器,报错: datastore for scope "global" is not initialized

    问题:zun不能创建docker容器,报错:datastore for scope "global" is not initialized   解决:修改docker 服务配置文件 ...

  6. ADB模块源码分析(二)——adb server的启动

    1. ADB Server的启动 前面我们讲到adb模块的源码在system/core/adb下面,通过查看Android.mk文件我们了解到这个adb 模块回编译生成连个可执行文件adb.adbd, ...

  7. 正则表达式的Wed验证应用(40)

    电子邮件地址的校验 <?php /* 校验邮件地址*/ function checkMail($email) { //用户名,由“\w”格式字符.“-”或“.”组成 $email_name= & ...

  8. Sublime Text几款常用插件及用法(前端)

    一.Sublime3下载 百度搜索sublime text3,出现如图: 2.然后点击进去下载: 或者https://pc.qq.com/detail/0/detail_10140.html这里下载 ...

  9. Using RDP to connect Windows remote desktop with Linux

    安装rdesktop(一般情况下不需要这么做): sudo apt-get install rdesktop 执行连接: rdesktop xxx.xxx.xxx.xxx:3389 -u admini ...

  10. java使用Redis3--完整模板类

    Redis全部指令请参考:http://www.runoob.com/redis/redis-tutorial.html 对应的java模板类 package com.d.work.redis; im ...