前端工程化的基本介绍

文章目录

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

一、概念

  • 工程化,可以理解为使用一些方式,去改良提高行业中现有的步骤、设计、应用方式。前端工程化,就是指对前端进行一些流程的标准化,让开发变得更有效率,且更好地做产品交付。
  • 一开始,网页页面并不复杂,只是提供一些简单的展示和交互的静态页面,甚至不需要后端。
  • 后来需要根据不同用户返回不同的页面信息,此时我们会用后端读取数据,配合一些模板引擎,在后端拼接好内容再返回,这就是所谓的服务端渲染(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.mzph.cn/diannao/6688.shtml

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

相关文章

IDEA 算法要点和难点,实际案例应用,代码实例和解析

"IDEA" 全称是 "International Data Encryption Algorithm"(国际数据加密算法),它是一种对称密钥块加密算法。IDEA 是由瑞士联邦理工学院(ETH Zrich)的 Xuejia Lai 和 James L. Massey 在 1990 年提出的。该算法设计用于替代 DES(Data Encryption St…

关于位操作符的实际应用<C语言>

前言 位操作符在C语言初学阶段相对其他操作符来说,是一种难度比较大的操作符,且运用较少的一类操作符,但是位操作符并不是“一无是处”,合理运用的位操作符,在某些场景下可以优化算法,提高代码的执行效率&a…

Vue框架知识点表格总结

今年的就业形势是真的严峻,后端java的薪资直线下降,不仅薪资大幅下降,而且要求也提高了不少,很多后端java开发岗位,都要求会前端Vue框架以及一些其他前端框架。所以以后前后端都得熟练开发。以后前后端分离&#xff0c…

PyQt5:Qt Designer使用重载的自定义类提升控件

1,以QPushButton举例 2,右击需要提升的控件,选择【提升为...】 3,添加自定义类,不用管 .h 的后缀,不影响使用。 4,完成 5,说明:自定义类的:__init__()方法…

基于STC12C5A60S2系列1T 8051单片机的IIC通信的0.96寸4针OLED12864显示16行点x16列点字模的功能

基于STC12C5A60S2系列1T 8051单片机的IIC通信的0.96寸4针OLED12864显示16行点x16列点字模的功能 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍液晶显示器OLED12864简…

抖音直播间小风车怎么挂?直播间小风车跳转微信怎么开通!

抖音直播已经成为了一个非常受欢迎的直播平台,而在直播间引流也是用户非常关注的一个话题。而针对这个问题,抖音也提供了一种非常好用的小工具——小风车,可以帮助用户在直播间进行引流。那么,抖音直播间小风车怎么挂?…

记录几种排序算法

十种常见排序算法可以分类两大类别:比较类排序和非比较类排序。 常见的快速排序、归并排序、堆排序以及冒泡排序等都属于比较类排序算法。比较类排序是通过比较来决定元素间的相对次序,其时间复杂度不能突破 O(nlogn)。在冒泡排序之类的排序中&…

扩展学习|本体研究进展

文献来源: 王向前,张宝隆,李慧宗.本体研究综述[J].情报杂志,2016,35(06):163-170. 一、本体的定义 本体概念被引入人工智能、知识工程等领域后被赋予了新的含义。然而不同的专家学者对本体的理解不同,所给出的定义也有所差异。 人工智能领域的学者Neches(1991)等人对…

Java ~ Lock【目录】

一 Lock(锁) Lock(锁) 《Java ~ Lock【源码】》《Java ~ Lock【总结】》 未完待续…

一些水到渠成的困惑

一、纹波和噪声 什么是纹波?什么是噪声? 两者是怎么产生的? 有什么区别与联系? 在电路中怎么规避?什么样的电路设计? 1.1电源纹波到底是什么? 二、EMC、EMI、ESR 三、二极管、电容不一样的…

Docker Compose 部署若依前后端分离版

准备一台服务器 本次使用虚拟机,虚拟机系统 Ubuntu20.04,内存 4G,4核。 确保虚拟机能连接互联网。 Ubuntu20.04 安装 Docker 添加 Docker 的官方 GPG key: sudo apt-get update sudo apt-get install ca-certificates curl su…

Spring Boot应用部署 - Tomcat容器替换为Jetty容器

Jetty和Tomcat容器对比 Tomcat和Jetty都是一种Servlet引擎,他们都支持标准的servlet规范和JavaEE的规范。 Jetty更轻量级。这是相对Tomcat而言的。 Jetty更灵活。 Jetty更满足公有云的分布式环境的需求,而Tomcat更符合企业级环境。 Tomcat容器替换为…

初始面相对象

初始面向对象 类和对象的关系 类:对对象向上抽取出像的部分、公共的部分以此形成类,类就相当于一个模版。 对象:在某个模版下的具体的产物可以理解为对象,对象就是一个一个具体的实例,就相当于这个模版下具体的产品&…

RabbitMQ之生产批量发送

为什么要用生产批量发送? 批量发送消息,可以提高MQ发送性能。但是 RabbitMQ 并没有提供了批量发送消息的 API 接口,使用 spring-amqp 的 BatchingRabbitTemplate 实现批量能力。 SimpleBatchingStrategy 发送策略满足以下规则会进行发送: ba…

学习【Java反射】这一篇就够了

反射 1. 什么是反射2. 反射的原理3. 使用案例4. 应用场景 1. 什么是反射 Java反射是指在运行时动态地获取类的信息,并可以通过该信息来操作类或对象。 通过反射,我们可以在运行时获取类的字段、方法、构造函数等信息,并能够动态地创建对象、…

JAVA基础JSP之JavaBean模式

JavaBean模式 1 JavaBean简介及设计原则 【JavaBean简介】符合某种特定的规范的Java类,使用Javabean的好处是解决代码重复编写,减少代码冗余,功能区分明确,提高了代码的维护性。[S1] 1.for循环 2.jdbc中的dao模式 【Javabean…

微信小程序进阶之路:项目管理与分包加载实战指南

微信小程序进阶之路:项目管理与分包加载实战指南 在微信小程序的开发海洋中,随着项目的日益复杂,如何高效管理项目结构和优化加载性能成为每位开发者必修课。本文专为“小白”开发者设计,将深入浅出地讲解项目管理的基本概念、分…

梅大(龙)高速周边地形

最近广东高速的事故很受关注,我下载了这个高速的地形数据。查看了一下高速周围的地形情况。确实地形很险要,开车还是不要太快!尤其南方的路基不稳!这样险要的地形很危险! 高速周围的地形情况 梅大(龙&…

eNSP-动态路由(ospf协议)

一、拓扑结构搭建 二、主机配置 pc1 pc2 三、路由器配置 1.AR2配置 <Huawei>sys #进入系统视图 [Huawei]int g0/0/0 #进入接口 [Huawei-GigabitEthernet0/0/0]ip address 192.168.0.2 24 #设置ip地址 [Huawei-GigabitEthernet0/0/0]q #返回上一级 [Huawei]int g0/0/1 …

关于 Vue.js 双向数据绑定基本实现认知

写在前面 很早的一篇博客&#xff0c;整理了部分&#xff0c;蹭假期整理完博文内容涉及:双向数据绑定 实现方式简单介绍基于发布订阅、数据劫持的双向数据绑定两种不同实现(ES5/ES6) Demo&#xff0c;以及代码简单分析Object.defineProperty && Proxy API 介绍以及特性…