前端参考指南

HTML

语义

HTML5为我们提供了大量的语义元素,旨在精准地描述内容。确保你受益于其丰富的词汇。

确保您理解您正在使用的语义元素。以错误的方式使用语义元素比不使用更糟糕。

简洁

保持代码简洁。忘记旧的XHTML习惯。

可访问性

可访问性不应该是一个事后的想法。你不必成为一位WCAG专家来提升你的网站,你可以立即开始修复这些小问题,它将产生巨大的改善,如:

  • 学会正确使用alt属性
  • 确保你的链接和按钮等都很好地标记(没有<div class =button>这种暴行)
  • 不要完全依赖颜色来传达信息
  • 显式地给表单控件加标签

语言

虽然定义语言和字符编码是可选的,但推荐在文档级别声明它们,即使它们已经在HTTP请求头部已经指定。字符编码优先使用utf – 8。

性能

除非有一个合理的理由在内容之前加载脚本,否则请不要把它放在前面阻止页面的渲染。如果您的样式表很大,分离出初始化时必须的样式,并在一个独立样式表中延迟加载其它部分。两次HTTP请求显著低于一次,但感知速度是最重要的因素。

CSS

分号

技术上来讲,分号在CSS里充当一个分隔符,但请把它当作一个终结符。

盒模型

盒模型对整个文档应该是相同的。虽然全局样式 * { box-sizing:border-box;} 很好,但不要在特定元素改变默认的盒模型(如果你可以避免这么做)。

不要改变元素的默认行为(如果你可以避免这么做)。尽量保持元素在普通的文档流中。例如,删除图像下面的空白,不应该改变其默认显示:

同样的,不要让一个元素脱离文档流(如果你可以避免这么做)。

位置

有很多方法可以在CSS中定位元素,但尝试限制自己使用下面的属性/值。优先顺序如下:

选择器

减少紧耦合的DOM选择器。当你的选择器超过3个结构伪类、后代或兄弟的组合,考虑添加一个class到你需要匹配的元素上。

避免在不必要的时候重载你的选择器。

特性

不要让选择器难以覆盖。减少使用 id 和避免 !important。

覆盖

覆盖样式让选择器和调试变得不易使用。尽可能避免它。

继承

在可以继承的情况下,不要重复样式声明,。

简洁

保持代码简洁。使用简写属性,避免在不需要时使用多个属性。

语言

优先使用英文而不是数学公式

浏览器引擎前缀

积极删除过时的浏览器引擎前缀。如果你需要使用它们,请在标准属性前插入。

动画

优先使用过渡,而不是动画。避免对 opacity 和 transform 以外的属性使用动画。

单位

在可以的情况下,使用没有单位的值。在你使用相对单位时优先 rem 。优先使用秒而不是毫秒。

颜色

如果你需要透明效果,请使用rgba。否则,总是使用十六进制格式。

绘图

当资源可以轻易地通过CSS实现时,避免HTTP请求。

Hacks

不要使用它们。

JavaScript

性能

可读性,正确性和可表达性优先于性能。JavaScript基本上永远不会成为你的性能瓶颈。优化图像压缩、网络访问和DOM渲染。如果你仅记得本文的一条原则,记住这条。

无污染

尽量保持你的函数干净。所有函数最好无副作用,不使用外部数据,返回新对象而不是改变现有的对象。

原生

尽可能地依靠原生方法。

强制转换

当有必要时,拥抱隐式强制转换。否则避免它。不要盲目使用。

循环

当强迫使用可变的对象时,不要使用循环。依靠 array.prototype 中的方法。

如果你不能,或者使用 array.prototype 方法很虐心。使用递归。

Arguments

忘记 arguments 对象。rest 参数一直是一个更好的选择,因为:

  1. 它是命名的,所以它给你一个函数期望arguments的更好的做法
  2. 它是一个真正的数组,这使得它更容易使用。

Apply

忘记 apply() 。使用 spread 操作符代替。

Bind

当有惯用方法时,不要使用 bind() 。

高阶函数

在不必要时,避免嵌套函数。

组合

避免多嵌套函数的调用。使用组合。

缓存

缓存功能测试、大数据结构和任何昂贵的操作。

变量定义

优先const,再是let,然后是var。

条件

优先使用立即执行函数表达式(IIFE和返回语句,而不是 if,else if 和 switch 语句

对象迭代

在允许的情况下避免使用 for…in

对象映射

当对象合法使用情况下,map 通常是一个更好的,更强大的选择。如果有疑问,请使用 map 。

Curry(柯里化)

柯里局可能在其他语言有它的地位,但避免在 JavaScript 使用。它通过引入外来范式,且相关的用例极不寻常,使得您的代码更难阅读。

可读性

不要通过看似聪明的技巧来混淆代码的意图。

代码重用

不要害怕创造大量小,高度可组合、可重用的函数。

依赖

减少依赖。第三方代码你不熟悉。不要仅仅为了使用一些很容易复制的方法而加载整个库:

5 收藏 评论

关于作者:cucr

新浪微博:@hop_ping 个人主页 · 我的文章 · 17

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部