美文网首页
ES6 Module

ES6 Module

作者: 打不过就加入他 | 来源:发表于2016-09-12 11:25 被阅读16次

模块功能主要是由:export 和 import 两个命令组成的。

  • export命令
    用于规定模块的对外接口。通俗讲,就是这个模块输出了什么,是val还是function
// moduleA.js
var author = 'shaojian';
var version = '1.1';
exprot {author,version}
//等同于下边的方法,但是上一种更清晰明了
export var author = 'shaojian';
export var version = '1.1';
//统一了下个人的写法
var author = 'shaojian';
var version = '1.1';
function foo(x,y){
}
exports {
    author,
    version,
    foo
}

*** 注意 export命令输出的变量可以用 as关键字来重命名***

// moduleB.js
var author = 'shaojian';
var version = '1.1';
function foo(x,y){
}
exports {
    author as va1,
    version as val2,
    foo as f
}

  • import命令
    export导出的接口,其它的js文件中可以用import加载这个文件,加载即是引用
import {author,version,year} from './moduleA.js'

*** import具有变量提升效果,编译时会提升到文件的最顶部 ,所以下边的js不会报错***

f()
import {foo as f} from './moduleA.js'
  • 模块的整体加载
import  * as f from 'moduleB'
f.va1, f.val2 ,f.f(1,2)
  • export default用于模块的默认输出
//a.js
export default function(){
  console.log(11111)
}
//引用
import a from "a.js"

*** 一个模块只有一个默认的输出,也就是说,在一个模块里只能有一个export default***
有个使用上的区别

var a = 5;
export a;
//使用  
import {a as a1} from "module.js"
var a = 5;
export default a
//使用
import b from "module.js"

*** 同时引入默认和其他***

import a,{b} from "module.js"

*** 导出类 ***

export default ClassA{
    constructor(){}
    foo1(){}
}
//使用
import A from "xxx";
new A()

相关文章

  • 前端模块化:ES6,CommonJS

    前端模块化 共有四种规范 ES6 Module CommonJS AMD CMD ES6 Module ES6模块...

  • 模块(一) CommonJs,AMD, CMD, UMD

    系列文章导航 模块(二) es6 module typescript module 本文参考Javascript模...

  • js之模块化(3)

    随着ES6 Module的出现,我们在项目中也大概率的采用了ES6 Module的写法,主要是采用import 和...

  • ES6语法

    ES6 Module 在 ES6 Module出现之前,有3种模块化方案 AMD 浏览器端 CMD 服务器端 Co...

  • 2020-04-22

    分类: es6: import / exportcommonjs: require / module.export...

  • CommonJs模块规范中module.exports和expo

    之前简单总结过ES6中的export/import模块规范(ES6中的export/import module 基...

  • 学习webpack【第三章-核心概念2】

    一、Hot Module Replacement 热模块替换 二、使用babel处理ES6 ———————————...

  • 2020-04-16

    #ES6中的两个导出 1、export页面引用时候imprt {module1,module2} from 'xx...

  • webpack-02

    解析ES6和ReactJSX 解析ES6使用的是babel-loader,我们首先需要做在module的rules...

  • BigNumber 讲解

    安装 Browser: Node.js: ES6 module (bignumber.mjs): AMD load...

网友评论

      本文标题:ES6 Module

      本文链接:https://www.haomeiwen.com/subject/kbdpettx.html