- 博客(73)
- 收藏
- 关注
RSS订阅原创 我是如何从 Java 工程师转型成为前端工程师的
前端作为比较新的技术岗位，涉及范围广泛，市面上也没有成体系的、适用于所有人的学习方法。这篇文章，将分享一下我转型成为前端工程师的经历，以及我在学习前端开发过程中，遇到的问题和总结出来的一些经验，希望对你有所启发。前端工程师的技能要求先看一下前端工程师需要掌握哪些技能。综合大、中、小企业的前端工程师技能需求，实际上前端工程师的职能包含以下职业中的 1 种或多种：网页开发工程师网页设计师（UI）用户体验工程师（UE）最重要的职能是网页开发，包括小程序、APP 等跨端应用界面的开发，虽然它们实现
2022-05-09 16:00:48
2212
2
原创 前端组件化开发实践总结
自从 2010 年第一份工作接触了前后端半分离的开发方式之后，在后面的这些年里，对前端的组件化开发有了更全面一点的认识，组件化在我们的前端开发中，对提高开发效率、代码的可维护性和可复用性有很大帮助，甚至对跟设计师沟通的效率和企业的品牌形象都有着深刻的影响。这篇文章就把我在开发中总结的一些组件化开发经验分享一下。示例中的所有代码都是伪代码，你可以按照实际情况应用到 React 或 Vue 的项目中。前端组件化发展历史在讨论组件化开发之前，我们先看看前端组件化开发的发展历史。网页开发刚起步时，并没有『前端』
2021-10-13 12:55:43
7008
9
原创 2 行 JS 代码实现页面横向滚动特效
在前端这个无奇不有的世界里，有些网站不是正常垂直滚动的，而是横向滚动的：那么在没法把鼠标滚轮横过来的前提下（苹果除外），能否实现网页横向滚动呢？我们来写代码试试。先看一下最终效果，这里我用鼠标的滚轮垂直滚动，页面是横向滚动的。要实现这个功能，只需要一点点的 JS 代码。编写 HTML 结构先看一下 HTML 结构，很简单，就是三个模拟全屏页面的 div，class 都是 page，然后放在一个 class 名为 container 的 div 容器中：<main> <di
2021-06-15 16:48:03
6196
原创 使用 font-display 优化 web 字体加载速度
在编写网站的时候，或多或少都会用到一些网络上的字体，CSS 3 中虽然加入了对 Web Fonts（网络字体）的支持，但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下，在 Web Fonts 加载时，使用该字体的地方会显示空白，直到字体下载完成之后才会显示，这时通过改变 CSS 中的 font-display 属性，就可以避免这个问题。什么是 Web Fonts在介绍 font-display 之前，先了解一下什么是 Web Fonts。在以前使用 CSS 指定字体时
2021-04-02 18:05:42
1525
1
原创 如何把“蚂蚁呀嘿”换脸特效用在前端 WebRTC 视频通话中
因为疫情的原因，线上视频会议软件异军突起，成为了在家办公的主要沟通渠道。而最近抖音上“蚂蚁呀嘿”恶搞换脸的小视频也突然火了起来，那我就想了想能不能在视频会议的时候换张脸活跃下气氛？在 Github 上一番搜寻之后发现还真有办法，有一个开源的 Python 人工智能换脸的库，那正好趁着这个机会研究一下前端 WebRTC 实现视频通话功能，外加换脸操作。先看一下效果吧：因为有涉及到一点点的后台，所以项目分成了两部分，一个是用于存放前端代码的 frontend 项目和存放后端代码的 backend 项目：项
2021-03-15 12:11:24
8129
15
原创 JavaScript 游戏开发：手把手实现碰撞物理引擎
目录基础结构绘制小球移动小球重构代码碰撞检测边界碰撞向量的基本操作碰撞处理动量守恒定律动能守恒定律非弹性碰撞重力总结年前我看到合成大西瓜小游戏火了，想到之前从来没有研究过游戏方面的开发，这次就想趁着这个机会看看 JavaScript 游戏开发，从原生角度上如何实现游戏里的物理特性，例如运动、碰撞。虽然之前研究过物理相关的动画库，但是我打算试试不用框架编写一个简单的 JavaScript 物理引擎，实现小球的碰撞效果。为什么不用现成的游戏库呢？因为我觉得在了解底层的实现原理之后，才能更有效的理解框架上的概
2021-02-26 22:44:46
29665
56
原创 让微信 8.0 「裂开」「炸弹」的特效代码来了
微信 8.0 更新的一大特色就是支持动画表情，如果发送的消息只有一个内置的表情图标，这个表情会有一段简单的动画，一些特殊的表情还有全屏特效，例如烟花表情有全屏放烟花的特效，炸弹表情有爆炸动画并且消息和头像也会随之震动。本着作为前端工程师的职业精神，我就想看看能不能实现一个类似的特效。折腾许久之后，做出来的效果如下：项目的核心是使用到了 lottie 动画库。Lottie 是 Airbnb 出品的、全平台（Web、Android、IOS、React Native）的动画库，它的特点在于能够直接播放使用 A
2021-01-27 22:46:37
68884
116
原创 5个 JavaScript 怪异行为及其原因
如果你用 JavaScript 写过项目或者参加过面试，那一定遇到过不少令人匪夷所思的问题。JavaScript 早期的规范不统一，也没有严格的标准，再加上它的语法灵活多样，有些看起来就不正确的代码却能正常执行，一些看起来符合逻辑的代码，运行结果却相差十万八千里。这些问题在日常开发中经常会导致 BUG，更重要的是，很多面试官会把它们拿出来当考验咱们 JS 工程师的能力。那么这篇文章就总结了 5 个 JavaScript 比较坑的问题，以及它们出现的原因和解决方法。1、可选分号问题：function f
2020-12-19 20:39:51
1343
1
原创 1024：程序员，你的身体还好吗？
又到一年一度的 10 月 24 日程序员节了，按百度百科的定义，这一天的意义是拒绝加班：百度百科：1024程序员节是广大程序员的共同节日。1024是2的十次方，二进制计数的基本计量单位之一。针对程序员经常周末加班与工作日熬夜的情况，部分互联网机构倡议每年的10月24日为1024程序员节，在这一天建议程序员拒绝加班。然而反观现实中程序员的工作与生活，这一天的意义真的达到了吗？从几何时，程序员成了加班、996 的代名词，从以前业务做不完偶尔加班变成了现在的常态，不得不说一句俗话：这是时代的进步还是倒退？
2020-10-24 14:02:51
1836
2
原创 鸿蒙 OS：使用 JavaScript 开发 Todo App UI 界面
距离鸿蒙 OS 2.0 发布已经过去一些日子了，看到鸿蒙系统强大的设备共享能力，我觉得未来它一定能够成为主流的操作系统。在利用了分布式系统的优势之后，多个设备间可以共享应用程序界面和数据，并且对于开发者，也可以使用一套代码编写应用，就可以在多种设备终端上运行。一开始我并没有太关注鸿蒙系统，以为它只能使用 Java 开发应用，跟前端好像没啥关系，但是看了开发文档后，发现 UI 部分既支持纯 JavaScript 开发，也支持纯 Java 开发，还可以 Java 跟 JavaScript 混合开发。鸿蒙应用的
2020-09-19 22:38:08
31014
27
原创 当你还在纠结学哪个技术时，就已经错失了进步的机会
目录分析没有职业方向想一劳永逸缺乏自信解决方案优势更好的应对职业风险产生大局意识增加财富总结你是不是在面对市面上众多的技术的时候，不知道选择哪个才能对自己的职业和未来发展有所帮助？有这样的想法是正常的，因为随着科学的发展，现在的编程技术已经到了百花齐放的地步了。从编程语言上，你可以选择 Java、JavaScript、Go、PHP，还有基于它们的框架等等。从客户端上，可以选择移动端，web 端，还有后端等等。从行业领域上，还可以选择数据科学、金融工程或商业智能分析等等。那么这么多的技术和领域，
2020-09-11 23:01:31
1536
原创 一文搞懂 CSS 盒子模型：概念、种类、布局方式、边距塌陷全都在这里了
在用 CSS 布局的时候，经常会有各种怪异的情况出现，有些元素就是不在它应该在的位置上，也显示不成该有的大小，页面乱七八糟。这些其实还是因为 CSS 的布局基础没有掌握牢固且不够熟练。今天就深入了解一下 CSS 最基础也是最重要的部分 - 盒子模型，分别会讲到盒子的概念、布局方式、box-sizing 属性、特殊的盒子模型以及边距塌陷，相信你掌握了它们之后就能解决一大半的布局问题。目录盒子模型盒子的类型content-boxborder-box特殊的盒子-替换元素盒子的布局方式外部显示类型块级盒子行内盒子
2020-08-24 12:00:04
1638
原创 自学前端，学到什么程度就可以找工作了？
目录个人目标大厂创业公司公司要求技术能力基础框架软技能沟通能力STAR 框架原理回答框架总结好多人都想知道，前端工程师到底要需要掌握什么技能、到什么程度，才能去找工作？最简单的答案：把 html、css、 js 基础学扎实，再掌握vue或react前端框架之一就可以了。真的是这样吗？技术上看似乎没问题，但是找工作不只要从技术上下手，还要从个人目标和公司的招人标准综合进行考量。那么接下来，我们从这几个方面来分析一下，前端工程师找工作的必要条件。个人目标现在我们的教育并没有太着重于个人目标和职业规
2020-08-15 12:37:04
8401
4
原创 TypeScript 入门看这一篇就够了！
目录这里写目录标题简介什么是 TypeScript为什么用 TypeScript编写和运行 TS 代码Node TSCDenotsconfig.json基本语法基本类型隐式显式组合类型类型别名对象类型(interface)接口作为函数参数类型数组类型泛型tuple（元组）总结简介我第一次使用 TypeScript 是16年在读研的时候，学校的算法课是使用 TypeScript 实现的。当时只知道 TypeScript 是 Angular 开发的必备语言，没想到还能这么通用。后来在写作业的时候，发现 Ty
2020-06-09 22:13:58
1613
原创 给前端工程师看的后端科普
目录简介应用的构成前后端分离的演化后端的作用简单来讲...大规模后端应用数据、算法工程师各司其职简介前端工程师了解后端的功能和作用之后，能更好的和后端工程师进行沟通，减少沟通成本，另外也有助于向全栈工程师方向发展。在开始之前，先回顾一下应用的构成：应用的构成一个完整的应用通常包括前端和后端两个部分。前端是直接与用户打交道的部分，通常指的是网页，采用 HTML/CSS/JS 语言编写，运行在用户自己电脑的浏览器上。后端则是运行在远程的服务器上，用来收集和处理用户传来的数据，然后把结果再传给前端，展现给
2020-05-12 21:38:45
1056
原创 5个技巧助你成为 CSS 大神
目录简介样式调整action布局调整响应式布局action形状、特效的拆解与合并action页面组件设计原则actionCSS 模块化学习actions一些学习资源简介作为一名前端工程师，经常在写完 HTML 以后，才觉得真正的噩梦要开始了，啊，写 CSS 的时候，面对满屏乱飞的组件，真想手动给他们挪到该在位置上……都说 CSS 很难掌握，最愁给页面编写样式，其实都是因为还没有形成一个对 C...
2020-04-29 21:59:22
1218
原创 一文搞懂 CSS Flexbox 布局 - 2020年最新版
目录开启 Flexbox 布局对齐方式justify-contentflex-startcenterflex-endspace-betweenspace-evenlyspace-aroundalign-itemsstretchflex-startcenterflex-endbaselinealign-content子元素覆盖对齐方式排列方式空间占比Flex-basis缩放flex-growflex...
2020-04-06 16:25:24
1442
原创 制作渐变背景生成器 - React State和Event教程
Hello, 今天教你写一个渐变背景生成器。我会用这个例子来解释 react 的 state，状态管理，还有事件处理。你将学到的这个小工具提供了两个颜色选择器，分别可以选择渐变的两个颜色，渐变的角度是 75 度，线性渐变。另外还有一个重置按钮可以把渐变恢复成初始值。效果演示：源码：Github - React-Examples示例和视频State 简介首先看一下什么是 state，...
2020-03-21 13:46:59
951
原创 用一组美丽的按钮来掌握 React Props 用法
目录你将学到的创建 React 工程创建 Button 组件编写 Button 默认样式用 Props 给 Button 不同的样式classnames 组合样式线框样式显示所有按钮样式你在写 HTML 页面的时候肯定知道，html 标签的属性都是固定的，比如 a 标签的 href, input 里边的 type 属性。这些属性都是内置的，不方便扩展和复用。而用 React 创建组件的话，可以给...
2020-03-18 13:22:22
782
原创 你为什么应该学习React?
Hello! 今天来带你走进 React 的大门！我第一次听说 React 是我在美国读研的时候，室友选了 web programming 这节课，然后遇到了关于 react 的好多问题，就是总也配置不好。我看他那个时候 React 的配置特别麻烦，要引入一堆依赖，像 bower, babel 等等… 还有文档写的也不清楚。有一次他刚开始做一个作业，问了我一个问题，大概是有一个组件显示不出来，结果...
2020-03-14 17:30:18
725
原创 超简单！使用 Docusaurus 搭建个人博客（二）
目录发布到 github部署Zeit发布到 zeit部署到国内购买域名购买服务器备案配置主机和域名配置 github actions发布博客B 站视频 - 点击传送如果你看了上期视频的话，那么你应该学会了怎么在本地搭建一个 docusaurus 博客，但是你不能只在本地来看这个博客吧，得让全世界来欣赏你的杰作，所以说咱们得把这个博客部署到服务器上。部署有两种方式：部署到国外，是免费的。部...
2020-03-13 22:15:54
3350
7
原创 超简单！使用 Docusaurus 搭建个人博客（一）
目录历史迷茫博客有啥用？Docusaurus 简介安装运行环境安装 docusaurus运行 docusaurus项目结构配置为博客模式发表第一篇博客B 站视频 - 点击传送历史迷茫我以前总也找不到一个满意的博客系统，wordpress 这个程序又大，然后配置也不方便。占用的服务器的资源也多。我就想有没有一个又简单又快速的博客平台，后来发现了一些静态的网站生成器，像 hexo 这种，但是发现...
2020-03-05 20:52:56
12519
7
原创 11个前端工程师必备的网站
好多小伙伴有疑问，就是说有哪些值得去关注的前端网站，我知道大家可能都苦于找不到一些有价值的,还有值得信赖的网站去学一些比较货真价实的前端技术。生怕有哪些水文或者是一些乱七八糟的网站，把咱们的这个知识给误导了。这里呢我准备了几个我经常关注的一些网站，一部分是国外的，然后有一部分是国内的，因为国内的好多的都是质量参差不齐，但国外的话普遍的质量比较高（事实如此）。不过呢，咱们国内的也有一些比较好的平...
2020-03-02 12:38:21
7261
4
原创 想成为前端大神秒杀群雄？收下这份2020年最新前端学习路线！
B 站视频版：点击传送这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线，我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线。先从初级前端工程师所需的技能开始，然后一路升级到高级工程师该掌握的技能，层层相扣，让大家在工作中能游刃有余。最后附上我自己是如何从一个后端工程师转成了前端工程师^^。希望我的经历能对大家有帮助。俗话说知己知彼百战不殆，要成...
2020-03-01 18:21:02
24972
68
原创 从零实现一个网络科技公司官网 - HTML CSS 前端实战
【持续更新】视频地址：点此观看本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSS Grid布局，支持响应式，有流畅过渡和展现动画。...
2020-02-05 18:22:56
1152
原创 利用React 自定义Hooks实现业务逻辑复用实例
目录简介适用读者请求数据的例子需求定义 States加载 Posts加载 Todos展示数据问题用自定义 Hooks 改造useRequest加载 Posts 和 Todos状态隔离扩展总结简介React Hooks 除了可以给函数式组件赋予状态和生命周期管理外，最重要的一点是可以把共用的逻辑处理代码抽离出来给不同的视图组件进行使用，它的目的和 HOC 和 Render Props 基本相同。...
2019-12-12 16:19:38
3594
1
原创 如何把JavaScript Map.keys()转换成数组
最近在写算法题时，发现一个小难处，javascript里的 map.keys() 获取出来的不是一个数组，而是一个 iterator，只能用 interator.next().value 获取值，很不方便，然后来查阅资料发现有两个解决方法：解决方法一let keys = map.keys();let arr = Array.from(keys);解决方法二let keys = map....
2019-11-13 20:52:23
12194
1
原创 用了这么长时间的 React useEffect hook，你用对了吗？
主线什么是 Effect与生命周期的关系运行时机类实际工作的例子 - 抓取数据第二个参数添加其他属性划重点useEffect 是 React Hooks 的核心，要保证理解它的运行机制和正确的使用方法才能避免这样那样的坑。在以前的工作中，因为它我碰到过无数个坑，比如拿到的值是旧的，该执行的时候不执行，不该执行的时候执行了……所以为了避免如上尴尬、节省绞尽脑汁找 bug 的时间、保护咱们的发际线...
2019-11-12 12:58:28
6981
2
原创 React Hooks - useState 的使用方法和注意事项
目录简介适用对象示例useState 使用方法定义状态更新状态状态依赖注意事项useState 的参数状态依赖总结简介在上一篇中介绍了 React Hooks 的基本概念，初识 React Hooks - React 组件定义的变革，这一篇将介绍 useState Hook，使用它可以给函数式组件添加状态支持，另外还会介绍使用它的一些注意事项。适用对象本篇文章适用于以下读者熟悉 Rea...
2019-11-09 18:31:16
13318
6
原创 初识 React Hooks - React 组件定义的变革
目录适用对象什么是 React HooksReact Hooks 作用与 React Class Component 的区别Hooks 的种类接下来React 在 16.8 版本中发布了 hooks 特性，通过本篇文章大家会了解到 hooks 的基本概念、作用和优势，以及与 class 类型的组件的区别。适用对象本文适用于以下读者：有 React 使用经验想了解 React Hooks...
2019-11-08 12:19:01
1510
2
原创 工作后出国留学经历总结
好多人纠结工作后再出国留学晚不晚，担心自己文化跟不上，或者怕跟年轻人相比，自己少了很多的竞争力，毕竟年老色衰，精力不够，咋跟能通宵拼命的小孩子们比呢？不过事实上并不是这样。现在中国的经济在飞速发展，我们的生活水平直线上升，越来越多的人已经有充足的资金去出国镀一把金了，所以我就拿我本身的例子来向大家揭开一名工作后去美国读研党的经历，以对大家的疑惑有所帮助。大家有什么问题可以私信我。心急的小伙伴可...
2019-08-29 22:00:38
1491
2
原创 为 Eureka 添加 Http Basic 认证
简介在网络世界中，任何网络中的服务都是不安全的，为了使我们的 Eureka 服务更加安全，我们可以添加各种各样的认证方式，以使客户端在提供相应的证明之后才能够注册到 Eureka 中。而这次我们就添加一个最基本的 Http Basic 认证到 Eureka 中。 HTTP Basic 是简单的用户名密码认证，客户端在发送注册请求时，会附带用户名和密码一起发送到 Eureka Server，这种...
2018-05-19 18:32:53
1095
原创 配置 Eureka Server 集群
简介为了使 Eureka Server 实现高可用，我们需要为它配置集群。这样当有一台 Eureka Server 有故障时，集群中的其他 Server 可以进行代替。Eureka 集群之中的 Node 通过 P2P 通信的方式共享注册表，以使得每个 Eureka Server 的注册表保持一致。本教程将在本地开启两台 Eureka Server 以测试集群的搭建。项目源码...
2018-05-17 11:28:09
854
原创 Spring Cloud Config Client 超时与重试
简介有时客户端需要在 config server 无响应时进行重试，以给 config server 时间进行恢复。利用 spring 提供的重试组件，我们可以方便的配置重试机制，包括重试间隔，重试次数等。项目源码Gitee码云为 web 项目添加依赖开启客户端重试功能需要两个新依赖，spring-retry 和 spring-boot-starter-aop，把如下代...
2018-05-15 16:30:51
3428
原创 Spring Cloud Config - RSA简介以及使用RSA加密配置文件
简介RSA非对称加密有着非常强大的安全性，HTTPS的SSL加密就是使用这种方法进行HTTPS请求加密传输的。因为RSA算法会涉及Private Key和Public Key分别用来加密和解密，所以称为非对称加密。Private Key和Public Key有互操作性，即用private key加密的可以用public key解密，用public key加密的可以用private key解密。...
2018-05-11 13:34:51
1753
原创 使用对称加密来加密Spring Cloud Config配置文件
简介在真实项目环境下，我们不会在配置文件中明文存储密码等机密性文本，以防被窃。Spring Cloud Config提供了加密方法，以使明文文本加密成密文存储在配置文件中。Spring Cloud Config提供了两种加密解密方式，一种是对称加密，一种是非对称加密。这篇文章将先展示如何使用对称加密。对称加密简介对称加密即通信双方用同一密钥(key)对文本进行加密和解密。它有两...
2018-05-10 13:09:13
1310
原创 为Spring Cloud Config Server配置远程git仓库
简介虽然在开发过程，在本地创建git仓库操作起来非常方便，但是在实际项目应用中，多个项目组需要通过一个中心服务器来共享配置，所以Spring Cloud配置中心支持远程git仓库，以使分散的项目组更方便的进行协作。基础环境JDK 1.8Maven 3.3.9IntelliJ 2018.1Git项目源码Gitee码云配置远程git仓库首先我在gite...
2018-05-09 11:44:14
1589
原创 使用Spring Boot开发者工具进行自动重启和页面自动刷新
简介大家可能都听说过开发Node.js应用时可以使用多种工具对开发者提供便利，如WebPack提供了开发者服务器来支持js应用动态更替，并在保存文件时自动刷新浏览器。Spring Boot也提供了相似的开发者工具，让我们更快速、更舒心的开发Spring Boot应用。大家看完本教程就可以学会如何如用Spring Boot开发者工具进行自动重启和自动刷新页面。自动重启原理Spring...
2018-05-07 16:25:48
1499
原创 Java 10更新汇总，新的编译器通吃主流编程语言
早些时候Oracle发布了Java 10，这是Oracle更改发布策略之后的第一版Java，Oracle现已决定每六个月发布一个新的Java版本，周期缩短了，但是并不是说我们要学的更多了，而是说缩短开发周期后，有助于更快修复bug，并提前放出新功能，因为时间短所以新功能并不是很多。本次更新主要有：局部变量类型推断，G1并行完全垃圾回收，以及测试版的Java-Based JIT编译器。更新详情如下：...
2018-05-06 17:03:30
742
1
原创 Spring Cloud入门教程 - Zuul实现API网关和请求过滤
简介Zuul是Spring Cloud提供的api网关和过滤组件，它提供如下功能：认证过滤压力测试Canary测试动态路由服务迁移负载均衡安全静态请求处理动态流量管理在本教程中，我们将用zuul，把web端的请求/product转发到对应的产品服务上，并且定义一个pre过滤器来验证是否经过了zuul的转发。基础环境JDK 1.8Maven 3.3....
2018-05-06 12:46:40
1132
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人