前端规范及最佳实践
2016-03-18 本文已影响132人
danejahn
本文是公司开发web应用的规范,后面还会继续补充。
编写本文档的主要驱动力是两方面: 1)代码一致性 以及 2)最佳实践。 通过保持代码风格和传统的一致性,我们可以减少遗留系统维护的负担,并降低未来系统崩溃的风险。而通过遵照最佳实践,我们能确保优化的页面加载、性能以及可维护的代码。
参考:
前端代码规范 及 最佳实践
Airbnb JavaScript Style Guide
Javascript
编码总体原则
- 将99%的代码放在外部js文件中,放在</body>的前部,让页面的性能最大化。
命名
- js文件的命名,用连字符(-)来连接命名的不同单词。
- 属性,方法均采用驼峰命名法,除了对象的构造方法首字母大写之外,其余的属性,方法首字母均小写。
var globalVariable = 'I am Global Variable';
- 不要用语言不明的缩写,不用担心名字过长,名字一定要让别人知道确切的意思。
CSS
编码总体原则
- 从外部文件加载css,尽可能减少文件数。加载标签放在文件的head部分。
- 不要使用内联式样式
<p style="font-size: 20px; color: #FFFFFF">This is a book</p>
- 页面中少量的样式放在head的style标签内,大量的样式可以提取到外部的css文件中。
<style type="text/css">
#overview{
font-size: 16px;
line-height: 28px;
margin: 10px;
}
</style>
- 编写性能优化的选择器。避免使用开销大的CSS选择器,比如*。
命名
- css/less文件用连字符(-)来连接命名的不同单词。
- 样式用连字符(-)来连接命名的不同单词。
.ui-list{}
#btn-open-main-page{}