<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[前端产品工程师]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/u014744118</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; u014744118]]></copyright><item><title><![CDATA[Spring boot ]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/148553433</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/148553433</guid><author>u014744118</author><pubDate>Tue, 10 Jun 2025 09:29:39 +0800</pubDate><description><![CDATA[Spring boot ]]></description><category></category></item><item><title><![CDATA[Web3.0技术栈简介]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/121925726</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/121925726</guid><author>u014744118</author><pubDate>Tue, 14 Dec 2021 13:57:47 +0800</pubDate><description><![CDATA[L4：技术栈顶层，参与者主要是普通用户（如同今天普通用户在浏览器前端和网页互动一样）用户们在这一层可以和单个或多个区块链（应用等）互动。


协议可扩展的用户界面（"像浏览器一样"），用户用来直接与区块链互动的程序，而不需要知道如何让编程和实现细节：案例有Status、MetaMask或MyCrypto。

L3：人类可读语言和库的层，在这一层，开发人员和程序员们可以适当抽象，并进行程序开发。这一层包括可扩展协议的API和语言 -：有各种语言可以用来开发应用程序，如Solidity和Vyper（E.....]]></description><category></category></item><item><title><![CDATA[深入浅出FE（十七）输入URL之后发生了什么]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/88784060</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/88784060</guid><author>u014744118</author><pubDate>Wed, 22 Sep 2021 10:16:13 +0800</pubDate><description><![CDATA[React早期的优化都是停留于JS层面（vdom的 create/diff），诸如减少组件的复杂度（Stateless），减少向下diff的规模(SCU)，减少diff的成本(immutable.js)，当然，也有例外，比如针对老式的IE的LazyDOMTree。 到React16，则升级到浏览器渲染机制层面, 在patch上取得了突破。众所周知，浏览器是单线程。想象一下，如果有两个线程，一...]]></description><category></category></item><item><title><![CDATA[CSS3 @Media 媒体查询]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/118766649</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/118766649</guid><author>u014744118</author><pubDate>Wed, 22 Sep 2021 10:10:29 +0800</pubDate><description><![CDATA[/*大型屏幕pc 超大屏*/
    @media screen and (min-width:1200px){
      #content {
        color: #f00;
        background: #000;
      }
    }
    /*1200&gt;=pc&gt;=992 大屏，字体红色，背景黑色*/
    @media screen and (min-width:992...]]></description><category></category></item><item><title><![CDATA[Spring Boot 系列学习教程]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/119844169</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/119844169</guid><author>u014744118</author><pubDate>Sat, 21 Aug 2021 20:51:44 +0800</pubDate><description><![CDATA[Spring Boot 是由 Pivotal 团队提供的全新框架，其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程。

1、Spring Boot 中文索引

2、youtube springDeveloper

3、

推荐博客

纯洁的微笑-Spring Boot系列文章
	林祥纤-从零开始学Spring Boot
	Mkyong-Spring Boot教程（国外）
	baeldung-Spring Boot教程（国外）
	liaokailin的专栏-Spring Boot实战
	cat]]></description><category></category></item><item><title><![CDATA[WebContainers简介：在浏览器中原生运行Node.js（译文）]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/119744252</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/119744252</guid><author>u014744118</author><pubDate>Mon, 16 Aug 2021 23:05:10 +0800</pubDate><description><![CDATA[本篇文章来自StackBlitzblog-埃里克·西蒙斯2021 年 5 月 20 日


嗨！我们是StackBlitz，一个专门为网络开发量身定制的在线IDE。在本周的谷歌I/O主题演讲中，你可能会看到我们偷看。

今天，我们很高兴地宣布一项新技术，我们一直在与Next.js和Google的团队合作。



几年前，我们意识到网络正在走向一个关键的转折点。WebAssembly和新功能API的出现似乎使编写一个功能强大的基于WebAssembly的操作系统成为可能，完全在浏览器中运行Node.js。..]]></description><category></category></item><item><title><![CDATA[深入浅出FE（十六）深入浅出YAML]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/111831090</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/111831090</guid><author>u014744118</author><pubDate>Mon, 28 Dec 2020 10:47:04 +0800</pubDate><description><![CDATA[YAML 并不是一种新奇的语言，YAML 首次发表于 2001 年，距离现在已经过去差不多 20 个年头。YAML 虽然不如 JSON、XML 之类的语言流行，应用也没有那么广泛，但是 YAML 也有它的优势。

一、简介

YAML是一种较为人性化的数据序列化语言，可以配合目前大多数编程语言使用。

YAML 的语法比较简洁直观，特点是使用空格来表达层次结构，其最大优势在于数据结构方面的表达，所以 YAML 更多应用于编写配置文件，其文件一般以.yml为后缀。

YAML目前的官方全称为 “YAM...]]></description><category></category></item><item><title><![CDATA[深入浅出FE（十五）深入浅出React全家桶单元测试]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/110317695</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/110317695</guid><author>u014744118</author><pubDate>Sun, 29 Nov 2020 16:39:39 +0800</pubDate><description><![CDATA[转载自Web 前端单元测试到底要怎么写？看这一篇就够了

随着 Web 应用的复杂程度越来越高，很多公司越来越重视前端单元测试。我们看到的大多数教程都会讲单元测试的重要性、一些有代表性的测试框架 api 怎么使用，但在实际项目中单元测试要怎么下手？测试用例应该包含哪些具体内容呢？

本文从一个真实的应用场景出发，从设计模式、代码结构来分析单元测试应该包含哪些内容，具体测试用例怎么写，希望看到的童鞋都能有所收获。
完整的代码内容在这里（各位童鞋觉得好帮忙去给个哈）。

项目用到的技术框架

该项目采用...]]></description><category></category></item><item><title><![CDATA[深入浅出FE（十四）深入浅出websocket]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/109529511</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/109529511</guid><author>u014744118</author><pubDate>Sun, 29 Nov 2020 15:42:46 +0800</pubDate><description><![CDATA[引言

Websocket是一个持久化的协议 协议分为ws（80端口）协议 和wss（443端口）协议。

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久]]></description><category></category></item><item><title><![CDATA[深入浅出FE（十三）前端nexus3 Yarn离线部署npm仓库]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/107743750</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/107743750</guid><author>u014744118</author><pubDate>Sun, 02 Aug 2020 13:51:50 +0800</pubDate><description><![CDATA[网上的很多教程都是服务器可以连接外网的前提下撰写的，但看过无数教程还没有一个专门针对服务器离线环境如何部署一个npm仓库。

一、前提：

服务器离线、仓库离线

二、nexus3 npm仓库搭建

Nexus Repository Manager 中添加 npm

如果点击：





这里有三个类型的npm选项：







附上某歌翻译：

Proxying npm Registries

为了减少开发人员和CI服务器的重复下载量并提高下载速度，您应该对托管在https://registry....]]></description><category></category></item><item><title><![CDATA[深入浅出FE（十二）浅析websocket]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/106911897</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/106911897</guid><author>u014744118</author><pubDate>Mon, 22 Jun 2020 23:26:52 +0800</pubDate><description><![CDATA[目录



一、为什么要有websocket？

二、关于websocket

三、websocket的请求响应过程

四、为什么WebSocket连接可以实现全双工通信而HTTP连接不行呢？

五、WebSocket 的用法

六、服务端的实现

七、websocket的踩坑

一、为什么要有websocket？

websocket的出现是为了弥补http协议服务端无法向客户端主动推送消息。所以以前实现这种场景都是通过用轮询或者Comet。轮询是指浏览器通过JavaScript启动一个定时器，然后以固.]]></description><category></category></item><item><title><![CDATA[深入浅出FE（十一）报表系统调研]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/106652302</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/106652302</guid><author>u014744118</author><pubDate>Tue, 09 Jun 2020 22:25:48 +0800</pubDate><description><![CDATA[报表系统开发初探

2020.6.7

总体思路

1、自研 使用web端可拖拽特性直接生成线上报表，优点是自定义样式，缺点是维护和开发工作量较大。

2、开源系统二次开发 （1）基于BIRT报表或者iReport + JasperReports组合开发。优点是开发和操作较简单，缺点是不支持复杂报表和权限控制，维护性较差。 （2）基于Airbnb 的 Superset，Redash，Metabase等框架做二次开发。优点是界面设计友好，缺点是扩展性较差。

3、付费 如帆软和思迈特报表系统，优点是支持丰富的]]></description><category></category></item><item><title><![CDATA[深入浅出FE（十）Serverless初探]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/106460370</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/106460370</guid><author>u014744118</author><pubDate>Sun, 31 May 2020 20:22:16 +0800</pubDate><description><![CDATA[目录

一、Serverless 简介

二、Serverless 的主要特点

1、事件驱动

三、Serverless 服务中的前端解决方案架构图

框架（Framework）

Web IDE

命令行工具

四、基于 Serverless 的前端开发模式

五、Serverless 的应用场景

WEB 及移动后端

消息处理

对象存储文件处理

物联网

运维及集成

六、参考资料

一、Serverless 简介

根据 CNCF 的定义，Serverless 是指构建和运行不需要服务器管理的]]></description><category></category></item><item><title><![CDATA[深入浅出FE（九）DNS和HTTP劫持问题]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/105696465</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/105696465</guid><author>u014744118</author><pubDate>Tue, 26 May 2020 11:19:01 +0800</pubDate><description><![CDATA[一、DNS劫持和HTTP劫持

DNS劫持表象：你输入一个google.com网址，出来的是百度的页面

HTTP劫持表象：访问着github的页面，右下角出现了一个格格不入的广告弹窗

如何判断所用的dns 有没有受到劫持，最简单的测试办法：用nslookup 去查询一个不存在的域名，如果返回一个IP，通过浏览打开这个IP会发现是一个广告页，那么这个DNS 已经被劫持了，如果返回** serve...]]></description><category></category></item><item><title><![CDATA[前端开发人员的十个安全建议，做了以后老板给你点赞（转载）]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/105780283</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/105780283</guid><author>u014744118</author><pubDate>Tue, 26 May 2020 11:08:44 +0800</pubDate><description><![CDATA[“前端外文精选”公众号翻译

来源：https://levelup.gitconnected.com/

作者：Matt Maribojoc

Web安全是前端开发人员经常忽略的主题。当我们评估网站的质量时，我们通常会查看性能，SEO友好性和可访问性等指标，而网站抵御恶意攻击的能力却常常被忽略。即使敏感的用户数据存储在服务器端，后端开发人员也必须采取重要措施来保护服务器，但最终，保护数据的责任在后...]]></description><category></category></item><item><title><![CDATA[webpck深入浅出教程（四）如何写一个plugin]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/105622475</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/105622475</guid><author>u014744118</author><pubDate>Sun, 19 Apr 2020 21:37:11 +0800</pubDate><description><![CDATA[一、什么是plugin？

在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决loader无法实现的其他事。

二、plugin和loader的区别是什么...]]></description><category></category></item><item><title><![CDATA[深入浅出FE（八）微前端初探]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/105616365</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/105616365</guid><author>u014744118</author><pubDate>Sun, 19 Apr 2020 21:11:32 +0800</pubDate><description><![CDATA[一. 什么是微前端？


Techniques, strategies and recipes for building amodern web appwithmultiple teamsusingdifferent JavaScript frameworks. — Micro Frontends

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法...]]></description><category></category></item><item><title><![CDATA[webpck深入浅出教程（三）webpack源码分析]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/105316477</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/105316477</guid><author>u014744118</author><pubDate>Sun, 05 Apr 2020 14:53:54 +0800</pubDate><description><![CDATA[webpack入口文件：

执行npm命令后，查看node_modules\.bin目录下是否存在webpack.sh或者webpack.cmd文件，如果存在就执行，如果不存在就抛出错误。

webpack实际入口文件是：

node_modules\webpack\bin\webpack.js

一、分析入口文件webpack.js


#!/usr/bin/env node

// @ts-i...]]></description><category></category></item><item><title><![CDATA[给定宽度，不用height画出正方形]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/103855814</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/103855814</guid><author>u014744118</author><pubDate>Sun, 29 Mar 2020 01:28:20 +0800</pubDate><description><![CDATA[body{

width:100%;

font-size:0;

text-align:center;

}

div{

display:inline-block;

width:20%;

position:relative;

&amp;:before{

content:"";...]]></description><category></category></item><item><title><![CDATA[CSS（九）垂直居中详解]]></title><link>https://blog.youkuaiyun.com/u014744118/article/details/105022960</link><guid>https://blog.youkuaiyun.com/u014744118/article/details/105022960</guid><author>u014744118</author><pubDate>Sat, 28 Mar 2020 17:11:59 +0800</pubDate><description><![CDATA[一般情况下有的需要问水平居中和垂直居中.

常见的水平居中和垂直居中有：

水平居中：

行内元素： text-align: center;
	块级元素：margin: 0 auto;
	absolute+ transform;
	flex+ justify-content: center;
垂直居中：

line-height: height;
	absolute+ transform;
	fl...]]></description><category></category></item></channel></rss>