跳到主要内容位置

JavaScript6

查看所有标签(分类)

12个 JavaScript 一行代码技巧

张旭乾

JavaScript 是一种功能强大的编程语言,我们可以通过使用一行代码实现很多功能。在日常开发中,我们经常会遇到需要快速实现某些功能的情况。下面让我们一起看看 12个有用的 JavaScript 一行代码技巧。

1. 生成随机颜色

JavaScript 中可以通过以下方式快速生成一个随机颜色:

let randomColor = "#" + Math.floor(Math.random()*16777215).toString(16);

这行代码会生成一个六位的十六进制数,可以用作 CSS 颜色值。

2. 获取 URL 参数

如果你想获取 URL 参数,可以通过以下一行代码实现:

如何配置 Babel 来体验最新 JavaScript 特性

张旭乾

因为各个浏览器厂商对 JavaScript 规范的实现并不统一,这让开发者在日常开发中经常遇到兼容性的挑战,一些新的 JavaScript/Ecmascript 特性并不能在所有的浏览器中使用,这样还需要针对各个浏览器编写不同的代码,才能让代码能够兼容。

后来,一些工具出现了,它们可以让我们编写有最新特性的 JavaScript 代码,然后把代码转换为各个浏览器都支持的版本,这种工具叫作转译器(Transpiler)。Babel 就是其中一个且比较著名,几乎每个前端框架中都使用到了,它可以把包含新特性的代码转换为 ES2015 版本,或者其它指定的版本来实现最大兼容性。

Web性能优化:使用图片懒加载推迟屏幕外图片的加载

张旭乾

在使用 chrome 的 lighthouse 对网站进行测速之后,发现有一条优化提示:推迟屏幕外的图片加载。之前有看到过要实现这样的效果需要使用 lazy loading,图片懒加载,但是需要使用 js 的方式来实现,由于本人十分懒惰,不想用太复杂的代码,于是在网上搜索了一番,发现 <img>  标签原生支持懒加载。

为什么要懒加载

浏览器在加载图片的时候本身是 async 异步的,不会阻塞浏览器的加载进程,但是屏幕外的图片加载仍然会消耗带宽,这样在带宽有限的情况下,会影响重要组件的加载,例如 CSS、JavaScript 等,进而拖慢页面的加载。

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

张旭乾

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

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

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

张旭乾

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

鸿蒙 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 开发工程师,不得不说华为在已有概念上做的整合,还是相当厉害的。