模块化开发入门

最新推荐文章于 2022-08-12 15:20:25 发布

Jack おう

最新推荐文章于 2022-08-12 15:20:25 发布

阅读量256

点赞数

分类专栏：拉钩大前端前端模块化

本文链接：https://blog.csdn.net/weixin_45345105/article/details/110313496

版权

拉钩大前端同时被 2 个专栏收录

30 篇文章 12 订阅

订阅专栏

前端模块化

3 篇文章 0 订阅

订阅专栏

模块化概述

模块化是当下前端最重要的开发范式之一。
把复杂的代码进行模块化提高开发效率。
在这里插入图片描述

模块化演变过程

早期前端没有预料到到现在能发展成这种规模，遗留了很多问题。
最开始是把数据分成模块

阶段一

在这里插入图片描述
调用

缺点：

阶段二

包裹成一个对象的方式
在这里插入图片描述
使用

阶段三

使用立即执行函数提供模块的私有空间
在这里插入图片描述

阶段四

开始实现依赖关系
在这里插入图片描述

模块化规范的出现

在这里插入图片描述
node提供的标准

在这里插入图片描述

但是commonjs在浏览器中使用会有些问题。因为每次页面加载都会同步大量请求。

AMD

在这里插入图片描述
专门为浏览器设计的一种规范，而且还推出了一个叫require.js的库

加载模块

缺点

来看看淘宝的 sea.js + CMD

在这里插入图片描述

模块化标准规范

正题

上面介绍的演变过程都有些问题和缺点，如今的模块化标准基本统一。
在这里插入图片描述
最开始的ES modules没有被现代浏览器支持，随着webpack的出现才慢慢解决。
相比社区提出来的AMD，ESmodule更强大。

ES Modules 特性

使用
在这里插入图片描述

4.延迟演示
只有脚本执行完成（渲染完后）才开始加载

点击后

上面和defer属性效果一样

ES Modules 导出

在这里插入图片描述
这里使用 broswer sync测试

1.多个导出

2.批量导出

3.别名导出，导入时必须用别名

注意 name as default的话会作为这个模块默认导出，导入时就必须这样

导入也可以起别名

4.默认导出

导入的时候名字就可以随便取了

ES Modules 导入导出的注意事项

在这里插入图片描述
不带default是导出变量

导出的是一个内存空间，不是复制了一份，这是和node commonjs中是不同的2.而且暴露出去的是只读的，只能在内部修改

2不能外部修改，导入的模块默认为常量

在这里插入图片描述

ES Modules 导入用法

1.必须要完整命，这和commonjs不同
在这里插入图片描述
2必须完整路径

后期用打包工具是可以省略这些扩展名的。
3.必须./开头还可以换其他俩种导入方法

4.如果导入为{} 那么不会提取任何对象，会执行（加载这个模块但不提取）

简写

4 提取所以导出的属性，把导出的属性以as的方式变为一个对象
在这里插入图片描述
5 动态获取import 路径

6 导出默认的同时导出其他成员

方式2

ES Modules 导出导入成员

在这里插入图片描述
需要把较多的模块统一导出时候用会很方便
注意：（如果子模块导出的是default，那么导入的时候必须使用as 重命名）

ES Modules 浏览器环境 Polyfil

因为ESM是14年提出的，早期的浏览器不可能会支持，可以用下面的js文件解决，此文件支持绝大多数特性
在这里插入图片描述
这是个npm模块，那么我们可以通过 unpkg.com 这个网站提供的cdn服务获取
域名+文件名回车

删除dist后面的回车（记得要带/不然走默认文档说明

点进去

拷贝链接
其实这个原理就是先用babel读出来然后将不识别的ESM转换，使得特性可以正常工作。
打开ie发现还不行，报promise为实现的error
解决：继续下载一个promise的polyfill，继续去cdn拿
在这里插入图片描述
正常打印，也就是ESM可以正常工作了

这又有个问题，如果在支持ES6的浏览器中，会被执行俩次（因为本身ESM会执行一次，然后ESMloader的polyfill又会执行一次

解决：利用script的新属性解决，添加后只会在不支持esm的浏览器中工作（生产环境千万别用，因为是动态分析会特别慢
在这里插入图片描述
只有ie弹出了alert