es6的模块系统

js引擎运行模块时:

  1. 语法解析: 阅读模块源代码,检查语法错误;
  2. 加载: 递归的加载所有被导入的模块(深度优先遍历),这一部分未被标准化.
  3. 连接: 每遇到一个新加载的模块,为其创建作用域并将模块内声明的所有绑定填充到该作用域中,包括由其他模块导入的内容;
  4. 运行时: 最终,在每一个新加载的模块体内执行所有语句, 导入过程结束.

系统不指定加载过程的实现方式

你可以通过在源代码中查找import声明提前计算出所有依赖,你可以将ES6系统实现为:
在编译时计算所有依赖并将所有模块打包成一个文件,通过网络一次传输所有模块!像webpack这样的工具就实现了这个功能。

为什么这样做?

因为通过网络加载脚本需要花费时间,每当你请求到一个模块,你可能发现它里面也包含着import声明,这就需要你再花费一些时间加载更多的脚本。这会消耗更多的网络往返时间

静态的模块系统

  • 只可以在模块的最外层作用域使用import, export,不可以在条件语句中使用,也不能在函数作用域中使用import.
  • 所有到处的标识符一定要在源代码中明确地导出它们的名称,你不能通过编写代码遍历一个数组然后用数据驱动的方式导出一堆名称.
  • 模块对象呗冻结了,无法hack模块对象并为其添加polyfill风格的新特性.
  • 一个模块的所有依赖必须在模块代码运行前完全加载,解析并且及早连接,不存在一种通过import来按需懒加载的语法.
  • import模块产生的错误没有错误恢复机制,一旦一个模块加载出错,所有的模块都不会运行.无法用try/catch 来捕获错误.
  • 不支持在模块加载依赖前运行其它代码的钩子,这意味着无法控制模块的依赖加载过程.

额外的动态编程加载器API------"动态",打破上面列举的规则

webpack引入了代码分割API来实现按需加载

" ES6模块语法非常静态,这是很好的——它通过强有力的编译时工具的形式进行弥补。但是设计静态语法的初衷是要与丰富的动态编程加载器API一起增强ES6的模块系统。"

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 3,668评论 2 27
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,969评论 19 139
  • 第十三章 用模块封装代码 模块是自动运行在严格模式下并且没有办法退出运行的JavaScript代码,在模块顶部创建...
    NowhereToRun阅读 286评论 0 1
  • 影子躺在洁白的手术台上,无情的各种手术刀摆在眼前,心中很不安,接着冰冷的的金属的在身体里无情的搅动,影子的脸色顿时...
    无尽无尽夏阅读 197评论 0 0
  • 这段时间写日记是两天打渔三天晒网,一是确实比较忙,家里琐碎的事儿特别多,忙到晚上就不想动弹了。二是到了晚上面对女儿...
    勿忘我瑶阅读 127评论 4 3