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

資訊專欄INFORMATION COLUMN

ES6 module使用示例（模塊化加載文件）

Pines_Cheng / 2051人閱讀

摘要：在使用到很多前端框架時候，很多框架都采用了模塊化的文件加載方式，利用語句完成分割文件的功能。為了更好的使用各個框架我們就看看模塊化的基本使用導(dǎo)出的基本類型首先導(dǎo)出一般有兩種方式，聲明的時候直接導(dǎo)出，或者聲明完成后導(dǎo)出。

在使用到很多前端框架時候，很多框架都采用了模塊化的文件加載方式，利用import export 語句完成分割文件的功能。為了更好的使用各個框架我們就看看ES6模塊化的基本使用
export 導(dǎo)出的基本類型

首先導(dǎo)出一般有兩種方式，聲明的時候直接導(dǎo)出，或者聲明完成后導(dǎo)出。

//first method
export var firstName = "Ajaxyz"
// second method
var firstName="Ajaxyz"

export {firstName}

1.變量（包括常量）

export var firstName = "Ajaxyz"
export let lastName = "Vue"
export const birthDay = new Date("1992-7-23")

2.函數(shù)

function logError() {
    console.log("here goes a mistake")
}
export { logError as log }

as 可以給導(dǎo)出的變量或函數(shù)重新命名
3.類

export class Person {
    constructor() {
        this.name = firstName + lastName
        this.gend = "female"
    }

    showName() {
        console.log(this.name)
    }
}

如果我們想隨意指定導(dǎo)出的接口名稱，不用在導(dǎo)入的文件中和導(dǎo)出的文件保持命名一致，可以使用default,但是default只能導(dǎo)出一個默認(rèn)接口。

使用默認(rèn)導(dǎo)出default 
//export default variable
var defaultValue = "http://www.sg.com"
export default defaultValue//needn"t curly brave

//export default class
//1.
 class Person {
    constructor() {
        this.name = firstName + lastName
        this.gend = "female"
    }

    showName() {
        console.log(this.name)
    }
}
export default Person
//2.
export default class Person {
    constructor() {
        this.name = firstName + lastName
        this.gend = "female"
    }

    showName() {
        console.log(this.name)
    }
}

//export default function
//1.
export default function logError() {
    console.log("here goes a mistake")
}
//2.
function logError() {
    console.log("here goes a mistake")
}
export default logError
import 語句用法

1.導(dǎo)入普通變量，類，函數(shù)

import {lastName,birthday，funcion1}from "data"
//命名必須和export保持一致

2.導(dǎo)入default

import var1 from "data"http://the name of import variable needn"t 
                      // be the same with the variable it is exported

3.把所有變量，函數(shù)作為一個對象的屬性導(dǎo)入

import * as externalFile from "./data"
console.log( externalFile.firstName)

4.導(dǎo)入的時候重新命名

import {log as error}from "./data"
注意的幾個問題

1.導(dǎo)入的文件中的可執(zhí)行代碼會被執(zhí)行一遍，且無論導(dǎo)入多少次只會執(zhí)行一遍。
2.import export 是靜態(tài)編譯用到他們的時候不能使用可運行的語句，例如if判斷，變量賦值
var x="./index.js" import v from x//error exmaple ,import export 必須在代碼頂層不能放置在某個代碼塊中，但是可以放置在任意行，不必在開頭。

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

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

相關(guān)文章

  • 一覽js模塊化：從CommonJS到ES6

    摘要：模塊化規(guī)范有的模塊系統(tǒng)。規(guī)范是服務(wù)器端模塊的規(guī)范，由推廣使用。對于依賴的模塊，是提前執(zhí)行，是延遲執(zhí)行。瀏覽器廠商和都宣布要原生支持該規(guī)范。它將逐漸取代和規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。 本文由云+社區(qū)發(fā)表 模塊化是指把一個復(fù)雜的系統(tǒng)分解到一個一個的模塊。 模塊化開發(fā)的優(yōu)點： (1)代碼復(fù)用，讓我們更方便地進(jìn)行代碼管理、同時也便于后面代碼的修改和維護(hù)。 (2)一個單獨的文件就...

    antz 評論0 收藏0

  • 前端模塊化

    摘要：如果想讓模塊再次執(zhí)行，必須清楚緩存同步加載模塊只有加載完成之后，才能執(zhí)行后面的操作運行時加載中的實現(xiàn)對象中提供了一個構(gòu)造函數(shù)，每個模塊都是構(gòu)造函數(shù)的實例。 什么是模塊化 1、模塊化 模塊化是自頂向下逐層將系統(tǒng)劃分成若干更好的可管理模塊的方式，用來分割、組織和打包軟件,達(dá)到高度解耦 2、模塊 模塊是可組合、分解、更換的單元； 每個模塊完成一個特定子功能，模塊間通過某種方式組裝起來，成為...

    liukai90 評論0 收藏0

  • 讓 Angular 1.x 跟上時代的步伐

    摘要：所以說的模塊機制沒有解決文件依賴關(guān)系和文件異步加載的問題。大部分團(tuán)隊還是停留在第二第三階段，每個階段的實現(xiàn)都有很多種選擇。希望這篇文章能夠激起大家永遠(yuǎn)保持積極向前追求完美代碼的心，不僅對自己的成長也會對公司帶來無限的價值。 本篇技術(shù)博客來自有著化腐朽為神奇能力的，Worktile 技術(shù)牛人Web 總監(jiān) @徐海峰 大神的分享~滿滿的干貨，你值得擁有！ Worktile 的前端構(gòu)建之路 2...

    李增田 評論0 收藏0

  • JS 模塊導(dǎo)入/導(dǎo)出

    摘要：本文主要介紹幾種模塊導(dǎo)入導(dǎo)出的方法。默認(rèn)導(dǎo)出如果只在一個文件中提供了一個導(dǎo)出的口，就可以使用默認(rèn)導(dǎo)出在中可以看到輸入同樣是模塊導(dǎo)入導(dǎo)出方法，使用的模塊方法，要比中的也就是模塊方法更加的差異非常大。 在開發(fā)中基本不會將所有的業(yè)務(wù)邏輯代碼放在一個JS文件中，特別是在使用前端框架，進(jìn)行組件化開發(fā)中時，會復(fù)用相應(yīng)的組件。這時，就會用到模塊導(dǎo)入/導(dǎo)出的方法了。 當(dāng)然，上面提到有模塊的概念，也是在...

    wall2flower 評論0 收藏0

發(fā)表評論

0條評論

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