浅谈前端工程化

2024-01-08 02:00:33

前言:
前端工程化的源动力- 为企业开发降本提效;
前端工程化是指将系统化的、规范的、可度量的方法应用于前端的开发、运营维护过程中去。它的意义:帮助前端工程进行技术选型、统一规范管理、测试、构建和部署等
前端工程化的范畴应该包含四化:

  1. 模块化
  2. 组件化
  3. 规范化
  4. 自动化

本文主要针对以上的四化展开简短的论述。旨在让大家简短了解一下概念

1. 模块化

模块化是一种思想或者叫规范。可以理解为代码功能的拆分,本质就是将一个个功能封装成一个独立的小模块,这个模块内部实现是私有的,只向向外提供接口与其他模块进行通信。
模块化的作用是

  1. 提高代码的复用性、可读性、可维护性;
  2. 解决了全局变量污染、命名冲突、繁琐的文件依赖的问题;

目前前端针对于 javascript ,主流模块化语法是 ES Module (import /export) 来实现的。
当然还有资源整合模块化工具- 例如 webpack 是一个模块打包工具,能将任何资源转换为 js 代码进行倒入,它需要使用一些加载器(loader)去识别不同的文件转化成 JS 代码导入。

2. 组件化

组件化可能更偏向于 前端 UI 功能,将一个大型程序拆分成多个相互独立的小组件,每个组件是一个特定的 UI 功能。作用和 模块化类似 :复用性、可维护性更高
这一块对于前端开发人员相对来说是最为熟悉的,尤其是使用过 Vue.js 开发的小伙伴。这里不再展开。

3. 规范化

我们可以将这一块理解为 团队内统一的风格,因为规范化的前提是团队内部成员达成的共识,并且按约定开展工作,提高工作效率。例如如下(不仅限于此)范畴:

  1. 项目目录结构;
  2. 命名规则(文件/变量/函数名称等);
  3. 代码风格(JS/html/css);
  4. 注释规范;
  5. 数据请求规范;
  6. git 协同规范;

帮助实现这些规范可以使用一些技术或者工具,比如:

  1. TypeScript 类型规范;
  2. ESLint 检测JS 代码的质量和风格;
  3. commitlint 等;

4. 自动化

这些偏向于工具类的东西了,比如:

  1. Vitest 测试用例
  2. 端到端测试
  3. 包管理工具、打包工具
  4. Jenkins 持续集成持续交付/部署工具等

文章来源:https://blog.csdn.net/u012764358/article/details/135385078
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。