Airbnb JavaScript 编码风格指南(涵盖 ECMAScript 6+)

Airbnb JavaScript 编码风格指南

一份最合理的 JavasScript 风格指南。 翻译自:https://github.com/airbnb/javascript

注意:本指南假定您使用的是Babel,并要求您使用 babel-preset-airbnb 或相当的预设插件。它还假定您正在您的应用程序中安装 shims/polyfills,实用airbnb-browser-shims或相当的插件。

继续阅读

JavaScript术语:shim 和 polyfill

在学习和使用 JavaScript 的时候,我们会经常碰到两个术语:shim 和 polyfill。它们有许多定义和解释,意思相近又有差异。

Shim

Shim 指的是在一个旧的环境中模拟出一个新 API ,而且仅靠旧环境中已有的手段实现,以便所有的浏览器具有相同的行为。主要特征: 继续阅读

JavaScript 中的对象拷贝

对象是 JavaScript 的基本块。对象是属性的集合,属性是键值对。JavaScript 中的几乎所有对象都是位于原型链顶部 Object 的实例。

介绍

如你所知,赋值运算符不会创建一个对象的副本,它只分配一个引用,我们来看下面的代码:

let obj = {
  a: 1,
  b: 2,
};
let copy = obj;

obj.a = 5;
console.log(copy.a);
// 结果 
// copy.a = 5;

—> Edit on JS Bin

obj 变量是一个新对象初始化的容器。copy 变量指向同一个对象,是对该对象的引用。所以现在有两种方式可以访问这个 { a: 1, b: 2, } 对象。你必须通过 obj 变量或 copy 变量,无论你是通过何种方式对这个对象进行的任何操作都会影响该对象。 继续阅读

理解 JavaScript 中的 for…of 循环

什么是 for…of 循环

for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环,以替代 for...inforEach() ,并支持新的迭代协议。for...of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等。 继续阅读

2017年最佳 VS Code 主题

我不知道你怎么样,但我喜欢在一个具有视觉吸引力的环境中编写代码。除了虚荣装逼之外,一个好的主题(和好的字体,因为好的主题应该带有好的字体)可以使你的代码看起来不那么无聊。有些主题甚至用配色方案指出代码中的类型。

一个好的主题可以使你的工作变得更容易,更有趣和令人兴奋。

在这里,我将列出几个强大的Visual Studio Code 主题。 截至2017年9月25日的选择标准: 继续阅读

使用 CSS 实现图片的滤镜效果

它如何工作的

使用一个或多个较新的CSS属性(background-blend-mode, mix-blend-mode, 或者 filter)可以让我们惊艳地处理单个图片效果。 继续阅读

现代 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。你可以在下面的示例中看到: 继续阅读