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

資訊專欄INFORMATION COLUMN

JS module的導(dǎo)出和導(dǎo)入

muzhuyu / 2171人閱讀

摘要：默認導(dǎo)出默認導(dǎo)出也被稱做定義式導(dǎo)出。導(dǎo)出一個函數(shù)導(dǎo)出一個類默認導(dǎo)出可以理解為另一種形式的命名導(dǎo)出，默認導(dǎo)出可以認為是使用了名稱的命名導(dǎo)出。同樣的，在導(dǎo)入時可以使用指令導(dǎo)入這些默認值。

最近看了些Vue框架寫的程序，發(fā)現(xiàn)自己的前端知識還停留在幾年以前，發(fā)現(xiàn)現(xiàn)在Javascript程序里有各種各樣的對module的導(dǎo)入和到處，導(dǎo)入乍一看跟python的語法挺像的無非就是把from和import這兩個關(guān)鍵詞的使用顛倒了一下順序。仔細看下來還是和python挺不一樣的import模塊的前提是模塊有導(dǎo)出，并且還分默認導(dǎo)出和命名導(dǎo)出，有些麻煩。所以今天這篇文章就把所有的export形式和相應(yīng)的import使用匯總一下。

ES6在語言標準的層面上，實現(xiàn)了模塊功能，成為瀏覽器和服務(wù)器通用的模塊解決方案，完全可以取代 CommonJS 和 AMD 規(guī)范，基本特點如下：

每一個模塊只加載一次， 每一個JS只執(zhí)行一次， 如果下次再去加載同目錄下同文件，直接從內(nèi)存中讀??；

每一個模塊內(nèi)聲明的變量都是局部變量， 不會污染全局作用域；

模塊內(nèi)部的變量或者函數(shù)可以通過export導(dǎo)出；

一個模塊可以導(dǎo)入別的模塊

2.模塊功能主要由兩個命令構(gòu)成：export和import。export命令用于規(guī)定模塊的對外接口，import命令用于輸入其他模塊提供的功能；

3.一個模塊就是一個獨立的文件，該文件內(nèi)部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個變量，就必須使用export關(guān)鍵字輸出該變量；

var year = "2018";
var month = "Febuary";
export {year, month};
export 導(dǎo)出模塊

export語法聲明用于導(dǎo)出函數(shù)、對象、指定文件（或模塊）的原始值。 有兩種模塊導(dǎo)出方式：命名式導(dǎo)出（名稱導(dǎo)出）和默認導(dǎo)出（定義式導(dǎo)出），命名式導(dǎo)出每個模塊可以有多個，而默認導(dǎo)出每個模塊僅一個 。

命名式導(dǎo)出

模塊可以通過export前綴關(guān)鍵詞聲明導(dǎo)出對象，導(dǎo)出對象可以是多個。這些導(dǎo)出對象用名稱進行區(qū)分，稱之為命名式導(dǎo)出

export { func }; // 導(dǎo)出一個已定義的函數(shù)func
export const foo = Math.sqrt(100); // 導(dǎo)出一個常量

我們可以使用*和from關(guān)鍵字來實現(xiàn)的模塊的繼承：

export * from "base_module";

模塊導(dǎo)出時，可以指定模塊的導(dǎo)出成員。導(dǎo)出成員可以認為是類中的公有成員，而非導(dǎo)出成員可以認為是類中的私有成員：

var name = "Kevin的居酒屋";
var domain = "http://coffee.toast.com";
 
export {name, domain}; // 相當(dāng)于導(dǎo)出{name:name,domain:domain}

模塊導(dǎo)出時，我們可以使用as關(guān)鍵字對導(dǎo)出成員進行重命名，上面的導(dǎo)出可以這樣寫：

export {name as siteName, domain}

注意一下語法錯誤:

export 1; 
var a = 100;
export a;

export在導(dǎo)出接口的時候，必須與模塊內(nèi)部的變量具有一一對應(yīng)的關(guān)系。直接導(dǎo)出1沒有任何意義，也不可能在import的時候有一個變量與之對應(yīng)export a雖然看上去成立，但是a的值是一個數(shù)字，根本無法完成解構(gòu)，因此必須寫成export {a}的形式。即使a被賦值為一個函數(shù)，也是不建議使用上面的形式導(dǎo)出的因為大部分風(fēng)格都建議，模塊中最好在末尾用一個export導(dǎo)出所有的接口，就像上面那些例子一樣。

默認導(dǎo)出

默認導(dǎo)出也被稱做定義式導(dǎo)出。命名式導(dǎo)出可以導(dǎo)出多個值，但在import引用時，也要使用相同的名稱來引用相應(yīng)的值。默認導(dǎo)出只有導(dǎo)出一個單一值，這個輸出可以是一個函數(shù)、類或其它類型的值，這樣在模塊import導(dǎo)入時也會更 容易引用。

export default function() {}; // 導(dǎo)出一個函數(shù)
export default class(){}; // 導(dǎo)出一個類

默認導(dǎo)出可以理解為另一種形式的命名導(dǎo)出，默認導(dǎo)出可以認為是使用了default名稱的命名導(dǎo)出。

下面兩種導(dǎo)出方式是等價的：

const D = 123; 
export default D;
export { D as default };

使用名稱導(dǎo)出一個模塊時：

// "my-module.js" 模塊
function cube(x) {
    return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };

在另一個模塊（js文件）中，我們可以像下面這樣引用：

import { cube, foo } from "my-module";
console.log(cube(3));
console.log(foo);

使用默認導(dǎo)出一個模塊時：

// "my-module.js"模塊
export default function (x) {
return x * x * x;
}

在另一個模塊中，我們可以像下面這樣引用，相對名稱導(dǎo)出來說使用更為簡單：

import cube from "my-module";
console.log(cube(3)); // 27
import導(dǎo)入模塊

import語法聲明用于從已導(dǎo)出的模塊、腳本中導(dǎo)入函數(shù)、對象、指定文件（或模塊）的原始值。import模塊導(dǎo)入與export模塊導(dǎo)出功能相對應(yīng)，也存在兩種模塊導(dǎo)入方式：命名式導(dǎo)入（名稱導(dǎo)入）和默認導(dǎo)入（定義式導(dǎo)入）。

注意事項： import必須放在文件的最開始，且前面不允許有其他邏輯代碼，這和其他所有編程語言的導(dǎo)入風(fēng)格一致。

命名導(dǎo)入

我們可以通過指定名稱將導(dǎo)入成員插入到當(dāng)作用域中?？梢詫?dǎo)入單個成員或多個成員：

注意，花括號里面的變量與export后面的變量一一對應(yīng)

import {myMember} from "my-module";
import {foo, bar} from "my-module";

通過*符號，我們可以導(dǎo)入模塊中的全部屬性和方法。當(dāng)導(dǎo)入模塊全部導(dǎo)出內(nèi)容時，就是將導(dǎo)出模塊（’my-module.js’）所有的導(dǎo)出綁定內(nèi)容，插入到當(dāng)前模塊（’myModule’）的作用域中：

import * as myModule from "my-module";
默認導(dǎo)入

在模塊導(dǎo)出時，可能會存在默認導(dǎo)出。同樣的，在導(dǎo)入時可以使用import指令導(dǎo)入這些默認值。直接導(dǎo)入默認值：

import defaultName from "my-module";
import myDefault, {foo, bar} from "my-module"; // 指定成員導(dǎo)入和默認導(dǎo)入
default關(guān)鍵字 
// my-module.js
export default function() {}
 
// 等效于：
function func() {};
export {func as default};

在import的時候，可以這樣用：

import a from "./my-module";
 
// 等效于，或者說就是下面這種寫法的簡寫
import {default as a} from "./my-module";

這個語法糖的好處就是import的時候，可以省去{}。

簡單的說，如果import的時候，你發(fā)現(xiàn)某個變量沒有花括號括起來（沒有*號），那么你在腦海中應(yīng)該把它還原成有花括號的{default as ...}語法，所以import $,{each,map}?from?"jquery";import后面第一個$是{default as $}的替代寫法。

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

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

相關(guān)文章

  • 一篇文章弄懂 JavaScript 中的 import

    摘要：無論是否聲明了，導(dǎo)入的模塊都運行在嚴格模式下。這通常是包含模塊的文件的相對或絕對路徑名，可以不包括擴展名。引用時將用作一種命名空間的模塊對象的名稱。導(dǎo)出參數(shù)指定單個命名導(dǎo)出，而語法導(dǎo)入所有導(dǎo)出。導(dǎo)入默認值在無論是對象函數(shù)類等有效時可用。 import 語句用于導(dǎo)入由另一個模塊導(dǎo)出的綁定。無論是否聲明了 strict mode，導(dǎo)入的模塊都運行在嚴格模式下。import語句不能在嵌入式腳...

    why_rookie 評論0 收藏0

  • 深入 CommonJs 與 ES6 Module

    摘要：目前主流的模塊規(guī)范模塊通用模塊如果你在文件頭部看到這樣的代碼，那么這個文件使用的就是規(guī)范實際上就是全局變量這三種風(fēng)格的結(jié)合這段代碼就是對當(dāng)前運行環(huán)境的判斷，如果是環(huán)境就是使用規(guī)范，如果不是就判斷是否為環(huán)境，最后導(dǎo)出全局變量有了后我們的代碼和 目前主流的模塊規(guī)范 UMD CommonJs es6 module umd 模塊（通用模塊） (function (global, facto...

    sanyang 評論0 收藏0

  • 富婆給你說require、import和export

    摘要：所有依賴這個模塊的語句，都定義在一個回調(diào)函數(shù)中，等到加載完成之后，這個回調(diào)函數(shù)才會運行。目前，主要有兩個庫實現(xiàn)了規(guī)范和。這些導(dǎo)出對象用名稱進行區(qū)分，稱之為命名式導(dǎo)出。 簡單粗暴，富婆給你說，其實我也沒太搞明白，最近看了一篇文章我才理清了一點點思路，最近整日沉迷于肥宅快樂水，技術(shù)都跟不上了，來篇文章，提神醒腦，朝著我的富婆夢更近一步，早日走上富婆路，包養(yǎng)我家大狼狗?。。?為什么有模塊概念...

    cod7ce 評論0 收藏0

  • 富婆給你說require、import和export

    摘要：所有依賴這個模塊的語句，都定義在一個回調(diào)函數(shù)中，等到加載完成之后，這個回調(diào)函數(shù)才會運行。目前，主要有兩個庫實現(xiàn)了規(guī)范和。這些導(dǎo)出對象用名稱進行區(qū)分，稱之為命名式導(dǎo)出。 簡單粗暴，富婆給你說，其實我也沒太搞明白，最近看了一篇文章我才理清了一點點思路，最近整日沉迷于肥宅快樂水，技術(shù)都跟不上了，來篇文章，提神醒腦，朝著我的富婆夢更近一步，早日走上富婆路，包養(yǎng)我家大狼狗?。?！ 為什么有模塊概念...

    sourcenode 評論0 收藏0

  • 這幾個概念你可能還是沒搞清require、import和export

    摘要：如果這個模塊還依賴其他模塊，那么函數(shù)的第一個參數(shù)，必須是一個數(shù)組，指明該模塊的依賴性。目前，主要有兩個庫實現(xiàn)了規(guī)范和。這些導(dǎo)出對象用名稱進行區(qū)分，稱之為命名式導(dǎo)出。簡單粗暴，富婆給你說，其實我也沒太搞明白，最近看了一篇文章我才理清了一點點思路，最近整日沉迷于肥宅快樂水，技術(shù)都跟不上了，來篇文章，提神醒腦，朝著我的富婆夢更近一步，早日走上富婆路，包養(yǎng)我家大狼狗?。。?為什么有模塊概念 理想情況...

    only_do 評論0 收藏0

發(fā)表評論

0條評論

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