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

Pines_Cheng 發布于2019-08-20 16:36 / 2046人閱讀

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

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

export 導出的基本類型

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

//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.函數

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

as 可以給導出的變量或函數重新命名
3.類

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

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

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

使用默認導出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.導入普通變量，類，函數

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

2.導入default

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

3.把所有變量，函數作為一個對象的屬性導入

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

4.導入的時候重新命名

import {log as error}from "./data"

注意的幾個問題

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

GPU云服務器云服務器 es6module 加載es6 云服務器ecs linux下使用ntfs文件系統示例使用示例

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83027.html

一覽js模塊化：從CommonJS到ES6

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

antz 2019-08-23 14:15 評論0 收藏0
前端模塊化

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

liukai90 2019-08-23 11:45 評論0 收藏0
讓 Angular 1.x 跟上時代的步伐

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

李增田 2019-07-25 10:41 評論0 收藏0
JS 模塊導入/導出

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

wall2flower 2019-08-22 11:19 評論0 收藏0