前端 JS 经典:CommonJs 规范

简介: 前端 JS 经典:CommonJs 规范

1. Node 环境介绍

CommonJs 简称 CMJ,CMJ 的模块标准,必须在 node 的环境中才支持。在浏览器中用,是不行的。

查看电脑是否安装 node,通过打开终端,运行 node -v 查看是否返回 node 版本。返回则已安装。

CMJ 在 node 中怎么使用呢,其实和 JS 在浏览器环境下用法一样,变量的定义判断循环数组的使用等都一样。与 JS 在浏览器中用法不同的是,API 不一样,在 node 中使用 Node API,在 JS 中使用的是 Web Api(DOM 和 BOM)。其中 Node API 很强大的,是开发服务器用的。

node 环境有什么用呢,就是使我们的 JS 代码,脱离浏览器直接运行,怎么做呢,打开终端,运行 node xxx.js 命令即可。

2. CMJ 中的模块特点

在 node 环境中,所有的 js 文件均是模块。那什么叫模块呢,就是独立的功能单元。浏览器可以同时引用多个 js,但在 node 里同时只能运行一个 js,这个 js 被称为入口文件。其他拥有独立功能的 js 文件,可以通过导出后,被入口 JS 文件导入。比如将 index.js 作为入口文件,math.js 作为专门提供计算函数的模块。所有模块中的全局变量,函数,均不会发生环境污染。

3. 模块的导出

一个模块提供的函数,怎么给其他模块使用,那就需要把模块提供的函数导出,那怎么导出呢,在 node 中,通过 module.exports 导出。

// math.js
function add(a, b) {
  return a + b;
}
module.exports = {
  add,
};

4. 模块的导入

当一个模块,需要用到其他模块的函数或变量时,就需要导入这些函数和变量,那怎么导入呢,在 node 中,通过 require(模块路径),模块路径必须以 ./ ../ 开头。其中 ./ 表示当前目录,../ 表示上级目录。那 require 做了什么事呢,首先会找到模块路径的 js,然后把这个 js 从头到尾的运行一遍,运行完后,module.exports 的值就作为这个模块的导出,而 require 函数的返回结果就是 module.exports 的值。拿到这个值后,我们就可以用到别的模块的函数或变量了。

模块是有缓存的,第一次运行模块后,导出结果,会被缓存,之后在使用该模块,直接使用缓存结果。

// index.js
const math = require("./math.js");
 
math.add(1, 2); // 3


目录
相关文章
|
10天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
38 0
|
7天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
18 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
10天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
65 1
前端JS发起的请求能暂停吗?
|
1天前
|
前端开发 JavaScript Serverless
前端新手建议收藏的JavaScript 代码技巧
前端新手建议收藏的JavaScript 代码技巧
11 3
|
1天前
|
设计模式 前端开发 JavaScript
关于写好前端JS代码的一些建议
关于写好前端JS代码的一些建议
10 2
|
1天前
|
JavaScript 前端开发
JavaScript的规范代码风格
JavaScript的规范代码风格
|
9天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
3天前
|
前端开发 JavaScript
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题,动态JS加载失败,请问怎么解决啊?急,急,急。
用户反馈校验时遇到错误,日志显示验证码参数获取异常。采用无痕验证,失败后,返回`{captchaResult:false,bizResult:false}`,未触发滑块二次验证。
|
4天前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
12 0
|
1月前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
64 5