首页 > 编程语言 >【前端】NodeJS:NodeJS模块化

【前端】NodeJS:NodeJS模块化

时间:2024-08-09 12:52:07浏览次数:16  
标签:exports NodeJS 模块化 前端 module 导入 模块 require

文章目录

1 NodeJS模块化

1.1 模块化与模块

  • 将一个复杂的程序文件依据一定规则(规范)拆分成多个文件的过程称之为模块化。
  • 其中拆分出的每个文件就是一个模块 ,模块的内部数据是私有的,不过模块可以暴露内部数据以便其他模块使用。

1.2 模块化项目

编码时是按照模块一个一个编码的, 整个项目就是一个模块化的项目。

1.3 模块化好处

下面是模块化的一些好处:

  • 防止命名冲突
  • 高复用性
  • 高维护性

2 模块暴露数据

2.1 模块初体验

/*
	创建 me.js
*/
//声明函数
function tiemo(){
	console.log('贴膜....');
}
//暴露数据
module.exports = tiemo;
/*
	创建 index.js
*/
//导入模块
const tiemo = require('./me.js');
//调用函数
tiemo();

2.2 暴露数据

模块暴露数据的方式有两种:

  • module.exports = value
  • exports.name = value
    使用时有几点注意:
  • module.exports 可以暴露任意数据。
  • 不能使用exports = value的形式暴露数据,模块内部module与exports的隐式关系:exports = module.exports = {},require 返回的是目标模块中module.exports的值。

3 导入(引入)模块

在模块中使用require传入文件路径即可引入文件。

const test = require('./me.js');

require使用的一些注意事项:

  • 对于自己创建的模块,导入时路径建议写相对路径,且不能省略 ./ 和 …/。
  • js和json文件导入时可以不用写后缀,c/c++编写的 node 扩展文件也可以不写后缀,但是一般用不到。
  • 如果导入其他类型的文件,会以 js 文件进行处理。
  • 如果导入的路径是个文件夹,则会首先检测该文件夹下package.json文件中main属性对应的文件,如果存在则导入,反之如果文件不存在会报错。如果main属性不存在,或者package.json不存在,则会尝试导入文件夹下的index.js和index.json,如果还是没找到,就会报错。
  • 导入node.js内置模块时,直接require模块的名字即可,无需加 ./ 和 …/。

4 导入模块的基本流程

require导入自定义模块的基本流程:

  • 将相对路径转为绝对路径,定位目标文件。
  • 缓存检测。
  • 读取目标文件代码。
  • 包裹为一个函数并执行(自执行函数)。通过arguments.callee.toString()查看自执行函数。
  • 缓存模块的值。
  • 返回 module.exports 的值。
/*
	伪代码
*/
function require(file){
  	//1. 将相对路径转为绝对路径,定位目标文件
  	let absolutePath = path.resolve(__dirname, file);
  	//2. 缓存检测
  	if(caches[absolutePath]){
    	return caches[absolutePath];
  	}
  	//3. 读取文件的代码
  	let code = fs.readFileSync(absolutePath).toString();
  	//4. 包裹为一个函数 然后执行
  	let module = {};
  	let exports = module.exports = {};
  	(function (exports, require, module, __filename, __dirname) {
    	const test = {
      		name: '尚硅谷'
    	}
    	module.exports = test;
    	//输出
    	console.log(arguments.callee.toString());
  	})(exports, require, module, __filename, __dirname)
  	//5. 缓存结果
  	caches[absolutePath] = module.exports;
  	//6. 返回 module.exports 的值
  	return module.exports;
}

const m = require('./me.js');

5 CommonJS规范

  • module.exports、exports以及require这些都是CommonJS模块化规范中的内容。
  • 而Node.js是实现了CommonJS模块化规范,二者关系有点像JavaScript(实现)与ECMAScript(规范)。

标签:exports,NodeJS,模块化,前端,module,导入,模块,require
From: https://blog.csdn.net/weixin_45980065/article/details/141058935

相关文章

  • .NET 8 + Blazor 多租户、模块化、DDD框架、开箱即用
    前言基于.NET8的开源项目,主要使用WebAPI+Blazor支持多租户和模块化设计,DDD构建。可以帮助我们轻松地搭建起一个功能完善的Web应用程序。除了帮助你快速构建应用程序之外,项目也可以当做学习资料。我们可以从中了解到多租户、CQRS、DDD架构、云部署、Docker容器化等等前沿技......
  • Java计算机毕业设计基于微信小程序的法律问题咨询系统设计与实现前端(开题+源码+论文)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着法治社会的不断推进和公众法律意识的增强,人们对于便捷、高效获取法律咨询服务的需求日益增长。然而,传统法律咨询模式受限于时间、地域及高昂的成......
  • 一个升级的多租户权限管理系统,组件化,模块化,轻耦合,高扩展企业级的应用框架,功能强大(
    前言在现代软件开发中,多租户权限管理系统是企业级应用中的一个关键组件。然而,现有的一些框架,如RuoYi,虽然提供了一些基本的功能,但在面对更复杂的企业级需求时,如原生的MyBatis使用、复杂的分页处理,以及一些高级功能支持上,仍然存在一些不足和痛点。为了解决这些问题,并提供一个更......
  • nodejs语言,MySQL数据库;springboot的个性化资讯推荐系统66257(免费领源码)计算机毕业设计
    摘 要随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,个性化资讯推荐系统当然也不能排除在外。个性化资讯推荐系统是以实际运用为开发背景,运用软件工程原理和开发方法,采用springboot技术构建的一个管理系统。整......
  • 从前端向 FlaskForm 添加多个 WTF 字段
    我想制作一个字段数量不稳定的表单,以便用户可以根据需要添加尽可能多的新字段。在不提前知道字段数量的情况下,如何获取Python端的所有表单数据(通过WTForms)?forms.pyclassForm(FlaskForm):field=StringField('field')submit=SubmitField('submit')HTML<......
  • 51单片机之模块化编程
    一、模块化编程与传统方式编程的区别传统方式编程:在这种编程方式中,所有的函数通常都被放置在同一个文件main.c中。当项目中使用的模块较多时,这个文件中会包含大量的代码,导致代码难以组织和管理,也影响了编程者的思路。这种方式缺乏清晰的结构划分,使得代码的可读性和可维护性降......
  • 419.开心旅游主题网页 大学生期末大作业 Web前端网页制作 html+css+js
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有Web前端网页制作的各行各业的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这......
  • 【招聘】前端软件工程师、高级前端软件工程师
    最近我们公司在招聘【前端软件工程师】和【高级前端软件工程师】两个职位,坐标上海浦东张江,有兴趣的读者欢迎扫描下方二维码了解详细信息。我们公司名为【瑞孚迪生物医学(上海)有限公司】,所招两个职位来自于公司的SignalsR&D部门,Signals是一款面向药物研发和化工领域的SaaS软件套......
  • 那些我所知的前端的web安全知识
    本文列举了目前整个前端在研发过程中可能遇到的安全问题,待补充完善中...你了解哪些前端安全相关的知识与浏览器相关的安全问题:XSSCSRFHTTPS(提升安全性...这个大多数研发都了解)CSP(内容安全策略,可以禁止加载外域的代码,禁止外域的提交)服务器添加content-secruity-policy......
  • vue 项目使用@vue-office/docx word 纯前端v 也支持后端接口方式
    只是做个记录,防止忘记。安装依赖 @vue-office/docxvue2的写法vue3同理自己改造。记得一定放在public文件夹下 下面代码<template> <divstyle="height:100%">  <el-buttontype="primary"@click="downWord">下载文档</el-button>  <vue......