当当前的应用程序变得越来越复杂时,我们希望将代码分为不同的模块,以促进重复使用和按需加载。
分别在不同模块规范下引入的句子将在下面介绍这两种方法之间的差异。
Edge不支持16+COMPORJS模块化解决方案需要/导出,并为服务器端设计。服务器模块系统同步读取模块文件内容,并在编译执行后获得模块接口。(NODE.JS是实现的实现。commonjs规范)。
在浏览器上,由于其异步加载脚本文件特性,无法正常加载CommonJS规范。因此,requirjs,seajs等(与commonjs兼容)具有为浏览器设计的模块化解决方案。直到ES6规范出现直到出现在ES6规范上浏览器具有自己的模块化计划进出口。
这两个方案有自己的限制,需要注意以下几点:
要求在运行时动态加载,导入是静态编译。
需要/导出值的副本,导入/导出模块输出值的值
导出是对模块的引用,其等效于
没有更改导出方向,使用导出和模块之间没有区别。如果导出指向其他对象,则导出更改不会更改模块输出值。该示例如下:
模块主要由两个命令组成。进出口。导出用于指定模块的外部接口。导入命令用于输入其他模块提供的功能。
该模块是一个独立的文件,无法获得文件中的所有变量。如果要获得变量,则必须通过导出输出,
或使用更好的方法:指定一组要在大括号中输出的变量
除了输出变量外,您还可以输出功能或类(类)
它也可以分批输出,也可以包含在大型括号中。您还可以将其重命名为:
注意:导出命令规定必须使用模块的内部变量建立外部接口
错误的原因是:没有外部接口,第一个直接输出1,尽管有变量M,但第二个直接输出是直接输出1,这使得它无法解构它。
同样,还必须观察和谐的输出。
导出语句输出的接口是相应值之间的关系,并且它是动态的,即通过接口获得模块内部的真实时间值。
导出模块可以位于模块中的任何位置,但必须位于模块的顶层。如果在其他范围内,将报告错误。
导出定义模块的外部接口后,其他JS文件可以通过导入加载此模块
导入命令接受一对大括号,该括号指定要从其他模块导入的变量名称,该名称必须与导入模块()外部接口的名称相同。
如果要重新计入导入的变量名称,则可以用作关键字
从可以指定模块的路径名,它可以是绝对路径或相对路径。可以省略.js路径。如果只有一个模块名称,则没有路径,并且有一个名称文件规范。
请注意,该命令具有改进效果,将改进到整个模块的头部,并首先执行(在编译阶段执行)
因为导入是静态执行,所以它不能使用表达式和变量,也就是说,结果的语法结构只能在运行时获得(例如,如果... else ...)
模块的整体加载
除了指定加载的输出值外,您还可以指定具有(*)的对象,并且所有变量都将在此对象上加载。
尽管它很方便使用 *,但它不利于现代施工工具检测未使用的功能,从而影响代码优化。
请注意,应静态分析模块的整体(上)对象,因此在运行时不允许更改。
您需要同时注意
如前所述,应添加浏览器简介模块的元素,但是模块不支持FTP文件协议(file://),而仅支持HTTP协议。因此,本地网络服务器(例如HTTP-Server)需要打开Web文件。
在上一个示例中,在导入导入时,您需要知道要在模块中加载的变量名称或函数名称。用户可能不想读取源代码。他们只想直接使用界面。
当其他模块加载模块时,命令可以指定匿名函数的任何名称。
导出默认值也可以用于非匿名函数的前面。
让我们比较下面的默认输出和正常输出。
可以看出,当使用导出默认值时,导入语句不需要使用大型括号。
该命令只能在模块的顶层,不能在代码块中。否则,语法报告错误。
这样的设计可以提高编译器的效率,但是在运行时无法加载。
因为在运行时加载了需求,所以导入命令无法替换需求的动态加载函数。
因此,介绍了import()函数。complete动态加载。
指定符用于指定要加载的模块的位置。参数可以导入接受相同的参数。
import()表达式加载模块并返回承诺,这是承诺的解决方案。
我们可以在代码中的任何位置中动态使用它。例如:
建议:请不要滥用动态导入()(仅在必要的情况下采用)。静态框架可以更好地初始化依赖性,并且更有利于静态分析工具和树木摇动。
import()功能适用的场合
按需加载
在事件监视功能中,导入模块仅在用户单击按钮时加载此模块。
如果...其他语句以实现条件加载,则可以将加载导入()加载。
当我尝试重新启动导入模块的值时
浏览器显示
Unturect typeError:分配到常数变量。
当我重新定义参考模块时
浏览器显示
(索引):17未熟悉的语法:标识符'e1'已被声明
ES6模块可以在引用的语句之前使用该模块,并且需要先引用concomjs,然后使用
ES6模块
commonjs
程序错误
参考:A未定义
导入/导出只能在模块的顶层上使用,并且不能在代码块中引用,例如函数,判断语句;需要/出口可以。
程序错误
unuffult的语法:unexpectd token'{'{'{'
导入/导出将在代码的静态分析阶段生成。它不会在代码块中分析导入/导出,因此程序报告语法错误而不是运行时错误。
严格模式是使用受限的JavaScript变体的一种方式
由导入/导出导出的模块默认情况下称为严格模式。在ES6模块中,顶层的方向不应在顶部代码上使用。
要求/导出默认情况下不使用严格的模式,并且可以自定义是否使用严格模式。例如
参考文章: