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

2023-11-20

什么是工程化

工程化是一种思想而不是某种特定的技术,当然我们在实现项目工程化的过程中,我们也会去使用一些技术。前端工程化是使用软件工程的技术和方法来对前端的开发流程、技术、工具等进行规范化、标准化,其主要目的为了提高效率和降低成本,即提高开发过程中的开发效率,减少不必要的重复工作时间。

目前,web业务日益复杂化和多元化,单页面应用和webApp风靡。而且前端的生态圈繁荣,各种框架,组件出现,使得前端发展迅速,快速开发已经成为了前端的一个标准。靠传统的前端三剑客 JavaScript、HTML、 CSS 以及传统的项目结构已经不能满足日益壮大的大型应用的需求,会带来开发效率、维护成本、代码可读性差等问题。这就要求我们以工程化的思想去看待一个前端项目而不再是直接撸起袖子开写页面,将前端项目当成一项系统工程去进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率和开发质量提高以及降低项目生产风险的目的。
 

如何工程化

页面组件化
代码模块化
代码质量管理 (QA): ESLint
代码编译: babel、less、sass、scss等
代码构建:webpack
项目国际化
代码版本管理:Git、SVN

什么是模块化

当应用的JS都以模块来编写时, 这个应用就是一个模块化的应用;

向外提供特定功能的文件, 可以做到按需引入,这就是模块化。

为何要模块化

随着业务逻辑增加,代码越来越多且复杂

模块化作用

复用代码, 简化代码的编写, 提高代码运行效率

什么是组件

从UI上拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元,是一个用来实现局部功能效果的代码和资源的集合

为什么要组件化?

一个界面的功能复杂时,组件化抽取,易维护易扩展。易复用。

组件化作用?

复用编码, 简化项目编码, 提高运行效率

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端的工程化、模块化和组件化 的相关文章

随机推荐

  • 关于Redis的事件回调解析以及docker中的配置

    基本概念 Redis的过期回调可以实现我们的redsi的key在过期的时候回调一些接口从而来实现项目中需要的一些功能 比如我们想在订单超时的时候进行关闭 可以用这个来进行一个简单的实现 当然实际的项目中能否这样使用我们暂且不做讨论 这里只是
  • word添加字体库

    1001 Fonts Free Fonts Baby 51044 free fonts in 28637 families Free licenses for commercial use Direct font downloads Mac
  • 一个数组有 N 个元素,求连续子数组的最大和(动态规划问题)

    该题题目如上 例如 1 2 1 连续的最大子数组为 2 1 和为3 题目要求我们输入第一个数为数组元素的个数 然后后面为我们需要输入的元素 遇到这一个题 我们首先可以这样考虑 设置一个sum和result sum是用来每次加新的元素 res
  • Angular-1.5.8文档翻译之$compile

    对照地址 https code angularjs org 1 5 8 docs api ng service compile compile是将一个DOM字符串或者一个DOM进行编译并返回一个模板链接函数 这个链接函数可以用于将scope
  • Google 在 ChatGPT 时代的生死之战:居然把 DeepMind 和 Google Brain 合并了

    今天一大早 6 点起来 居然看到 Google 将 DeepMind 和 Google Brain 合并为 Google DeepMind 了 Google and Alphabet CEO Sundar Pichai DeepMind 创
  • 计算机基础之组成原理

    计算机组成原理 一 计算机的基本硬件组成 CPU 内存 主板 I O 设备 显卡 二 计算机如何执行指令 计算机指令 CPU如何执行指令 CPU 内部处理过程 CPU 的寄存器 程序计数器 条件分支和循环机制 CPU 指令执行过程 内存 内
  • 编译micropython中的mpycross

    root charles VirtualBox media sf Linux micropython master make C mpy cross make Entering directory media sf Linux microp
  • MySQL——基础50题

    MySql数据库50题 准备工作 参考答案 use PraticeSql create table SC SId varchar 10 CId varchar 10 score decimal 18 1 insert into SC val
  • Freertos 在contexM0芯片上的移植

    1 freertos源码 官网下载地址 https www freertos org 下载LTS长期支持版本 2 在工程目录下新建FreeRTOS文件夹 将FreeRTOS 的源码添加到这个文件夹中 portable 文件夹中只需要复制 k
  • shared_ptr使用场景、陷阱、性能分析,使用建议

    1 std shared ptr使用场景 include
  • 【leetcode】1.两数之和

    力扣原题传送门 https leetcode cn problems two sum 目录 题解 代码链接 题解 class Solution public vector
  • 隐藏通知内容什么意思_原来华为手机隐藏5个技巧,难怪别人都说华为好用,涨知识了...

    阅读本文前 请您先点击上面
  • Kinect开发学习笔记之(追加)深度距离误差分析

    由于最近要研究kinect采集到的深度信息的一些统计特征 所以必须先对kinect深度信息做进一步的了解 这些了解包括kinect的深度值精度 深度值的具体代表的距离是指哪个距离以及kinect深度和颜色扫描范围等 经过查找资料可以解决这些
  • 开启电脑ssl协议的方法

    转自 微点阅读 https www weidianyuedu com 电脑ssl协议怎么开启 开启ssl协议的方法是什么 经近期实际操作了解到开启ssl协议一共需要6个步骤 很快即可完成 以下是开启电脑ssl协议的方法介绍 1 首先打开浏览
  • html src 参数,HTTP参数解析

    本文概述 在本节中 我们将讨论各种HTTP参数及其语法 例如 日期和时间格式 字符集等 这些参数用于在编写客户端或服务器的HTTP程序时构造请求和响应消息 HTTP的各种参数如下 HTTP版本 为了指示协议的版本 HTTP使用 编号方案 协
  • 办公网络上网行为管理规划

    办公网络上网行为管理规划是确保办公网络资源的合理利用和保障网络安全的重要措施 下面是办公网络上网行为管理规划的一般性步骤和原则 确立政策和准则 制定明确的上网行为管理政策和准则 明确员工在办公网络上的合规要求和行为规范 包括规定员工上网内容
  • 项目设计:基于YOLO目标检测算法的安全帽/口罩/汽车/行人/交通标志...检测

    本文将详细介绍YOLO目标检测算法 该算法支持各种目标检测 包括 安全帽 汽车 造价 交通标志 等 其他毕业设计题目推荐参考 毕业设计 电子 通信 计算机 物联网专业毕业设计选题参考 嵌入式linux 单片机STM32 web 图像 htt
  • 数据库难点知识

    索引 当表中有大量记录时 若要对表进行查询 第一种搜索信息方式是全表搜索 是将所有记录一一取出 和查询条件进行一一对比 然后返回满足条件的记录 这样做会消耗大量数据库系统时间 并造成大量磁盘I O操作 第二种就是在表中建立索引 然后在索引中
  • matlab通用操作界面窗口包括哪些,matlab作业题

    第一章 MATLAB环境 1 MATLAB通用操作界面窗口包括哪些 命令窗口 历史命令窗口 当前目录窗口 工作空间窗口各有哪些功能 答 MATLAB通用操作界面窗口包括 命令窗口 历史命令窗口 当前目录浏览器窗口 工作空间窗口 变量编辑器窗
  • 前端的工程化、模块化和组件化

    什么是工程化 工程化是一种思想而不是某种特定的技术 当然我们在实现项目工程化的过程中 我们也会去使用一些技术 前端工程化是使用软件工程的技术和方法来对前端的开发流程 技术 工具等进行规范化 标准化 其主要目的为了提高效率和降低成本 即提高开