最近在试着用 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. 神器与经典--DMVsinSQLServer

    前言: 在不经意间发现这个SQL,正能量瞬间饱满,赶紧向周边的人分享,私藏是罪过啊! 请复制粘贴然后F5,经典无须多说! /************************************** ...

  2. C# 多线程task

    1.异步和多线程的区别?没什么太大区别.异步是目的,使用多线程实现.想想AJAX异步加载,不就是不想让浏览器界面卡住嘛,所以在程序中对于某些单独的操作,比如写日志,我们不想等它完成后再执行其它操作(因 ...

  3. Impala源码之订阅发布系统的实现

    本文由  网易云发布. 作者:冯宇 本篇文章仅限内部分享,如需转载,请联系网易获取授权. 本文是Impala源码笔记的第一篇,本文主要根据源代码学习一下statestored模块的实现,众所周知,Im ...

  4. PHP设计超级好用的文件上传处理类一 (37)

    <?php class FileUpload { private $filepath; //指定上传文件保存的路径 private $allowtype=array('gif', 'jpg', ...

  5. opencv3.3 安装环境教程以及实现个图片读取功能

    一.opencv3.3安装环境 1. 首先要安装这个opencv3.3,我们必须要安装一个python (IDLE:集成开发环境),我自己安装了IDLE3.6和pycharm2017,这些软件都可以去 ...

  6. [Objective-C语言教程]命令行参数(23)

    执行时,可以将一些值从命令行传递给Objective-C程序. 这些值称为命令行参数,很多时候它们对程序很重要,特别是当想要从外部控制程序而不是在代码中对这些值进行硬编码时就很有用了. 命令行参数使用 ...

  7. 线程池(Linux实现)

    讨论QQ群:135202158 本文技术参考了sourceforge项目c thread pool,链接:http://sourceforge.net/projects/cthpool/ 线程池如上一 ...

  8. 微信小程序ofo小黄车+thinkphp5.0打造全栈应用

    原文地址:https://www.imooc.com/article/20310 ofo至今还没有微信小程序(很费解),每次用ofo都得去支付宝,很不方便,我用微信用的比较多,无意间在简书上面看到某人 ...

  9. 调用jdbc已经写成的方法----jdbc工具类抽取方式一

    package web09; /*获取连接和释放资源的方法 */ import java.sql.Connection; import java.sql.DriverManager; import j ...

  10. Machine learning第6周编程作业

    1.linearRegCostFunction: function [J, grad] = linearRegCostFunction(X, y, theta, lambda) %LINEARREGC ...