前端工程化、模块化、组件化

系统管理员 2021-09-19 02:48 663阅读 0赞

# 工程化 #

前端工程化是一种高层次思想而不是某种技术，所谓前端工程化就是将前端项目当成一项系统工程进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率提高的目的。而模块化和组件化是为工程化思想下相对较具体的开发方式，因此可以简单的认为模块化和组件化是工程化的表现形式。

**前端工程化分为三个大阶段**

*  技术选型
 *  构建优化
 *  模块化开发，组件化开发

# 模块化 #

模块化主要体现的是一种分而治之的思想。分而治之是软件工程的重要思想，是复杂系统开发和维护的基石。

**模块化的优势**

*  提高维护性
 *  提高代码复用率
 *  方便依赖关系的管理
 *  可以避免变量污染，命名冲突

**三种模块化规范**

**1. CommonJS**

根据 CommonJS 规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。

**2. AMD**

AMD 即 Asynchronous Module Definition，中文名是异步模块定义的意思。AMD规范通过 define 方法去定义模块，通过require方法去加载模块。RequireJS 实现了这种规范。

**3. CMD**

CMD 即 Common Module Definition 通用模块定义，是 SeaJS 在推广过程中对模块定义的规范化产出。

**模块化规范：** https://blog.csdn.net/fu983531588/article/details/89309242

# 组件化 #

*  页面上的每个独立的、可视/可交互区域视为一个组件
 *  每个组件对应一个工程目录,组件所需的各种资源都在这个目录下就近维护
 *  由于组件具有独立性，因此组件与组件之间可以 自由组合
 *  页面只不过是组件的容器，负责组合组件形成功能完整的界面
 *  当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换

组件化将页面视为一个容器，页面上各个独立部分例如：头部、导航、焦点图、侧边栏、底部等视为独立组件，不同的页面根据内容的需要,去盛放相关组件即可组成完整的页面。

**PS：** 模块化和组件化一个最直接的好处就是复用,同时我们也应该有一个理念,模块化和组件化除了复用之外还有就是分治,我们能够在不影响其他代码的情况下按需修改某一独立的模块或是组件,因此很多地方我们及时没有很强烈的复用需要也可以根据分治需求进行模块化或组件化开发。

发表评论取消回复

表情：

评论列表（有 0 条评论，663人围观）

还没有评论，来说两句吧...

相关阅读

相关浅谈前端工程化、模块化、组件化

什么是前端工程化、模块化、组件化？前端工程化工程化是一种思想而不是某种技术(当然为了实现工程化我们会用一些技术) 再用一句通俗的话来概括前端工程化:前端工程化就是

妖狐艹你老母/ 2023年06月01日 12:51/ 0 赞/ 28 阅读

相关 react中的组件/模块, 组件化/模块化

React中的组件/模块, 组件化/模块化 1、基本概念 1.1、什么组件？ > 1、一个应用/版块/页面中用于实现某个局部的功能(包括html, js, css

末蓝、/ 2022年11月19日 04:11/ 0 赞/ 238 阅读

相关组件、组件化与模块化

模块化：是从代码逻辑的角度进行划分的。方便代码分层开发，保证每个功能模块的职能单一；组件化：前端的组件化，是从 UI 界面的角度进行划分的，方便 UI

r囧r小猫/ 2022年10月02日 14:56/ 0 赞/ 300 阅读

相关【Vue.js 知识量化】组件化开发 + 前端模块化

Vue.js 组件化开发组件化认识组件化注册组件全局组件和局部组件父子组件组件数据

青旅半醒/ 2022年08月30日 05:19/ 0 赞/ 277 阅读

相关前端组件化思想

1.开篇先说说为什么要写这篇文章吧：不知从什么时候开始，大家相信前端摩尔定律：“每18个月，前端难度会增加一倍”。我并不完全认可这个数字的可靠性，但是这句话的本意我

港控/mmm°/ 2022年05月31日 14:11/ 0 赞/ 248 阅读

相关前端模块化

1、CommonJS 服务器端的Node.js 遵循CommonJS规范，该规范的核心思想是允许模块通过require方法来同步加载所要依赖的其他模块，然后通过exports

柔情只为你懂/ 2022年04月10日 01:47/ 0 赞/ 353 阅读

相关前端开发——模块化（css模块化开发）

掌握模块化开发的思想是我们进行模块化开发的基础。他有以下几部分组成： 1.css模块化 2.html模块化 3.js模块化 > 模块化开发的优势

ゝ一世哀愁。/ 2022年02月18日 09:15/ 0 赞/ 493 阅读

相关组件化和模块化总结

模块：主要是业务模块，单指业务。按照项目的业务拆分，例如，用户模块、首页模块、商城模块、电影模块等。组件：主要对功能的封装，一个功能就是一个组件，Io\\数据库\\网络都是

墨蓝/ 2021年11月11日 06:01/ 0 赞/ 343 阅读

相关 Vue 小实例 - 组件化、cli 工程化

1. 组件化（父子组件通信：父 - 子：props 数组子 - 父：子层触发事件，调用 $emit 触发父层对应自定义事件，可函数处理传参 / $event 获取）

妖狐艹你老母/ 2021年11月01日 06:34/ 0 赞/ 344 阅读

相关前端工程化、模块化、组件化

工程化前端工程化是一种高层次思想而不是某种技术，所谓前端工程化就是将前端项目当成一项系统工程进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开

系统管理员/ 2021年09月19日 02:48/ 0 赞/ 664 阅读