记录当下对前端基础HTML、CSS和JavaScript的认识。希望几年后,再看这篇文章,能笑着想“当时可真菜”。
HTML心法
Semantic - 语义化
HTML5引入了一堆语义化标签,所谓语义化标签,就是没什么默认样式,纯粹为了描述内容是什么,例如header
, footer
, time
等。
引入这些标签是为了
- 让人更好的理解内容
语义化让页面结构清晰,利于开发和维护。 - 让机器更好的理解内容
- 方便爬虫、搜索引擎理解网页的内容,利于传播。
- 方便屏幕阅读器等工具理解网页等内容,为残障人士提供方便。
附上锤子发布会上蔡聪的一段视频,印象深刻。
语义化做好后,未来一定还会有更多的工具出现,方便所有人。
怎么做好语义化,太难讲了,我自己也没做好,反过来说说什么是不好的吧。
不好的做法:为了样式去选择标签
先看个低级点的错误:引用一句话,只因为想在前面加个点,就不用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。