以下为前端规范第一版,大家有啥想法及时交流一起完善
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变量命名