前端规范及最佳实践

本文是公司开发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{}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容