驴妈妈PC开发规范

本规范的主要目标：

代码风格一致

通过保持代码风格的一致，使代码具有良好的可读性，降低代码的维护成本，提高团队间的协作效率。
最佳实践

通过遵守最佳实践，可以降低 bug 引入的可能，提高页面性能，编写出可扩展可维护的代码。

本规范的编写原则：努力兼顾代码风格与开发效率的平衡，既要努力做到 "使每一行代码都像是同一个人编写的"，又要尽量避免 "大家都觉得这样很麻烦"。

本规范的更新：本规范是当前阶段的一个总结，不是最终版，也不会有最终版，随着代码风格的优化、最佳实践的发展，本规范也会变化。

本规范的代码说明：不符合规范的代码写法，会有注释 不好，符合规范的代码写法，会有注释 好，最佳写法，会有注释 最佳；在空格相关的规范中，使用 · 号来强调表示空格。

规范最重要的是执行。

JavaScript

命名

避免使用单一字母命名，让你的名字具有实际含义。

// 不好
function q() {
    // ...
}

// 好
function query() {
    // ...
}

使用小驼峰命名法来命名基本类型、对象和函数。

即使是常量也不要使用全部大写，大写的名称难以阅读。在 ES5 中由于没有 const 关键字，将一个实际不会改变的变量命名为全部大写，有助于在视觉上与普通变量加以区分，并方便语法检测工具进行检查。而在 ES6 中，这是没有必要的。
```
// 不好
const TAXFORPRODUCT = 0.9;
let this_is_my_object = {};
function c() {}

// 好
const taxForProduct = 0.9;
let thisIsMyObject = {};
function thisIsMyFunction() {}
```

使用 Pascal命名法来命名构造函数和类。

// 不好
function user(options) {
    this.name = options.name;
}

const bad = new user({
    name: 'Jack',
});

// 好
class User {
    constructor(options) {
        this.name = options.name;
    }
}

const good = new User({
    name: 'Jack',
});

缩略词应该保持全部大写或者全部小写。

// 不好
import SmsContainer from './containers/SmsContainer';

// 不好
const HttpRequests = [
    // ...
];

// 好
import SMSContainer from './containers/SMSContainer';

// 好
const HTTPRequests = [
    // ...
];

注释

对于类、方法、复杂的代码逻辑、从名称上难以理解的变量、正则表达式等，尽可能加上注释，以便于后期维护。

// 是否是由 tab 切换引起的页面滚动
let isScrollingByTab = false;

/**
 * 获取对象的指定属性
 * 属性可以是一个用点号连接的多层级路径
 * @param {object} object 对象
 * @param {string} path 属性值，可以是路径，如：'a.b.c[0].d'
 * @param {any} [defaultVal=''] 取不到属性时的默认值
 * @returns {any} 获取到的属性值
 */
function getPathValue(object, path, defaultVal = '') {
    // ...
}

单行注释使用 //，总是在需要注释的内容的上方加入注释，并在注释之前保留一个空行，除非该注释是在当前代码块的第一行。

// 不好
const active = true;  // 当前 tab 状态

// 好
// 当前 tab 状态
const active = true;

// 不好
function getType() {
    console.log('获取type...');
    // 设置默认 type 为 'no type'
    const type = this.type || 'no type';

    return type;
}

// 好
function getType() {
    console.log('获取type...');

    // 设置默认 type 为 'no type'
    const type = this.type || 'no type';

    return type;
}

// 好
function getType() {
    // 设置默认 type 为 'no type'
    const type = this.type || 'no type';

    return type;
}

多行注释使用 /** ... */，并尽可能遵循 jsdoc 注释规范。

遵循 jsdoc 规范的注释，能够很方便的自动生成 api 文档；同时，也能提升编码体验，以 webstorm 为例，当你调用函数时，会浮动提示该函数的描述、参数类型、返回值等信息。

// 不好
// 获取对象的指定属性
// 属性可以是一个用点号连接的多层级路径
function getPathValue(object, path, defaultVal = '') {
    // ...
}

// 好
/**
* 获取对象的指定属性
* 属性可以是一个用点号连接的多层级路径
*/
function getPathValue(object, path, defaultVal = '') {
    // ...
}

// 最佳
/**
 * 获取对象的指定属性
 * 属性可以是一个用点号连接的多层级路径
 * @param {object} object 对象
 * @param {string} path 属性值，可以是路径，如：'a.b.c[0].d'
 * @param {any} [defaultVal=''] 取不到属性时的默认值
 * @returns {any} 获取到的属性值
 */
function getPathValue(object, path, defaultVal = '') {
    // ...
}

在注释内容之前加上 FIXME: 可以提醒自己或其他开发人员这是一个需要修改的问题。

class Calculator extends Abacus {
    constructor() {
        super();

        // FIXME: 不应该使用一个全局变量
        total = 0;
    }
}

在注释内容之前加上 TODO: 可以提醒自己或其他开发人员这里需要一些额外工作。

class Calculator extends Abacus {
    constructor() {
        super();

        // TODO: total 要写成可以被传入的参数修改
        this.total = 0;
    }
}

变量

不要定义未使用的变量

function myFunction () {
    // 不好
    var result = something()
}

###全等

始终使用 === 替代 ==。

例外： obj == null 可以用来检查 null || undefined。

// 好
if (name === 'John') {}
// 不好 
if (name == 'John') {}

//好
if (name !== 'John') {}
//不好
if (name != 'John') {}

###声明

每个 var 关键字单独声明一个变量。

// 好
var silent = true
var verbose = true
 
// 不好
var silent = true, verbose = true
 
// 不好
var silent = true,
    verbose = true

HTML

命名

标签名全部小写。

<!--不好-->
<DIV>这是一个块级元素</DIV>

<!--好-->
<div>这是一个块级元素</div>

属性名全部小写，使用 - 作为分隔符。

<!--不好-->
<div Class="contain" itemCode="1"></div>

<!--好-->
<div class="contain" item-code="1"></div>

样式类全部小写，使用 - 作为分隔符。

<!--不好-->
<button class="btnPrimay btn_outline">选择城市</button>

<!--好-->
<button class="btn-primay btn-outline">选择城市</button>

空格

使用 4 个空格作为缩进。

<!--不好-->
<div>
··<span>这是一行文本</span>
</div>

<!--好-->
<div>
····<span>这是一行文本</span>
</div>

不要混用 Tab 和空格。

这可能会导致一些格式上的异常，例如：在 Jade 中混用 Tab 和空格就会出错。

标签内的文本避免使用空格，应该使用样式来实现。

<!--不好-->
<p>
    &nbsp;&nbsp;这是一些文本
</p>

<!--好-->
<p style="text-indent: 2em;">
    这是一些文本
</p>

<!--不好-->
<div>￥&nbsp;1000</div>

<!--好-->
<div>￥<span style="margin-left: 5px">1000</span></div>

引号

属性值的最外层使用双引号。

<!--不好-->
<div class=container></div>

<!--不好-->
<div class='container'></div>

<!--好-->
<div class="container"></div>

属性

引入 css 和 js 时不需要指明 type 属性。

text/css 和 text/javascript 分别是它们的默认值。

<!--不好-->
<link type="text/css" rel="stylesheet" href="global.css">
<script type="text/javascript" src="public.js"></script>

<!--好-->
<link rel="stylesheet" href="global.css">
<script src="public.js"></script>

布尔属性不需要指明属性的值。

布尔属性存在代表取值为 true，属性不存在代表取值为 false。

<!--不好-->
<input type="text" disabled="disabled">
<input type="checkbox" value="1" checked="checked">

<!--好-->
<input type="text" disabled>
<input type="checkbox" value="1" checked>

尽量将 class、id 等使用频率高的属性放在前面。

<!--不好-->
<input type="text" placeholder="请输入关键字" id="search-input" disabled class="form-control">

<!--好-->
<input class="form-control" id="search-input" type="text" placeholder="请输入关键字" disabled>

使用 data-* 创建标准化的自定义属性。

这是创建自定义属性的标准方式；加上 data- 前缀能够明确表示这是一个自定义属性，而非原生属性；另外，在 JavaScript 中还可以通过 document.querySelector(selector).dataset 方便的访问它们。
```

<div class="container" code="freetour"></div>


<div class="container" data-code="freetour"></div>
```

注释

对于重要的元素，尽可能加上注释，以便于后期维护。

<!--筛选面板上方的加载中动画，主要用于：1. 点击筛选项，2. 点击清空筛选 时显示-->
<div id="loading2" style="display:none;">
    <div></div>
</div>

<!--筛选面板上方的提示语，主要用于无筛选数据时显示-->
<div id="filterTip" style="display:none;">
    <span>该筛选项无数据，已恢复至默认选项！</span>
</div>

CSS

空格

使用 4 个空格作为缩进。

/* 不好 */
p {
··color: #555;
}

/* 好 */
p {
····color: #555;
}

在 { 前加 1 个空格。

/* 不好 */
p{
    color: #555;
}

/* 不好 */
p
{
    color: #555;
}

/* 好 */
p·{
    color: #555;
}

将 } 放置于新行。

/* 不好 */
p {
    color: #555;}

/* 好 */
p {
    color: #555;
}

在属性值前加 1 个空格。

/* 不好 */
p {
    color:#555;
}

/* 好 */
p {
    color:·#555;
}

在属性值中的 , 后面加 1 个空格。

/* 不好 */
.element {
    background-color: rgba(0,0,0,.5);
}

/* 好 */
.element {
    background-color: rgba(0,·0,·0,·.5);
}

在注释的 /* 后和 */ 前各加 1 个空格。

/* 不好 */
/*这是一行注释*/
p {
    color: #555;
}

/* 好 */
/*·这是一行注释·*/
p {
    color: #555;
}

属性值中的 ( 前不要加空格。

/* 不好 */
.element {
    background-color: rgba·(0, 0, 0, .5);
}

/* 好 */
.element {
    background-color: rgba(0, 0, 0, .5);
}

选择器 >、+、~、: 等前后都不要加空格。

/* 不好 */
div·>·p {
    color: #555;
}

div·:·after {
    content: "";
}

/* 好 */
div>p {
    color: #555;
}

div:after {
    content: "";
}

各规则之间保留一个空行。

/* 不好 */
p {
    color: #555;
}
.element {
    background-color: rgba(0, 0, 0, .5);
}

/* 好 */
p {
    color: #555;
}

.element {
    background-color: rgba(0, 0, 0, .5);
}

在规则声明中有多个选择器时，每个选择器独占一行。

/* 不好 */
div, p, span {
    color: #555;
}

/* 好 */
div,
p,
span {
    color: #555;
}

引号

字符串类型的值使用双引号。

/* 不好 */
.element:after {
    content: '';
    background-image: url(logo.png);
}

/* 好 */
.element:after {
    content: "";
    background-image: url("logo.png");
}

小数

不要设置小数作为像素值。

像素值为小数时会被解析成整数，且各浏览器解析方式存在差异。
```
/* 不好 */
div {
    width: 9.5px;
}

/* 好 */
div {
    width: 10px;
}
```

去掉小数点前面的 0。

/* 不好 */
.element {
    color: rgba(0, 0, 0, 0.5);
}

/* 好 */
.element {
    color: rgba(0, 0, 0, .5);
}

零值

属性值为 0 时，后面不要加单位。

/* 不好 */
.element {
    width: 0px;
}

/* 好 */
.element {
    width: 0;
}

定义无边框的样式时，将属性值设为 0 而不是 none。

/* 不好 */
div {
    border: none;
}

/* 好 */
div {
    border: 0;
}

注释

对于较生僻的样式、解决特定问题的样式、需要特别注明的样式等，尽可能加上注释，以便于后期维护。

.modal {
    /* 蒙版的层级必须大于700，以放在列表之上；同时必须小于900，以放在导航之下 */
    z-index: 701;
}

页面相关

整体结构

页面 html 模板如下：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>超级自由行</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit"/>
        <meta name="Keywords" content="自由行,景点门票,跟团游,自驾游,机票,酒店"/>
        <meta name="Description" content="驴妈妈旅游网-中国新型的B2C旅游电子商务网站，为旅游者提供景区门票、自由行、度假酒店、机票、国内游、出境游等一站式旅游服务，《自在游天下,就找驴妈妈!》"/>
        <link rel="stylesheet" type="text/css" href="//s1.lvjs.com.cn/styles/v6/header_new.css"/>
        <link rel="stylesheet" type="text/css" href="插件或业务css地址"/>
    </head>
    <body>
        <!--正文 code here-->
        <script type="text/javascript" src="//s1.lvjs.com.cn/js/new_v/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="插件或业务js地址"></script>
    </body>
</html>

CSS：css 在 head 部分引用，业务 css 前需引用全局 css (v6/header_new.css)，不要合并请求；
JS ：js 在 body 闭合标签前引用，插件、业务 js 前需引用全局 js (jquery-1.7.2.min.js)，不要合并请求；

图片

有超过一屏的图片展示，需使用 lazyload 插件，实现懒加载；
产品图片背景
- 背景统一为灰色小驴，居中显示；
防止轮播图平铺

> 在网速慢的情况下，轮播里面的图片会出现平铺显示的情况

需在外层盒子限制其高度（padding-bottom 或 "固定高度"）。

尽量使用icon-font 阿里图标库地址: 驴妈妈官方icon

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

驴妈妈PC开发规范

规范最重要的是执行。

目录

JavaScript

命名

注释

变量

HTML

命名

空格

引号

标签

属性

注释

CSS

空格

引号

小数

零值

注释

页面相关

整体结构

图片

About

Releases

Packages

Contributors 2

License

LVMM-PC/fed-style-guide

Folders and files

Latest commit

History

Repository files navigation

驴妈妈PC开发规范

规范最重要的是执行。

目录

JavaScript

命名

注释

变量

HTML

命名

空格

引号

标签

属性

注释

CSS

空格

引号

小数

零值

注释

页面相关

整体结构

图片

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Contributors 2

Packages