NodeJS中的require和import

ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。

不把require和import整清楚,会在未来的标准编程中死的很难看。

require时代的模块

node编程中最重要的思想之一就是模块,而正是这个思想,让JavaScript的大规模工程成为可能。模块化编程在js界流行,也是基于此,随后在浏览器端,requirejs和seajs之类的工具包也出现了,可以说在对应规范下,require统治了ES6之前的所有模块化编程,即使现在,在ES6 module被完全实现之前,还是这样。

node的module遵循CommonJS规范,requirejs遵循AMD,seajs遵循CMD,虽各有不同,但总之还是希望保持较为统一的代码风格。

// a.js// -------- node -----------
module.exports = {a : function() {}, b : 'xxx' }; // ----------- AMD or CMD ---------------- define(function(require, exports, module){ module.exports = { a : function() {}, b : 'xxx' }; });

可以看出,为了保持风格的高度统一,除了在浏览器端的模块中要使用一个define函数来提供模块的闭包以外,其他代码可以完全一致。

// b.js// ------------ node ---------
var m = require('./a');
m.a();// ------------ AMD or CMD ------------- define(function(require, exports, module){ var m = require('./a'); m.a(); });

在使用上,也非常相似。虽然AMD or CMD提供了更加丰富的风格,但是我们本文主要是讨论node环境下,所以不做扩展。

ES6中的module

ES6发布的module并没有直接采用CommonJS,甚至连require都没有采用,也就是说require仍然只是node的一个私有的全局方法,module.exports也只是node私有的一个全局变量属性,跟标准半毛钱关系都没有。

export导出模块接口

export的用法挺复杂的,具体有哪些可以看 这里 。这里举几个例子:

// a.js
export default function() {} export function a () {} var b = 'xxx'; export {b}; // 这是ES6的写法,实际上就是{b:b} setTimeout(() => b = 'ooo', 1000); export var c = 100;

在要导出的接口前面,加入export指令。

在export之后,b还可以被修改,这和CommonJS有着巨大不同,关于内部机理的东西,本文就无耻的省略了。

注意,下面的语法有严重错误:

// 错误演示
export 1; // 绝对不可以
var a = 100; export a;

export在导出接口的时候,必须与模块内部的变量具有一一对应的关系。直接导出1没有任何意义,也不可能在import的时候有一个变量与之对应。 export a 虽然看上去成立,但是 a 的值是一个数字,根本无法完成解构,因此必须写成 export {a} 的形式。即使a被赋值为一个function,也是不允许的。而且,大部分风格都建议,模块中最好在末尾用一个export导出所有的接口,例如:

export {fun as default,a,b,c};

import导入模块

import的语法跟require不同,而且import必须放在文件的最开始,且前面不允许有其他逻辑代码,这和其他所有编程语言风格一致。

import的使用和export一样,也挺复杂,可以在 这里 大致了解。举几个例子:

import $ from 'jquery';
import * as _ from '_'; import {a,b,c} from './a'; import {default as alias, a as a_a, b, c} from './a';

这里有一些坑,暂时不透露,下面会讲到。

import后面跟上花括号的形式是最基本的用法,花括号里面的变量与export后面的变量一一对应。这里,你必须了解 对象的解构赋值 的知识,没这知识,你根本没法在这里装逼。了解了解构赋值,这里的“一一对应”的关系就能具体理解了。

as关键字

编程的同学对as都容易理解,简单的说就是取一个别名。export中可以用,import中其实可以用:

// a.js
var a = function() {};
export {a as fun};// b.js import {fun as a} from './a'; a();

上面这段代码,export的时候,对外提供的接口是fun,它是a.js内部a这个函数的别名,但是在模块外面,认不到a,只能认到fun。

import中的as就很简单,就是你在使用模块里面的方法的时候,给这个方法取一个别名,好在当前的文件里面使用。之所以是这样,是因为有的时候不同的两个模块可能通过相同的接口,比如有一个c.js也通过了fun这个接口:

// c.js
export function fun() {};

如果在b.js中同时使用a和c这两个模块,就必须想办法解决接口重名的问题,as就解决了。

default关键字

其他人写教程什么的,都把default放到export那个部分,我觉得不利于理解。在export的时候,可能会用到default,说白了,它其实是别名的语法糖:

// d.js
export default function() {} // 等效于: function a() {}; export {a as default};

在import的时候,可以这样用:

import a from './d';// 等效于,或者说就是下面这种写法的简写,是同一个意思
import {default as a} from './d';

这个语法糖的好处就是import的时候,可以省去花括号{}。简单的说,如果import的时候,你发现某个变量没有花括号括起来(没有*号),那么你在脑海中应该把它还原成有花括号的as语法。

所以,下面这种写法你也应该理解了吧:

import $,{each,map} from 'jquery';

import后面第一个 $ 是 {defalut as $} 的替代写法。

*符号

*就是代表所有,只用在import中,我们看下两个例子:

import * as _ from '_';

在意义上和 import _ from '_'; 是不同的,虽然实际上后面的使用方法是一样的。它表示的是把 '_' 模块中的所有接口挂载到 _ 这个对象上,所以可以用 _.each调用某个接口。

另外还可以通过*号直接继承某一个模块的接口:

export * from '_';// 等效于:
import * as all from '_'; export all;

*符号尽可能少用,它实际上是使用所有export的接口,但是很有可能你的当前模块并不会用到所有接口,可能仅仅是一个,所以最好的建议是使用花括号,用一个加一个。

该用require还是import?

require的使用非常简单,它相当于module.exports的传送门,module.exports后面的内容是什么,require的结果就是什么,对象、数字、字符串、函数……再把require的结果赋值给某个变量,相当于把require和module.exports进行平行空间的位置重叠。

而且require理论上可以运用在代码的任何地方,甚至不需要赋值给某个变量之后再使用,比如:

require('./a')(); // a模块是一个函数,立即执行a模块函数
var data = require('./a').data; // a模块导出的是一个对象 var a = require('./a')[0]; // a模块导出的是一个数组

你在使用时,完全可以忽略模块化这个概念来使用require,仅仅把它当做一个node内置的全局函数,它的参数甚至可以是表达式:

require(process.cwd() + '/a');

但是import则不同,它是编译时的(require是运行时的),它必须放在文件开头,而且使用格式也是确定的,不容置疑。它不会将整个模块运行后赋值给某个变量,而是只选择import的接口进行编译,这样在性能上比require好很多。

从理解上,require是赋值过程,import是解构过程,当然,require也可以将结果解构赋值给一组变量,但是import在遇到default时,和require则完全不同: var $ = require('jquery'); 和 import $ from 'jquery' 是完全不同的两种概念。

上面完全没有回答“改用require还是import?”这个问题,因为这个问题就目前而言,根本没法回答,因为目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require。这也是为什么在模块导出时使用module.exports,在引入模块时使用import仍然起效,因为本质上,import会被转码为require去执行。

但是,我们要知道这样一个道理,ES7很快也会发布,js引擎们会尽快实现ES6标准的规定,如果一个引擎连标准都实现不了,就会被淘汰, ES6是迟早的事 。如果你现在仍然在代码中部署require,那么等到ES6被引擎支持时,你必须升级你的代码,而如果现在开始部署import,那么未来可能只需要做很少的改动。

转载于:https://www.cnblogs.com/guanghe/p/6560698.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/456227.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【selenium】selenium和requests登陆的区别

requests登陆 import requests import time t int(time.time()*1000) # 创建一个会话 s requests.Session() post_url http://account.chinaunix.net/login/login data {username: xxxxxxxxx,password: xxxxxxxxx,_token: nmSXhgHib8dTIC9DrATSkTzBBo4zz9eqDEPeG5i1,_t: t…

【spider】多线程爬虫

多线程工作原理 多线程示意图 Queue(队列对象) queue是python中的标准库,可以直接from queue import Queue引用;队列是线程间最常用的交换数据的形式 python下多线程的思考 对于资源,加锁是个重要的环节。Queue,是线…

css设置文字上下居中,一行文字居中,两行或多行文字同样居中。

HTML: <div class"book-detail-store-item align-center-vertical">居中文字</div> CSS: .book-detail-store-item {width: 50px&#xff1b;height&#xff1a;50px&#xff1b;line-height: 25px;font-size: 12px;}/*flex垂直居中对齐*/ .align-center…

MySQL/sqlserver查询in操作 查询结果按in集合顺序显示

2019独角兽企业重金招聘Python工程师标准>>> MySQL/sqlserver查询in操作 查询结果按in集合顺序显示 MySQL用下面的语句 select * from ibs6_terminal_adv_inf where id in (16,14,15) order by field(id,16,14,15) select * from ibs6_terminal_adv_inf where id in…

【机器学习】opencv-人脸识别

一 . opencv是什么及其作用&#xff1f; OpenCV是一个基于BSD许可&#xff08;开源&#xff09;发行的跨平台计算机视觉库&#xff0c;可以运行在Linux、Windows、Android和Mac OS操作系统上。它轻量级而且高效——由一系列 C 函数和少量 C 类构成&#xff0c;同时提供了Python…

关于java中的集合如何删除一个元素。

我们有三种方法可以删除集合中的元素&#xff0c;下面介绍两种方法&#xff0c; 一种是传统的for循环&#xff0c;另一种是使用Iterator迭代器(推荐使用)&#xff0c;简单的介绍如下&#xff1a; for循环删除元素: public class ForRemove<T>{ public void forDelete(…

她说程序员不懂浪漫,生日宴上惨变单身狗,其实,程序员的浪漫你不懂!

css蛋糕谁说程序员不懂得浪漫&#xff0c;只是程序员的浪漫你不懂&#xff01;PS&#xff1a;人家都不懂&#xff0c;你再浪漫有啥用&#xff0c;最后还不是单身狗&#xff1f;说实在的&#xff0c;以前也分享过一个程序员用纯CSS画的一个MAC&#xff0c;代码就三千多行&#x…

H.264 picture parameter sets成员值含义学习笔记

-picture parameter sets1. pic_parameter_set_idpic_parameter_set_id指明了在切片头中对应的某个psp.pic_parameter_set_id的值应该在0到255,包括0和2552. seq_parameter_set_idset_parameter_set_id表示激活的sps.seq_parameter_set_id应该取值在0到31之间,包括边界值.3. en…

【机器学习】opencv-数据预处理

想要将收集好的数据s进行统一命名 数量整理 就需要提前进行预处理 import numpy as npimport osimport randomimport cv2 # wuao文件名修改&#xff0c;1~10文件名 filename os.listdir(./faces/wuao/) for i,name in enumerate(filename):os.rename(./faces/wuao/%s%(name)…

WIN7如何替换开机登录画面

1 把你的图片保存为backgroundDefault.jpg,并确保和你的屏幕分辨率相同 2 把下面的代码另存为开启自定义登录界面.reg&#xff08;注意格式为ASCII格式&#xff09; Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\A…

Resharper 安装以及破解

首先进行软件安装 安装后 解压下载好的 文件 会得到如下&#xff1a; 打开序列号 会看到 然后 复制 %LocalAppData%\\JetBrains 路径 会得到进入当前JetBrains 文件夹 然后搜索 JetBrains.Platform.Shell.dll 会得到这个文件 点击属性 查看到后半段的地址 \AppData\Local\JetB…

【机器学习】图片中的人脸识别

通过opencv三方库进行图片人脸识别 face_zones中的参数可以自行调试,这三个data都可以用于人脸识别 haarcascade_frontalface_default.xmlhaarcascade_frontalface_alt.xmlhaarcascade_frontalface_alt2.xml import numpy as npimport cv2img cv2.imread(./2ren.jpg) img.s…

Android Fragment

Fragment在3.0后增加&#xff1a;android.app.Fragment。在v4的兼容包里也有。 一般为了兼容性还是可能会用&#xff1a;android.support.v4.app.Fragment 生命周期&#xff1a; onAttach,onCreate,onCreateView,onActivityCreated,onStart,onResume, onPause,onStop,onDestroy…

1020. 月饼 (25)

1020. 月饼 (25) 月饼是中国人在中秋佳节时吃的一种传统食品&#xff0c;不同地区有许多不同风味的月饼。现给定所有种类月饼的库存量、总售价、以及市场的最大需求量&#xff0c;请你计算可以获得的最大收益是多少。 注意&#xff1a;销售时允许取出一部分库存。样例给出的情形…

【机器学习】opencv-视频中的人脸检测

本次在图片识别的程度上增添了视频识别 原理就是在图片的基础上进行操作 每毫秒进行下一帧的人脸解析识别&#xff0c;时间可自行设置 import numpy as np import cv2win cv2.namedWindow(dzd,cv2.WINDOW_NORMAL) cv2.resizeWindow(dzd,640,200) rose cv2.imread(./rose.jp…

scan8[16+2*4]的内容

scan8确实不好理解&#xff0c;解答如下&#xff1a; static const int x264_scan8[162*4] { /* Luma */ 41*8, 51*8, 42*8, 52*8, 61*8, 71*8, 62*8, 72*8, 43*8, 53*8, 44*8, 54*8, 63*8, 73*8, 64*8, 74*8, /* Cb */ 11*8, 21*8, 12*8, 22*8, /…

React 产品实现 -任务管理工具“氢”

原文地址&#xff1a;https://zhuanlan.zhihu.com/p/...&#xff0c;欢迎转载 &#xff1a;-&#xff09;? 关于 其实对于这个专栏的订阅用户感到非常抱歉&#xff0c;已经停更很久了&#xff0c;也没啥特别的理由就是懒 orz&#xff01;不对&#xff0c;画风不能这样开头&…

通过curl获取网页访问时间

curl -w %{time_namelookup}:%{time_connect}:%{time_starttransfer}:%{time_total}:%{speed_download}"\n" "https://www.google.com" 转载于:https://www.cnblogs.com/fanxuanhui-linux/p/6581292.html

【numpy】20道numpy题目

1、创建一个长度为10的一维全为0的ndarray对象&#xff0c;然后让第5个元素等于1 import numpy as npndarry np.zeros(10) ndarryarray([0., 0., 0., 0., 0., 0., 0., 0., 0., 0.])ndarry[4]1 ndarryarray([0., 0., 0., 0., 1., 0., 0., 0., 0., 0.])2、创建一个元素为从10到4…

ffmpeg_intra_pred_mode问题.pdf

ffmpeg_intra_pred_mode问题.pdf文章