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.pswp.cn/news/456227.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/456227.shtml
英文地址,請注明出處:http://en.pswp.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文章