前端规范第一版

以下为前端规范第一版，大家有啥想法及时交流一起完善

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
    		 
    /**
 * 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变量命名

发表评论

电子邮件地址不会被公开。 必填项已用*标注