Your Docusaurus site did not load properly.

A very common reason is a wrong site baseUrl configuration.

Current configured baseUrl = /en/

We suggest trying baseUrl =

Hello! I'm Xuqian

I'm a front-end developer. Here you can find the corresponding scripts for my videos on Bilibili. You can also find tutorials, blogs, courses, resources, as well as my thoughts and life hacks. I will help you learn front-end development in the most intuitive and fastest way. Hope my experience will inspire you.

Follow Me on Twitter

Latest Blogs 

JavaScript 游戏开发 - 物理碰撞引擎实现

年前我看到合成大西瓜小游戏火了,想到之前从来没有研究过游戏方面的开发,这次就想趁着这个机会看看 JavaScript 游戏开发,从原生角度上如何实现游戏里的物理特性,例如运动、碰撞。虽然之前研究过物理相关的动画库,但是我打算试试不用框架编写一个简单的 JavaScript 物理引擎,实现小球的碰撞效果。

为什么不用现成的游戏库呢?因为我觉得在了解底层的实现原理之后,才能更有效的理解框架上的概念和使用方法,在解决 BUG 的时候能够更有效率,同时对自己的编码技能也是一种提升。在对 JavaScript 物理引擎的研究过程中,发现写代码是次要的,最主要的是理解相关的物理、数学公式和概念,虽然我是理科生,但是数学和物理从来不是我的强项,我不是把知识还给老师了,而是压根就没掌握过 ^o^。过年期间花了有小半个月的时间在学习物理知识,现在仍然对某些概念和推导过程没有太大的自信,不过最后还算是做出了一个简单的、比较满意的结果,见下图。

gravity.gif

来自未来世界的机能服:科技带来便利(实测)

实拍

作为一名对时尚,尤其是衣服也非常感兴趣的前端工程师,我从来没有停止过对既时尚又实用还舒适的衣服的追求。在众人印象里,程序员就是千篇一律的格式衫加双肩包,典型的刻板印象,但其实我们程序员还是非常注重自身形象的。说起双肩包,还不是因为程序员外出经常需要带电脑,还要带钥匙、钱包、数据线、充电宝之类的杂物,总不能用手拿着,身上的口袋也不够。由于双肩包体积过大,在人多的地方会影响正常行走,如果碰上下雨,且双肩包不防水的话,那里边的东西就全遭殃了。

从 0 仿微信 8.0 动态表情实现过程

微信 8.0 更新的一大特色就是支持动画表情,如果发送的消息只有一个内置的表情图标,这个表情会有一段简单的动画,一些特殊的表情还有全屏特效,例如烟花表情有全屏放烟花的特效,炸弹表情有爆炸动画并且消息和头像也会随之震动。本着作为前端工程师的职业精神,我就想看看能不能实现一个类似的特效。折腾许久之后,做出来的效果如下:

回顾2020,程序员转型的起步

对未来的焦虑应该是每个程序员都能体会到的吧,面对招聘的年龄门槛、工作与生活的平衡、不良的生活习惯,以后的路要怎么走充满了不确定性。但是又因为程序员是技术工种,自己所掌握的技能可以从接外包、作产品、写博客、录视频等多方面进行输出,看似又不缺出路,只是怀疑能不能做好,所以一边担心自己能不能转型或改行,一边又极其期望逃离没有出头之日的 996 ,这是一个难题。

整理了5个JavaScript怪异行为及其原因

如果你用 JavaScript 写过项目或者参加过面试,那一定遇到过不少令人匪夷所思的问题。JavaScript 早期的规范不统一,也没有严格的标准,再加上它的语法灵活多样,有些看起来就不正确的代码却能正常执行,一些看起来符合逻辑的代码,运行结果却相差十万八千里。这些问题在日常开发中经常会导致 BUG,更重要的是,很多面试官会把它们拿出来当考验咱们 JS 工程师的能力。那么这篇文章就总结了 5 个 JavaScript 比较坑的问题,以及它们出现的原因和解决方法。

1024:程序员,你的身体还好吗?

又到一年一度的 10 月 24 日程序员节了,按百度百科的定义,这一天的意义是拒绝加班:

百度百科:1024程序员节是广大程序员的共同节日。1024是2的十次方,二进制计数的基本计量单位之一。针对程序员经常周末加班与工作日熬夜的情况,部分互联网机构倡议每年的10月24日为1024程序员节,在这一天建议程序员拒绝加班。

然而反观现实中程序员的工作与生活,这一天的意义真的达到了吗?从几何时,程序员成了加班、996 的代名词,从以前业务做不完偶尔加班变成了现在的常态,不得不说一句俗话:这是时代的进步还是倒退?1024 这个本该关注程序员权益的问题,非但没带来任何进步,反而又像双十一成了电商推销电子产品的噱头。试问,有多少人真正关心过程序员的身心健康?鉴于此,本文将从生理和心理两方面来分析程序员职业风险,让更多人了解程序员所面临的健康问题。因为本人并非医疗专家,所以文中所提供的建议应只作为参考,如果身体有任何异常情况请及时就医。另外,如果你热爱你的工作并且充满了干劲,那么这篇文章可以不看。

鸿蒙 OS:使用 JavaScript 开发 Todo App UI 界面

距离鸿蒙 OS 2.0 发布已经过去一些日子了,看到鸿蒙系统强大的设备共享能力,我觉得未来它一定能够成为主流的操作系统。在利用了分布式系统的优势之后,多个设备间可以共享应用程序界面和数据,并且对于开发者,也可以使用一套代码编写应用,就可以在多种设备终端上运行。

一开始我并没有太关注鸿蒙系统,以为它只能使用 Java 开发应用,跟前端好像没啥关系,但是看了开发文档后,发现 UI 部分既支持纯 JavaScript 开发,也支持纯 Java 开发,还可以 Java 跟 JavaScript 混合开发。鸿蒙应用的开发跟 Android 的开发很像,只是把概念重新定义了一下。它分为 FA(Feature Ability)和 PA(Particle Ability)两种应用模式,FA 是带有用户界面的,PA 则是运行在后台的服务程序,可以想象成安卓里的 Activity 和 Service,不过也略有不同。FA 支持使用 Java 和 JavaScript 两种方式开发 UI 界面。如果使用 Java,则跟 Android 一样,使用 xml 定义布局或者 Java 代码定义布局,每个页面都是一个 PageAbility,使用 Java 编写业务代码,不同的页面之间传递数据依然使用 intent。而这里如果使用 JavaScript UI 框架的话,那么写法跟 Vue 应用基本一模一样,同样支持 data、props、computed、watch 和 functions(methods),也能创建自定义的组件,这样 web 前端工程师就很容易转型成为鸿蒙 UI 开发工程师,不得不说华为在已有概念上做的整合,还是相当厉害的。

职业规划:程序员的 T 字形发展攻略

你是不是在面对市面上众多的技术的时候,不知道选择哪个才能对自己的职业和未来发展有所帮助?有这样的想法是正常的,因为随着科学的发展,现在的编程技术已经到了百花齐放的地步了。

  • 从编程语言上,你可以选择 Java、JavaScript、Go、PHP,还有基于它们的框架等等。
  • 从客户端上,可以选择移动端,web 端,还有后端等等。
  • 从行业领域上,还可以选择数据科学、金融工程或商业智能分析等等。

那么这么多的技术和领域,我们到底应该选哪一个才比较好呢?

前端工程师到底要学到什么程序才能去找工作?成功面试的必备要素与回答技巧

好多人都想知道,前端工程师到底要需要掌握什么技能、到什么程度,才能去找工作?最简单的答案:

把 html、css、 js 基础学扎实,再掌握 vue 或 react 前端框架之一就可以了。

真的是这样吗?技术上看似乎没问题,但是找工作不只要从技术上下手,还要从个人目标和公司的招人标准综合进行考量。那么接下来,我们从这几个方面来分析一下,前端工程师找工作的必要条件,然后给大家分享一套有逻辑、有结构的面试回答技巧。

噢!原来这就是 TypeScript

我第一次使用 TypeScript 是 16 年在读研的时候,学校的算法课是使用 TypeScript 实现的。当时只知道 TypeScript 是 Angular 开发的必备语言,没想到还能这么通用。后来在写作业的时候,发现 TypeScript 也并不是特别难,只不过是给 JavaScript 加上了类型信息,让代码不那么容易出错,并且支持高级的面向对象编程范式,让 JavaScript 变得跟 Java/c# 差不多。接下来,这篇文章就给你揭开 TypeScript 的面纱,对它来一个宏观上的认识,然后介绍一下如何编写并运行 TypeScript 程序,如何定义类型,另外假设你有 JavaScript 基础。