JavaScript模块化的示例分析

　　介绍

小编给大家分享一下JavaScript模块化的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

1。浏览器支持

使用JavaScript模块依赖于导入和导出,导入和导出的浏览器支持程度是最新的浏览器版本都是支持的,但IE和旧版本的浏览器不支持,因此若想兼容IE和旧版本的浏览器基本就不能使用了。

导出和导入是成对出现,配合工作的

JS模块化是各种JS框架学习的前提基础

进口和出口语句用于将一个模块里实现某些功能的变量或函数导入/导出,也可导入/导出类

2。出口导出模块

默认导出

一个模块只能有一个默认导出,默认导出的变量只能有一个,且不能有大括号{}

语法为出口默认变量名

模型。js

function  Test1 () { 　　,,,console.log(“这是默认导出“) 　　} 　　function  Test2 () { 　　,,,console.log(& # 39;这是命名导出& # 39;) 　　} 　　export  default  Test1

批量导出

语法为出口{变量名,变量名……}

function  Test1 () { 　　,,,console.log(“这是默认导出“) 　　} 　　function  Test2 () { 　　,,,console.log(& # 39;这是命名导出& # 39;) 　　} 　　export  {Test1, Test2}

3。进口导入模块

默认导入

主要。js

import  Test1 得到“。/model.js" 　　Test1 ()

默认导入的重命名

主要。js

import  x 得到“。/model.js"//x就是默认导出的Test1 　　x ()

批量导入

主要。js

import  {Test1, Test2},得到“。/model.js" 　　Test1 (); 　　Test2 ();

批量导入的重命名

的关键字跟一个新名字实现重命名

主要。js

import  {Test1  as  x1, Test2  as  x2},得到“。/model.js" 　　x1 (); 　　x2 ();

也可在导出时用的关键字重命名

模型。js

function  Test1 () { 　　,,,console.log(“这是默认导出“) 　　} 　　function  Test2 () { 　　,,,console.log(& # 39;这是命名导出& # 39;) 　　} 　　export  {Test1  as  x1,, Test2  as  x2}

应用模块html

& lt; https://www.yisu.com/zixun/script  src=" main.js ">

4。创建模块对象

使用对象,在作为关键字重命名的基础上进一步简单化

import  *, as  Model 得到“。/model.js" 　　Model.x1 (); 　　Model.x2 ();

5。出口进口中转站

有时候可以将多个子模块组合到一个父模块中,再由父模块决定导出哪个,这个父模块文件就像是个组合各个模块的中转站

语法为出口{变量名}从模块路径

当前目录结构结构

src

,,index . html

,,main.js

,,redirection.js

,,模型

,,,,model.js

,,,,model2.js

模型。js

function  Test1 () { 　　,,,console.log(“这是子模块1“) 　　} 　　export  {Test1}

model2。js

function  Test2 () { 　　,,,console.log(& # 39;这是子模块2 & # 39;) 　　} 　　export  {Test2}

重定向。js

export  {Test1},得到“。/模型/model.js" 　　export  {Test2},得到“。/模型/model2.js"

主要。js

import  *, as  Model 得到“。/redirection.js" 　　Model.Test1 () 　　Model.Test2 html ()

& lt; script  src=https://www.yisu.com/zixun/薄?main.js ">

6。动态加载模块

动态加载模块用于在导入模块时不必预先加载所有模块,可以在需要时使用进口()作为函数调用,将其参数传递给模块的路径,它返回一个承诺,使用承诺对象对模块加载结果操作。

语法为进口(动态加载的模块路径)

动态。js

function  TestDy () { 　　,,,console.log(“这是动态模块“) 　　} 　　export  default  TestDy

主要。js

document.querySelector (& # 39; .load& # 39;) .onclick =,函数(){ 　　,,,进口(& # 39;。/dynamic.js& # 39;),然后((模型)=祝辞{ 　　,,,,,,,Model.default () 　　,,,}) 　　} JavaScript的作用是什么

JavaScript模块化的示例分析