美文网首页
前端规范及最佳实践

前端规范及最佳实践

作者: danejahn | 来源:发表于2016-03-18 21:26 被阅读132次

    本文是公司开发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{}
    

    相关文章

      网友评论

          本文标题:前端规范及最佳实践

          本文链接:https://www.haomeiwen.com/subject/ohchlttx.html