7 个可爱的 Web 开发技巧

7.布尔转换

6. 分割并四舍五入

5. JSON 格式

4. CSS 居中

3. CSS变量

2. CSS支持检查

1. 风格化

有用？

这篇文章取自我的博客，所以一定要查看它以获取更多最新内容😉

到目前为止，所有主流的 Web 开发语言都堪称成熟。HTML 、CSS和JavaScript都经历了超过 20 年的发展，已成为全球公认的 Web 标准。但这仅仅是引出本文主题的一个简单事实。今天，我想向大家展示这三种语言多年来发展起来的 7 个有趣且鲜为人知的技巧/窍门。信不信由你——有些技巧即使是经验丰富的 Web 开发人员也可能不了解。或许只是因为并非所有东西都同样有用……总之，让我们深入挖掘，享受乐趣吧！

7.布尔转换

类型安全和 JavaScript 似乎是两个完全不同的概念。在 JS 中跟踪所有动态类型可能是一项相当艰巨的任务。然而，这仍然可以提高性能，并使编写的代码更容易被 JIT 编译器处理。在条件表达式中使用布尔值以外的类型就是此类错误的常见示例。不过，有一个技巧可以解决这个问题！

还记得逻辑非运算符 ( !) 吗？它是一种将给定值转换为相反布尔值的简单、快速且优雅的方法。但是，如果我们想让布尔值精确地表示它本来的值（当表示为布尔值时）该怎么办？嗯……我们已经得到了相反的布尔值，对吧？所以，让我们再次取反，得到完整的布尔值……或者直接使用Boolean()一开始的函数* 。 *

const falsyValue = 0;
const truthyValue = 1;
!!falsyValue; // false
!!truthyValue; // true

6. 分割并四舍五入

JS 中有相当多的运算符。其中一些被广泛使用，而另一些则不然。第二类运算符通常包括所谓的位运算符。它们基本上对单个位（二进制数）进行操作，而不是对任何其他数字系统进行操作。许多 JS 程序员知道它们的存在，但却懒得去使用它们。这主要是因为它们可能感觉有点复杂，至少可以说，对初学者不太友好，而且理解它们可能需要一段时间。

但是，按位运算符也有其优势！它们确实允许程序员用更短的语法编写相同的代码，但仅限于特殊情况。除此之外，它们对位进行操作这一事实自然使其成为更高效的解决方案。为了让您大致了解我的意思，这里有一个将数字除以 2 并对结果进行舍入（向下取整）的示例，与使用基本右移运算符的相同操作进行了比较。

const value = 543;
const halfValue = value/2; // 271.5

Math.round(halfValue); // 272
Math.floor(halfValue); // 271

value >> 1; // 271

5. JSON 格式

JSON的概念想必所有 JS 开发者都耳熟能详。它是 JS 入门入门必备的技能。因此，JSON.parse()和JSON.stringify()方法也同样如此。你肯定知道，它们允许你将 JSON 兼容值转换为字符串。但是，我敢打赌，你可能不知道的一个技巧是，使用JSON.stringify()，你实际上可以格式化输出字符串。

该方法除了要字符串化的值之外，还接受两个可选参数：

• replacer-函数或字符串或数字数组，稍后用于将传递值的属性列入白名单null，以便稍后将其包含在结果字符串中。当等于 时，默认情况下，它会接受所有属性。
• spaces- 一个数字或一个字符串，其值和长度分别限制为 10。它允许您设置输出字符串中用于分隔对象属性的字符串或空格数。如果该值等于 0、空字符串或null（默认值），则输出保持不变。

现在，特别是第二个参数，它为你提供了一种简洁美观的方法来美化你的字符串值。当然，它并非解决所有问题的最佳方案，但至少它就在那里，随时可用。

const obj = {a:{b:1,c:2},d:{e:3,f:4}};

JSON.stringify(obj);
// "{"a":{"b":1,"c":2},"d":{"e":3,"f":4}}"

JSON.stringify(obj, null, 2);
/*
"{
  "a": {
    "b": 1,
    "c": 2
  },
  "d": {
    "e": 3,
    "f": 4
  }
}"
*/

4. CSS 居中

用 CSS居中元素本身并不是什么技巧。事实上，这是一种非常常见的做法。但现实情况是，一些开发者（包括我）经常会忘记这些简单的事情。更糟糕的是，这个问题没有最佳且唯一的解决方法。这是因为不同浏览器（尤其是 IE）之间存在不兼容性。

毫无疑问，最广泛采用的解决方案之一就是使用Flexbox 模型。下面是一个将子元素居中对齐到父元素中心的示例。

<div style="display:flex;justify-content:center;align-items:center;">
  <div></div>
</div>

除了上述方法（它对不同版本的 IE 的支持不佳）之外，我强烈建议您查看如何在 CSS 中居中网站，该网站将为您提供针对特定情况的适当解决方案。

3. CSS变量

在 CSS 预处理器、Web 框架和 CSS-in-JS 解决方案盛行的时代，纯 CSS的使用率确实至少出现了小幅下降。这其实并非坏事——只要上述解决方案能够更好地发挥作用。但是，CSS 预处理器以其一个众所周知的特性而闻名，并且最近也融入了原生 CSS 中，那就是变量！

:root {
  --main-bg-color: brown;
}

.className {
  background-color: var(--main-bg-color);
  display: block;
  color: white;
}

浏览器对这个功能的支持看起来也相当不错！总之，很高兴知道一些如此令人期待的功能正在逐渐融入到 JavaScript 语言本身。然而，它的多功能性不如任何预处理器或 CSS-in-JS 库。不过，知道有这样的功能存在还是不错的。

2. CSS支持检查

不同浏览器对 JS 和 CSS 中不同特性的支持差异很大。虽然JS 端的特性检查并不复杂，但 CSS 的情况却大相径庭……或者更确切地说，曾经如此。介绍@supportsCSS 规则——特性检查的最佳解决方案。

@supports (display: grid) {
  div {
    display: grid;
  }
}

@supports not (display: grid) {
  div {
    display: block;
  }
}

它的整体语法是if-else 语句的形式，可以用来检查给定的属性值对是否受支持。总而言之，它只是一个用于检查不同功能是否受支持的好方法，但前提是@supports它本身受支持。

1. 风格化

现在，对于第一个技巧，我显然必须给予来源作者适当的归属 - @calebporzio。

归根结底，你可以设置 style 元素的样式，显示其内容，使其可编辑，瞧！——你终于拥有了一个实时的 CSS 编辑器！正如作者所说——它可能没有什么实际用途，但就是很棒！可惜的是，它与标签的工作方式不一样<script>。

<style style="display: block" contenteditable>
    html {
        background: blue;
    }
</style>

有用？

那么，你觉得这份简短却颇具趣味的清单怎么样？你喜欢这些精选吗？其中一些你之前已经了解过吗？请在评论区分享你的想法，并在下方留言。也欢迎分享文章本身！想要及时了解最新内容，请在 Twitter和Facebook 上关注我 ，并访问我的个人博客。一如既往，感谢您的阅读，祝您拥有美好的一天！