前端工程化的基本介绍

ops/2024/11/13 0:50:21/

文章目录

  • 一、概念
  • 二、前端工程化>前端工程化的细节
      • 模块化
      • 组件化
      • 规范化

一、概念

  • 工程化,可以理解为使用一些方式,去改良提高行业中现有的步骤、设计、应用方式。前端工程化>前端工程化,就是指对前端进行一些流程的标准化,让开发变得更有效率,且更好地做产品交付。
  • 一开始,网页页面并不复杂,只是提供一些简单的展示和交互的静态页面,甚至不需要后端。
  • 后来需要根据不同用户返回不同的页面信息,此时我们会用后端读取数据,配合一些模板引擎,在后端拼接好内容再返回,这就是所谓的服务端渲染(SSR)。
  • 再后来,页面变得非常复杂,于是出现了前后端分离,前端被单独拎了出来,专门写 html、css 和 js,变成了 单页面应用(SPA)。但复杂也带来了很多问题,比如多个脚本的执行时机不对、css 名冲突、文件过于臃肿、错误的缓存导致没能下载最新的资源,等前端复杂后出现的一系列问题。
  • 随着 Nodejs 的诞生,我们可以用 JS 去写前端工具了。为了解决上面这些问题,前端界出现了一大堆的工具和框架:Gulp、Angular、babel、Sass、React、Vue、Webpack、Yarn、TypeScript、ESLint、Docker、k8s 等等。
  • 一切都是为了让前端的开发更工程化,也就是 不停地改良前端项目的开发流程,让开发者能够更高效地开发、更好地进行团队协作、让代码的风格标准化、对资源做压缩以及懒加载、更好地交付部署等

二、前端工程化>前端工程化的细节

模块化

  • 模块化,指的是将代码功能做拆分,分成独立地单能相互依赖的片段。

1.1 JS 的模块化

  • JS 一开始的职责是给网页提供一些简单的交互,所以语法相对简单且不支持模块化。随着网页的复杂,发现原来的组织方式带来了很多问题,变得难以维护。
  • 于是 CommonJS、AMD、ES Module 等模块系统出现了。正统标准是 ES Module,通过 import 关键字引入模块,通过 export 导出模块。
  • JS 的模块化将代码做了拆分,解决了全局变量污染、依赖关系不清晰、多人协作不方便、脚本引入顺序、单元测试等问题。

1.2 CSS 的模块化

  • CSS 的第一个问题是比较难写,比如不支持选择器嵌套,对此我们可以用 CSS 预编译器(比如 Less、Sass、Stylus)去写一些更高级的语法,然后编译成 CSS。
  • 然后是就 命名冲突问题,一种旧的方案是 BEM,就是通过将 CSS 命名 在组件化的框架中,我们有很多方案,可以用 CSS in JS,也可以用 CSS Module,或者 Vue 特有的 CSS Scoped。

1.3 HTML 的模块化

  • html 通常是动态的,在服务端我们会使用模板引擎(template),将得到的数据注入到占位符中。在后端 Nodejs,我们可以用 pug、handlebars、ejs 等。
  • 前后端分离后,我们通常使用的是 Vue 的 template(类似 handlebars 语法)以及 React 的 JSX。

1.4 资源整合模块化

  • 不同类型的资源无法组织在一起,比如 JS 引擎能识别引入的 js 文件,但无法识别 css 文件。如果我们希望所有的资源都能组织再一起进行管理,要分别管理一个个不同类型的资源要方便地多。
  • 为了解决这个问题,webpack 诞生了。webpack 是一个模块打包器,能够将任何资源转换为 js 代码进行导入。比如图片,它可以先变成一个静态资源服务的一个资源,然后在 js 文件 import 的时候在转换为一个 url 字符串,或者直接就变成一个 base64 字符串。
  • 这些需要使用到一些 loader(加载器)。webpack 是一个框架,使用者需要根据需求,添加一些 loader,去识别不同的文件,转化成 JS 代码导入。
  • 此外还有 plugin(插件),在这整个流程中做一些处理,比如将导出的 JS 文件插入到 HTML 模板中,或是进行代码的压缩等等

组件化

  • 组件化是 UI 层面上的更细粒度的拆分,一种类似 div 等原生元素的 “自定义元素”。
  • 组件有自己的 HTML、CSS 和 JS,同时有自己的状态,并支持嵌入到其他组件中并接受外部的数据,可以进行复用。组件化可以看作是 UI 层组织方式的一种模块化。
  • 目前主流的 React 和 Vue 前端框架都是基于组件的。
  • 原本的以资源类型为单位进行组织的管理(所有 JS 文件放一个文件夹、CSS 同理),其实维护起来比较困难,也不好复用,组件化的构想是以视觉为单位进行拆分,做了结构、样式、脚本的组装,抽象出一个 “新的元素”。
  • 组件已经是前端开发的基石了,是一种比较合理的抽象。

规范化

  • 然后就是前端代码的规范。规范是很重要的,能让代码能够写得更容易更正确,避免一些不必要的错误。
  • 相关规范包括但不限于
    1. 目录结构规定。
    2. 代码风格(包括 JS、HTML、CSS)。
    3. 注释规范。
    4. commit message 规范。
    5. git 工作流规范。
    6. Code Review。
    7. 请求接口规范。

http://www.ppmy.cn/ops/29481.html

相关文章

vue 前端读取Excel文件并解析

前端读取Excel文件并解析 前端如何解释Excel呢 平时项目中对于Excel的导入解析是很常见的功能,一般都是放在后端执行;但是也有特殊的情况,偶尔也有要求说前端执行解析,判空,校验等,最后组装成后端接口想要的…

PCB概念(进程控制块)—— 操作系统(形象解释版)

在操作系统里,PCB就像是每个进程的小秘密日记。它记录了进程的所有私事,比如身份信息、运行状态、内存地址啦,CPU信息等,还有进程优先级之类的东西。 简单来说,操作系统用它来把握和控制所有进程的行踪,确…

vue中引入字体资源遇到的问题

font-face {font-family: "Effra-Regular";src: url("~/assets/fonts/Effra-Regular.woff"); }这种写法能加载字体,但是无法应用字体 font-face {font-family: "Effra-Regular";src: url("/assets/fonts/Effra-Regular.woff&qu…

CMUS狮身人面像(七)-Android 上的 PocketSphinx

本教程介绍了GitHub上提供的演示应用程序。 PocketSphinx Android 演示 为了运行演示应用程序,我们建议使用 Android Studio。您可以从官方下载页面下载Android Studio IDE和sdk 。 从 Android Studio 构建并运行 为了在 IDE 中获取演示,请选择从 VC…

LangChain 入门7 格式化输出

概述: LangChain 提供的格式化输出功能具有多个优势,这些优势在处理和分析由 AI 生成的内容时尤其有用: 结构化数据:格式化输出允许 AI 的回应以结构化的方式呈现,如 JSON 对象,这使得数据更易于解析和处理…

opencv t函数

在OpenCV中&#xff0c;t函数通常用于转置矩阵&#xff08;Transpose&#xff09;。这意味着矩阵的行和列互换位置。 在C中&#xff0c;使用OpenCV库进行矩阵转置的代码如下所示&#xff1a; #include <opencv2/opencv.hpp> #include <iostream>int main() {// 创…

Qt 信号槽中信号重名解决办法

1、类似与Qt4中的写法&#xff1a; 2、函数指针 3、泛型 connect(ui->combox, QOverload<int>::of(&QCombox::currentIndexChanged), this ,&mainwindow::onindexchange);

【toos】工具篇

1 通用的makefile 编写一个makefile&#xff0c;可以将其所在目录下的所有独立 .c 文件编译生成同名可执行文件。 src $(wildcard *.c) # 拿到所有*.c target $(patsubst %.c, %, $(src)) # 将src中所有%.c替换成%ALL:$(target)%:%.cgcc $< -o …