ES6模块

Wesley13
• 阅读 586

默认情况下,你在模块中的所有声明相对于模块而言都是寄存在本地的。如果你希望公开在模块中声明的内容,并让其它模块加以使用,你一定要_导出_这些功能。

    // kittydar.js - 找到一幅图像中所有猫的位置
    // (事实上是Heather Arthur写的这个库)
    // (但是她没有使用ES6中新的模块特性,因为那时候是2013年)
    export function detectCats(canvas, options) {
      var kittydar = new Kittydar(options);
      return kittydar.detectCats(canvas);
    }
    export class Kittydar {
      ... 处理图片的几种方法 ...
    }
    // 这个helper函数没有被export。
    function resizeCanvas() {
      ...
    }
    ...

你可以导出所有的最外层函数以及varletconst声明的变量。

在一个独立文件中,我们可以导入detectCats()函数然后用它来做点儿什么:

    // demo.js - Kittydar的demo程序
    import {detectCats} from "kittydar.js";
    function go() {
        var canvas = document.getElementById("catpix");
        var cats = detectCats(canvas);
        drawRectangles(canvas, cats);
    }

如果想从一个模块中导入多个名称,你可以这样写:

   import {detectCats, Kittydar} from "kittydar.js";

这些就是模块的基本知识了,相当简单吧。;-)

Export列表

    export {detectCats, Kittydar};
    // 此处不需要 `export`关键字
    function detectCats(canvas, options) { ... }
    class Kittydar { ... }

重命名import和export

    // suburbia.js
    // 这两个模块都会导出以`flip`命名的东西。
    // 要同时导入两者,我们至少要将其中一个的名称改掉。
    import {flip as flipOmelet} from "eggs.js";
    import {flip as flipHouse} from "real-estate.js";
    ...

    // unlicensed_nuclear_accelerator.js - 无DRM(数字版权管理)的媒体流
    // (这不是一个真实存在的库,但是或许它应该被做成一个库)

    function v1() { ... }
    function v2() { ... }

    export {
      v1 as streamV1,
      v2 as streamV2,
      v2 as streamLatestVersion
    };

Default exports

如果你想让自己的ES6模块有一个默认的导出,实现的方法很简单,默认导出与其它类型的导出相似,没有什么技巧可言,唯一的不同之处是它被命名为“default”。

    export default {
      field1: value1,
      field2: value2
    };

关键字export default后可跟随任何值:一个函数、一个类、一个对象字面量,只要你能想到的都可以。

模块对象

   import * as cows from "cows";

当你import *时,导入的其实是一个模块命名空间对象,模块将它的所有属性都导出了。所以如果“cows”模块导出一个名为moon()的函数,然后用上面这种方法“cows”将其全部导入后,你就可以这样调用函数了:cows.moo()

聚合模块

    // world-foods.js - 来自世界各地的好东西

    // 导入"sri-lanka"并将它导出的内容的一部分重新导出
    export {Tea, Cinnamon} from "sri-lanka";

    // 导入"equatorial-guinea"并将它导出的内容的一部分重新导出
    export {Coffee, Cocoa} from "equatorial-guinea";

    // 导入"singapore"并将它导出的内容全部导出
    export * from "singapore";

参考:

(1)http://www.infoq.com/cn/articles/es6-in-depth-modules?utm\_source=tuicool&utm\_medium=referral

点赞
收藏
评论区
推荐文章
Alex799 Alex799
3年前
Node.js 如何处理 ES6 模块
Node.js如何处理ES6模块作者:日期:学习JavaScript语言,你会发现它有两种格式的模块。一种是ES6模块,简称ESM;另一种是Node.js专用的CommonJS模块,简称CJS。这两种模块不兼容。很多人使用Node.js,只会用require()加载模块,遇到ES6
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
3年前
vtiger crm 模块的创建
1.到\\vtlib\\ModuleDir找到你相应的版本的模块原型 复制一份放到桌面,并以你的模块功能命名2.把Module替换成你的模块功能名,(使用文件夹全文搜索替换),并把带有module的文件名也相应的替换成你的功能名3.新建一个manifest.xml里面定义的建表sql,字段的属性,视图显示的字段,相关联的模块名等等。。例如:
Wesley13 Wesley13
3年前
CommonJS,ES2015,AMD,CMD区别
本文你将学到:1.Rollup是什么2.CommonJS、AMD、CMD、UMD、ES6分别的介绍3.ES6模块与CommonJS模块的区别4.模块演进的产物——TreeShaking5.TreeShaking应该注意什么本文所有例子都存放于https://github.com/hua1995116
Stella981 Stella981
3年前
ES6 模块化(Module)export和import详解
ES6模块化(Module)export和import详解ES6在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能
Stella981 Stella981
3年前
ES6模块之export和import详解
文章转载自:https://blog.csdn.net/qq\_28506819/article/details/75733601ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它。ES6的模块系统大致分为导出(export)和导入(import)两个模块。1、模块导出(export)
Wesley13 Wesley13
3年前
ES6模块化与常用功能
目前开发环境已经普及使用,如vue,react等,但浏览器环境却支持不好,所以需要开发环境编译,下面介绍下开发环境的使用和常用语法:一,ES6模块化1,模块化的基本语法ES6的模块自动采用严格模式,不管你有没有在模块头部加上"usestrict";。模块功能主要由两个命令构成:export和import(注意有无defaul
Stella981 Stella981
3年前
Android 主Module引用依赖Module,却无法使用里面的依赖库
如果模块化开发中遇到多模块的AndroidManifest.xml没有合并or多模块的资源文件没有合并or模块Ainclude了模块B,而无法使用模块B内依赖的其他aar包中的类的时候or提示Support包版本不一致这篇文章可能就是你要的解决方案~举个栗子:比如我们现在有一个App模块设计为:主
小万哥 小万哥
1年前
Python 模块:创建、导入和使用
什么是模块?将模块视为代码库。模块是一个包含一组函数的文件,您想要在应用程序中包含这些函数。创建一个模块要创建一个模块,只需将要包含在其中的代码保存在扩展名为.py的文件中:示例:将以下代码保存在名为的文件中:pythondefgreeting(name)