首页 > 其他分享 >JS 中的require 和 import 区别

JS 中的require 和 import 区别

时间:2022-10-13 16:00:42浏览次数:41  
标签:fs require JS export 模块 import

这两个都是为了JS模块化编程使用.

遵循规范
  • require 是 AMD规范引入方式
  • import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法
调用时间
  • require是运行时调用,所以require理论上可以运用在代码的任何地方
  • import是编译时调用,所以必须放在文件开头
本质
  • require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量
  • import是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require

require / exports :
遵循 CommonJS/AMD,只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。
用法只有以下三种简单的写法:

const fs = require('fs')
exports.fs = fs
module.exports = fs

import / export:
遵循 ES6 规范,支持编译时静态分析,便于JS引入宏和类型检验。动态绑定。
写法就比较多种多样:

import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'

export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'

  1. 通过require引入基础数据类型时,属于复制该变量。
  2. 通过require引入复杂数据类型时,数据浅拷贝该对象。
  3. 出现模块之间的循环引用时,会输出已经执行的模块,而未执行的模块不输出(比较复杂)
  4. CommonJS模块默认export的是一个对象,即使导出的是基础数据类型
加载方式规范命令特点
运行时加载 CommonJS/AMD require 社区方案,提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。
编译时加载 ESMAScript6+ import 语言规格层面支持模块功能。支持编译时静态分析,便于JS引入宏和类型检验。动态绑定
   

标签:fs,require,JS,export,模块,import
From: https://www.cnblogs.com/share123/p/16788432.html

相关文章

  • 【Nodejs】240-有助于理解前端工具的 node 知识
    缘起平时写惯了业务代码之后,如果想要了解下webpack或者vue-cli,好像是件很难上手的事情......
  • 【JS】167-JavaScript设计模式——装饰者模式
    四、装饰者模式(DecoratorPattern)1.概念介绍装饰者模式(DecoratorPattern):在不改变原类和继承情况下,动态添加功能到对象中,通过包装一个对象实现一个新的具有原对象相同接口......
  • 【JS】169-JavaScript设计模式——外观模式
    六、外观模式(FacadePattern)1.概念介绍外观模式(FacadePattern) 是一种简单又常见的模式,它为一些复杂的子系统接口提供一个更高级的统一接口,方便对这些子系统的接口访问......
  • 【JS】168-JavaScript设计模式——策略模式
    五、策略模式(StrategyPattern)1.概念介绍策略模式(StrategyPattern):封装一系列算法,支持我们在运行时,使用相同接口,选择不同算法。它的目的是为了将算法的使用与算法的实现......
  • 【JS】166-JavaScript设计模式——迭代器模式
    三、迭代器模式(IteratorPattern)1.概念介绍迭代器模式(IteratorPattern) 是提供一种方法,顺序访问一个聚合对象中每个元素,并且不暴露该对象内部。这种模式属于行为型模式......
  • 【JS】172-JavaScript设计模式——观察者模式
    九、观察者模式(ObserverPatterns)1.概念介绍观察者模式(ObserverPatterns) 也称订阅/发布(subscriber/publisher)模式,这种模式下,一个对象订阅定一个对象的特定活动,并在状......
  • 【JS】170-JavaScript设计模式——代理模式
    七、代理模式(ProxyPattern)1.概念介绍代理模式(ProxyPattern) 为其他对象提供一种代理,来控制这个对象的访问,代理是在客户端和真实对象之间的介质。简单的理解:如我们需要......
  • videojs播放直播
    index.html引入css和js<linkhref="https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/alt/video-js-cdn.min.css"rel="stylesheet"><scripttype="text/javascrip......
  • 【JS】222-JS 函数的 6 个基本术语
    英文:Martin Novák 译文:reahinkhttps://zhuanlan.zhihu.com/p/61868946让我们谈谈什么是:lambdas(匿名函数)、first-classfunctions(头等函数)、higher-orderfunctions(高阶......
  • 45. JS Ajax请求(简明教程)
    1.前言Ajax全称“AsynchronousJavaScriptandXML”,译为“异步JavaScript和XML”,程序员们习惯称之为“阿贾克斯”,它并不是一种技术,而是多种技术的综合体,其中包括Ja......