来自 https://piappcn.github.io/2018/07/26/%E7%90%A5%E7%8E%A5%E5%85%AC%E5%8F%B8%E5%89%8D%E7%AB%AF%E8%A7%84%E8%8C%83/ 这里会持续更新，欢迎大家讨论和指正。
其中，基本规范强制执行哈，前端同学看下，以后的项目的代码，
在代码复查的时候会，会安装这个标准来

HTML 基本规范 【强制】

  • 标签全部小写且闭合
  • 代码中的引号全部使用双引号（区别js）
  • 合理使用语义化html标签
  • 使用utf-8编码

css 基本规范 【强制】

  • pc端默认字号16px;
  • 使用外链css文件
  • html标签中不使用style样式
  • css文件中样式按块写，公共样式要提取，同一属性要合并，注释要清楚
  • 尽量不使用html标签选择器来声明样式
  • 样式的小图片使用sprite图片
  • h5页面使用rem适配，html的font-size:50px;

CSS选择器命名规范 【强制】

  • 类和id命名，一律小写，使用中杠连接
  • 类和id命名，尽量不缩写，除非一看就明白的单词
  • 不要轻易使用id

CSS书写顺序 【建议】

  • 位置属性(position, top, right, z-index, display, float等)

  • 大小(width, height, padding, margin)

  • 文字系列(font, line-height, letter-spacing, color- text-align等)

  • 背景(background, border等)

  • 其他(animation, transition等)

公共组件的css 【强制】

  • 公共组件的css , 样式强制使用命名空间，避免影响其他样式

  • 同一套ui库命名空间要有规律， 我们建议使用 g-hy 开头 例如，g-hy-pop

  • 公共组件的要在命名空间中写初始化样式，避免在不同的初始化样式中无法正常使用

排版标准 【强制】

  • 缩进：以tab缩进 2 或者 4

  • 分号“;”，每个语句结束需加“;”

  • “{}”大括号单独占一行

js基本规范 【强制】

  • 如果在项目中使用到了自己写的npm包，一定要把源码上传到 https://code.ihuyue.net/Frontend/huyue-npm 避免出现bug后，找不到人修改的情况
  • 在项目中，如果是为了js方便 操作dom结构而定义的类名，或者id名。要添加 j- 来明确是使用js 来控制的。 例如 j-nav j-centen
  • 声明变量 一定要加 var 或者 let 关键字，避免全局变量污染。
  • 变量命名：统一小驼峰命名法，使用英文缩写，不可使用拼音
  • 不同页面的同个变量的命名，要保持一致
  • 不要在块内声明一个函数
  • 能用css实现的动画不要使用js
  • 函数命名使用动宾结合的方法，一眼看懂。函数的参数超过三个时，使用对象的形式，并进行适当的初始化。
  • 类名大写开头，私有变量须加 “_” 下划线前缀，私有方法小写开头
  • 对象和数组使用字面量方式声明。
  • 禁止使用eval
  • 引号要用单引号
  • 不要使用with() {} 会让代码语义不是很清楚
  • 为全局代码使用命名空间，使用一个唯一的, 与工程/库相关的名字作为前缀标识. 比如, 你的工程是 “Project Sloth”, 那么命名空间前缀可取为 sloth.*.

静态资源引入规范 【强制】

  • 资源原则只能引本域名下资源，测试资源上线前一定要检查替换
  • cdn 资源不写协议名，例如
    1
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

注释 【尽量保持风格，但注释一定要有】

//我们也遵循 C++ 代码注释风格 . 这也就是说你需要:

  • 行内注释使用 // 变量 的形式

  • 版权和著作权的信息,如姓名

  • 文件注释中应该写明该文件的基本信息(如, 这段代码的功能摘要, 如何使用, 与哪些东西相关), 来告诉那些不熟悉代码的读者.

  • 类, 函数, 变量和必要的注释,

  • 期望在哪些浏览器中执行,

  • 正确的大小写, 标点和拼写.
    为了避免出现句子片段, 请以合适的大/小写单词开头, 并以合适的标点符号结束这个句子.

    顶层/文件注释

    顶层注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西. 应该提供文件的大体内容,

  • 它的作者,

  • 依赖关系和兼容性信息

    建议如下:

    1
    2
    3
    4
    5
    6
    // Copyright 2009 Google Inc. All Rights Reserved.
    /**
     * @fileoverview Description of file, its uses and information
     * about its dependencies. 
     * @author user@google.com (Firstname Lastname)
     */

    类注释

  • 每个类的定义都要附带一份注释,

  • 描述类的功能和用法.

  • 也需要说明构造器参数.

  • 如果该类继承自其它类, 应该使用 @extends 标记.

  • 如果该类是对接口的实现, 应该使用 @implements 标记.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    /**
     * Class making something fun and easy.
     * @param {string} arg1 An argument that makes this more interesting.
     * @param {Array.<number>} arg2 List of numbers to be processed.
     * @constructor
     * @extends {goog.Disposable}
     */
    project.MyClass = function(arg1, arg2) {
      // ...
    };
    goog.inherits(project.MyClass, goog.Disposable);

    方法与函数的注释

  • 提供参数的说明.

  • 使用完整的句子,

  • 并用第三人称来书写方法说明

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /**
     * Converts text to some completely different text.
     * @param {string} arg1 An argument that makes this more interesting.
     * @return {string} Some return value.
     */
    project.MyClass.prototype.someMethod = function(arg1) {
      // ...
    };

    /**
     * Operates on an instance of MyClass and returns something.
     * @param {project.MyClass} obj Instance of MyClass which leads to a long
     *     comment that needs to be wrapped to two lines.
     * @return {boolean} Whether something occured.
     */
    function PR_someMethod(obj) {
      // ...
    }

    对于一些简单的, 不带参数的 getters, 说明可以忽略.

    1
    2
    3
    4
    5
    6
    /**
     * @return {Element} The element for the component.
     */
    goog.ui.Component.prototype.getElement = function() {
      return this.element_;
    };

    属性注释

    也需要对属性进行注释.

    1
    2
    3
    4
    5
    /**
     * Maximum number of things per pane.
     * @type {number}
     */
    project.MyClass.prototype.someProperty = 4;

    类型转换的注释

    有时, 类型检查不能很准确地推断出表达式的类型, 所以应该给它添加类型标记注释来明确之, 并且必须在表达式和类型标签外面包裹括号.

    1
    2
    /** @type {number} */ (x)
    (/** @type {number} */ x)

前端优化

减少HTTP请求，工程中常用的实践如下

  • 分别合并js和css文件或者按需加载js文件和css文件。

  • 对页面中或者css中的雪碧图进行拼接合并，减少图片加载个数，即减少http请求。

  • 若页面中有大量图片加载，可以使用lazyload加载。

    css文件及js文件的位置及优化

  • 根据浏览器渲染网页的原理，可以将css文件放在head标签中先加载，把js文件放在body标签底部加载。

  • 精简js文件和css文件，在css文件中将具有相同属性的选择器组合在一起写。

  • 对js和css文件进行压缩后再发布

    减少对dom的操作

  • 每次对dom的操作都会造成dom树的重绘和重排，故在dom操作的过程当中，要将dom结构缓存在局部变量中。

  • 避免使用内联形式的css样式，eg.
    <p style="background-color:red"> stest </p>

    合理使用html标签及css选择器

  • 不合理的html标签对搜索引擎不友好

  • 因css选择器是从右向左匹配，故不合理的css文件中的css选择器会加大页面开销

    使用cdn加速

    使用JSON格式进行数据交换

  • JSON：一种轻量级的数据交换格式

  • DNS预解析提升页面速度

疑问？？？

为什么不建议使用“_”下划线来命名CSS选择器？

  • 输入的时候少按一个shift键；
  • 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）
  • 能良好区分JavaScript变量命名

__END__

Live For Code
文章作者：Live For Code
文章出处：琥玥公司前端开发规范
作者签名：简单地活着, 肆意又精彩.
关于主题：Hexo - Live For Code
版权声明：文章除特别声明外，均采用 BY-NC-SA 许可协议，转载请注明出处