最新文章:

您的位置: 富录-前端开发|web技术博客 > JavaScript > JS 中的require 和 import 的区别

JS 中的require 和 import 的区别

发布时间:2019年08月08日 评论数:抢沙发阅读数: 5739

    这两个都是为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'

    通过require引入基础数据类型时,属于复制该变量。

    通过require引入复杂数据类型时,数据浅拷贝该对象。

    出现模块之间的循环引用时,会输出已经执行的模块,而未执行的模块不输出(比较复杂)

    CommonJS模块默认export的是一个对象,即使导出的是基础数据类型


    加载方式 规范 命令 特点
    运行时加载 CommonJS/AMD require 社区方案,提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。
    编译时加载 ESMAScript6+ import 语言规格层面支持模块功能。支持编译时静态分析,便于JS引入宏和类型检验。动态绑定


二维码加载中...
本文作者:DGF      文章标题: JS 中的require 和 import 的区别
本文地址: http://arbays.com/post-130.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论