什么是前端工程化?

工程化介绍

什么是前端工程化?

前端工程化是一种思想,而不是某种技术。主要目的是为了提高效率和降低成本,也就是说在开发的过程中可以提高开发效率,减少不必要的重复性工作等。

tip 现实生活举例
建房子谁不会呢?请几个工人一上来就开始弄,在建筑的过程中缺了材料就叫个工人去买,发现工期快到了来不及了,就马上多请几个人回来弄。客户又说这里改改,那里改改。最终却是可以把房子建起来,但是很容易出现问题,出现问题了又是谁的责任。

这种最多也只能称为建房子,而建筑工程却不一样,按照工程的流程应该是这样的,首先会画图纸、确定房子的结构、确定用料和预算以及工期,另外需要用到什么工种以及多少工人等等,一般都是先打地基在建框架再填充墙体,这样捡起来的房子才会更加的稳固。

出现问题也可以快速定位到源头和负责人。这里只是举个例子,我也没有做过建筑工程。

借鉴上面的工程化思想,可以得出来我们前端工程化需要具备模块化、组件化、规范化、自动化四个方面。

模块化

模块化就是把一个大的文件,拆分成多个互相依赖的小文件,按照一个一个模块来划分。在前端领域上就是把 JS 复杂的逻辑代码拆分成多个简单的模块,在组合成一个功能。

组件化

跟模块化很类似,在前端领域上,例如页面就可以看成是一个大的组件,这个大的组件可以拆分成多个中型组件,中型组件还可以继续在拆分成多个小型组件。

组件化 ≠ 模块化。模块化只是在文件层面上,对代码和资源进行拆分。组件化是在设计层面上,对 UI 视图部分的拆分。

规范化

在项目规划初期制定的好坏对于后期的开发有一定影响。

包含以下规范:

  • 目录结构的制定
  • 编码规范
  • 前后端接口规范
  • 文档规范
  • 组件管理
  • Git 分支管理
  • Commit 描述规范
  • 定期 codeReview
  • 视觉图标规范

自动化

也就是简单重复的工作交给机器来做,自动化也就是有很多自动化工具代替我们来完成,例如持续集成、自动化构建、自动化部署、自动化测试等等。

原文链接:菜园前端

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/12967.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Verilog语法学习——LV7_求两个数的差值

LV7_求两个数的差值 题目来源于牛客网 [牛客网在线编程_Verilog篇_Verilog快速入门 (nowcoder.com)](https://www.nowcoder.com/exam/oj?page1&tabVerilog篇&topicId301) 题目 描述 根据输入信号a,b的大小关系,求解两个数的差值:输入信号a,b…

【飞书】飞书导出md文档 | 飞书markdown文档导出 | 解决飞书只能导出pdf word

一、飞书导出markdown github地址:https://github.com/Wsine/feishu2md 这是一个下载飞书文档为 Markdown 文件的工具,使用 Go 语言实现。 请看这里:招募有需求和有兴趣的开发者,共同探讨开发维护,有兴趣请联系。 二、…

MySQL数据库分库分表备份(shell脚本)

创建目录 mkdir /server/scripts 一、使用脚本实现分库备份 1、创建脚本并编写 [rootlocalhost scripts]# vim bak_db_v1.sh #!/bin/bash ######################################### # File Name:bak_db_v1.sh # Version: V1.0 # Author:Shen QL # Email:17702390000163.co…

【Ajax】Ajax 简介

Ajax 简介 Ajax(Asynchronous JavaScript and XML)是一种用于创建交互式网页应用程序的技术。它通过使用 JavaScript、XML(现在更常用的是 JSON)和异步通信来实现在不重新加载整个页面的情况下与服务器进行数据交换。 Ajax 的优点…

Go重写Redis中间件 - GO实现TCP服务器

GO实现TCP服务器 首先新建一个项目go-redis,将config和lib包放到项目中,config.go用来解析配置,比如端口、功能、DB数;lib包有两个文件夹,分别是logger和sync,其中logger.go是一个日志框架,sync包中的bool.go包装了atomic操作,因为atomic原生没有bool类型,所以将uint…

干翻Dubbo系列第四篇:Dubbo3第一个应用程序细节补充

前言 不从恶人的计谋,不站罪人的道路,不坐亵慢人的座位,惟喜爱耶和华的律法,昼夜思想,这人便为有福!他要像一棵树栽在溪水旁,按时候结果子,叶子也不枯干。凡他所做的尽都顺利。 如…

短视频矩阵系统源码开发流程​

一、视频矩阵系统源码开发流程分为以下几个步骤: 四、技术开发说明: 产品原型PRD需求文档产品交互流程图部署方式说明完整源代码源码编译方式说明三方框架和SDK使用情况说明和代码位置平台操作文档程序架构文档 一、抖音SEO矩阵系统源码开发流程分为以…

【Linux】进程通信 — 共享内存

文章目录 📖 前言1. 共享内存2. 创建共享内存2.1 ftok()创建key值:2.2 shmget()创建共享内存:2.3 ipcs指令:2.4 shmctl()接口:2.5 shmat()/shmdt()接口:2.6 共享内存没有访问控制:2.7 通过管道对共享内存进…

Node.js写接口连接MySQL数据库

1.新建app.js粘贴以下代码 2.npm init 初始化 3.npm i 安装依赖 4.npm i mysql 5.npm i express 6. node app.js 启动接口 const express require(express) const mysql require(mysql) const bodyParser require(body-parser) const app express() const port 3006 const…

SpringSecurity的编写流程

目录 主要流程: 具体实现: 主要流程: (特殊)1、如果你需要返回json格式字符串,那么你首先需要编写相应的处理器,如果不需要则可直接写配置类 2、编写配置类 3、编写认证授权相关的mapper…

Python进行数据分析(详细教程)

1.为什么选择Python进行数据分析? Python是一门动态的、面向对象的脚本语言,同时也是一门简约,通俗易懂的编程语言。Python入门简单,代码可读性强,一段好的Python代码,阅读起来像是在读一篇外语文章。Pyth…

保护 TDengine 查询性能——3.0 如何大幅降低乱序数据干扰?

在时序数据库(Time Series Database)场景下,乱序数据的定义为:“时间戳(timestamp)不按照递增顺序到达数据库的数据。”虽然它的定义很简单,但时序数据库需要有相应的处理逻辑来保证数据存储时的…

JavaScript进阶

一、函数 1.函数 greetWorld(); // Output: Hello, World!function greetWorld() {console.log(Hello, World!); } Another way to define a function is to use a function expression. To define a function inside an expression, we can use the function keyword. In a…

Jenkins搭建最简教程

纠结了一小会儿,到底要不要写这个,最终还是决定简单记录一下,因为Jenkins搭建实在是太简单了,虽然也有坑,但是坑主要在找稳定的版本上。 先学一个简称,LTS (Long Term Support) 属实是长见识了&#xff0c…

docker 搭建jenkins

1、拉取镜像 docker pull jenkins/jenkins:2.4162、创建文件夹 mkdir -p /home/jenkins_mount chmod 777 /home/jenkins_mount3、运行并构建容器 docker run --restartalways -d -p 10240:8080 -p 10241:50000 -v /home/jenkins_mount:/var/jenkins_home -v /etc/localtime:…

如何选择台式还是便携式多参数水质检测仪呢

选择台式还是便携式多参数水质检测仪主要取决于具体的使用需求和场景。 1.便携式多参数水质检测仪适用于需要在不同地点进行水质检测的情况,例如户外采样、实地调查等。它具有小巧轻便的特点,方便携带和操作,适合需要频繁移动或需要灵活使用的…

【LeetCode】152.乘积最大子数组

题目 给你一个整数数组 nums ,请你找出数组中乘积最大的非空连续子数组(该子数组中至少包含一个数字),并返回该子数组所对应的乘积。 测试用例的答案是一个 32-位 整数。 子数组 是数组的连续子序列。 示例 1: 输入: nums […

前端框架学习-基础前后端分离

前端知识栈 前端三要素:HTML、CSS、JS HTML 是前端的一个结构层,HTML相当于一个房子的框架,可类比于毛坯房只有一个结构。CSS 是前端的一个样式层,有了CSS的装饰,相当于房子有了装修。JS 是前端的一个行为层&#xff…

如何维护你的电脑:提升性能和延长使用寿命

如何维护你的电脑:提升性能和延长使用寿命 😇博主简介:我是一名正在攻读研究生学位的人工智能专业学生,我可以为计算机、人工智能相关本科生和研究生提供排忧解惑的服务。如果您有任何问题或困惑,欢迎随时来交流哦&…

AWVS 15.6 使用教程

目录 介绍 版本 AWVS具有以下特点和功能: 功能介绍: Dashboard功能: Targets功能: Scans功能: Vulnerabilities功能: Reports功能: Users功能: Scan Profiles功能&#x…