GeezerVison is showing github.com — 第 99 期(招数-技巧):前端工程师容易犯的一些低级错误 · Issue #102 · fezaoduke/fe-practice-hard
第 99 期(招数-技巧):前端工程师容易犯的一些低级错误 #102
Description
HTML 方面:
-
不重视标签语义化;
-
喜欢滥用标签,如 <div>、<section>;
-
使用已被规范废弃的标签,如 <font>、<center>;
-
忘记闭合标签;
-
在 <h1>...<h6>、<p> 标签里插入块级元素;
-
在特定嵌套结构的容器里插入了其他标签,例如:
<dl>
<dt>...</dt>
<dd>...</dd>
<div>hello world</div>
</dl>
-
不讲究标签前后顺序,例如对外联 CSS 和 JS 资源的引入;
-
标签或属性名使用大写(或驼峰体);
-
没有可访问性的概念,例如不会使用 label 标签来增加 input radio 的可点击范围;
-
不 care 无障碍访问;
-
页面层级结构臃肿,标签嵌套里三层外三层;
-
喜欢使用 <!--[if IE]> 这类黑魔法来处理兼容性问题;
-
忘记声明 charset,导致页面乱码;
-
不写、漏写或错写 <DOCTYPE> 声明;
-
看了两天文档,然后在个人简历上标榜“精通HTML”。
CSS 方面:
-
一把梭的 CSS Reset:* {margin: 0; padding: 0;};
-
喜欢写行内样式;
-
样式类名命名不符合语义,喜欢用拼音(约定俗成的除外)、无意义字符或自创的单词;
-
滥用后代选择器或子选择器,例如:
ul.list > li > .content > a {...}
-
滥用 id 选择器,滥用 !important,导致各种权重问题;
-
喜欢使用一些新特性,却没有考虑不支持时的后备方案,例如:
/* 如果浏览器不支持背景图片偏移量特性,则整条特性都会失效,导致背景图无法显示 */
.box {background: url(xxx.png) right 20px bottom 20px no-repeat;}
-
使用一些陈旧、过时的写法(有时候是直接 copy 过来懒得改),例如:
.list-item {display: inline-block; *display: inline; *zoom: 1;}
.box {-webkit-border-radius: 5px;}
-
无脑将 CSS 用在明明采用 JS 方案更适合的场景中;
-
忘记清除浮动,导致布局错乱;
-
缺乏对默认属性的了解,声明一些无意义的样式,例如:
div {display: block; width: 100%; height: auto;}
JavaScript 方面:
-
滥用全局变量;
-
忘记跳出,导致 switch 穿底,例如:
let result;
switch(value) {
case 'A':
result = 1;
case 'B':
result = 2;
case 'C':
result = 3;
}
console.log(result) // 永远是 3
-
忘记跳出,导致无意义的性能损耗,例如:
let result;
for (let value of bigArray) {
if (value.id === 'abc') {
result = value.data
}
}
-
滥用箭头函数,例如:
function Fn(name) {
this.name = name;
// ...
}
Fn.prototype.getName = () => this.name;
-
引用类型的坑,例如:
let obj = {a: 1, b: 2};
fn1();
fn2();
function fn1() {
let other = obj;
other.a = 3;
// ...
}
function fn2() {
console.log(obj.a) // 3 (黑人问号脸.jpg)
}
-
未考虑 0 会隐式转换为 false 的情况,例如:
function fn(delay) {
if (!delay) {
delay = 1000; // 如果未定义 delay,默认为 1s
}
setTimeout(() => {
// ...
}, delay)
}
fn();
fn(0); // 预期:无等待时间;结果:等待了 1s
-
switch 的 case 会进行强类型判断,例如:
function fn(value) {
switch(value) {
case 1: return 'A';
case 2: return 'B';
default: return 'Other'
}
}
fn('1'); // 结果不是预期的 "A",而是 "Other"
未完待续
Metadata
Metadata
Development
No branches or pull requestsIssue actions