Node.js 模块的加载逻辑你了解嘛

目录
  • 一、按照组织方式划分模块
  • 二、目录模块的加载逻辑
  • 三、模块的加载逻辑
  • 四、示例1
    • a.js文件
    • b.js文件
    • c.js文件
    • app.js文件
    • 运行结果（以路径开头引入）
    • 不以路径开头引入
    • 如下是示例可复制代码
      • a.js
      • b.js
      • c.js
      • app.js
      • package.json
      • node_moudules目录下的dir02目录下的index.js文件
  • 总结

一、按照组织方式划分模块

文件模块：是我们上一章节说过的，就是一个独立的.js文件。

目录模块：是我们可以将多个独立的.js文件统一存放在一个目录下，也就是放到一个文件夹中。

二、目录模块的加载逻辑

三、模块的加载逻辑

注：package.json 是目录模块的描述文件

不以路径导入的模块，会一直寻找node_moudules，一层层寻找。寻找不到就报错。

四、示例1

在dir01目录下新建3个js文件，分别是a.js、b.js、c.js。三个文件当中呢，函数名都是info，输出的内容呢是对应的文件名称。

a.js文件

b.js文件

c.js文件

app.js文件

运行结果（以路径开头引入）

报错：不能查找到该路径这个模块。原因：我们该目录下有三个js文件，而它不知道你要调用哪个文件，所以会报错。解决方法：将目录模块进行调用文件指定。

我们通过，加入index.js文件后，发现不报错了，输出了index.js，这就说明我们指定的调用文件成功了，那么由此可以看出，我们默认调用的是index.js文件。 如果没有该文件将报错，那么我们如何更改成调用其他三个文件呢？

将默认调用的index.js删除，我们新建一个package.json文件，然后使用"main"属性指定一个模块的文件名字就可以啦。注：这里输出的undefined是我们function没有写return语句，默认返回的是undefined。

我们在三个文件模块中，任意拿出一个，比如说a.js，我们可以再a.js文件中引入其他两个文件模块，并打印，可以看到如上图的结果。

不以路径开头引入

就是require引入的时候，是直接写一个目录文件夹的名字，而不是路径，那么我们需要把这个文件夹放在node_modules目录下，否则会报错，我们执行的时候会查找这个名字的目录。

如下是示例可复制代码

a.js

//导入模块b,c
const b = require(__dirname+'/b.js')
const c = require(__dirname+'/c.js')
function info () {
  console.log(b.info());
  console.log(c.info());
  console.log('a.js');
}
// 导出
module.exports = {
  info
}

b.js

function info () {
  console.log('b.js');
}
// 导出
module.exports = {
  info
}

c.js

function info () {
  console.log('c.js');
}
// 导出
module.exports = {
  info
}

app.js

//引入目录模块
//默认的目录模块的入口文件是 index.js
// const dir01 = require('./custom_module/dir01')

// console.log(dir01.info());

//不以路径开头的引入方式
const dir02 = require('dir02')

console.log(dir02.info());

package.json

{
  "main":"a.js"
}

node_moudules目录下的dir02目录下的index.js文件

路径：node_moudules/dir02/index.js

function info () {
  console.log('dir02');
}
// 导出
module.exports = {
  info
}

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • Node.js模块加载详解

    JavaScript是世界上使用频率最高的编程语言之一,它是Web世界的通用语言,被所有浏览器所使用.JavaScript的诞生要追溯到Netscape那个时代,它的核心内容被仓促的开发出来,用以对抗Microsoft,参与当时白热化的浏览器大战.由于过早的发布,无可避免的造成了它的一些不太好的特性. 尽管它的开发时间很短,但是JavaScript依然具备了很多强大的特性,不过,每个脚本共享一个全局命名空间这个特性除外. 一旦Web页面加载了JavaScript代码,它就会被注入到全局命名空间,

  • 浅析node.js的模块加载机制

    在node.js中,模块使用CommonJS规范,一个文件是一个模块 node.js中的模块可分为三类 内部模块 - node.js提供的模块如 fs,http,path等 自定模块 - 我们自己写的模块 第三方模块 - 通过npm安装的模块 node.js提供了大量的模块供我们使用,比如 想解析一个文件的路径,可以使用path模块下的相应方法实现: const path = require('path'); //返回目标文件的绝对路径 console.log(path.resolve('./1

  • node.js使用require()函数加载模块

    详细说明均以写在注释之中,这里就不啰嗦了,小伙伴们自己详细看吧,千万别吧注释当成空气了. 复制代码 代码如下: /*在node中,可以使用require()函数来加载模块.  * require函数使用一个参数,参数值可以带有完整路径的模块的文件名,也可以为模块名.当使用node中提供的模块时,在require函数中只需要指定模块名即可.  * */ //建立一个页面2.js;代码如下 var name="思思博士"; exports.name=name; //建立一个页面1.js;代

  • Node.js 模块的加载逻辑你了解嘛

    Node.js 模块的加载逻辑你了解嘛

    目录 一.按照组织方式划分模块 二.目录模块的加载逻辑 三.模块的加载逻辑 四.示例1 a.js文件 b.js文件 c.js文件 app.js文件 运行结果(以路径开头引入) 不以路径开头引入 如下是示例可复制代码 a.js b.js c.js app.js package.json node_moudules目录下的dir02目录下的index.js文件 总结 一.按照组织方式划分模块 文件模块:是我们上一章节说过的,就是一个独立的.js文件. 目录模块:是我们可以将多个独立的.js文件统一存

  • 详解js异步文件加载器

    详解js异步文件加载器

    我们经常会遇到这种场景,某些页面依赖第三方的插件,而这些插件比较大,不适合打包到页面的主js里(假设我们使用的是cmd的方式,js会打包成一个文件),那么这个时候我们通常会异步获取这些插件文件,并在下载完成后完成初始化的逻辑. 以图片上传为例,我们可能会用到plupload.js这个插件,那么我们会这么写: !window.plupload ? $.getScript( "/assets/plupload/plupload.full.min.js", function() { self

  • 详解CommonJS和ES6模块循环加载处理的区别

    CommonJS模块规范使用require语句导入模块,module.exports导出模块,输出的是值的拷贝,模块导入的也是输出值的拷贝,也就是说,一旦输出这个值,这个值在模块内部的变化是监听不到的. ES6模块的规范是使用import语句导入模块,export语句导出模块,输出的是对值的引用.ES6模块的运行机制和CommonJS不一样,遇到模块加载命令import时不去执行这个模块,只会生成一个动态的只读引用,等真的需要用到这个值时,再到模块中取值,也就是说原始值变了,那输入值也会发生变化

  • 详细分析Node.js 模块系统

    为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统. 模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的.换言之,一个 Node.js 文件就是一个模块,这个文件可能是JavaScript 代码.JSON 或者编译过的C/C++ 扩展. 创建模块 在 Node.js 中,创建一个模块非常简单,如下我们创建一个 main.js 文件,代码如下: var hello = require('./hello'); hello.world(); 以上实例中,代

  • AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法

    本文实例讲述了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法.分享给大家供大家参考,具体如下: 接着前面那篇<AngularJS使用ng-app自动加载bootstrap框架问题分析>,现在我们看下如何使用带属性值的ng-app命令,让ng-app自动加载我们自定义的模块作为根模块. <!DOCTYPE html> <html> <head> <script src="angular.js">&l

  • AngularJS使用angular.bootstrap完成模块手动加载的方法分析

    本文实例分析了AngularJS使用angular.bootstrap完成模块手动加载的方法.分享给大家供大家参考,具体如下: 之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <head> <script src="angular.js"></script> <script> // 创建moudle1

  • js实现动态加载脚本的方法实例汇总

    js实现动态加载脚本的方法实例汇总

    本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法,讨厌其中拷贝别人成果的人,也不加个原文的链接.哎!关键是最后一种方法还有点错误.经过两天的研究查阅资料,在这里和大家分享一下. 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在

  • 用headjs来管理和加载js 提高网站加载速度

    现在有许多成熟的js模块加载器,比如requirejs和seajs等,但是对一些小的项目来说,它们的功能可能太过于"强大",也许我们只是想要有一个能动态加载js的功能,或许我们只是想装B一下,让自己写出的页面没有一大堆的<script src="a.js"></script>这样的东西.前面说的两种js加载器都是更强调模块性,也就是更强调js文件的组织和管理,更适用于大的项目. 就像刚刚说的,我只想有一个js文件加载器,我只需提供给它一个js

  • 原生JS实现DOM加载完成马上执行JS代码的方法

    用原生JS我们经常使用window.onload事件来加载页面.但是window.onload是在页面元素都加载完毕后才执行,如果页面内有大的图片的话,会在页面展现后好久时间后才执行.所以有时我们需要在DOM载入时马上执行一些函数.jQuery提供了document.ready方法用来代替window.onload.但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了. 如果只需要对DOM进行操作,那么这时就没必要等到页面全部加载了.Firefox有

随机推荐