当前位置:首页 > 技术 > 正文内容

JS模块化

Lotus2022-12-04 20:37技术

模块化规范

1.CommonJS规范

​ 在node中,默认支持的模块化规范叫做CommonJS,

​ 在CommonJS中,一个js文件就是一个模块

  • CommonJS规范

    • 引入模块

      • 使用require('模块的路径')函数来引入模块

      • 引入自定义模块时

        • 模块名要以 ./ 或 ../ 开头
        • 扩展名可以省略
          • 在CommonJS中,如果省略的js文件的扩展名,node会自动不全扩展名
            • 如果没有改js文件,会找名字相同的文件进行引入
      • 引入核心模块时

        • 直接写核心模块的名字即可
        • 也可以在核心模块前添加node:可以加快查询效率
    //引入自定义模块
    const m1 = require("./m1")
    //按需引入
    const name = require('./m1').name
    const {name,age,gender} = require('./m1')
    //引入核心模块
     const path = require("path")
     const path = require("node:path")
    

    在定义模块时,模块中的内容默认是不能被外部看到的

    ​ 可以通过exports来设置要向外部暴露的内容

    访问exports的方式有两种:

    1. exports
    2. module.exports
    • 当我们在其他模块中引入当前模块时,require函数返回的就是exports -
    • 可以将希望暴露给外部模块的内容设置为exports的属性
    ------------------------------m1.js----------------------------------------
    // 可以通过exports 一个一个的导出值
    // exports.a = "孙悟空"
    // exports.b = {name:"白骨精"}
    // exports.c = function fn(){
    //     console.log("哈哈")
    // }
    
    // 也可以直接通过module.exports同时导出多个值
    module.exports = {
        a: "哈哈",
        b: [1, 3, 5, 7],
        c: () =>{
            console.log(111)
        }
    }
    
    

    CommonJS执行原理:

    1. 所有的CommonJS的模块都会被包装到一个函数中

      (function(exports, require, module, __filename, __dirname){
          //模块代码会被放到这里
      })
      

      exports:用来设置模块向外部暴露的内容

      require:用来引入模块的方法

      module:当前模块的引用

      __filename:模块的路径

      __dirname:模块所在目录的路径

2.ES6模块化

Node.js中同样支持ES模块化,使用模块化无非就是需要注意两件事导出和导入

  1. 导出

    // 导出变量(命名导出)
    export let name1, name2, …, nameN; 
    export let name1 = …, name2 = …, …, nameN; 
    ​
    // 导出函数(命名导出)
    export function functionName(){...}
    ​
    // 导出类(命名导出)
    export class ClassName {...}
    ​
    // 导出一组
    export { name1, name2, …, nameN };
    ​
    // 重命名导出
    export { variable1 as name1, variable2 as name2, …, nameN };
    ​
    // 解构赋值后导出
    export const { name1, name2: bar } = o;
    ​
    // 默认导出
    export default expression;
    export default function (…) { … } // also class, function*
    export default function name1(…) { … } // also class, function*
    export { name1 as default, … };
    ​
    // 聚合模块
    export * from …; // 将其他模块中的全部内容导出(除了default)
    export * as name1 from …; // ECMAScript® 2O20 将其他模块中的全部内容以指定别名导出
    export { name1, name2, …, nameN } from …; // 将其他模块中的指定内容导出
    export { import1 as name1, import2 as name2, …, nameN } from …; // 将其他模块中的指定内容重命名导出
    export { default, … } from …; 
    
  2. 引入

    // 引入默认导出
    import defaultExport from "module-name";
    ​
    // 将所有模块导入到指定命名空间中
    import * as name from "module-name";
    ​
    // 引入模块中的指定内容
    import { export1 } from "module-name";
    import { export1 , export2 } from "module-name";
    ​
    // 以指定别名引入模块中的指定内容
    import { export1 as alias1 } from "module-name";
    import { export1 , export2 as alias2 , [...] } from "module-name";
    ​
    // 引入默认和其他内容
    import defaultExport, { export1 [ , [...] ] } from "module-name";
    import defaultExport, * as name from "module-name";
    ​
    // 引入模块
    import "module-name";
    

    需要注意的是,Node.js默认并不支持ES模块化,如果需要使用可以采用两种方式:

    1. 方式一:直接将所有js文件修改为mjs扩展名。
    2. 方式二:修改package.json中type属性为module。

3.核心模块

核心模块,是node中自带的模块,可以在node中直接使用

  1. window 是浏览器的宿主对象 node中是没有的
  2. global 是node中的全局对象,作用类似于window
  3. ES标准下,全局对象的标准名应该是 globalThis
  • process

    • 表示当前的node进程

    • 可以通过改对象获取进程的信息,或者对进程做各种操作

    • 如何使用

      1. process是一个全局变量,可以直接使用

      2. 有哪些属性和方法:

        1. process.exit([code状态码])

          1. 结束当前进程,终止node
        2. process.nextTick(callback[ ...args])

          1. 将函数插入到 tick队列中

          2. tick队列中的代码,会在下一次事件循环之前执行,会在微任务队列和宏任务队列中任务之前执行

            setTimeout(()=>{
            	console.log('111')
            }) //宏任务队列
            queueMicrotask(()=>{
                console.log('222')
            })  //微任务队列
            process.nextTick(()=>{
                console.log('333')
            })
            console.log('444')
            
            
            //执行顺序为: 444 -> 333 -> 222 -> 111
            

      执行顺序:

      1. 调用栈
      2. tick队列(了解)
      3. 微任务队列
      4. 宏任务队列
  • path模块

    • 表示的路径

    • 通过path可以用来获取各种路径

    • 要使用path,需要先对其进行引入

    • 方法:

      • path.resolve([...paths])

        • 用来生成一个绝对路径
        • 直接调用resolve,则返回当前的工作目录
        • 注意,我们通过不同的方式执行代码时,它的工作目录是有可能发生变化的
      • 如果将一个相对路径作为参数:

        • 则resolve会自动将其转换为绝对路径
        • 此时根据工作目录的不同,他所产生的绝对路径也不同
      • 一般会将一个绝对路径作为第一个参数

        • 一个相对路径作为第二个参数
        • 这样它会自动计算出最后的路径
      //引入模块
      const path = require('node:path')
      //以后在使用路径时,尽量通过path.resolve()来生成路径
      const result = path.resolve(__dirname, './hello.js')
      
  • fs模块

    • fs用来帮助node来操作磁盘中的文件

    • 文件操作也就是所谓的I/O流,input output

    • 使用fs模块,同样需要引入

    • fs.readFileSync()

      • readFileSync() 同步的读取文件的方法,会阻塞后面的代码执行

      • 当我们通过fs模块读取磁盘中的数据时,读取到的数据总会一Buffer对象的形式返回

      • Buffer是一个临时用来存储数据的缓冲区

        //引入模块
        const path = require('node:path')
        const fs = require('node:fs')
        const buffer = fs.readFileSync(path.resolve(__dirname, './hello.txt'))
        console.log(buffer.toString())  //把Buffer数据转换为字符串类型
        
    • fs.readFile()

      • 异步的读取文件的方法

        • 方法1:回调函数式

          const path = require('node:path')
          const fs = require('node:fs')
          fs.readFile(path.resolve(__dirname, './hello.js'),(err,buffer)=>{
              if(err){
                   console.log("出错了~")
              } else {
                   console.log(buffer.toString())
              }
          })
          
        • 方法2:promise式

          const path = require('node:path')
          const fs = require('node:fs/promises')
          fs.readFile(path.resolve(__dirname, './hello.js'))
          	.then(buffer=>{
              	console.log(buffer.toString())
          	})
          	.catch(e=>{
              	console.log('出错了,有问题', e.message)
          	})
          
        • 方法3:async和await式

          ;(async ()=>{
              try {
                  const buffer = await fs.readFile(path.resolve(__dirname, './hello.js'))
                  console.log(buffer.toString())
              } catch(e){
                  console.log(’出错了....)
              }
          })()
          
    • fs.appendFile()

      • 创建新文件,或将数据添加到已有文件中
    • fs.mkdir()

      • 创建目录
    • fs.rmdir()

      • 删除目录
    • fs.rm()

      • 删除目录
    • fs.rename()

      • 重命名
    • fs.copyFile()

      • 复制文件
  1. //实现复制一个文件
    //1.读取文件中的内容
    const path = require('node:path')
    const fs = require('node:fs/promises')
    fs.readFile(path.reslove(__dirname, './hello.txt'))
    	.then(buffer =>{
        	//2.复制文件中的
        	return fs.appendFile(path.resolve(__dirname, './world.txt'), buffer)
    	})
    	.then(()=>{
        	console.log('操作结束')
    	})
    	.catch(err =>{
        	console.log('出错了..')
    	})
    

原文链接

扫描二维码推送至手机访问。

版权声明:本文来源于网络,仅供学习,如侵权请联系站长删除。

本文链接:https://news.layui.org.cn/post/1080.html

分享给朋友:

“JS模块化” 的相关文章

WinDbg Preview安装以及符号表配置

1、安装WinDbgPreview 在Microsoft Store直接搜索windbg就可以下载。 2、配置符号服务器 2.1 符号 符号是方便调试程序的文件,通常是pdb文件。一个模块(可执行程序,动态链接库)对应一个pdb文件。不同的windows版本中的文件不同(比如说kernel32),版本不同pdb符号文件也不同,因此要从微软提供的符号服务器获取本机对应的符号。 但是要在本地建立一个文...

记Windows的一个存在了十多年的bug

bug Windows有一个bug,持续了十多年,从Windows Visita开始(2007年),一直存在,直到Windows11(2021年)才修复(其实也不叫修复,后面我再具体说),而Windows10还能重现这个bug,即便把系统更新到最新(2022年10月5日)。 这个bug用语言来描述就是:使用Windows Explorer(资源管理器)的树形结构初次展开目录时,滚动条会发生不正确...

多功能手持VH501TC采集仪如何设置振弦传感器的激励方法和激励电压

河北稳控科技多功能手持VH501TC采集仪如何设置振弦传感器的激励方法和激励电压 VH501TC 提供多种振弦传感器激励方法,以最大限度兼容所有厂家和型号的振弦传感器。 振弦传感器激励方法参数位于实时数据窗口右侧,共有 5 种方法可选,分别用 MODTH0~MODTH4 表示。各方法说明如下: 激励电压数据在屏幕上显示为 xxx/xxx 的形式,其中前面的数字表示实际的激励电压,后面的数字...

分布式存储系统之Ceph集群存储池操作

  前文我们了解了ceph的存储池、PG、CRUSH、客户端IO的简要工作过程、Ceph客户端计算PG_ID的步骤的相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16733806.html;今天我们来聊一聊在ceph上操作存储池相关命令的用法和说明;   在ceph上操作存储池不外乎就是查看列出、创建、重命名和删除等操作,常用相关的工具都是“cep...

JavaScript之无题之让人烦躁的模块化

  我怎么记得我好像写过相关类型的文章,但是我找遍了我的博客没有~那就再写一遍吧,其实模块化的核心内容也算不上是复杂,只不过需要整理一下,规划一下罢了。嘻嘻。   开始写标题的时候我就在纠结一件事情,就是,先吃喜欢吃的,还是后吃喜欢吃的,翻译过来就是我应该先写CommonJS和ES6 Module,还是先写CMD和AMD。嗯,我决定了,谁先做好了我就先吃谁。   其实模块化的缘由很简单,就一句话,...

一次服务器被入侵的处理过程分享

下文中的,给文件和目录加锁,是指给文件和目录增加了一些属性,只读等。 chattr +ia 目录 一、服务器入侵现象 二、服务器排查和处理 2.1、服务器被入侵的可能原因 2.2、排查和处理步骤 三、本次入侵需要带来启示的点 四、本次服务器被入侵的一些启示 一、服务器入侵现象 近期有一个朋友的服务器(自己做了网站)好像遭遇了入侵,具体现象是: 服务器 CPU 资源长期 1...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。