前端架构中的工程化和模块化，组件化，规范化的理解

最新推荐文章于 2024-07-08 00:44:03 发布

王爷的大房子

最新推荐文章于 2024-07-08 00:44:03 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/chenlongsheng/p/10368697.html

架构的目的：提高效率和质量

合理的架构应该是怎么样的：合理的架构应该是模块化，工程化，会翻话和组件化。

1：工程化：

转载于:https://www.cnblogs.com/chenlongsheng/p/10368697.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

王爷的大房子

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端工程化和模块化

jgujgu的博客

03-15

1462

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

doiido的专栏

07-31

919

3.2.'Gulp' 很好的解决了 Grunt 中构建速度慢的问题，因为它是基于内存去实现的，也就是说它对于文件的处理环节都是在内存当中完成的，相对于磁盘读写速度自然就快了很多。优点：避免变量污染，命名冲突；3.1.'Grunt'由于它的工作过程是基于临时文件去实现的，所以它的构建速度会相对比较慢，且处理的环节越多，文件的读写次数越多。组件化将页面看作为一个容器,页面上各个独立部分（头部、导航、焦点图、侧边栏、底部）等视为独立组件,不同的页面根据内容的需要,去放相关组件就可组成完整的页面。

参与评论您还未登录，请先登录后发表或查看评论

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

weixin_44490109的博客

07-28

2249

目录前端的工程化、模块化和组件化一、工程化1、为什么要以工程化的思想来看待前端项目？2、那我们又该怎样去做到前端的工程化呢？二、模块化1、模块2、为什么要模块化？3、作用三、组件化1、组件2、为什么要组件化？3、作用前端的工程化、模块化和组件化 个人理解，不一定对，欢迎指正一、工程化 工程化是一种思想而不是某种特定的技术，当然我们在实现项目工程化的过程中，我们也会去使用一些技术。前端工程化是使用软件工程的技术和方法来对前端的开发流程、技术、工具等进行规范化、标准化，其主要目的为了提高效率和降低成

一文理解前端工程化、模块化和组件化

Cchen的博客

07-08

852

就像你计划整个聚会的流程，从邀请客人、准备食物、布置场地到确保一切顺利进行。这涉及到很多细节，你需要确保每个环节都井然有序。

前端工程化-模块化机制

natsu-cc的博客

06-20

368

前言：

前端开发前端工程化实践指南：模块化组件化自动化提升开发效率与代码质量

07-17

内容概要：前端工程化旨在将前端开发中的项目管理、构建、测试、部署等环节进行规范化和自动化。它包含四大特点：模块化，即将代码拆分为独立模块以实现复用并避免全局变量污染；组件化，将UI拆分为可复用组件以简化...

read-books-前端工程化实战资源

07-19

"read-books-前端工程化实战资源"资源包涵盖了前端开发中的工程化概念，包括模块化、组件化、规范化、自动化构建、版本控制以及持续集成和部署等核心内容。它提供了一系列书籍，旨在指导开发者掌握提升开发效率、...

前端开发基于Vue3与React的前端工程化体系构建：从项目初始化到自动化部署全流程详解

最新发布

08-03

在模块化管理上，介绍了ES Modules、CommonJS、Monorepo架构的使用方法，实战项目中融入了组件库按需引入和样式隔离等实践。代码质量保障方面，通过ESLint、Prettier、Stylelint等工具确保代码规范，利用Git Hooks...

fed-e-task-02-01-前端工程化实战资源

07-19

它通常涉及模块化、组件化、规范化、自动化测试、持续集成、包管理等多个方面。在本文档中，“fed-e-task-02-01-前端工程化实战资源”这一标题提示我们，该资源是围绕前端工程化主题进行实践的资料集合。其中，...

前端工程化——模块化概述

赵忠洋的博客

06-20

393

模块化概述——「模块化」只是思想最主流的代码整合方式，安装功能不同划分不同模块。 模块化演变过程 模块化规范常用的模块化打包工具基于模块化工具构建现代WEB应用打包工具的优化技巧 模块化的演进过程 Stage 1 - 文件划分方式完全依靠约定 ├── index.html ├── module-01.js └── module-02.js 通过scriptsrc属性引入模块污染全局作用域，容易产生命名冲突模块成员可以随意修改无法管理模块依赖关系 Stage 2 - 命名空间方式

浅析前端工程化中的一部曲——模块化

forever__fish的博客

02-20

1658

模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程，每个模块完成特定的子功能，所有的模块按某种方法组装起来，成为一个整体，从而完成整个系统所要求的的功能。块的内部数据与实现是私有的，只是向外部暴露了一些接口和方法与外部其他模块通信。CommonJS 规范中规定每个文件就是一个独立的模块，有自己的作用域，模块的变量、函数、类都是私有的，对其他文件不可见。在服务器端，模块的加载是运行时同步加载的；在浏览器端，模块需要提前编译打包处理。

前端工程化浅谈和模块化方案深耕

Ningdz的博客

12-10

832

前端工程化

前端开发之如何理解前端工程化思想

lee前端技术站

08-11

1004

谈到前端工程化问题，总觉得这是一个很大到问题，同时也是一个当前比较热聊到一个前端所面临的问题。其实从前后端分离，前端独立出来，到现在的前端迅速发展，经历的时间并不长，尽管当前有像vue，angular，react这样的框架供开发者使用，也大大提高了效率，但似乎离前端刀耕火种的年代并没有多远。所以前端工程化也就应运而生。什么是前端工程化？前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的

对前端工程化、模块化、组件化开发的理解

itBellah的博客

08-18

2833

提到前端往往很多人的映像就是入门简单,HTML、CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短的时间里写出炫酷的页面效果,然而入门简单并不意味着前端这碗饭很好吃,做惯了切图、布局、扣特效的前端新同学在向前发展的路上越来越觉得吃力,而没有任何编程思想和软件开发基础很多人对前端工程化、组件化、模块化、MVC这些“高大上”的词汇云里雾里。本文用最简单的语言介绍一下我对工程化、组件化、模块化的理解,面向的对象是前端新手,所

前端工程化——模块化开发

Jelly的博客

01-20

674

【文章内容来自拉勾教育大前端高薪训练营课程】

前端工程\模块化

Java.慈祥

01-30

2344

Node中的模块概念其本质就是对应一个个。

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

weixin_30498807的博客

09-12

219

前端往往很多人的映像就是入门简单,HTML、CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短的时间里写出炫酷的页面效果,然而入门简单并不意味着前端这碗饭很好吃,做惯了切图、布局、扣特效的前端新同学在向前发展的路上越来越觉得吃力,而作为前端从业人员我们需要有编程思想和软件开发基础。提到前端往往很多人的...

前端工程化：（模块化和webpack）

illion booked

06-04

264

1.模块化的分类 A.浏览器端的模块化 1).AMD(Asynchronous Module Definition,异步模块定义) 代表产品为：Require.js 2).CMD(Common Module Definition,通用模块定义) 代表产品为：Sea.js B.服务器端的模块化 服务器端的模块化规范是使用CommonJS规范： 1).使用require引入其他模块或者包 2).使用exports或者module.exports导出模块成员 3).一个文件就是一个模块，都拥有独立的作用域 C.E

前端工程化、模块化、组件化开发的理解

03-01

<think>嗯，用户让我介绍一下前端工程化、模块化、组件化开发的理解。我需要先理清这三个概念各自的定义和它们之间的关系。首先，前端工程化可能是指将软件工程的方法应用到前端开发中，以提高效率和维护性。模块化可能是指将代码分割成独立的模块，便于管理和复用。组件化可能更侧重于UI部分，把界面拆分成可复用的组件。不过这些概念有时候会有交叉，需要更仔细地区分。接下来，我应该分别详细解释每个概念。前端工程化可能包括构建工具、自动化测试、持续集成等。模块化可能涉及CommonJS、ES6模块等标准。组件化可能和React、Vue这样的框架有关，它们提倡组件驱动的开发模式。我需要确保每个部分的解释清晰，并且举例子说明，比如用Webpack作为工程化的工具，用ES6模块说明模块化，用React组件说明组件化。还要注意用户可能的背景。他们可能是前端开发者，或者刚入门的学习者，所以需要避免过于专业的术语，用易懂的语言解释。同时，用户可能想知道这三个概念如何一起工作，所以最后应该总结它们之间的关系，比如工程化提供了基础设施，模块化和组件化在此基础上优化代码结构。另外，用户要求使用中文回答，所以需要确保语言流畅，没有语法错误。要检查是否有遗漏的重要点，比如模块化的好处，如依赖管理、作用域隔离；组件化的优点，如复用性、可维护性。可能还需要提到历史背景，比如前端从简单的脚本到复杂应用的演变，推动了这些概念的发展。最后，确保结构清晰，分点说明每个概念，再总结联系。避免内容重复，保持逻辑连贯。可能需要举实际的开发场景例子，帮助用户理解这些概念如何应用在实际项目中。</think>以下是关于前端工程化、模块化、组件化开发的通俗解释及相互关系： --- ### 一、前端工程化 **核心目标**：用工程思维解决开发效率、协作规范和质量控制问题 **典型场景**： 1. 开发阶段：使用脚手架（如Vue CLI）快速初始化项目结构 2. 编码阶段：通过Webpack/Vite实现代码转译、打包优化 3. 协作阶段：使用ESLint统一代码风格，Prettier自动格式化 4. 部署阶段：通过CI/CD流水线实现自动化测试和发布 **技术栈示例**： $$ \text{工程化} = \text{Webpack} + \text{Babel} + \text{Git} + \text{Jest} + \text{Docker} $$ --- ### 二、模块化开发 **核心特征**： 1. 文件即模块：每个`.js`文件都是独立作用域 2. 依赖声明：通过`import/export`显式管理依赖关系 3. 按需加载：动态导入实现代码分割 **演进历程**： ```markdown IIFE（立即执行函数） → CommonJS（Node.js） → AMD（RequireJS） → ES Module（现代标准） ``` **实际案例**： ```javascript // utils/math.js export const sum = (a, b) => a + b; // app.js import { sum } from './utils/math.js'; console.log(sum(2, 3)); // 输出5 ``` --- ### 三、组件化开发 **设计原则**： 1. 原子化设计：按钮/输入框→表单组件→页面模块→完整应用 2. 单向数据流：父组件 → Props → 子组件 → 事件回调 3. 高内聚低耦合：每个组件独立管理自身状态和样式 **框架实现对比**： | | Vue单文件组件 | React函数组件 | |----------|-----------------------------|---------------------------| | 模板语法 | `<template>`+指令系统 | JSX语法 | | 状态管理 | `ref()`/`reactive()` | `useState()`/`useReducer()`| | 生命周期 | `onMounted()` | `useEffect()` | --- ### 四、三者的协同关系 1. **工程化是基础**：为模块化/组件化提供构建工具链支持 2. **模块化解耦逻辑**：将业务代码拆分为可维护的独立单元 3. **组件化封装UI**：通过组合模块构建可视化界面 **协同示例**： ```mermaid graph TD A[工程化] --> B(Webpack处理模块依赖) A --> C(Babel转换ES6+语法) B --> D[模块化业务逻辑] C --> E[组件化UI实现] D --> F[完整应用] E --> F ``` --- ### 五、现代开发模式采用`Monorepo`架构： $$ \text{项目结构} = \frac{\text{共享模块包}}{\text{核心库}} + \frac{\text{业务组件库}}{\text{UI系统}} + \frac{\text{应用层}}{\text{具体项目}} $$ 这种架构通过工程化工具链，将模块化开发的代码复用性和组件化开发的界面一致性有机结合，最终实现高效的前端开发体系。