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. 微信小程序 mpvue vant

    Mpvue中使用Vant Weapp组件库 https://segmentfault.com/a/1190000016228410?utm_source=tag-newest 小程序采坑记 mpvue ...

  2. lsof/netstat命令的一个重要作用: 根据进程查端口, 根据端口查进程

    我们知道, 根据ps -aux | grep xxx就是很快实现进程名和进程号的互查, 所以我们只说进程号pid就行. 如下示例中, 进程pid常驻. 1.  根据进程pid查端口: lsof -i ...

  3. python从爬虫基础到爬取网络小说实例

    一.爬虫基础 1.1 requests类 1.1.1 request的7个方法 requests.request() 实例化一个对象,拥有以下方法 requests.get(url, *args) r ...

  4. webpack4之踩坑总结

    一.先放上项目目录结构 二.问题总结 1.关于process.env.NODE_ENV问题 刚开始的时候,我想在配置文件中使用到这个环境变量,却发现一直获取不到值,晕晕晕,查了资料才知道,这个环境变量 ...

  5. Linux 一 些常用的命令

    查看当前系统JAVA的安装路径: echo $JAVA_HOME: 查看内核版本: uname -a ubuntu的防火墙 关闭:ufw disable开启:ufw enable 卸载了 iptabl ...

  6. LeetCode第十四题-字符串数组中最长的共同前缀

    Longest Common Prefix 问题简介: 编写一个函数来查找字符串数组中最长的公共前缀字符串,如果没有公共前缀,则返回空字符串"" 举例: 1: 输入: [“xwq” ...

  7. Web从入门到放弃<6>

     <1> Canvas. 1,灰度图: js: function showAsGray() { var imgNode = document.getElementById('img'); ...

  8. zTree动态初始化树形结构加载

    zTree动态加载初始化,纠结了一小下.最终还是做出来了.注意动态获取数据在前,初始化树形结构放在成功的回调函数中,并放在$(document).ready(function () {})中: $(d ...

  9. 读书笔记-JavaScript高级程序设计(1)

    1.组合继承 (JavaScript 中最常用的继承模式 ) (position: page168) (书中定义了两个变量名 SuperType   SubType  乍一看 感觉不太能区分,我将改为 ...

  10. LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题)

    form.on('submit(mySearch)', function(data){ table.reload('userTable', {//就会读取后台数据,重新加载: page: { curr ...