现代 JavaScript 参考

feiwen8772 / modern-js-reference

一份现代 JavaScript 参考,你在现代项目中会经常遇到,以及最新的代码示例

http://www.css88.com/archives/8244

简介

初心

本文档是一份 JavaScript 速查表,你在现代项目中会经常遇到,以及最新的代码示例。

本指南不是为了教你从头开始学习 JavaScript ,而是为了帮助那些可能不熟悉当前代码库(例如 React)所用到 JavaScript 概念的开发人员。

此外,我有时还会提供一些个人的建议,这些建议可能是有争议的,但我也会注意到,当我这么做的时候,这是我个人的建议。 继续阅读

JavaScript 中的不可变对象(Immutable Objects)

默认情况下,JavaScript 中的对象是可变的。我们可以更改原始值(字符串,数字等)和对象。我们来看看这个对象:

let obj = {
    num: 10,
    obj: {
        content: "mutable object"
    }
}

你可以轻松地改变它: 继续阅读

用 JavaScript 检测浏览器在线/离线状态(JavaScript API — navigator.onLine)

如今HTML5 移动应用或 Web app 中越来越普遍的使用了离线浏览技术,所以用 JavaScript 检测浏览器在线/离线状态非常常见。无论浏览器是否在线,navigator.onLine 属性都会提供一个布尔值。 如果浏览器在线,则设置为 true ,否则设置为 false继续阅读

HTML / CSS技巧 – 可滚动的 tbody

这个简单的技巧用来解决使固定表头(thead)和滚动表体 (tbody) 的问题。这使得数据表更易于浏览。当用户滚动表格时,固定表头为用户所注意的列提供了上下文。看下面图示你就明白了:

默认情况下,overflow 属性不适用于表格分组元素 thead, tbody , tfoot。你可以在下面的示例中看到: 继续阅读

iPhone X 的凹槽 和 iOS 11 中一些相关 CSS 属性

苹果的 iPhone X 配备了一个覆盖整个手机的全屏幕,但是顶部保留了一个“凹槽”,为相机和其他各种组件腾出空间。结果是屏幕设计时有一些尴尬局面,例如将网站限制在“安全区域”,那么边缘会有白色空白条。想要移除这个白色空白条虽然不难,在 body 设置一个 background-color 就可以搞定。或者,你可以 viewport-fit=cover 添加到 meta viewport 标签上,以使网页填充满整个屏幕。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 

然后,你要考虑到任何重叠的情况,通常是由安全区域处理的。有一些新的CSS可以帮助你适应这种情况。查看 Stephen Radford 的文档继续阅读

[教程] 用 CSS3 Animations(动画) 和 Keyframes(关键帧) 创建简单的网页动画 – CSS3 实现弹跳球动画

通过这个有趣的教程学习 CSS Animations(动画) 和 Keyframes(关键帧)。

我们要做什么?

下面是最终代码,也就是我们将要最终实现的演示:

See the Pen Bouncing Ball – Correct Timing by brandon (@bmorelli25) on CodePen.0

基础准备

对于这个实现,我们需要一个简单的 div ,并且样式类名为 ball继续阅读

Visual Studio Code 最好的功能、插件和设置

Visual Studio Code 是由 Microsoft(微软) 发布的一个免费的,开源的跨平台文本编辑器。他们基于在线编辑 Visual Studio Online (代号为 “Monaco”),并结合 GitHub 的 Electron 实现的一个跨平台编辑器。他们在为程序员创建一个快速且高效工作环境方面取得巨大进步。

  • 提供智能补全功能的智能感知
  • 编辑器内置代码 调试工具
  • 侧边栏内置 Git 命令
  • 处理多实例能力的 集成终端
  • 通过扩展和主题定制能力
  • 下载 VS Code Insiders,可以获取 每天构建的最新版本

继续阅读

JavaScript ECMAScript 2015 (ES6) 和 ECMAScript 2016 (ES7) 新特性速查

上图为 ES6 新特性速览

ES6 给 JavaScript 带来了很深刻的变化。 它完全改变了我们使用 JavaScript 的方式。 ES7是在ES6之上的一个微小更新。 让我们看看 ES6 更新中带来的变化。本文起初是我的学习笔记,现在我和大家分享一下。

支持UNICODE标准版本8

它将允许使用笑脸,一个可以使用 unicode 声明为转义字符的变量。 继续阅读

[回归基础] JavaScript 函数中默认参数

了解 JavaScript 中的默认参数以及如何使用它们。

默认参数定义

默认参数允许你设置参数的默认值。

默认情况下,JavaScript 函数的所有参数都是 undefined (未定义的)。默认参数允许你设置不同的默认值。

请考虑以下示例:


function logFirst(data){
  console.log(data[0]);
}

上面的例子是说,我们有一个简单的函数,打印数组中的第一个元素。该函数需要一个参数,data ,我们期望它是一个 Array 数组。但是如果没有数据传入,会发生什么? 继续阅读

使用 Chrome DevTools 调试 JavaScript

彻底地摒弃 console.log 调试!了解如何在Chrome开发者工具中使用断点来调试代码。

作为一名新开发人员,查找和修复 bug 可能非常困难。 你可能会随机使用 console.log(),试图查看代码的工作工作情况。 那么我现在告诉你,你不需要这么麻烦。

这篇文章是关于调试的正确方法!你将学习如何使用 Chrome 开发人员工具来设置断点,并逐步调试代码。这个工作流通常是在查找和修复代码中的 bug 时更有效的方法。

本教程将向你展示如何调试一个特定问题,但你所学习的一般工作流程有助于调试所有类型的 JavaScript bug。 继续阅读