前端模块化的意义

ThreeWords 发布于2019-08-26 10:59 / 3328人阅读

摘要：而前端要使用模块化的原因或者要解决的问题就是解决命名冲突管理依赖提高代码的可复用性相关模块化规范常见的规范有规范规范是在推广过程中对模块定义的规范化产出，主要用于浏览器端。目前的各类全局变量都可以模块化。

开发中明显可以感觉到加载一个HTML需要依赖很多的JS文件依赖，比如到一定阶段的HTML页面，尾部就是这样的：

随着所需功能越来越多，我们就需引入更多的JS依赖和CSS依赖，有时还会面临着一个文件不够需要拆分成几个文件的情况。因此可能会遇到以下几点问题：

管理依赖会成为一个很费时的工作，很可能引入的文件顺序出现错误前端交互就不可以使用了。

当页面加载的时候所有依赖会被全部同步加载，这样也很难实现所有依赖按需加载的高级功能。

在团队协作开发中，出现管理全局变量，变量命名空间困难的问题。

而前端要使用模块化的原因或者要解决的问题就是：

解决命名冲突

管理依赖

提高代码的可复用性

相关模块化规范

常见的规范有 CMD、AMD、CommonJS 规范

CMD规范（Common Module Definition）：是sea.js在推广过程中对模块定义的规范化产出，主要用于浏览器端。它主要特点是：对于依赖的模块是延迟执行，依赖可以就近书写，等到需要用这个依赖的时候再引入这个依赖。

AMD规范（Asynchronous Module Definition）：是 RequireJS 在推广过程中对模块定义的规范化产出，也是主要用于浏览器端。其特点是：依赖前置，需要在定义时就写好需要的依赖，提前执行依赖。

CommonJS规范是在服务器端模块的规范，是同步加载的，应用有node.js。

ES6 助推了前端模块化，import语法会被JavaScript引擎静态分析，这是一个很重要的功能，我们通常使用CommonJS时，代码都是在运行时加载的，而ES6是在编译时就引入模块代码，当然我们现在的浏览器还没有这么强大的功能，需要借助各类的编译工具（webpack）才能正确的姿势来使用ES6的模块化的功能。也正因为能够编译时就引入模块代码，所以使得静态分析就能够实现了。

ES6模块化的优点有

静态化编译。如果能够静态化，编译的时候就能确定模块的依赖关系，以及输出和输入的变量。CommonJS和AMD/CMD都只能在运行代码时才能确定这些关系。

不需要特殊的UMD模块化格式（Universal Module Definition（通用模块规范）是由社区想出来的一种整合了CommonJS和AMD两个模块定义规范的方法）。不再需要UMD模块的格式，将来服务器和浏览器都会支持ES6模块格式。目前各种工具库（webpack）其实已经做到这一点了。

目前的各类全局变量都可以模块化。比如navigator现在是全局变量，以后就可以模块化加载。这样就不再需要对象作为命名空间。

参考链接：javascript模块化之CommonJS、AMD、CMD、UMD、ES6

混合云私有云前端模块化前端模块云存储的意义解释域名的意义

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106951.html

前端进阶（1） - CSS 模块化

摘要：比如以为例，一个组件，包括一个文件一个文件图片组件在中便可如下加载使用导出为对象的模块化其实，还有另外一种思路，就是将内置中，成为的一部分。 CSS 模块化 CSS(Cascading Style Sheets)，从诞生之初就决定了它无法编程，甚至连解释性语言都算不上，只能作为一种简单的层叠样式表，对 HTML 元素进行格式化。但随着前端的发展，前端项目已经变得越来越庞大和复杂，社区...

lauren_liuling 2019-08-22 18:18 评论0 收藏0
前端进阶（1） - CSS 模块化

摘要：比如以为例，一个组件，包括一个文件一个文件图片组件在中便可如下加载使用导出为对象的模块化其实，还有另外一种思路，就是将内置中，成为的一部分。 CSS 模块化 CSS(Cascading Style Sheets)，从诞生之初就决定了它无法编程，甚至连解释性语言都算不上，只能作为一种简单的层叠样式表，对 HTML 元素进行格式化。但随着前端的发展，前端项目已经变得越来越庞大和复杂，社区...

VishKozus 2019-08-30 15:53 评论0 收藏0
前端组件化开发的意义

摘要：组件化开发的优点。可以很大程度的降低系统各个功能的耦合性，并且提高了功能内部的聚合性。耦合性的降低，提高了系统的伸展性，降低了开发的复杂度，提升开发效率，降低开发成本。这个是前端组件开发需要处理的难点。如今前端技术飞速发展，基本是基于三大框架开发的SPA（单页面应用）。本文主要是总结一下组件化开发思想重要点。组件化可以帮助解决前端结构的复用性问题，整个页面可以由不同的组件组合、嵌...

elisa.yang 2019-08-23 16:28 评论0 收藏0
前端组件化开发的意义

摘要：组件化开发的优点。可以很大程度的降低系统各个功能的耦合性，并且提高了功能内部的聚合性。耦合性的降低，提高了系统的伸展性，降低了开发的复杂度，提升开发效率，降低开发成本。这个是前端组件开发需要处理的难点。如今前端技术飞速发展，基本是基于三大框架开发的SPA（单页面应用）。本文主要是总结一下组件化开发思想重要点。组件化可以帮助解决前端结构的复用性问题，整个页面可以由不同的组件组合、嵌...

高璐 2019-08-02 16:09 评论0 收藏0
web前端学习方案

摘要：学习计划认识语义化的意义。这意味着可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。熟悉，理解响应式编程思想在根据官方文档学习的时候请优先理解它的思想。学习计划 HTML5 认识HTML5语义化的意义。熟悉HTML5新特性了解如何快速的加载HTML页面，以及完善用户体验如：阅读模式、无障碍设置，了解Canvas、Svg CS...

imccl 2019-08-29 17:01 评论0 收藏0