第 99 期(招数-技巧)：前端工程师容易犯的一些低级错误

[wingmeng]

HTML 方面：

1. 不重视标签语义化；

2. 喜欢滥用标签，如 <div>、<section>；

3. 使用已被规范废弃的标签，如 <font>、<center>；

4. 忘记闭合标签；

5. 在 <h1>...<h6>、<p> 标签里插入块级元素；

6. 在特定嵌套结构的容器里插入了其他标签，例如：

   <dl>
     <dt>...</dt>
     <dd>...</dd>
     <div>hello world</div>
   </dl>

7. 不讲究标签前后顺序，例如对外联 CSS 和 JS 资源的引入；

8. 标签或属性名使用大写（或驼峰体）；

9. 没有可访问性的概念，例如不会使用 label 标签来增加 input radio 的可点击范围；

10. 不 care 无障碍访问；

11. 页面层级结构臃肿，标签嵌套里三层外三层；

12. 喜欢使用 <!--[if IE]> 这类黑魔法来处理兼容性问题；

13. 忘记声明 charset，导致页面乱码；

14. 不写、漏写或错写 <DOCTYPE> 声明；

15. 看了两天文档，然后在个人简历上标榜“精通HTML”。

CSS 方面：

1. 一把梭的 CSS Reset：* {margin: 0; padding: 0;}；

2. 喜欢写行内样式；

3. 样式类名命名不符合语义，喜欢用拼音（约定俗成的除外）、无意义字符或自创的单词；

4. 滥用后代选择器或子选择器，例如：

   ul.list > li > .content > a {...}

5. 滥用 id 选择器，滥用 !important，导致各种权重问题；

6. 喜欢使用一些新特性，却没有考虑不支持时的后备方案，例如：

   /* 如果浏览器不支持背景图片偏移量特性，则整条特性都会失效，导致背景图无法显示 */
   .box {background: url(xxx.png) right 20px bottom 20px no-repeat;}

7. 使用一些陈旧、过时的写法（有时候是直接 copy 过来懒得改），例如：

   .list-item {display: inline-block; *display: inline; *zoom: 1;}
   .box {-webkit-border-radius: 5px;}

8. 无脑将 CSS 用在明明采用 JS 方案更适合的场景中；

9. 忘记清除浮动，导致布局错乱；

10. 缺乏对默认属性的了解，声明一些无意义的样式，例如：

    div {display: block; width: 100%; height: auto;}

JavaScript 方面：

1. 滥用全局变量；

2. 忘记跳出，导致 switch 穿底，例如：

   let result;
   
   switch(value) {
     case 'A':
       result = 1;
     case 'B':
       result = 2;
     case 'C':
       result = 3;
   }
   
   console.log(result)  // 永远是 3

3. 忘记跳出，导致无意义的性能损耗，例如：

   let result;
   
   for (let value of bigArray) {
     if (value.id === 'abc') {
       result = value.data
     }
   }

4. 滥用箭头函数，例如：

   function Fn(name) {
     this.name = name;
     // ...
   }
   
   Fn.prototype.getName = () => this.name;

5. 引用类型的坑，例如：

   let obj = {a: 1, b: 2};
   
   fn1();
   fn2();
   
   function fn1() {
     let other = obj;
     other.a = 3;
     // ...
   }
   
   function fn2() {
     console.log(obj.a)  // 3 （黑人问号脸.jpg）
   }

6. 未考虑 0 会隐式转换为 false 的情况，例如：

   function fn(delay) {
     if (!delay) {
       delay = 1000;  // 如果未定义 delay，默认为 1s
     }
   
     setTimeout(() => {
       // ...
     }, delay)
   }
   
   fn();
   fn(0);  // 预期：无等待时间；结果：等待了 1s

7. switch 的 case 会进行强类型判断，例如：

   function fn(value) {
     switch(value) {
       case 1: return 'A';
       case 2: return 'B';
       default: return 'Other'
     }
   }
   
   fn('1');  // 结果不是预期的 "A"，而是 "Other"

未完待续