ES6 实现了模块功能

将文件当作独立的模块,一个文件一个模块

每个模块可以导出自己的API成员,也可以导入其他模块或者模块中特定的API

ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。

所以编译期会检查对导入模块的API或成员的引用

import 可以将一个模块中的一个或多个API导入到当前作用域中,并绑定到变量上(下面示例中的hello)

module.exports={...} 这个可以导出公共API

模块文件中的内容就好像包含在作用域闭包一样,因为它的API在定义文件之外被调用了

模块有两个主要特征:

  1. 为创建内部作用域而调用了一个包装函数
  2. 包装函数的返回值至少包括一个对内部函数的引用,这样就会创建涵盖整个包装函数内部作用域的闭包

示例:

bar.js

foo.js

baz.js

Bable命令:

babel lib -d build\lib

这三个文件都存放在lib目录下,编译到同级目录build中的lib目录下

执行结果:

ES6 模块机制的更多相关文章

  1. ES6模块import细节

    写在前面,目前浏览器对ES6的import支持还不是很好,需要用bable转译. ES6引入外部模块分两种情况: 1.导入外部的变量或函数等: import {firstName, lastName, ...

  2. Typescript学习笔记(五) 模块机制

    javascript从es5之前都缺少一种模块机制,无法通过js引入文件,于是requirejs等等的加载器应运而生.这些加载器的使用也并不统一,产生了amd,commonjs,umd等等的规范,各有 ...

  3. ES6 模块与 CommonJS 模块的差异

    ES6 模块与 CommonJS 模块完全不同.它们有两个重大差异 CommonJS 输出是值的拷贝,即原来模块中的值改变不会影响已经加载的该值,ES6静态分析,动态引用,输出的是值的引用,值改变,引 ...

  4. JS模块之AMD, CMD, CommonJS、UMD和ES6模块

    CommonJS 传送门 同步加载,适合服务器开发,node实现了commonJS.module.exports和require 判断commonJS环境的方式是(参考jquery源码): if ( ...

  5. 如何让 node 运行 es6 模块文件,及其原理

    如何让 node 运行 es6 模块文件,及其原理 最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机 ...

  6. ES6模块与CommonJS模块的差异

    ES6模块与CommonJS模块的差异 讨论 Node 加载 ES6模块之前,必须了解 ES6模块与 CommonJS模块完全不同. 它们有两个重大差异. CommonJS模块输出的是一个值的拷贝,E ...

  7. es6 模块与commonJS的区别

    在刚接触模块化开发的阶段,我总是容易将export.import.require等语法给弄混,今天索性记个笔记,将ES6 模块知识点理清楚 未接触ES6 模块时,模块开发方案常见的有CommonJS. ...

  8. Linux模块机制浅析

    Linux模块机制浅析   Linux允许用户通过插入模块,实现干预内核的目的.一直以来,对linux的模块机制都不够清晰,因此本文对内核模块的加载机制进行简单地分析. 模块的Hello World! ...

  9. Node.js入门:模块机制

    CommonJS规范      早在Netscape诞生不久后,JavaScript就一直在探索本地编程的路,Rhino是其代表产物.无奈那时服务端JavaScript走的路均是参考众多服务器端语言来 ...

随机推荐

  1. 第十一节:Bundles压缩合并js和css及原理分析

    一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...

  2. python 实现简单卷积网络框架

    第一步定义卷积核类: class Filter(object): # 滤波器类 对卷积核进行初始化 def __init__(self,width,height,depth): # initializ ...

  3. luogu P5300 [GXOI/GZOI2019]与或和

    传送门 题目涉及按位与以及按位或运算,所以可以拆位考虑,枚举某个二进制位,然后某个位置如果那个数的第\(i\)位是\(0\)就放\(0\),否则放\(1\),这一位的贡献就是位运算后值为\(1\)的子 ...

  4. webpack学习笔记——publicPath路径问题

    output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定pu ...

  5. 405 css样式的研究 list-style-type 属性研究

    CSS 列表的样式 list-style-type.list-style-position和list-style-image 属性 在CSS中,列表元素是一个块框,列表中的每个表项也是一个块框,只是在 ...

  6. codeblocks添加编译选项

    -std=c++0x

  7. django2.0无法加载外部css和js的问题

    解决问题的思路来源于https://www.v2ex.com/t/430192 先是创建static目录,该目录与manage.py同级 然后在项目settings.py文件里添加 STATICFIL ...

  8. MinGW GCC 8.1.0 2018年5月2日 出炉啦

    MSYS_MinGW-w64_GCC_810_x86-x64.7z for x86 x64 59.0 MB发布日期: 2018-05-04 下载地址:https://sourceforge.net/p ...

  9. GIt -- Window下配置 git

    全局配置  git config --global user.name "账户名"  git config --global use r.email '账户邮箱' 生成ssh,命令 ...

  10. 【原创】大数据基础之ElasticSearch(2)常用API整理

    Fortunately, Elasticsearch provides a very comprehensive and powerful REST API that you can use to i ...