工程化

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

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

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

模块化

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

模块化的优势

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

三种模块化规范

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

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

京东java前后端联调_前端工程化、组件化实践JDM分享
前端技术原创文前端工程化.组件化实践JDM分享该文由孵化创新一部曾瑞文在研究院技术分享会的分享内容总结而成,主要讲解了团队创新的前端工程化.组件化的思想及实践应用. 为什么要搞前端框架? Java ...
了解前端工程化之组件化——Vue组件
首先我们需要知道什么是组件化开发? 前端工程化包含这么四个方针:模块化.组件化.规范化.自动化具体可以查看:了解前端工程化其中就有我们的组件化 ,它指的就是根据封装这么一个思想概念,将页面上可以重 ...
模块化组件化工程化_软件工程中的模块和软件组件
模块化组件化工程化 The module in software is a small part of the software that is responsible for performin ...
前端开发中组件化的优点
前端开发中组件化的优点解耦的思想,函数封装到组件内部执行模块化,代码清晰,易于维护,迭代更新复用性高屏蔽逻辑,可以迅速定位问题
面向接口编程实施模块化/组件化解耦，以友盟、极光等统计分析为例
模块化/组件化通过模块化/组件化组织代码,面向接口编程,尽可能做到高内聚.低耦合.重复用. 模块可分为多种类型,一般分为:基础库(日志打印.网络请求.图片加载等).三方包(微信登录.统计分析.消息推 ...
【学习日记2023.4.25】之前后端分离_前端工程化_Vue组件库Element_Vue路由_打包部署
文章目录 1. 前后台分离开发 1.1 前后台分离开发介绍 1.2 YAPI 1.2.1 YAPI介绍 1.2.2 接口文档管理 2. 前端工程化 2.1 前端工程化介绍 2.2 前端工程化入门 2. ...
前端为什么要组件化开发？
文章目录什么是前端模块化,组件化,工程化? 为什么要组件化? 组件化和模块化的区别插槽组件传值组件库结语什么是前端模块化,组件化,工程化? 前端模块化: 可以理解为一组自定义业务的抽象封装 ...
Android：项目模块化/组件化的架构之路（一）
文章目录前言推荐模块化需要做什么一.如何拆分项目二.模块之间的通信 1. 常用的通信方式 2. 改善通信方式 2.1 使用接口进行通信 2.2 如何对外暴露接口 2.3 使用EventBus ...
对前端工程化、模块化、组件化开发的理解
参考理解一: 提到前端往往很多人的映像就是入门简单,HTML.CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短 ...
理解前端组件化、模块化、工程化
什么是组件化.模块化.工程化? 组件化:把重复的代码提取出来合并成为一个个组件,组件最重要的就是复用,位于框架最底层,其他功能都依赖于组件,可供不同功能使用,独立性强.组件化更多关注UI部分,每个组件 ...

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

工程化

模块化

组件化

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

最新文章

热门文章