一篇文章打通Node.js模块化与ES6模块化

论坛 期权论坛 期权     
文青程序苑   2019-6-29 21:29   2514   0
Node.js 入门到实践 (三)
[h2]本节目录 [/h2]什么是CommonJS?如何定义模块?如何导入模块?Node的缓存与加载机制ES6内置模块化如何定义模块如何自定义导出名称模块的默认导出如何加载模块自定义导入名称全部导入一个模块特别注意本文小结下节预告Node.js 常用核心模块(上)
[h2]什么是CommonJS? [/h2]
CommonJS是Node.js也就是JS服务器端广泛使用的模块化机制。 该规范的主要内容是,模块必须通过 module.exports 导出对外的变量或接口,通过 require() 来导入其他模块的输出到当前模块作用域中。
每个JS文件就是一个模块,有自己独立的作用域,内部的变量、函数、类等内容默认是对外部文件不可见,这就是模块化。
[h2]如何定义模块? [/h2]在模块内部,
  1. module
复制代码
关键字代表当前模块,它有一个
  1. exports
复制代码
属性,用于将模块中的内容暴露出去,供外部文件导入。所以在
  1. CommonJS
复制代码
规范中,导入一个模块就是读取该模块的
  1. module.exports
复制代码
变量。
  1. // a.jslet x = 1let y = ()=> {}module.exports.x = x
复制代码
  1. a.js
复制代码
暴露出一个x变量,但是函数
  1. y
复制代码
不能被外部文件加载到。我们来修改下
  1. module.exports. = {x, y}
复制代码
这样外部文件就可以导入到变量
  1. x
复制代码
与函数
  1. y
复制代码

[h2]如何导入模块? [/h2]使用关键字
  1. require
复制代码
方法导入一个模块,后缀名默认为
  1. .js
复制代码
,可省略。
  1. // b.jslet a = require('./a.js')
复制代码
我们定义了一个变量
  1. a
复制代码
用于接收
  1. a.js
复制代码
模块暴露出的对象,它包含了
  1. x
复制代码
  1. y
复制代码
两个属性。
  1. require
复制代码
方法接收一个模块的路径:
    1. '/'
    复制代码
    开头,代表导入绝对路径的模块。
    1. './'、'../'
    复制代码
    开头,代表导入相对路径的模块。
  • 除此以外,Node会从核心模块中去查找。(首先查找Node内置的核心模块,若未果会去查找全局安装在
    1. node_modules
    复制代码
    目录中的模块,若未果再去查找项目局部安装在
    1. node_modules
    复制代码
    目录中的模块)。
[h2]Node的缓存与加载机制 [/h2]初次加载一个模块时,Node会缓存该模块。再次加载该模块时,Node会直接从缓存中取出该模块的
  1. module.exports
复制代码
CommonJS模块加载,输入的是被输出的值的拷贝。一旦输出一个值,模块内部的变化就不会对其造成影响
------------(  )可爱的分割线------------
[h2]ES6内置模块化 [/h2]
ES6模块化使我们在浏览器端JS可直接进行模块化模块自动运行在严格模式下在模块的顶级作用域创建的变量,不会被自动添加到共享的全局作用域,它们只会在模块顶级作用域的内部模块顶级作用域的 this 值为 undefined对于需要让模块外部代码访问的内容,模块必须导出它们
[h2]如何定义模块 [/h2]
  1. // a.jsexport let x = 'x'export function y () {}export class z {  constructor () {}}
复制代码
[h2]如何自定义导出名称 [/h2]这里导出的内容与名称是一一对应的,我们可以使用关键字
  1. as
复制代码
定义导出名称
  1. export { x as o }
复制代码
这样外部文件只能使用
  1. o
复制代码
去导入变量
  1. x
复制代码
[h2]模块的默认导出 [/h2]使用关键字
  1. default
复制代码
可以设置模块的默认导出
  1. export default (num) => num += 1
复制代码
这样我们就导出了一个匿名函数
[h2]如何加载模块 [/h2]在ES6模块化中使用关键字
  1. import from
复制代码
导入模块
  1. // b.jsimport {x, y, z} from './a.js'
复制代码
[h2]自定义导入名称 [/h2]使用关键字
  1. as
复制代码
可定义导入名称
  1. //b.jsimport {x, y as p, z} from './a.js'
复制代码
[h2]全部导入一个模块 [/h2]我们可以使用关键字
  1. *
复制代码
将整个模块赋值成一个对象去导入
  1. //b.jsimport * as a from './a.js'
复制代码
那么变量
  1. a
复制代码
就包含了
  1. x、y、z
复制代码
[h2]特别注意 [/h2]
  1. export
复制代码
也好,
  1. import
复制代码
也好, 它们必须用在语句或表达式的外部,不能将它们在代码块的内部使用。下面这种是不可行的:
  1. // b.jsif (true) {  import * as a from './a.js'}
复制代码
[h2]本文小结 [/h2]哈~ 我们的CommonJS与ES6模块化就说到这里了,足够用于我们的日常开发了。在我们开始Node的讲解之前,说一下模块化也是为了后续Node的编写中可以更行云流水。下期,我们就开始和Node亲密接触了。
最近我们文青程序苑在冲关注去开通流量主,如果你还没有关注,请帮忙点个关注、贡献一份力量啦,我们一起为它能够运营下去而发光呐!我们下期见~
[h2]下节预告 [/h2][h3]Node.js 常用核心模块(上)[/h3]
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:
帖子:
精华:
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP