在 Web 开发中生成几何图形的几种方式

当我们在进行 Web 开发时，很多时候都是在有意或无意地创建一些矩形，深究一下，到底有多少中方式来得到一个几何图形呢？本文将简单介绍几种生成圆形、三角形和多边形的方式，并分析每种方式的优缺点。

下面是可能使用到的方式：

  1. border-radius
  2. border
  3. rotating shapes with transform
  4. pseudo elements
  5. box-shadow
  6. wrapping text into shapes with shape-outside
  7. clip-path on an element
  8. SVG assets
  9. canvas

深入解析 ES6：箭头函数

从一开始箭头就是 JavaScript 的一部分，在第一个 JavaScript 中就建议将内联的脚本代码包裹在 HTML 的注释中，这可以防止那些不支持 JavaScript 的浏览器错误滴将你的代码显示为明文。你也许写过下面这样的代码：

1
2
3
4
5
<script language="javascript">
<!--
    document.bgColor = "brown";  // red
// -->
</script>

古老的浏览器将看到两个不被支持的标签和一段注释，只有支持 JavaScript 的新浏览器才会将其解析为 JavaScript 代码。

为了支持这个古怪的特性，浏览器的 JavaScript 引擎把 <!-- 作为一个单行注释的开始，这不是开玩笑的，这一直都是这门语言的一部分，并且至今还能用，不仅仅在 <script> 标签内的首行，而是在 JavaScript 代码的任何部位都可用，它甚至还能在 Node 中使用。

凑巧的是，这种风格的注释在 ES6 中首次被标准化。但这并不是我们将谈论的箭头。

深入解析 ES6：解构赋值

什么是解构赋值？

解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量。这个语法非常简洁，而且比传统的属性访问更加清晰。

在不使用解构赋值的情况下，访问数组的前三项：

1
2
3
var first = someArray[0];
var second = someArray[1];
var third = someArray[2];

使用解构赋值后，相应的代码变得更简洁和可读：

1
var [first, second, third] = someArray;

SpiderMonkey（Firefox 的 JavaScript 引擎）已经支持解构赋值的大部分特性，但还不完全。

深入解析 ES6：Rest 参数和参数默认值

本文将讨论使 JavaScript 函数更有表现力的两个特性：Rest 参数和参数默认值。

Rest 参数

通常，我们需要创建一个可变参数的函数，可变参数是指函数可以接受任意数量的参数。例如，String.prototype.concat 可以接受任何数量的字符串作为参数。使用 Rest 参数，ES6 为我们提供一种新的方式来创建可变参数的函数。

我们来实现一个示例函数 containsAll，用于检查一个字符串中是否包含某些子字符串。例如，containsAll("banana", "b", "nan") 将返回true，containsAll("banana", "c", "nan") 将返回 false。

下面是传统的实现方式：

1
2
3
4
5
6
7
8
9
function containsAll(haystack) {
  for (var i = 1; i < arguments.length; i++) {
    var needle = arguments[i];
    if (haystack.indexOf(needle) === -1) {
      return false;
    }
  }
  return true;
}

介绍几个 CSS 方法论

在大型、复杂和快速迭代的系统中，CSS 将非常难以维护。原因之一就是 CSS 没有作用域的概念，每个 CSS 都是全局的，这意味着对 CSS 的任何修改就可能导致一些 UI 的级联改变。

CSS 的扩展语言 – CSS 预处理器，比如 Sass、Less 和 Stylus，使我们编写 CSS 更加容易，但在我看来，这些 CSS 的扩展语言并没有真正解决可扩展性问题。

在 CSS 支持作用域机制之前，我们需要一种机制，使我们的样式只与特定的 HTML 部分关联，这就是 CSS 方法论。本文将讨论如下的 CSS 方法论：

  • Object-Oriented CSS (OOCSS)
  • Block, Element, Modifier (BEM)
  • Scalable and Modular Architecture for CSS (SMACSS)
  • SUIT CSS
  • Systematic CSS

CSS 方法论是正式的，文档化的 CSS 编写方法，使我们能够将 CSS 作为一些小的独立的模块来开发和维护，而不是一个庞大的不可分割的一坨代码。采用一种 CSS 方法论 – 即便这是你自己创建的 – 它将使你在 Web 开发中更加得心应手。

相关文章：CSS Development at Large-Scale Websites

每个 CSS 方法论都为可扩展性和可维护性提供了一套解决方案，一个 CSS 方法论通常会定义：

  • CSS 和 HTML 的最佳实践
  • Class 和 ID 的命名约定
  • 有序的、分组的 CSS 样式
  • 代码格式

没有“最好”的 CSS 方法论，不同的个人/团队/项目适合于不同的方法论。希望通过本文你可以找到一个适合你的方法论，或者激发你创建一个你自己的。

深入解析 ES6：模板字符串

在 ES6 中引入了一种新的字符串字面量 – 模板字符串，除了使用反引号 (`) 表示，它们看上去和普通的字符串没有什么区别。在最简单的情况下，他们就是普通的字符串：

1
context.fillText(`Ceci n'est pas une chaîne.`, x, y);

之所以被称为模板字符串，是因为模板字符串为 JS 引入了简单的字符串插值特性，也就是说，可以方便优雅地将 JS 的值插入到字符串中。

深入解析 ES6：Generator

今天讨论的新特性让我非常兴奋，因为这个特性是 ES6 中最神奇的特性。

这里的“神奇”意味着什么呢？对于初学者来说，该特性与以往的 JS 完全不同，甚至有些晦涩难懂。从某种意义上说，它完全改变了这门语言的通常行为，这不是“神奇”是什么呢。

不仅如此，该特性还可以简化程序代码，将复杂的“回调堆栈”改成直线执行的形式。

我是不是铺垫的太多了？下面开始深入介绍，你自己去判断吧。

深入解析 ES6：Iterator 和 for-of 循环

如何遍历一个数组的元素？在 20 年前，当 JavaScript 出现时，你也许会这样做：

1
2
3
for (var index = 0; index < myArray.length; index++) {
  console.log(myArray[index]);
}

自从 ES5 开始，你可以使用内置的 forEach 方法：

1
2
3
myArray.forEach(function (value) {
  console.log(value);
});

代码更为精简，但有一个小缺点：不能使用 break 语句来跳出循环，也不能使用 return 语句来从闭包函数中返回。

如果有 for- 这种语法来遍历数组就会方便很多。

深入解析 ES6：简介

欢迎来到深入解析 ES6 系列，本系列将探讨 JavaScript 即将面世的新版本 – ECMAScript 6。ES6 包含许多新特性，这使得 JavaScript 语言更强大和更具表现力，接下来的每周我们将逐一揭开 ES6 的神秘面纱。在开始之前，我们值得花几分钟时间来谈谈什么是 ES6 或者你期待它是什么样的。

几个必备的 JavaScript 函数

参考原文：7 Essential JavaScript Functions 以下是意译。

早期，由于浏览器厂商对 JavaScript 实现不同，我们通常需要一些简单的函数来实现某些边缘特性，甚至某些基本特性，比如 addEventListener 和 attachEvent。现在，虽然时代进步了，但仍有一些函数需要开发者掌握，以便于性能优化和快速开发。

go2top