模块化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

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

相关文章
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
JavaScript UED
js之模块化(2)
js之模块化(2)
|
6月前
|
JavaScript 前端开发 网络架构
ES6解构赋值详解;全面掌握:JavaScript解构赋值的终极指南
解构赋值是一个强大且灵活的工具,它使得从数组和对象中提取数据变得更加简单和直观。通过掌握解构赋值的基本语法和实践,你可以写出更加简洁、可读性更强的代码。在实际项目中,解构赋值广泛应用于函数参数处理、变量交换、嵌套结构操作等场景,极大地提升了代码的灵活性和简洁度。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
217 58
|
JavaScript 前端开发 开发者
js之模块化(1)
js之模块化(1)
|
10月前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
128 5
|
11月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
370 4
|
11月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
146 1
|
11月前
|
前端开发 JavaScript 小程序
JavaScript的ES6中Promise的使用以及个人理解
JavaScript的ES6中Promise的使用以及个人理解
124 1