模块化Common.js与ES6

简介: 模块化Common.js与ES6

为什么要模块化开发

1. 依赖关系(a文件依赖b文件中的方法,b文件必须在a文件之前引入)
2. 命名问题 (多个文件变量名,方法名相同会出现覆盖)
3. 代码组织(后期不好维护)

模块化规范有

1. Common.js 规范  node,webpack使用的Common.js规范

Common.js 的导出与引入

结论:
1.module.exports = { }暴露出去。require 引入。
如果没有使用 module.exports将其暴露,将默认得到一个空对象。
2.同一个文件只能只用一个 module.exports,如果多个,将会出现覆盖。
后面的覆盖其前面的。
3.如果需要导出多个,可以放置在一个对象中 module.exports = { a:'',b:''}
4.暴露多个对象,还可以使用下面这一种
exports.say = say
exports.hello = hello
调用的方式都是相同的。
5.无论是使用 module.exports还是exports.xxx 进行导出。
我可以都是可以进行解构。因为导出的是一个对象。
let  { say, hello}= require('./a')

没有导出默认得到一个空对象

a.js
function say(){
  console.log('我是a.js')
}
demo.js
let a= require('./a')
console.log(a)
因为没有暴露出去,所以得到的是一个空对象

module.exports 暴露多个方法

function say(){
  console.log('我是a.js')
}
function hello(){
  console.log('hello呀')
}
module.exports ={
  say,
  hello
}

node中使用ES6模块规范

结论:
1. export default 暴露出去 export default obj
通过 import A from "./a" 引入
2.如果在node中使用ES6模块的方式导出,将会报错。
Cannot use import statement outside a module
不能在模块外使用import语句。
解决办法:在根目录下创建一个package.json文件。
然后去声明一个模块类型。
可以使用命令:npm init -y
package.json文件
{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "demo.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
特别说明的是:  
"type": "module", 表示的是模块类型。默认是commonjs.
我们因为中node使用了es6模块的方式,隐藏要使用 module
"main": "demo.js",表示的是默认执行哪一个文件
如何还报错:Did you mean to import ../xxx.js?
是因为你引入的路径不是全路径,省略了文件的后缀名。
更改为引入文件的全路径(添加上文件后缀名就行)
进一步思考:
因为你在项目的根目录下声明了模块的类型是 module。
那么你就不能够使用 Common.js规范。使用的话会报错
因此:建议只用一种类型。通常在node中,我们使用的是 Common.js

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
17天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
21 3
|
2月前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
24 3
|
2月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
23 2
|
2月前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=>`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
20 5
|
2月前
|
前端开发 JavaScript 开发者
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
|
2月前
|
JavaScript 前端开发 测试技术
如何编写JavaScript模块化代码
如何编写JavaScript模块化代码
13 0
|
1天前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
8 3
|
17天前
|
JavaScript 前端开发
js开发:请解释什么是ES6的Generator函数,以及它的用途。
ES6的Generator函数是暂停/恢复功能的特殊函数,利用yield返回多个值,适用于异步编程和流处理,解决了回调地狱问题。例如,一个简单的Generator函数可以这样表示: ```javascript function* generator() { yield 'Hello'; yield 'World'; } ``` 创建实例后,通过`.next()`逐次输出"Hello"和"World",展示其暂停和恢复的特性。
20 0
|
19天前
|
缓存 JavaScript 前端开发
JavaScript模块化:CommonJS与ES Modules的对比与使用
【4月更文挑战第22天】本文探讨了JavaScript模块化的两种规范——CommonJS和ES Modules。CommonJS适用于Node.js,通过`require`同步加载模块,而ES Modules(ES6模块)用于前端,支持异步加载和静态导入导出。CommonJS有缓存,ES Modules无缓存。在选择时,Node.js环境常用CommonJS,但趋势正转向ES Modules,前端项目推荐使用ES Modules以利用其优化性能的优势。
|
28天前
|
JavaScript 前端开发
JavaScript高级主题:什么是 ES6 的解构赋值?
【4月更文挑战第13天】ES6的解构赋值语法简化了从数组和对象中提取值的过程,提高代码可读性。例如,可以从数组`[1, 2, 3]`中分别赋值给`a`, `b`, `c`,或者从对象`{x: 1, y: 2, z: 3}`中提取属性值给同名变量。
18 6