require,import区别
遵循的模块化规范不一样
模块化规范:即为 JavaScript 提供一种模块编写、模块依赖和模块运行的方案。谁让最初的 JavaScript 是那么的裸奔呢——全局变量就是它的模块化规范。
require/exports 出生在野生规范当中,什么叫做野生规范?即这些规范是 JavaScript 社区中的开发者自己草拟的规则,得到了大家的承认或者广泛的应用。比如 CommonJS、AMD、CMD 等等。import/export 则是名门正派。TC39 制定的新的 ECMAScript 版本,即 ES6(ES2015)中包含进来。
出现的时间不同
require/exports 相关的规范由于野生性质,在 2010 年前后出生。AMD、CMD 相对命比较短,到 2014 年基本上就摇摇欲坠了。一开始大家还比较喜欢在浏览器上采用这种异步小模块的加载方式,但并不是银弹。随着 Node.js 流行和 Browsersify 的兴起,运行时异步加载逐渐被构建时模块合并分块所替代。Wrapper 函数再也不需要了。 2014 年 Webpack 还是新玩意,现在已经是前端必备神器了。
Browsersify、Webpack 一开始的目的就是打包 CommonJS 模块。
CommonJS 作为 Node.js 的规范,一直沿用至今。由于 npm 上 CommonJS 的类库众多,以及 CommonJS 和 ES6 之间的差异,Node.js 无法直接兼容 ES6。所以现阶段 require/exports 任然是必要且实必须的。出自 ES6 的 import/export 相对就晚了许多。被大家所熟知和使用也是 2015 年之后的事了。 这其实要感谢 babel(原来项目名叫做 6to5,后更名为 babel) 这个神一般的项目。由于有了 babel 将还未被宿主环境(各浏览器、Node.js)直接支持的 ES6 Module 编译为 ES5 的 CommonJS —— 也就是 require/exports 这种写法 —— Webpack 插上 babel-loader 这个翅膀才开始高飞,大家也才可以称 " 我在使用 ES6! "
这也就是为什么前面说 require/exports 是必要且必须的。因为事实是,目前你编写的 import/export 最终都是编译为 require/exports 来执行的。
require/exports 和 import/export 形式不一样
require/exports 的用法只有以下三种简单的写法:
const fs = require('fs')
exports.fs = fs
module.exports = fs
而 import/export 的写法就多种多样:
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/exports 和 import/export 本质上的差别
形式上看起来五花八门,但本质上:
- CommonJS 还是 ES6 Module 输出都可以看成是一个具备多个属性或者方法的对象;
- default 是 ES6 Module 所独有的关键字,export default fs 输出默认的接口对象,import fs from 'fs' 可直接导入这个对象;
- ES6 Module 中导入模块的属性或者方法是强绑定的,包括基础类型;而 CommonJS 则是普通的值传递或者引用传递。
1、2 相对比较好理解,3 需要看个例子:
// counter.js
exports.count = 0
setTimeout(function () {
console.log('increase count to', ++exports.count, 'in counter.js after 500ms')
}, 500)
// commonjs.js
const {count} = require('./counter')
setTimeout(function () {
console.log('read count after 1000ms in commonjs is', count)
}, 1000)
//es6.js
import {count} from './counter'
setTimeout(function () {
console.log('read count after 1000ms in es6 is', count)
}, 1000)
分别运行 commonjs.js 和 es6.js:
➜ test node commonjs.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in commonjs is 0
➜ test babel-node es6.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in es6 is 1
require 值拷贝,import 值引用
require,import区别的更多相关文章
- JS 中的require 和 import 区别整理
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...
- require 和 import 区别
我很懵逼啊 都是在引用模块,那到底用哪个? 参考:https://www.cnblogs.com/hwldyz/p/9145959.html 看来会明白一点的 首先这两个都是为了JS模块化编程使用. ...
- php中include()和require()的区别
1.引用文件方式 对 include()来说,在include()执行时文件每次都要进行读取和评估:而对于require()来说,文件只处理一次(实际上,文件内容替换 了require()语句.这就意 ...
- css link和@import区别
1.link语法结构 <link href="CSSurl路径" rel="stylesheet" type="text/css" / ...
- css link和@import区别用法
这里link与@import介绍的是html引入css的语法单词.两者均是引入css到html的单词. 1.link语法结构<link rel="stylesheet" ty ...
- PHP中include和require的区别
include和require的区别,其实两者没有太大的区别,如果要包含的文件不存在,include提示notice,然后继续执行下面的语句,require提示致命错误并且退出. 根据测试,win32 ...
- php引入文件(include 和require的区别)
引入文件: 首先需要一个php文件: <?php class shao//类名必须和文件名相同!!! { public $xxx="666"; } $shili = new ...
- php require include 区别
php提供了两种包含外部文件的方法:include()和require().include()语句是一个常规的php函数:而require() 是一种特殊的语言结构,它的使用受到一些限制.对这两者来说 ...
- include和require的区别误区
面试时总会被问到include和require的区别,回答的时候一般也是有以下几种区别: 1.include引入文件的时候,如果碰到错误,会给出警告,并继续运行下边的代码. require引入文件的时 ...
- php include 和require的区别与转码
php include 和require的区别相同点:include和require 都能把另外一个文件包含到当前文件中. 不同点:使用include时,当包含的文件不存在时,系统会报出警告级别的错 ...
随机推荐
- Cocoa 框架 For iOS(一) 框架的介绍,Objectivie-C运行时能力的解析等 (转载)
http://blog.csdn.net/totogo2010/article/details/8081253 Cocoa框架是iOS应用程序的基础,了解Cocoa框架,对开发iOS应用有很大的帮助. ...
- mysql导入数据时报错
问题 导入数据时有时会因为数据字段大的问题导入失败. mysql根据配置文件会限制server接受的数据包大小. 有时候大的插入和更新会被max_allowed_packet 参数限制掉,导致失败. ...
- ORACLE结构体系篇之表空间详解.md
表空间详解一.系统表空间SYSTEM 表空间是Oracle 数据库最重要的一个表空间,存放了一些DDL 语言产生的信息以及PL/SQL 包.视图.函数.过程等,称之为数据字典,因此该表空间也具有其特殊 ...
- [sql]sql的select字符串切割
可以经常看看 mysql的refman,写的很棒 sql基础操作 查看表结构 show create table desc table show full columns from test1; li ...
- enzyme design 整体流程及感想
想起什么来写什么吧. 整体流程(以Ceas2, TPP, G3P为例): 准备蛋白即配体参数文件: 设置CST文件: 准备protocol和flag文件: 运行enzyme_design: 结果处理. ...
- 游戏服务器之Java热更新
对于运行良好的游戏来说,停服一分就会损失很多收益.因为有些小bug就停服就划不来了.在使用Java开游戏服务器时,JVM给我们提供了一些接口,可以简单做一些热更新.修复一些小Bug而不用重启服务. J ...
- py-faster-rcnn代码
1. 对proposal层NMS的解释,很清晰 注意第18~20行是拿一个数(x1)和array(x1[ [0,2,3] ])去比:
- 键盘录入一个文件夹路径,统计该文件夹(包含子文件夹)中每种类型的文件及个数,注意:用文件类型(后缀名,不包含.(点),如:"java","txt")作为key, 用个数作为value,放入到map集合中,遍历map集合
package cn.it.zuoye5; import java.io.File;import java.util.HashMap;import java.util.Iterator;import ...
- Centosphp安装cassandra扩展
一.准备 当前php版本PHP Version 5.5.10,首先去http://pecl.php.net/package/cassandra,找到对应的php版本 二.下载安装 # wget htt ...
- python学习笔记:装饰器2
python的装饰器本质是函数,为了不改变装饰目标函数内部代码而增加额外功能而存在 一.一般装饰函数实例: import datetime def func_name(func):#定义一个装饰函数, ...