前言

对于像我这样的requireJS刚開始学习的人而言,requireJS最难理解的部分应该是它的路径问题。晚上随便折腾了一下,算是略微理清了这个文件夹问题吧。

requireJS学习网址:requireJS中文网 requireJS英文网

requireJS简单介绍

随着前端代码量的日益庞大和复杂的结构,以及越来越多框架的出现。怎样有效的管理你的代码,已经成为一个团队亟待解决的问题。而RequireJS的目标是鼓舞代码的模块化,它使用了不同于传统script标签的脚本载入步骤。

能够用它来加速、优化代码,但其主要目的还是为了代码的模块化。RequireJS以一个相对于baseUrl的地址来载入全部的代码。下图是随便写的一个小的DEMO文件文件夹:

baseUrl模块查找的根路径

首先在index.html页面中引入requireJS文件

    <script src="js/lib/require.js" data-main="js/entry"></script>

或者

    <script src="js/lib/require.js"></script>

引入requireJS文件,能够须要接下来文件的主入口属性data-main。也能够不须要。

无data-main属性

假设没有data-main属性。则baseUrl默觉得引入requireJS文件的HTML所处的位置,上述代码中为“wechart/”

有data-main

假设有data-main属性,则baseUrl默觉得data-main属性值中的文件文件夹,上述中即为“js”

config中设置

能够在require.config({})中明白设置。

DEMO中把相关的配置写进了主入口文件即entry.js中

require.config({
baseUrl: "js/",
paths: {
jquery: "lib/jquery/jquery-1.7.1"
}
});

baseUrl的文件夹不是以“/”或者相关协议(如http或https)开头,则默觉得相对路径。比如我们把上面baseUrl改成“/js/”,则就变成相对于磁盘的根文件夹啦。



这里能够看到jquery和a两个文件没有正确载入。原因是文件夹相对于c盘了。其余模块正常载入原因继续向下看。


上面所说的baseUrl文件夹,都是仅仅在定义模块时用到的路径。

如a.js文件:

define(['jquery'], function($) {
return function() {
$("#test").html("<p>aaa</p>");
}
});

模块a中的文件依赖jquery。须要先载入jquery之后才干运行模块里面的回调函数。而jquery的模块查找完整路径即为entry.js里面的baseUrl+paths配置文件夹(paths详细配置可參考官网相关介绍),即为**”wechart/js/lib/jquery/jquery-1.7.1.js”。

ps:requireJS内部默觉得须要载入的js文件加入后缀名“.js”,所以能够省略对应的后缀名。假设配置中给jquery加入后缀名。则会出现两个”.js”。

对于一个模块载入还有一个模块的文件夹问题

DEMO中我的模块b依赖于模块a:

define(['jquery','my/a'], function($, a) {
a();
console.log("bbb");
});

则模块b载入前载入模块的文件夹为baseUrl+依赖中定义的文件夹,上述载入模块a的文件夹为js/my/a.js。因为模块a的路径也须要依据baseUrl来查找。所以上面baseUrl更改成“/js/”时,模块a也载入出错。

HTML中require相关模块的路径问题

require中相关模块路径查找为baseUrl+require依赖中所给文件夹

可是,

因为require内部模块载入机制为异步载入,所以对应的baseUrl需区分下面情况

有主入口文件且为配置文件

因为上面叙述过,假设有data-main,且文件中有baseUrl配置。则baseUrl应为配置中的“js/”,但因为requireJS异步载入机制。主入口文件须要在HTML的全部script文件载入后才開始载入,即在require运行载入模块时。对应的主入口文件entry.js尚未被载入。

则此时的baseUrl仍为主入口的文件文件夹。所以HTML中载入模块b时须要使用“../”进入“js/”文件夹。

DEMO中index.html代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="test">111</div>
<script src="js/lib/require.js" data-main="js/entry/entry"></script>
<script>
require(['../my/b'], function(b) {
console.log("b has been called");
});
</script>
</body>
</html>

无主入口文件

把对应的配置文件代码放在载入模块代码前。则此时的baseUrl即为配置中的文件夹。对应的HTML代码更改为

<script>
require.config({
baseUrl: "js/",
paths: {
jquery: "lib/jquery/jquery-1.7.1"
}
}); require(['my/b'], function(b) {
console.log("b has been called");
});
</script>

对于无配置文件的情况不利于代码的后期维护,果断省略。

。。

requireJS文件夹的更多相关文章

  1. GreenDao 数据库:使用Raw文件夹下的数据库文件以及数据库升级

    一.使用Raw文件夹下的数据库文件 在使用GreenDao框架时,数据库和数据表都是根据生成的框架代码来自动创建的,从生成的DaoMaster中的OpenHelper类可以看出: public sta ...

  2. dll文件32位64位检测工具以及Windows文件夹SysWow64的坑

    自从操作系统升级到64位以后,就要不断的需要面对32位.64位的问题.相信有很多人并不是很清楚32位程序与64位程序的区别,以及Program Files (x86),Program Files的区别 ...

  3. VS15 preview 5打开文件夹自动生成slnx.VC.db SQLite库疑惑?求解答

    用VS15 preview 5打开文件夹(详情查看博客http://www.cnblogs.com/zsy/p/5962242.html中配置),文件夹下多一个slnx.VC.db文件,如下图: 本文 ...

  4. 利用注册表在右键添加VS15的快捷方式打开文件夹

    1.简介 最近安装VS15 Preview 5,本版本可以打开"文件夹" 是否可以向Visual Studio Code一样在文件夹或文件右键菜单添加"Open with ...

  5. Java实现FTP文件与文件夹的上传和下载

    Java实现FTP文件与文件夹的上传和下载 FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为"文传协议".用于Internet上的控制 ...

  6. (转载)linux下各个文件夹的作用

    linux下的文件结构,看看每个文件夹都是干吗用的/bin 二进制可执行命令 /dev 设备特殊文件 /etc 系统管理和配置文件 /etc/rc.d 启动的配置文件和脚本 /home 用户主目录的基 ...

  7. 为什么 Android Studio 工程文件夹占用空间这么大?我们来给它减减肥

    偶然中发现Android Studio的工程文件夹比ADT Bundle的大很多.用Android Studio新建一个空工程,工程文件夹大小为30M,运行一次后大小为40M.同样用ADT Bundl ...

  8. 让Lua自己把文件夹下面的所有文件自动加载起来吧

    没有想到我也做了一回标题党.其实这里边说的自动还是有夸大其词的部分.其实只是指定文件夹,然后根据指定文件夹数据,加载目录下边的内容而已. 怎么来进行Lua文件的加载 一般情况下,相关的功能需要给他创建 ...

  9. C# 拷贝指定文件夹下的所有文件及其文件夹到指定目录

    要拷贝的文件及其文件夹结构 其中.lab文件不能覆盖 /// <summary> /// 拷贝oldlab的文件到newlab下面 /// </summary> /// < ...

随机推荐

  1. JS判断浏览器类型和详细区分IE各版本浏览器

    今天用到JS判断浏览器类型,于是就系统整理了一下,便于后期使用. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  2. bzoj1593 [Usaco2008 Feb]Hotel 旅馆(线段树)

    1593: [Usaco2008 Feb]Hotel 旅馆 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 758  Solved: 419[Submit ...

  3. 《疯狂Python讲义》重要笔记--变量

    一个Python解释器 接下来的旅程——你需要下载好Python,Python解释器通常放在 /usr/local/bin/python3.7 ; 在Unix系统的bash中输入 where pyth ...

  4. C# 标准命名规范

    笔者从事开发多年,有这样一种感觉,查看一些开源项目,如Spring.Apache Common等源码是一件赏心悦目的事情,究其原因,无外两点:1)代码质量非常高:2)命名特别规范(这可能跟老外的英语水 ...

  5. E - Perfect Number

    Problem description We consider a positive integer perfect, if and only if the sum of its digits is ...

  6. Hibernate多表查询、查询优化策略(四)

    多表HQL private static void innerJoin(){ //sql内连接 隐式内连接 select * from A,B where b.aid = a.id // 显示内连接 ...

  7. Unity引擎GUI之Input Field

    InputField 文本输入组件,本文练习InputField的属性及事件 一.属性 1 Interactable: 是否禁用 Transition:过渡方式 Normal Color 正常的未有任 ...

  8. Morse理论:拓扑不变性特征匹配原理

    设计精美的宽基线双目相机镇文 Mo'ersi lilun莫尔斯理论(卷名:数学) Morse theory 微分拓扑的一个重要分支.通常是指两部分内容:一部分是微分流形上可微函数的莫尔斯理论,即临界点 ...

  9. 【sqli-labs】 less18 POST - Header Injection - Uagent field - Error based (基于错误的用户代理,头部POST注入)

    这次username和password都进行了输入校验 但是ip和uagent没有校验 当我们用admin admin登陆成功后,就会一条插入语句 由于程序无条件的信任了浏览器的header信息,那么 ...

  10. Functor and Monad in Swift

    I have been trying to teach myself Functional Programming since late 2013. Many of the concepts are ...