驴妈妈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="https://github.com/LVMM-PC/fed-style-guide/blob/master/global.css">
<script type="text/javascript" src="https://github.com/LVMM-PC/fed-style-guide/raw/master/public.js"></script>

<!--好-->
<link rel="stylesheet" href="https://github.com/LVMM-PC/fed-style-guide/blob/master/global.css">
<script src="https://github.com/LVMM-PC/fed-style-guide/raw/master/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="https://github.com/LVMM-PC/fed-style-guide/blob/master//s1.lvjs.com.cn/styles/v6/header_new.css"/>
    <link rel="stylesheet" type="text/css" href="https://github.com/LVMM-PC/fed-style-guide/blob/master/插件或业务css地址"/>
</head>
<body>
    <!--正文 code here-->
    <script type="text/javascript" src="https://github.com/LVMM-PC/fed-style-guide/raw/master//s1.lvjs.com.cn/js/new_v/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="https://github.com/LVMM-PC/fed-style-guide/raw/master/插件或业务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

LVMM-PC / fed-style-guide

readme