JS 中的require 和 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'
- 通过require引入基础数据类型时,属于复制该变量。
- 通过require引入复杂数据类型时,数据浅拷贝该对象。
- 出现模块之间的循环引用时,会输出已经执行的模块,而未执行的模块不输出(比较复杂)
- CommonJS模块默认export的是一个对象,即使导出的是基础数据类型
加载方式 | 规范 | 命令 | 特点 |
---|---|---|---|
运行时加载 | CommonJS/AMD | require | 社区方案,提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。 |
编译时加载 | ESMAScript6+ | import | 语言规格层面支持模块功能。支持编译时静态分析,便于JS引入宏和类型检验。动态绑定 |
JS 中的require 和 import 区别的更多相关文章
- JS 中的require 和 import 区别整理
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...
- 转:彻底搞清楚javascript中的require、import和export
原文地址:彻底搞清楚javascript中的require.import和export 为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Ja ...
- JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别
JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的 ...
- (网页)Angular.js 中 copy 赋值与 = 赋值 区别
转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...
- js中的substr和substring区别
js中的substr和substring区别 Substring: 该方法可以有一个参数也可以有两个参数. (1) 一个参数: 示例: var str=“Olive”: str.substring( ...
- 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂
浅谈JS中的!=.== .!==.===的用法和区别 var num = 1; var str = '1'; var test = 1; test == num //tr ...
- js中的require、define、export、import【转】
原文链接:https://www.cnblogs.com/libin-1/p/7127481.html 为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. ...
- 彻底搞清楚javascript中的require、import和export(js模块加载规范的前世今生)
为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,在es6以前,它是不支持”类”(class),所以也 ...
- webpack中关于require与import的区别
1.require常见使用场景: var path = require('path') var utils = require('./utils') 此时webpack会将path/utils/con ...
随机推荐
- __init__函数
初始化函数,类似于c++的构造函数 在创建一个对象时默认被调用,不需要手动调用.self后面接的形参,在类实例化的时候必须传递,__init__函数里的参数都属于成员变量
- 树莓派学习笔记(3):利用VNC远程控制树莓派
转载请注明:@小五义http://www.cnblogs.com/xiaowuyi 等了一个十一假期,新买的B+终于到了.按照前两节的方法,重新安装了操作系统. 一.添加国内软件源 Rasp ...
- MapReduce -- 最短路径
示例: 给出各个节点到相邻节点的距离,要求算出初始节点到各个节点的最短路径. 数据: A (B,) (D,) B (C,) (D,) C (E,) D (B,) (C,) (E,) E (A,) (C ...
- 20155338《网络对抗》Web安全基础实践
20155338<网络对抗>Web安全基础实践 实验过程 WebGoat 在终端中输入 java -jar webgoat-container-7.0.1-war-exec.jar 开启W ...
- Nuget包CommonServiceLocator从1.0.3升级到2.0.4时MvvmLight的ViewModelLocator初始化SimpleIoc.Default格式不匹配问题
原文:Nuget包CommonServiceLocator从1.0.3升级到2.0.4时MvvmLight的ViewModelLocator初始化SimpleIoc.Default格式不匹配问题 把旧 ...
- POJ3267
从今天开始POJ里的一部分类型的题目就一般不放在一起写了 一个是太丑,格式麻烦,第二个是以后的题目难度都有所增大,因此一道题可能就要写蛮长 尤其是DP这一块,以前一直没好好学习,现在从基础的先开始吧 ...
- EZ 2018 04 01 ZJOI2018模拟赛04.01
现在开始填以前的坑 这次老叶强制我们打一下这次省选题,然后我已经做好了掉Rating到死的准备 然后考完--莫名涨了 Orz 题目链接 由于很多东西我都不会,所以详细请看:dalao的题解 T1 我T ...
- Asp.Net_Mvc3.5语法_<%%>的用法
一. <%%>这种格式实际上就是和asp的用法一样的,只是asp中里面是vbscript或 者javascript代码,而在asp.net中用的是.net平台下支持的语言.特别 注意:服务 ...
- nginx 跳转
nginx 跳转 一.需求:当需要在别的机访问本机房的服务器问题. 虚拟主机头配置 server { listen ; server_name test.zlx.com; location / { i ...
- CentOS 6.8 安装Tomcat7
一.下载Tomcat到服务器上 将Tomcat包下载到devleoper(没有此目录创建一个)目录下: 二.解压安装包 下载好之后,直接解压,使用命令: .tar.gz # 是否使用sudo权限执行根 ...