国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

ideaa / 1848人閱讀

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

import import 和 require 的區(qū)別

import 和js的發(fā)展歷史息息相關(guān)，歷史上 js沒(méi)有模塊(module)體系，無(wú)法將一個(gè)大程序拆分成互相依賴的小文件，再用簡(jiǎn)單的方法拼裝起來(lái)。這對(duì)開(kāi)發(fā)大型工程非常不方便。
在 ES6 之前，社區(qū)制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用于服務(wù)器，后者用于瀏覽器。ES6 在語(yǔ)言標(biāo)準(zhǔn)的層面上，實(shí)現(xiàn)了模塊功能，而且實(shí)現(xiàn)得相當(dāng)簡(jiǎn)單，完全可以取代 CommonJS 和 AMD 規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。也就是我們常見(jiàn)的 require 方法。 比如 `let { stat, exists, readFile } = require("fs");
` 。
ES6 在語(yǔ)言標(biāo)準(zhǔn)的層面上，實(shí)現(xiàn)了模塊功能。ES6 模塊不是對(duì)象，而是通過(guò)export命令顯式指定輸出的代碼，再通過(guò)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指定模塊文件的位置，可以是相對(duì)路徑，也可以是絕對(duì)路徑，.js后綴可以省略。如果只是模塊名，不帶有路徑，那么必須有配置文件，告訴 JavaScript 引擎該模塊的位置。某些打包工具可以允許或要求使用擴(kuò)展名。

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

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

最后一種方式 import "modules" 將運(yùn)行模塊中的全局代碼，而不導(dǎo)入任何值。

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

export

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

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用法解釋

命名導(dǎo)出

比如：


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

對(duì)應(yīng)的import 寫(xiě)法


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

默認(rèn)導(dǎo)出

export 命名導(dǎo)出需要export 名字和import名字嚴(yán)格一致。而export default命令，為模塊指定默認(rèn)輸出，在import 的時(shí)候可以隨意命名名字。一個(gè)模塊只能有一個(gè)默認(rèn)輸出，也就是說(shuō) export default 一個(gè)模塊只能用一次。
用法:

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

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

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


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

export * from  "./other-module";  // 導(dǎo)出所有方法，但注意此種方法不會(huì)到導(dǎo)出module.js中的默認(rèn)導(dǎo)出變量。
// 導(dǎo)出 默認(rèn)導(dǎo)出用下面寫(xiě)法
export {default} from "./other-module";
參考

阮一峰 Module的語(yǔ)法
MDN import 命令
MDN export 語(yǔ)法

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/97811.html

相關(guān)文章

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

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

    EasonTyler 評(píng)論0 收藏0

  • javascript中的模塊化

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

    zzbo 評(píng)論0 收藏0

  • 探索 JS 中的模塊化

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

    SoapEye 評(píng)論0 收藏0

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

    摘要：我們?cè)谥拔恼屡c面向?qū)ο缶幊讨校f(shuō)到了目前大部分框架和庫(kù)，都采用了面向?qū)ο蠓绞骄幊獭Ｄ敲淳唧w是怎么樣應(yīng)用的呢面向?qū)ο缶幊蹋畹湫秃妥罨A(chǔ)的作用就是封裝，封裝的好處就是代碼的能夠復(fù)用，模塊化，進(jìn)行項(xiàng)目和文件的組織。模塊化在中的應(yīng)用。 我們?cè)谥拔恼隆禘S6 class與面向?qū)ο缶幊獭分校f(shuō)到了目前大部分框架和庫(kù)，都采用了面向?qū)ο蠓绞骄幊獭Ｄ敲淳唧w是怎么樣應(yīng)用的呢？面向?qū)ο缶幊蹋畹湫秃妥?..

    endiat 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<