模块加载(require)及定义(define)时的路径

  最近新公司在用requireJS进行JS的整合,刚开始接触有点蒙,于是深入了解了一下。requireJS主要是为了解决一下两个问题:

  (1)实现js文件的异步加载,避免网页失去响应;

  (2)管理模块之间的依赖性,便于代码的编写和维护。

  但是在使用的时候有个最大的困惑就是加载模块时候的路径问题,在requirejs的模块路径解析里,  baseUrl 是非常基础的概念。在demo.html里加载requirejs,同时在requirejs所在的script上声明  data-main 属性,那么,requirejs加载下来后,它会做两件事件:

  1. 加载js/main.js
  2. 将baseUrl设置为data-main指定的文件所在的路径,这里是 js/。

  如果没有通过  data-main 属性指定  baseUrl ,也没有通过config的方式显示声明  baseUrl ,那么  baseUrl 默认为加载requirejs的那个页面所在的路径。

requirejs.config({
  baseUrl: ‘js‘
});

  baseUrl+path可以使依赖更加灵活和简单:

requirejs.config({
  baseUrl: ‘js‘,
  paths: {
    model: ‘common/model‘
  }
});

  path使用要点:

  1、没有在paths规则里定义,于是为 baseUrl + demo.js => js/demo.js

  2、model已经在paths里定义,于是为baseUrl + common/model + apple.js => js/common/model/apple.js

  3、model尽管已经在paths里定义,但是  ../model/demo 并不是以model开头,于是为 baseUrl + ../model/demo.js => model/apple.js,也就是说model与js在同一层级。

  在requireJS中最令人困惑的也就是"./module"的用法:

  demo1、

1 requirejs.config({
2   baseUrl: ‘js/common‘
3 });
4 // 实际加载的路径都是是 /lib.js
5 require([‘./lib‘, ‘lib‘], function(Lib){
6   Lib.say(‘hello‘);
7 });

  依赖于当前路径的下的lib.js文件。

  demo2、

  通过  define 定义模块A时,模块A依赖的模块B,如果是  ./module 形式,则基于模块A所在目录解析模块B的路径。

  main.js和lib.js

requirejs.config({
  baseUrl: ‘js‘
});
// 依赖lib.js,实际加载的路径是 js/common/lib.js,而lib模块又依赖于util模块(‘./util‘),解析后的实际路径为 js/common/util.js
require([‘common/lib‘], function(Lib){
  Lib.say(‘hello‘);
});
// 依赖util模块
define([‘./util‘], function(Util){
    return {
        say: function(msg){
            Util.say(msg);
        }
    };
});

  demo3、

  lib模块依赖的util模块,最终解析出来的路径是 js/util.js

  main.js和lib.js

requirejs.config({
  baseUrl: ‘js‘,
  paths: {
    lib: ‘common/lib‘
  }
});

// 实际加载的路径是 js/common/lib.js
require([‘lib‘], function(Lib){
  Lib.say(‘hello‘);
});
// util模块解析后的路径为 js/util.js
define([‘./util‘], function(Lib){
    return {
        say: function(msg){
            Lib.say(msg);
        }
    };
});

  可以理解为util.js是依赖于在lib的根目录下得文件。

  demo4、

  main.js和lib.js

requirejs.config({
  baseUrl: ‘js‘,
  paths: {
    common: ‘common‘
  }
});

// 实际加载的路径是 js/common/lib.js
require([‘common/lib‘], function(Lib){
  Lib.say(‘hello‘);
});
define([‘./util‘], function(Lib){
    return {
        say: function(msg){
            Lib.say(msg);
        }
    };
});

  最终解析的util为js/common/util.js。

  通过分析上面的四个例子,有了一个基本的思路。找相对于当前文件的根目录,这样就会更加清晰些。模块名可以为 "相对的" 或 "顶级的"。如果首字符为"."或".."则为"相对的"模块名

时间: 2024-12-28 18:11:01

模块加载(require)及定义(define)时的路径的相关文章

lua的模块加载require

加载指定的模块.首先函数会在 package.loaded 这个表中查看是否已经加载 了 modname 这个模块.如果是,那么 require 会返回保存在 package.loaded[modname]的值.否则它将尝 试去查找一个加载该模块的加载器. require 是由 package.searchers 引导来查找加载器的 .修改 package.searchers 可以修改 require 查找模块的方式.下面的解释是基于默认配置的 package.searchers. requir

JavaScript AMD 模块加载器原理与实现

关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者遵循 CMD规范.前者的规范产出比较适合于浏览器异步环境的习惯,后者的规范产出对于写过 nodejs 的同学来说是比较爽的.关于两者的比较,有兴趣的同学请参看玉伯在知乎的回答 AMD和CMD的区别有哪些.本文希望能按照 AMD 规范来简单实现自己的一个模块加载器,以此来搞清楚模块加载器的工作原理.

javascript 异步模块加载 简易实现

在javascript是没有类似java或其他语言的模块概念的,因此也不可能通过import或using等关键字来引用模块,这样造成了复杂项目中前端代码混乱,变量互相影响等. 因此在复杂项目中引入AMD的概念,AMD:全称是Asynchronous Module Definition,即异步模块加载机制.通过AMD可以不需要在页面中手动添加<script>来引用脚本,而通过定义依赖自动加载模块脚本,接下来的代码将讲解如何实现建议的AMD模块,如果需要查看比较详细的实现可以下载requirejs

自研模块加载器(一) 模块系统概述与自定义模块规范书写规定

模块系统概述 CommonJs/AMD/CMD/ES6 Modules 什么是模块化? 模块化就是把系统分离成独立的功能的方法,需要什么功能,就加载什么功能 当一个系统越来越复杂时候,我们会遇到这些问题 1. 命名冲突 2. 文件依赖 使用模块化开发可以避免以上问题,并提升开发效率 1. 可维护性 2. 可复用性 在生产角度,模块化是一种生产方式,这种生产方式效率高,维护成本低. 模块化开发演变 1. 全局函数 早期开发中,将重复的代码封装成函数,将多个函数放在一个文件中. 缺点: 污染全局变量

解密javascript模块加载器require.js

require.config require.config设置require.js模板加载选项 // 定义config req.config = function (config) { return req(config); }; // 加载config配置项 req = requirejs = function (deps, callback, errback, optional) { var context, config, contextName = defContextName; //

Angular Material串串学客户端开发 2 - Node.js模块加载机制Require()

题外话解一下博客标题,因为第一篇文章评论中,有人质疑离题很远,说了半天和Angular Material没有半毛关系.其实我的的中心在后半句<串串学客户端开发>. require() 不要把这里的Require()和RequireJS混为一谈.不过有意思的是,Typescript的模块定义,甚至同时支持这两种模块机制. 导入和使用外部模块,只是简单的一句require(),看看angular/material/docs下的编译文件gulpfile.js的代码片段.对模块导入和使用有个直观的感觉

require.js模块加载js

RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升. requirejs能带来什么好处 官方对requirejs的描述: RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it

require.js【模块化编程】- 模块加载简例

今天去学习了一下javascript的模块化编程,写了个简单的例子. ———————————————— 这是我的第一篇技术性的小博文,希望和大家相互交流  ———————————————— 这个列子我打算分两个部分罗列: 1.文件地图 2.源代码 demo.html: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

开发史上最强模块加载工具

haha好吧,我承认这篇文章有点标题党了. 这次要记录的是一个很简单的但是基本符合AMD规范的浏览器端模块加载工具的开发流程.因为自从使用过require.js.webpack等模块化加载工具之后就一直对它的实现原理很好奇,于是稍微研究了一下. 实现的方法有许多,但简单实现的话大致都会有这样几个过程: 1 实现模块的加载.从主模块说起,我们需要通过一个入口来加载我们的主模块的依赖模块,同时在加载完主模块依赖之后,能够取得所各依赖模块的返回值,并将它们传入主模块代码中,再去执行我们的主模块代码.函