亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Pines_Cheng / 2100人閱讀

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

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

首先導(dǎo)出一般有兩種方式，聲明的時(shí)候直接導(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)出一個(gè)默認(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ù)作為一個(gè)對(duì)象的屬性導(dǎo)入

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/83027.html

相關(guān)文章

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

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

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

  • 前端模塊化

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

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

  • 讓 Angular 1.x 跟上時(shí)代的步伐

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

    李增田 評(píng)論0 收藏0

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

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

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<