成都创新互联网站制作重庆分公司

Node.js开发、CommondJS、ES-Module模块化设计-创新互联

目录

成都创新互联网站建设公司一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!专注中小微企业官网定制,成都做网站、网站设计,塑造企业网络形象打造互联网企业效应。

Node.js是什么

基础使用

Node的REPL

全局变量

模块化设计

CommondJS规范

基础使用exports和module.exports

require

CommondJS优缺点

AMD和CMD规范

ES_Module

基本使用方法

导出

导入

结合使用

默认导出

ES Module解析流程


Node.js是什么

Node与浏览器的对比

在浏览器中,HTML与CSS交给Blink处理,如果其发现了JS代码,就会交给V8处理

而Node是直接V8处理JS代码,Node主要由JS(api)、C++和C语言编写,libuv主要绑定js与操作系统的操作

下载地址

Node.js

基础使用

可以在VScode中的终端使用node

console.log(1123123);
console.log('asdada');

在终端中直接  node XXX.js(XXX是文件名,在运行时终端的文件域必须和该文件一致)

如果要从终端输入参数

console.log(1123123);
console.log('asdada');

console.log(process.argv);

结果:

1123123
asdada
[
  'C:\\Program Files\\nodejs\\node.exe',
  'C:\\Users\\12860\\Desktop\\品优购项目\\test.js',
  'num1=123'
]

也就是说  process.argv输出的是一个数组,你输入的数据在数组的第3个之后  

Node的REPL

在控制台输入node,可以一行一行输入并执行js代码

用的很少

全局变量

例如global,类似于window

console.log(global);

可以看到js中的全局变量

Object [global] {
  global: [Circular *1],
  queueMicrotask: [Function: queueMicrotask],
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  },
  structuredClone: [Function: structuredClone],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  },
  atob: [Function: atob],
  btoa: [Function: btoa],
  performance: Performance {
    nodeTiming: PerformanceNodeTiming {
      name: 'node',
      entryType: 'node',
      startTime: 0,
      duration: 33.55670002102852,
      nodeStart: 2.157499998807907,
      v8Start: 4.655900001525879,
      bootstrapComplete: 23.560699999332428,
      environment: 13.318800002336502,
      loopStart: -1,
      loopExit: -1,
      idleTime: 0
    },
    timeOrigin: 1668353099915.782
  },
  fetch: [AsyncFunction: fetch]
}

对于浏览器来说有window,对于node来说有global,所以创造了一个总的全局变量,在两个地方都能用,叫globalthis 

模块化设计

解释一下第二点

对于之前的做法,如果我有很多js文件,第一个文件aaa.js定义了var name = 111

第二个文件bbb.js定义var name = 222

当我在第三个js文件通过scrip src方式引入这两个js文件时,这个name变量就会变得模糊

而模块化设计的要求是,不同模块的变量是不会互相影响的,且外部无法访问

但是肯定不希望所有的变量,外部都不能访问,所有可以通过一些方法导出自己希望外部能访问的内容,既第三点

立即执行函数可以解决变量冲突的问题,如果在aaa.js和bbb.js中的代码都放入立即执行函数中,由于函数本身就有作用域,所以不会互相影响

但是如果外部想调用变量,就必须确定立即执行函数的返回对象,这会增加使用难度

CommondJS规范

基础使用exports和module.exports

在test.js里面写

const name = 'lmx'
const age= 18
const fn = function(){
    console.log(123);
}
exports.name = name 
exports.age = age
exports.fn = fn

在mian.js写

const test = require('./test.js')
console.log(test);
console.log(test.name);
test.fn()

必须要用node运行main.js

其实本质就是引用赋值

test.js创建了exports对象,然后往里面写入元素name age fn,但是exports变量保留的是该对象的地址

而require也是获取的对象的地址,所以两者指向的是同一个对象

那么在test.js里面改变值,也会影响到main.js

例如,test.js:

const name = 'lmx'
const age= 18
const fn = function(){
    console.log(123);
}
exports.name = name 
exports.age = age
exports.fn = fn

setTimeout(()=>{
    exports.name  = 'qweqwe' 
},2000)

main.js

const test = require('./test.js')
console.log(test);
console.log(test.name);
test.fn()
setTimeout(()=>{
    console.log(test.name);
},2500)

{ name: 'lmx', age: 18, fn: [Function: fn] }
lmx
123
qweqwe

但是上述方法在开发中使用的很少,一般用module.exports

将test.js中的exprots改为:

const name = 'qwe'
const age = 17

module.exports.name = name
module.exports.age = age

main.js不需要改

看上去还变复杂了,从本质上来说,这种方法会创造一个module对象,该对象里面包含了一个exports,指向之前创造的对象

所以说这里左边的exports和module.exports其实是一个东西,因为指向的是同一个对象

在require的时候,其实node本质上拿到的是module.exports,但是因为module.exports===exports,所有现在看来两种方式是一样的

真实开发做法是

const name = 'qwe'
const age = 17
console.log(age);

module.exports={
    name,
    age
}
exports.name = 'hhhhh'

本质是,这里会创造一个新的对象,module.exports指向这个对象,那么这个对象跟之前的exports对象就没有关系了

使用require获取的也是这个新的对象,所有改exports.name没有意义了

结果是{ name: 'qwe', age: 17 }

require

例如,内置模块包含了很多方法

const test = require('path')
console.log(test);
{
  resolve: [Function: resolve],
  normalize: [Function: normalize],
  isAbsolute: [Function: isAbsolute],
  join: [Function: join],
  relative: [Function: relative],
  toNamespacedPath: [Function: toNamespacedPath],
  dirname: [Function: dirname],
  basename: [Function: basename],
  extname: [Function: extname],
  format: [Function: bound _format],
  parse: [Function: parse],
  sep: '\\',
  delimiter: ';',
  win32: [Circular *1],
  posix:{
    resolve: [Function: resolve],
    normalize: [Function: normalize],
    isAbsolute: [Function: isAbsolute],
    join: [Function: join],
    relative: [Function: relative],
    toNamespacedPath: [Function: toNamespacedPath],
    dirname: [Function: dirname],
    basename: [Function: basename],
    extname: [Function: extname],
    format: [Function: bound _format],
    parse: [Function: parse],
    sep: '/',
    delimiter: ':',
    win32: [Circular *1],
    posix: [Circular *2],
    _makeLong: [Function: toNamespacedPath]
  },
  _makeLong: [Function: toNamespacedPath]
}

意思是有的时候可以省略.js等

第三种情况,X即不是内置模块,也不是文件,例如

const test = require('why')

它会找上层文件夹中下的node_modules文件夹,这个文件夹名字是固定的,然后再在node_modules文件夹里面找why文件夹,再找why文件夹下的index.js

如果没找到node_modules,就返回再上一层文件夹接着找,直到找到或者找到根目录为止

所以在npm install axios的时候,其实就是创建了一个node_modules文件夹,把axios相关的文件放进去了

CommondJS优缺点

AMD和CMD规范

已经用的很少了,做一个了解吧

ES_Module

ES module是ES6新增的JS模块化的功能,如果浏览器支持ES6则可以直接使用

如果不支持,一般是通过webpack打包之后再接入浏览器

基本使用方法

在html引入js这么写,加type = 'module',这样就可以创建独立的作用域,不会互相影响

但是在打开时,必须打开服务,例如使用live server

导出
const name = 'why'
const age =14
export{
    name,
    age
}

这个地方,export{}不是新建的一个对象,只是大括号将标识符包含起来

也可以在定义的时候直接导出

const name = 'why'
export const age =14

导入
import {name,age }from './test.js'
console.log(name );
console.log(age);

导入的时候可以起个别名

import {name as fname,age }from './test.js'
console.log(fname );
console.log(age);

导入语句只能写在顶端,不能写在逻辑代码里面 

例如

let flag = true
if(flag){
    import{name,age} from './test.js'
}

这种会直接报错

但是我就是想放在逻辑里面使用呢,比如当某种条件成立的时候才导入

可以用到import函数

let flag = true
if(flag){
    let promise1 = import('./test.js')
    promise1.then(res=>{
        console.log(res.name);
        console.log(res.age);
        res.fn()
    })
}

因为该函数是异步的,其返回值是一个promise,调用then拿到结果 

结合使用

如果现在有很多js文件,基本上每个文件都导出了一些方法

如果index,html想得到这些方法,就得一个一个script src=

一般的做法是,再新建一个index.js,里面将那些js文件导入,再直接导出,所以在html文件中就可以直接只导入index.js

那么在index.js里面就可以这么写

export{getdata,getname} from './aaa.js'
export{getdata1,getname2} from './bbb.js'
默认导出

如果一个js文件,他的文件名就已经代表了他的功能,且只需要导出一个东西,就可以使用默认导出

const name = 'why'

export default name

如果导出的函数,甚至可以不写函数名字

export default function(){
    console.log('asdasd');
}

很显然,一个模块只能有一个默认导出

之前的导入中 ,都需要导出和导入的变量名字保持一直(除非使用as改名),使用默认导出,就可以在导入的时候自己设置一个名字

import aaa from './test.js'
console.log(aaa);
ES Module解析流程

首先第一步,对于js文件进行下载,解析为 模块记录module record,例如如果在index.html中引入了main.js,那么会首先下载这个js文件。

如果js文件中也存在导入语句,那么跟第一步一样,先下载对应的js文件,创建模块记录,这里是会直接搜索文件的最开始部分有没有import语句,所以不能将其放入逻辑判断中。

这里还会生成一个映射表 module map,放入js文件的地址和对应的  module record,在这个图中main.js引入的counter.js,如果别的文件也引入了counter.js,那么就可以在这个表中直接拿到 module record

第二步,如果有导出语句,例如export const age = 18,那么会生成一个模块环境记录  module environment record 放置 age变量,但是它是没有值的。

值得注意的是,上述两步是没有执行一行代码的

第三步,运行,填充环境记录中的变量值,例如填充age 的值是多少,在后续别的模块import这个age的时候,就可以从这里拿到

你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧


分享名称:Node.js开发、CommondJS、ES-Module模块化设计-创新互联
网页网址:http://cxhlcq.com/article/iegpd.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部