ES6 module使用示例（模块化加载文件）

Pines_Cheng 发布于2019-08-20 16:36 / 1948人阅读

摘要：在使用到很多前端框架时候，很多框架都采用了模块化的文件加载方式，利用语句完成分割文件的功能。为了更好的使用各个框架我们就看看模块化的基本使用导出的基本类型首先导出一般有两种方式，声明的时候直接导出，或者声明完成后导出。

在使用到很多前端框架时候，很多框架都采用了模块化的文件加载方式，利用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"//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 必须在代码顶层不能放置在某个代码块中，但是可以放置在任意行，不必在开头。

云服务器服务器托管 es6module 加载es6 云服务器ecs linux下使用ntfs文件系统示例使用示例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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