requireJS目录

原创 2015年07月08日 20:31:01

前言

对于像我这种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的基本用法

引言    目前项目中的前端架构采用的是RequireJS+AngularJS,小编在工作之余对这个前端框架比较感兴趣,在开始的时候对这个框架不是很懂,因为里面有很多平台自己封装的东西,所以在理解...
  • u013045437
  • u013045437
  • 2016年07月06日 22:26
  • 4625

requireJS 简要介绍和完整例子

从事前端开发工作的大概都有所耳闻 requireJS 这个框架,以前都是使用而已没时间写一些记录,今天有空就写一下,顺便写个例子; 什么是 requireJS ?  requireJS 是用Jav...
  • shenzhenNBA
  • shenzhenNBA
  • 2016年06月13日 23:43
  • 10165

requireJS目录

前言对于像我这种requireJS初学者而言,requireJS最难理解的部分应该是它的路径问题。晚上随便折腾了一下,算是稍微理清了这个目录问题吧。...
  • xqg666666
  • xqg666666
  • 2015年07月08日 20:31
  • 996

RequireJS

目录 使用§ 1.. 3 加载 JavaScript 文件§ 1.1. 3 data-main 入口点§ 1.2. 5 定义模块§ 1.3. 6 简单的键值对§ 1.3.1. 6 ...
  • zcl_love_wx
  • zcl_love_wx
  • 2016年06月02日 15:46
  • 799

JS-requireJS中使用UEditor的经验总结

目前,正在开发的一个项目中,需要用到富文本编辑器,经过一番搜索后,发现用的比较多的是百度前端部门开源的UEditor这个插件,所以就选择了UEditor。在查阅了官方文档之后,发现引入插件的方法是直接...
  • zhq2005095
  • zhq2005095
  • 2017年10月11日 17:08
  • 460

requirejs集成百度编辑器ueditor

Ueditor版本:1.4.3.1 关键点: 1. 利用requirejs的shim加载editor.all.js并导出到全局变量 2. 通过shim的deps加载 ueditor.conf...
  • tdcqfyl
  • tdcqfyl
  • 2017年10月19日 14:56
  • 349

【ionic】项目应用requireJs前端模块化

前端模块化模块化实际上我们并不陌生。例如,应用函数,应用类等进行封装。但是相对来说,以往的前端并没有很明显的模块化的概念。这样导致了有几个弊端。 1 分类不清晰。合作开发频繁冲突。 ...
  • u010176014
  • u010176014
  • 2016年05月18日 10:55
  • 2206

requireJS使用入门

requireJS使用入门
  • lidysun
  • lidysun
  • 2016年09月19日 14:49
  • 5044

requirejs源码学习笔记(二)

昨天大概了解了以下requirejs的主要入口req方法和上下文newContext方法,说实话到目前为止这些方法是做什么的,有什么用我们还是一无所知,接下来先看些esay一点的代码在执行了一次空参数...
  • xmloveth
  • xmloveth
  • 2017年02月15日 22:51
  • 414

requirejs.config配置paths的时候,配置目录和配置文件的区别

通过在paths中配置每个一个模块的模块id和文件路径的映射关系,requirejs能够正确的加载我们需要的模块。当js文件非常多的时候,这种配置方式显然非常繁琐,配置的工作量会非常大。可以看到通过这...
  • aitangyong
  • aitangyong
  • 2015年03月09日 07:53
  • 5524
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:requireJS目录
举报原因:
原因补充:

(最多只允许输入30个字)