2017我的前端心得体会

记录当下对前端基础HTML、CSS和JavaScript的认识。希望几年后，再看这篇文章，能笑着想“当时可真菜”。

HTML心法

Semantic －语义化

HTML5引入了一堆语义化标签，所谓语义化标签，就是没什么默认样式，纯粹为了描述内容是什么，例如header, footer, time等。

引入这些标签是为了

让人更好的理解内容
语义化让页面结构清晰，利于开发和维护。
让机器更好的理解内容
1. 方便爬虫、搜索引擎理解网页的内容，利于传播。
2. 方便屏幕阅读器等工具理解网页等内容，为残障人士提供方便。
  附上锤子发布会上蔡聪的一段视频，印象深刻。
  语义化做好后，未来一定还会有更多的工具出现，方便所有人。

怎么做好语义化，太难讲了，我自己也没做好，反过来说说什么是不好的吧。

不好的做法：为了样式去选择标签

先看个低级点的错误：引用一句话，只因为想在前面加个点，就不用blockquote而选择用个list去包裹。

<ul>
  <li>apolis: HTML编写要依据语义而不是样式。</li>
</ul>

再看个高级点的：引用文本的前面加个大大的引号图片。

<blockquote>
  <img src="quote.png">
  apolis: HTML编写要依据语义而不是样式。
</blockquote>

这里的img纯粹是为了样式而添加的。怎么省掉它呢？
答案就是利用CSS的伪元素before和after。

<style>
  blockquote::before {
    content: url(quote.png);
  }
</style>
...
<blockquote>
  apolis: HTML编写要依据语义而不是样式。
</blockquote>

CSS心法

DRY - Don’t Repeat Yourself

避免重复。

好处就是修改的代价变小。一个改动，只改一个地方比到处找着改十几个地方更快更不易出错。

怎么写出DRY DRY的CSS，CSS Secret这本书开篇就讲了一个技巧。

When values depend on each other, try to reflect their relationship in the code.

看例子，定义button的样式

button {
  padding: 4px 10px;
  border-radius: 3px;
  line-height: 18px;
  font-size: 12px;
  border: 1px solid rgba(0, 0, 0, .1);
  background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent);
  color: white;
}

假设现在需要一个更大更醒目的按钮。除font－size外，padding, border-radius, line-height都要修改。

button.large {
  padding: 7px 20px;
  border-radius: 5px;
  line-height: 36px;
  font-size: 24px;
}

这是因为padding, border-radius, line-height其实和font－size是有关系的。如果我们把这种关系体现到CSS中，让padding, border-radius, line-height使用相对字体大小的值，那么我们就可以只修改font－size了。

button {
  padding: .3em .8em;
  border-radius: .2em;
  line-height: 1.5;
  border: 1px solid rgba(0, 0, 0, .1);
  background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent);
  color: white;
}

button.large {
  font-size: 2em;
}

这些技巧对于小页面开发来说还够用，但如果开发大型应用，靠类似上面这些技巧来写CSS，还是保证不了DRY。

以一个企业应用为例，Tree, Grid, ComboBox, Menu…..等等这些组件的选中背景色要一致，CSS很难优雅的做到只在一个地方定义颜色。

之后就出现了SASS、LESS、Stylus这些技术来弥补CSS的不足。它们的变量、嵌套、mixin等等特性都是为了能更DRY。

JavaScript

这个我就总结不出心法了，涉及的领域太广，一辈子都学不完。
写写我对它的认识吧，总结了下面两个方面。

1.通吃各个平台

2007年，StackOverflow创始人Jeff Atwood提出了著名的Atwood‘s Law：

Any application that can be written in JavaScript, will eventually be written in JavaScript.

随后几年，这个说法被不断证实：

2010年，NodeJs问世，JavaScript支持开发Server端。
2011年，PhoneGap问世，JavaScript支持开发移动端App。
2015年，Electron问世，JavaScript支持开发PC端App。

2.极强的灵活性

茴香豆的茴有四种写法

这里写图片描述

而对于JavaScript，每个会的人都能创造一种写法。例如下面这段天书一样的代码：

(+(+!![]+([][[]]+[])[!+[]+!![]+!![]]+(+!![]+[])+(+[]+[])+(+[]+[])+(+[]+[]))+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!+[]+!![]]+([]+{})[+!![]]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+([][[]]+[])[+[]]+([][[]]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(![]+[])[!+[]+!![]+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+([]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!+[]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+(!![]+[])[+[]]+([][[]]+[])[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]])())[!+[]+!![]+!![]]+([][[]]+[])[!+[]+!![]+!![]])()([][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(![]+[])[!+[]+!![]+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+([]+[][(![]+[])[!+[]+!![]+!![]]+([]+{})[+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]]][([]+{})[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]]+(![]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(!![]+[])[+[]]+([]+{})[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+([][[]]+[])[!+[]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(![]+[])[!+[]+!![]]+([]+{})[+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]]+(+{}+[])[+!![]]+(!![]+[])[+[]]+([][[]]+[])[!+[]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+!![]])())[!+[]+!![]+!![]]+([][[]]+[])[!+[]+!![]+!![]])()(([]+{})[+[]])[+[]]+(!+[]+!![]+!![]+!![]+!![]+!![]+!![]+[])+(!+[]+!![]+!![]+!![]+!![]+!![]+[]))+([][[]]+[])[!+[]+!![]+!![]]+([]+{})[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+(+(+!![]+([][[]]+[])[!+[]+!![]+!![]]+(+!![]+[])+(+[]+[])+(+[]+[])+(+[]+[]))+[])[!+[]+!![]+!![]+!![]+!![]+!![]+!![]]+([]+{})[+!![]]+([][[]]+[])[+[]]

这种极强的灵活性，成为了合作开发大型项目的噩梦。每个人写的代码别人都看不懂，怎么维护？

因此，要能适应复杂项目开发，需要限制JavaScript的灵活性。
限制的思路有两种：

框架：要求用固定的套路写代码，约定什么逻辑该写在什么地方。例如ExtJS，我遇到的最严格的框架。
语法：摒弃掉部分语法特性，添加更严格的限制。例如CoffeeScript、TypeScript。

这两种思路不冲突，混合着用效果更强。比如用TypeScript的Angular。