成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

javascript中import和export用法總結(jié)

ideaa / 1857人閱讀

摘要：前者用于服務(wù)器，后者用于瀏覽器。某些打包工具可以允許或要求使用擴展名。的形式需要的支持，比如將導出在中的對象或值。如上，也是的內(nèi)容，和是一對。比如如命名導出引入的命名導出等價為，值得注意的是在該模塊中不能直接使用和。

import import 和 require 的區(qū)別

import 和js的發(fā)展歷史息息相關(guān)，歷史上 js沒有模塊(module)體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。這對開發(fā)大型工程非常不方便。
在 ES6 之前，社區(qū)制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用于服務(wù)器，后者用于瀏覽器。ES6 在語言標準的層面上，實現(xiàn)了模塊功能，而且實現(xiàn)得相當簡單，完全可以取代 CommonJS 和 AMD 規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。也就是我們常見的 require 方法。 比如 `let { stat, exists, readFile } = require("fs");
` 。
ES6 在語言標準的層面上，實現(xiàn)了模塊功能。ES6 模塊不是對象，而是通過export命令顯式指定輸出的代碼，再通過import命令輸入。

import 的幾種用法: 
1. import defaultName from "modules.js";
2. import { export } from "modules";
3. import { export as ex1 } from "modules";
4. import { export1, export2 } from "modules.js";
5. import { export1 as ex1, export2 as ex2 } from "moduls.js";
6. import defaultName, { expoprt } from "modules";
7. import * as moduleName from "modules.js";
8. import defaultName， * as moduleName from "modules";
9. import "modules";
import用法解釋

import后面的from指定模塊文件的位置，可以是相對路徑，也可以是絕對路徑，.js后綴可以省略。如果只是模塊名，不帶有路徑，那么必須有配置文件，告訴 JavaScript 引擎該模塊的位置。某些打包工具可以允許或要求使用擴展名。

上面代碼使用的 ==as== 關(guān)鍵字，相當于import 進來的‘值’的別名。

import * from "xx" 將導入整個模塊的內(nèi)容，而 import defaultName 和 import { export1， export2 } 將導入export的某個對象或值

最后一種方式 import "modules" 將運行模塊中的全局代碼，而不導入任何值。

import的形式需要export的支持，比如 import defaultName from "module.js 將導出 在modules.js中export default的對象或值。

export

如上，export也是es6的內(nèi)容，和import是一對。

export的幾種用法 
1.export { name1, name2, …, nameN };
2.export { variable1 as name1, variable2 as name2, …, nameN };
3.export let name1, name2, …, nameN; // also var
4.export let name1 = …, name2 = …, …, nameN; // also var, const
5.export function FunctionName() {...}
6.export class ClassName {...}

7.export default expression;
8.export default function (…) { … } // also class, function*
9.export default function name1(…) { … } // also class, function*
10.export { name1 as default, … };

11.export * from …;
12.export { name1, name2, …, nameN } from …;
13.export { import1 as name1, import2 as name2, …, nameN } from …;
export用法解釋

命名導出

比如：


const ex1 = "xxx";
const fun = function() {...}
export { ex1, fun as demoFun};
export let ex2 = "demo";
export function multiply(x, y) {
  return x * y;
};

對應(yīng)的import 寫法


import { ex1, demoFun, ex2, multiply } from "module.js";

默認導出

export 命名導出需要export 名字和import名字嚴格一致。而export default命令，為模塊指定默認輸出，在import 的時候可以隨意命名名字。一個模塊只能有一個默認輸出，也就是說 export default 一個模塊只能用一次。
用法:

// a.js 輸出一個默認函數(shù)
export default function add(x, y) { return x + y; }
import anyName from "a.js";
// b.js 輸出一個默認變量
let name = "b.js";
export default name;
import anyName from "b.js"
// c.js 輸出一個類
export default class { ...}
import anyClass from "c.js";
// d.js  輸出一個值
export default 1;
import value from "d.js"

export 和 import 混合使用(模塊重定向)

也就是在一個模塊之中，先輸入后輸出同一個模塊。比如:
如:


export { foo, bar } from "my_module";
// 等價為，值得注意的是 在該模塊中不能直接使用 foo 和 bar。
import { foo, bar } from "my_module";
export { foo, bar };

export * from  "./other-module";  // 導出所有方法，但注意此種方法不會到導出module.js中的默認導出變量。
// 導出 默認導出用下面寫法
export {default} from "./other-module";
參考

阮一峰 Module的語法
MDN import 命令
MDN export 語法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97811.html

相關(guān)文章

  • export和import的用法總結(jié)

    摘要：把直接加到聲明前面就可以省略無論怎樣輸出，輸入的時候都需要。其實這種導出方式可以看成是命名導出的變種，只不過把命名寫成了。對應(yīng)輸入的例子參考文章詳解中與的用法和區(qū)別我在 ES6中export一般的用法有兩種 命名導出（Named exports） 默認導出（Default exports） 命名導出（Named exports） 就是每一個需要輸出的數(shù)據(jù)類型都要有一個name，統(tǒng)一...

    EasonTyler 評論0 收藏0

  • javascript中的模塊化

    摘要：所謂的模塊也叫元件或者組件，可以理解為可以服用的功能代碼。如遵循規(guī)范的和遵循規(guī)范的中的模塊化。是在文件中引模塊的。如果引用一個以上的組件，就可以用把這一組組件放在數(shù)組中就可以了，如下，，，二中的模塊化。 所謂的模塊也叫元件或者組件，可以理解為可以服用的功能代碼。比如說a頁面用功能了，b頁面用到了這功能了，所以我們可以把這個功能抽為組件，便于服用。那么javascript中的組件化如何使...

    zzbo 評論0 收藏0

  • 探索 JS 中的模塊化

    摘要：的主要思想是異步模塊，主邏輯在回調(diào)函數(shù)中執(zhí)行，這和瀏覽器前端所習慣的開發(fā)方式不謀而合，應(yīng)運而生。是目前開發(fā)中使用率最高的模塊化標準。 原文鏈接: http://yanjiie.me 偶然的一個周末復(fù)習了一下 JS 的模塊標準，刷新了一下對 JS 模塊化的理解。 從開始 Coding 以來，總會周期性地突發(fā)奇想進行 Code Review。既是對一段時期的代碼進行總結(jié)，也是對那一段時光的...

    SoapEye 評論0 收藏0

  • ES6-class、模塊化在vue中應(yīng)用(10)

    摘要：我們在之前文章與面向?qū)ο缶幊讨?，說到了目前大部分框架和庫，都采用了面向?qū)ο蠓绞骄幊?。那么具體是怎么樣應(yīng)用的呢面向?qū)ο缶幊蹋畹湫秃妥罨A(chǔ)的作用就是封裝，封裝的好處就是代碼的能夠復(fù)用，模塊化，進行項目和文件的組織。模塊化在中的應(yīng)用。 我們在之前文章《ES6 class與面向?qū)ο缶幊獭分?，說到了目前大部分框架和庫，都采用了面向?qū)ο蠓绞骄幊?。那么具體是怎么樣應(yīng)用的呢？面向?qū)ο缶幊?，最典型和?..

    endiat 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<