IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Node.js中利用CommonJS模块化 -> 正文阅读

[JavaScript知识库]Node.js中利用CommonJS模块化

无论是什么语言,代码的规模达到一定程度,为了优化都会对其进行模块化

js本身没有模块系统。前端开发的系统规模对比其他也没有那么庞大,将就将就也能完事,可是当把js迁移到服务器以后,服务器的代码规模很大,如果不进行模块化会很难维护,经过jQuery封装后的js,引入jQuery的文件和相关的库属于模块化,但并不属于模块化系统

利用jQ插件举例,必须要引入jQ文件以后才能使用插件,存在先后顺序,如果引入多个模块,它必须符合这个先后顺序,过程繁琐且不好维护

——————————————————————————————————

因此,在Node.js下诞生了?CommonJS 规范

其对模块的定义分为:

——模块引用

——模块定义

——模块标识

从架构的角度来看,CommonJS模块是一个可以复用的Javascript块,它出口对任何独立代码都起作用的特定对象

在Node中,一个js文件就是一个模块

?如上图,index模块和index02模块的运行结果同时显示

---------------------------------------------------------------------------------------------------------------------------------引入其他的模块

利用 "?require("路径");?"?方法,该方法为函数

【注:这里的路径如果使用相对路径,必须以 ./ 或 ../ 开头】

例如我想在index模块中引入index02模块

【二者是同级目录,使用 ./】

?可以看到在index中并没有打印70,可是在输出结果中index这个模块里却有70

---------------------------------------------------------------------------------------------------------------------------------

ps:引入的模块为一个整体,不会与其他模块偶合

这里举个例子,为 index02 中添加变量x,继续打印index

?

可以看到,报错后提示 ”x is not defined“,即x未定义。因为x只在 index02 中声明,算作index02的内容,不会与其他模块偶合,所以在 index 打印时显示x为定义

那么问题来了,有的同学可能就说,欸不行,我就必须要x在别的模块里也能用,那这种问题该怎么解决呢,那就不得不提?require()函数 的另一用法:

---------------------------------------------------------------------------------------------------------------------------------使用require()函数后,会返回一个对象,这个对象代表的是引入的变量

那么我们可以进行如下操作

将引入的模块定义为 变量a,之后打印?变量a

?可以看到不报错了,30和70正常显示,但是x却变成了?{ }

这就涉及到一个知识点:

在 Commonjs 规范下的模块中,会形成一个包装函数,使用的 require,exports,module本质上是通过形参的方式传递到包装函数中的。

因此,在Node中,每一个js文件中的js代码都独立运行在一个函数中,而不是全局作用域,所以一个模块中的变量和函数在其它模块中无法访问

说白了,因为每一个模块都是包装函数,所以它们相对彼此都是封闭的,如果想要互相调用,就需要就彼此暴露出来

这么暴露呢

可以使用 " exports?" 方法向外部暴露

exports.变量名=值

?这里我用该方法定义了x,将x暴露出来,再执行index后x正常显示,接下来提取x

?

?以上,就是模块化的一些简单介绍,接下来举个简单的例子

定一个加法运算的模板,调用这个模板求值

?

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-07-21 21:27:19  更:2022-07-21 21:28:51 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 -2025/1/11 12:56:19-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码