search

fezaoduke / fe-practice-hard

晚练课
69 stars 6 forks source link

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

Open wingmeng opened 5 years ago

wingmeng commented 5 years ago

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"

未完待续