【ES6】import, require,export
node编程中最重要的思想就是模块化,import和require都是被模块化所使用。
遵循规范
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引入宏和类型检验。动态绑定 |
相关资料:https://www.cnblogs.com/sunshq/p/7922182.html
https://www.cnblogs.com/ariel-zhang/p/7127714.html
【ES6】import, require,export的更多相关文章
- 【ES6】改变 JS 内置行为的代理与反射
代理(Proxy)可以拦截并改变 JS 引擎的底层操作,如数据读取.属性定义.函数构造等一系列操作.ES6 通过对这些底层内置对象的代理陷阱和反射函数,让开发者能进一步接近 JS 引擎的能力. 一.代 ...
- vue中添加util公共方法&&ES6之import、export
vue中添加util公共方法&&ES6之import.export https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Re ...
- 【ES6】更易于继承的类语法
和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 ...
- 【ES6】迭代器与可迭代对象
ES6 新的数组方法.集合.for-of 循环.展开运算符(...)甚至异步编程都依赖于迭代器(Iterator )实现.本文会详解 ES6 的迭代器与生成器,并进一步挖掘可迭代对象的内部原理与使用方 ...
- 【ES6】export和important使用区别
export命令 export { name1, name2, …, nameN }; export { variable1 as name1, variable2 as name2, …, name ...
- 【DB2】db2命令Export与Import
环境准备 1.新建表 qinys@Linux:~> db2 "create table tb1(id int,dt timestamp,name varchar(100))" ...
- 【ES6】数组的扩展——扩展运算符
1.扩展运算符[三个点(...)将一个数组转为用逗号分隔的参数序列] 作用:用于函数调用 function add(x, y) { return x + y; } const numbers = [2 ...
- 【ES6】001---module模块------【巷子】
001.前言 什么是模块化开发? 为了提高代码的复用度,开发人员会按照功能把大量的js代码分成若干文件,这样在多个页面就可以使用同一个文件了.,下面是某个网站的js引用情况 怎么会有这么多js文件 ...
- 【React Natvie】React-native-swiper的安装和配置【ES6】
react-native-swiper轮播图,是我们开发中特别常见的效果,首先感谢编写react-native-swiper的大神,让我们方便了很多.这个框架主要是用来做轮播图,焦点图等,内置了各种样 ...
随机推荐
- 课程作业——Python基础之使用turtle库画出红旗
代码如下: import turtle # 设置画笔和背景颜色 turtle.color('yellow') turtle.bgcolor('red') # 通过偏移量和尺寸大小画星星 def dra ...
- vim编辑器头部自动插入注释和shell的高亮显示
1.基本语法 语法高亮 :syntax on/off 显示行号 set number/nonumber 自动缩进 set autoindent set cindent 2.自动加入文件头 在etc/v ...
- 如何用ABP框架快速完成项目(13) - 用ABP遇到难题项目受阻时如何避免项目延迟
只有一个人在开发ABP, 遇到难题时可以: 最根本的, 简化问题, 不要盖楼式结构 前端优先用VSCode看文档, 后端看官网文档. 看ABP源码/issues 到QQ群和微信群里寻求外援. 我建 ...
- windows平台vs2010编译64位libiconv与libxml2
(一)安装libiconv下载路径https://ftp.gnu.org/pub/gnu/libiconv/注意这里选择libiconv-1.11.1版本,因为之后的版本没有Makefile.msvc ...
- Deep Learning - 1 神经网络
Artificial Neuron 人工神经元有: Perceptrons(感知机) Sigmoid Perceptron 感知机input是多个二进制,output是一个二进制. graph LR ...
- svn基本常见操作设置
代码管理工具一开始用的确会有点懵,但是永久了就会发现都是那几下套路,记录下来 托管好了代码一般起冲突了还是想重新搞一下,有个万能的重置操作,那就是重新关联svn项目,以前有时更换地址也是,发现遇到很多 ...
- android:Android开发不得不收藏的Utils
AndroidUtils AndroidUtils Android开发不得不收藏的Utils 之前写这篇文章主要是项目应用到的Utils,发现已经有一个更全面的开源库总结,所以还是非常震惊可以总结的这 ...
- git上传中的排除的配置文件, git实际的操作代码;
git上传中的排除的配置文件: git实际的操作 在主目录建立.gitignore文件并输入以下保存: *.class #package file *.war *.ear #kdiff3 ignore ...
- Mac 电脑如何安装mac os 和win7双系统(win7多分区)
转载:Mac 电脑如何安装mac os 和win7双系统(win7多分区) 本文主要参考了2篇博文,并通过自己的亲身实践总结的.参考的2篇博文地址: http://wenku.baidu.com/li ...
- 2014年11月17~11月18日,杨学明老师《企业IT需求收集和实施》内训在湖南长沙某酒店成功举办!
2014年11月17至18日,受湖南某软件企业的邀请,杨学明老师<企业IT需求收集和实施>内训在某长沙某五星级酒店成功举办!来自全国各地的IT高管和企业负责人参加了此次培训.杨学明老师分别 ...