| |
|
开发:
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项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
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- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |