当前位置: 首页 > news >正文

前端工程化需要知道的一些知识

## 前端的概念
    前端开发的产出是直接面向用户的
        软技能:用户体验(性能)
        编程技能:
            css: 
                综合实践能力、常见兼容hack
            html:
                遵循w3c规范的语义化结构
            js:

        硬技能:
            数据结构、算法、抽象能力、架构能力、工程化思维


    大前端(纵向、nodejs)、泛前端(横向\react native)


## 前端工程化的意义
一系列规范和流程及集合
一种可演化、可扩展的服务,服务的目标是解决前端开发及后端协作开发过程中的难点和痛点问题
工具是前端工程化的实现媒介、规范是工程化的指导方针,工作流程是工程化的外在表现形式以及约束规范的载体

编程规范、持续的架构设计 -> 质量、效率

## 内容
    脚手架
        初始化项目(即用即弃)yeoman
    发开
        本地服务器(nodejs + express + middleware)
        HMR (runtime runtime server) 
        livereload 
        mock 
            SSR
        webpack-dev-middleware

    构建 webpack rollup gulp 
        打包
            babel
            loader
            postCSS
            less
            sass
        资源定位
            CDN、反向注入html

        模块依赖关系


        缓存策略
            强制缓存策略
            协商缓存策略

        fis
            sprite 项目强绑定

    测试
        单元测试、集成测试、仿真环境
    工作流

        持续集成、持续交付
        gitflow与版本管理
        webhook与自动构建

    部署
        速度、协作、安全

        自动化容器化部署、灰度发布、增量更新(保留多个版本,有利于回滚)


 

相关文章:

前端工程化需要知道的一些知识

## 前端的概念 前端开发的产出是直接面向用户的 软技能:用户体验(性能) 编程技能: css: 综合实践能力、常见兼容hack html: 遵循w3c规范的语义化结…...

默认路由配置

默认路由: 在末节路由器上使用。(末节路由器是前往其他网络只有一条路可以走的路由器) 默认路由被称为最后的关卡,也就是静态路由不可用并且动态路由也不可用,最后就会选择默认路由。有时在末节路由器上写静态路由时…...

Annotorious入门教程:图片注释工具

本文简介 最近有工友问我前端怎么给图片做标注。使用 Fabric.js 或者 Konva.js 等库确实可以实现,但我又好奇有没有专门做图片标注的工具呢? 在网上搜了一下发现 Annotorious 可以实现这个功能。Annotorious 提供了图片注释和标注功能,而且…...

一台服务器是否能够安装多个SSL证书?

在今天的互联网世界中,网络安全是至关重要的,而SSL证书是为了保护网络通信安全而设计的加密协议。然而,对于一台服务器是否能够安装多个SSL证书这个问题,仍然存在一些疑问。本文将探讨这个问题,并提供一些相关的解析和…...

如何使用UDP打洞进行内网穿透

内网穿透是一种将局域网中的设备暴露到互联网上的技术,UDP打洞是内网穿透的一种方法。它允许您通过家庭网络中的NAT(网络地址转换)设备访问位于不同网络的设备,例如家庭服务器或物联网设备。本文将指导您如何使用UDP打洞实现内网穿…...

如何滴水不漏的学完C语言?

如何滴水不漏的学完C语言? 学习C语言需要掌握的知识点确实非常广泛。如果你觉得学校教学中所涉及的内容有所欠缺,可以有很多其他方式进行补充学习。最近很多小伙伴找我,说想要一些C语言资料,然后我根据自己从业十年经验&#xff…...

数据库深入浅出,数据库介绍,SQL介绍,DDL、DML、DQL、TCL介绍

一、基础知识: 1.数据库基础知识 数据(Data):文本信息(字母、数字、符号等)、音频、视频、图片等; 数据库(DataBase):存储数据的仓库,本质文件,以文件的形式将数据保存到电脑磁盘中 数据库管理系统(DBMS)&…...

拓世大模型 | 立足行业所需,发力终端,缔造智能无限可能

蒸汽机的发明为人类工业革命揭开序幕,引领了近现代产业变革。众所周知,而今AI技术的革命性突破,站在了时代舞台的中心,特别是大模型的崛起,无疑是第四次产业革命的焦点,它的地位可与当年的“蒸汽机”相提并…...

NEFU数字图像处理(3)图像分割

一、图像分割的基本概念 1.1专有名词 前景和背景 在图像分割中,我们通常需要将图像分为前景和背景两个部分。前景是指图像中我们感兴趣、要分割出来的部分,背景是指和前景不相关的部分。例如,对于一张人物照片,人物就是前景&…...

图论问题建模和floodfill算法

目录 引入:leetcode695.岛屿的最大面积 分析与转换 一维二维转换 四联通 完整代码解答: 1)显示的创建图解决问题的代码 2)不显示的创建图解决此问题的代码 floodfill算法 定义 引入:leetcode695.岛屿的最大面…...

MySQL - 库的操作

目录 1.库的操作1.1创建数据库1.2创建数据库案例 2.字符集和校验规则3.操纵数据库4.备份和恢复5.查看连接情况 1.库的操作 1.1创建数据库 语法: CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [, create_specification] ...] create_specifica…...

多次kerberos认证服务超时

调整 /var/kerberos/krb5kdc/kdc.conf 文件,有则修改,无则添加 [kdcdefaults] kdc_tcp_listen_backlog 7调整 /etc/krb5.conf [dbmodules] disable_last_success true调整 /etc/sysconfig/krb5kdc KRB5KDC_ARGS‘-w 48’ #增大kdc的进程数量生效上述配…...

Vuex源码-各原理简单总结

1,简单总结 Vuex就是一个构造函数,他拥有install方法和Store类这两个属性。在vue初始化调用new Vue的时候,将store作为参数传入,然后调用Vue.use()实际是调用install方法将store这个实例挂载到全局,从而可以保证全局只…...

vcpkg 使用 cmake 编译C/C++工程代码时指定使用静态库链接编译

参考文献: CMake 项目中的 vcpkg | Microsoft Learn c - Using static Boost libraries with vcpkg and CMake - Stack Overflow Vcpkg updates: Static linking is now available - C Team Blog (microsoft.com) microsoft/vcpkg: C Library Manager for Windo…...

FlinkCDC系列:数据同步对部分字段的处理,只更新部分字段

在flinkCDC源数据配置中,只对表中的部分字段关注,通过监控部分字段进行数据更新或者不更新,对数据进行同步。主要通过以下两个参数: column.exclude.list 默认: 空字符串 一个可选的、以逗号分隔的正则表达式列表,与…...

Linux 包操作 (rpm)

目录 1. rpm 包1.1. 提取和安装 rpm 包1.2. 查看一个 rpm 包中的文件安装到那里去 1. rpm 包 rpm --version1.1. 提取和安装 rpm 包 使用以下命令来解压 rpm 包: rpm2cpio package.rpm | cpio -idmv其中, package.rpm 是你要解压的 rpm 包的文件名。这个命令将会将 rpm 包解…...

Docker中OceanBase挂载过后,删除再启动无限重启的解决办法

ob-compose.yml文件如下: version: 3 services:oceanbase1:image: oceanbase/oceanbase-ce:latestcontainer_name: oceanbase1hostname: oceanbase1ports:- 2881:2881restart: alwaysprivileged: truevolumes:#- //d/obdata/ob:/root/ob#- //d/obdata/obd:/root/.o…...

react中的forwardRef 和memo的区别?

文章目录 前言介绍forwardRefmemo适用场景优点缺点后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏:前端面试 🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错…...

偶数矩阵判断【C语言作业】

题目 若一个布尔矩阵所有行和所有列的和都是偶数&#xff0c;则称为偶数矩阵。请编写一个程序&#xff0c;判断一个布尔矩阵是否是偶数矩阵。 要求&#xff1a; &#xff08;1&#xff09;输入:首先输入一个正整数n(n<100),代表该矩阵的大小&#xff0c;接下来是n行n列的矩…...

stable-diffusion 电商领域prompt测评集合

和GhostReivew一个思路&#xff0c;还是从比较好的图片或者是civitai上找一些热门的prompt&#xff0c;从小红书上也找到了不少的prompt&#xff0c;lexica.art上也有不少&#xff0c;主要是为了电商场景的一些测评&#xff1a; 小红书、civitai、Lexica、Liblib.ai、 depth o…...

Nunchaku FLUX.1 CustomV3问题解决:提示词怎么写?参数怎么调?一篇搞定

Nunchaku FLUX.1 CustomV3问题解决&#xff1a;提示词怎么写&#xff1f;参数怎么调&#xff1f;一篇搞定 你是不是也遇到过这种情况&#xff1a;兴冲冲地打开了Nunchaku FLUX.1 CustomV3&#xff0c;想生成一张美美的吉卜力风格插画&#xff0c;结果出来的图片要么“货不对板…...

无需安装jupyter notebook,在快马平台5分钟搭建你的第一个数据分析原型

今天想和大家分享一个快速搭建数据分析原型的经验。作为一个经常需要验证想法的数据分析师&#xff0c;最头疼的就是每次换电脑或重装系统后配置Jupyter Notebook环境的过程。最近发现了一个超省心的解决方案&#xff0c;不用本地安装就能直接开搞数据分析。 为什么选择云端Ju…...

记录一次 反射引起的Metaspace OOM 的完整排查

一、问题背景线上某个 Spring Boot 服务偶发出现&#xff1a;java.lang.OutOfMemoryError: MetaspaceJVM 参数中已经限制&#xff1a;-XX:MetaspaceSize512m -XX:MaxMetaspaceSize512m但监控显示&#xff1a;Metaspace used ≈ 370MB Metaspace committed ≈ 508MB看起来仍…...

ClickHouse连接避坑指南:Python开发者常遇到的5个问题及解决方案

ClickHouse连接避坑指南&#xff1a;Python开发者常遇到的5个问题及解决方案 当Python开发者初次尝试与ClickHouse建立连接时&#xff0c;往往会遇到各种意料之外的障碍。这些看似简单的连接问题&#xff0c;实际上可能隐藏着深层次的配置陷阱或性能瓶颈。本文将深入剖析五个最…...

超越GUI:用Tcl命令流高效编辑Tessent DftSpecification的三种进阶玩法

超越GUI&#xff1a;用Tcl命令流高效编辑Tessent DftSpecification的三种进阶玩法 在大型SoC项目中&#xff0c;频繁修改IJTAG网络结构是每位资深DFT工程师的日常。当设计迭代进入深水区&#xff0c;图形界面操作和手动文本编辑的效率瓶颈会愈发明显——每次增减SIB、调整TDR位…...

Android Studio 高版本兼容低版本项目配置

AndroidStudio开发工具高版本兼容低版本项目配置&#xff1a;1、 JDK 配置&#xff1a;gradle.properties 文件中指定jdk 版本&#xff1a;org.gradle.java.homeD\:\\ProgramFiles\\JDK\\jdk-11.0.262 配置Gradle 编译版本&#xff1a;3. 显示所有Gradle task 列表设置完成后&a…...

3大技术突破重构macOS鼠标体验:Mac Mouse Fix深度解析

3大技术突破重构macOS鼠标体验&#xff1a;Mac Mouse Fix深度解析 【免费下载链接】mac-mouse-fix Mac Mouse Fix - Make Your $10 Mouse Better Than an Apple Trackpad! 项目地址: https://gitcode.com/GitHub_Trending/ma/mac-mouse-fix 核心痛点分析&#xff1a;mac…...

Qwen2-VL-2B-Instruct实战教程:Text-Text语义距离计算在合同比对中的应用

Qwen2-VL-2B-Instruct实战教程&#xff1a;Text-Text语义距离计算在合同比对中的应用 1. 引言&#xff1a;当合同审查遇上AI语义理解 想象一下这个场景&#xff1a;你手头有两份合同&#xff0c;一份是标准模板&#xff0c;另一份是客户发来的修改版。你需要快速找出两份合同…...

Sketch Measure: 设计标注自动化的创新实践

Sketch Measure: 设计标注自动化的创新实践 【免费下载链接】sketch-measure Make it a fun to create spec for developers and teammates 项目地址: https://gitcode.com/gh_mirrors/sk/sketch-measure 在数字化产品开发流程中&#xff0c;设计稿到代码实现的转化始终…...

iOS 版本nethack如何更换图形包-iNetHack2

这个iNetHack2这个应该我都没有找到设置按钮。后来无意中在贴吧中看到的。原来它的设置竟然在iOS的系统设置之中&#xff0c;是我少见多怪了&#xff0c;这可能是我见过的App 第1个在系统设置中设置的。UI中的Tileset 设置成Tiles32的界面风格就与nethack官方的UI一致了。...