快捷導(dǎo)航

Javascript(es2016) import和require用法和區(qū)別詳解

更新時(shí)間：2017年08月11日 16:55:19 作者：自我還是本我

本篇文章主要介紹了Javascript(es2016) import和require用法和區(qū)別詳解，具有一定的參考價(jià)值，有興趣的可以了解下

本文介紹了Javascript(es2016) import和require用法和區(qū)別詳解，分享給大家，具體如下：

寫(xiě)個(gè)簡(jiǎn)單js文件，假設(shè)名字為：lib.js 。假設(shè)內(nèi)容如下：

export const sqrt = Math.sqrt;
export function square(x) {
 return x * x;
}
export function diag(x, y) {
 return sqrt(square(x) + square(y));
}

這樣就可以在其他地方對(duì)lib中定義的屬性和方法進(jìn)行引用，引用方法有兩種，也就時(shí)import和require。

//方法一
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3));
//方法兒
import * as lib from 'lib';
square = lib.square;

還可以設(shè)置默認(rèn)的導(dǎo)出信息，就需要崽lib.js中定義 export default {}。default后面可以接一個(gè)參數(shù)，也可以接一個(gè)數(shù)組。書(shū)寫(xiě)方法為：

 //------ module1.js ------
export default 123;

//------ module2.js ------
const D = 123;
export { D as default };

通常比較習(xí)慣用第一種。然后用import就可以得到這個(gè)數(shù)組或則參數(shù)。但是import只能用于靜態(tài)導(dǎo)入，就是必須在文件開(kāi)始的時(shí)候，在最上層就寫(xiě)好。而require就可以實(shí)現(xiàn)動(dòng)態(tài)加載。

加載方式	規(guī)范	命令	特點(diǎn)
運(yùn)行時(shí)加載	CommonJS/AMD	require	社區(qū)方案，提供了服務(wù)器/瀏覽器的模塊加載方案。非語(yǔ)言層面的標(biāo)準(zhǔn)。只能在運(yùn)行時(shí)確定模塊的依賴(lài)關(guān)系及輸入/輸出的變量，無(wú)法進(jìn)行靜態(tài)優(yōu)化。
編譯時(shí)加載	ESMAScript6+	import	語(yǔ)言規(guī)格層面支持模塊功能。支持編譯時(shí)靜態(tài)分析，便于JS引入宏和類(lèi)型檢驗(yàn)。動(dòng)態(tài)綁定。

const incrementCounter = function ({dispatch,state}){
 dispatch(‘INCREMENT‘)
}
export default {
 incrementCounter
}
//require
let myAction = require(‘xxxxx‘);
myAction.default.incrementCounter()

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

百度Popup.js彈出框進(jìn)化版拖拽小框架發(fā)布兼容IE6/7/8,Firefox,Chrome
百度空間的彈出窗口和拖拽效果(也就是popup.js),代碼精簡(jiǎn)，效果也很好，我們可以在很多大型網(wǎng)站上見(jiàn)到這種效果，在我的項(xiàng)目中也使用了該js。
2010-04-04
JavaScript數(shù)組復(fù)制詳解
對(duì)于javascript來(lái)說(shuō)，數(shù)組是一種引用類(lèi)型，如果只是一維數(shù)組的話，復(fù)制還較為容易，如果是多維數(shù)組呢？如何實(shí)現(xiàn)多維數(shù)組的深度復(fù)制？
2017-02-02
JS圖片切換的具體方法(帶縮略圖版)
這篇文章介紹了JS圖片切換的具體方法，有需要的朋友可以參考一下
2013-11-11
js實(shí)現(xiàn)全選和全不選
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)全選和全不選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-07-07
ionic js 復(fù)選框與普通的 HTML 復(fù)選框到底有沒(méi)區(qū)別
本文通過(guò)實(shí)例給大家演示ionic js 復(fù)選框與普通的 HTML 復(fù)選框到底有沒(méi)區(qū)別的相關(guān)知識(shí)，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06
原生js實(shí)現(xiàn)秒表計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)秒表計(jì)時(shí)器功能，可以開(kāi)始、暫停、清除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
js瀏覽器本地存儲(chǔ)store.js介紹及應(yīng)用
store.js 是一個(gè)兼容所有瀏覽器的 LocalStorage 包裝器，不需要借助 Cookie 或者 Flash。store.js 即可實(shí)現(xiàn)本地存儲(chǔ)功能
2014-05-05
一篇文章搞定echarts地圖輪播高亮
ECharts是一個(gè)使用 JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù),涵蓋各行業(yè)圖表,滿足各種需求,下面這篇文章主要給大家介紹了關(guān)于echarts地圖輪播高亮的相關(guān)資料,需要的朋友可以參考下
2021-08-08
document.createElement()用法及注意事項(xiàng)(ff下不兼容)
今天處理了一個(gè)日期選擇器的ie和ff的兼容問(wèn)題，本來(lái)這種情況就很難找錯(cuò)誤，找了好久才把錯(cuò)誤定位到j(luò)s中創(chuàng)建元素的方法document.createElement()，這個(gè)方法在ie下支持這樣創(chuàng)建元素
2013-03-03
小程序getLocation需要在app.json中聲明permission字段
這篇文章主要介紹了小程序getLocation需要在app.json中聲明permission字段，個(gè)別需要獲取用戶地理位置的在開(kāi)發(fā)者工具調(diào)試時(shí)會(huì)出現(xiàn)getLocation需要在app.json中聲明permission字段，下面我們就一起來(lái)解決一下
2019-04-04