蘑菇街前端开发规范-javascript篇

var firstVari = 0,
    secondVari = 1;

var firstVari = 0
    ,secondVari = 1;

var fristVari       = 0;
var secondLongVari  = 1;

i++;
i--;

var myName = 'beile';

function getValue(firstParam, secondParam) {
    // do something ...
}

// if 语句
if (condition) {
    // do something...
} else if (condition) {
    // do another thing...
} else {
    // do something...
}

// for 语句
for (var i = 0; i < 10; i++) {
    // do something...
}

// while 语句
while (condition) {
    // do something...
}

// switch 语句
stitch (condition) {
    case 'case1':
        // do something...
    case 'case2':
        // do something...
    default:
        // do something...
}

function theVeryVeryLongMethod(firstLongParams, secondLongParams, thirdLongParams) { // 不推荐！
    // do something... 
}

function theVeryVeryLongMethod(firstLongParams, 
                                secondLongParams, // 注意第二个参数的缩进
                                thirdLongParams) {
    // do something...
}

function theVeryVeryLongMethod(
        firstLongParams, // 参数另起一行，注意代码的缩进
        secondLongParams, 
        thirdLongParams) {
    // do something...
}

if (firstLongCondition 
    || secondLongCondition // 根据运算符另起一行
    || thirdLongCondition) {
    // do something...
}

var a = 123;
console.log(a); // 输出 123;
function bb() {
    a = 234; // 未加 var 定义变量。
}
console.log(a); // 输出 234; a 的值变了。

var b = 1 // 未加分号结尾
-1 == 0;
console.log(b); // 输出为 true; 原因是定义变量 b 时未加分号，导致与下面语句串联后，b 被赋值为 1 - 1;
所以为避免此种情况发生，请在语句结尾处加上';'

var isShow = new Boolean(false);
console.log(typeof isShow); // 输出 'object'
if (isShow) { // 此处判断为 true;
    console.log('isShow is true !'); 
}

// 使用 Array 构造函数，由于构造函数对参数的处理不够明确，会引起不必要的bug，
// 例如 new Array(3); 创建的是一个长度为 3 的空数组，而不是创建一个长度为 1、值为 3 的数组。
// 所以使用直接字面量来创建数组，代码的可读性会更好。也不会给后续埋坑。
var arr = [1, 2, 3]; // 推荐
var arr = new Array(1, 2, 3); // 不推荐！

// 同时推荐使用直接字面量创建对象
var obj = {}; // 推荐
var obj = new Object(); // 不推荐！

var user = {
    name: 'beile', // 冒号前不留空格，冒号后一个空格
    sex: 'male' // 最后一个属性后不要加 ','，否则在部分浏览器下会报错
}; // 请不要忘记';'

// 在构造函数中
function People(name) {
    this.name = name;
}
// 在构造函数的原型扩展方法中
People.prototype.showName = function() {
    console.log('my name ' + this.name);
}

// 另外如果使用的开发框架是 jQuery，推荐将事件触发的 dom 对象赋值给一个临时变量。for example:

$('.selector').click(function() {
    var self = $(this); // 可避免在后续的方法中 $(this) 对象的指向不明。
});

Object.prototype.name = 'hello'; // 在 Object 上扩展原型 name
var b = {age: 18}; // 创建一个对象
for(var n in b) { // 遍历 b 中属性
    console.log(n); // 输出 name 、 age
}

for(var n in b) {
    if(b.hasOwnProperty(n)) {
        console.log(n); 只输出 age
    }
}

mx.util.string.getByte = function(str) {
    // do something...
}

var listHtml = '<ul class="all_item">' + 
                    '<li class="item">first item</li>' + 
                    '<li class="item">second item</li>' + 
                '</ul>';

var listHtml = [
    '<ul class="all_item">',
        '<li class="item">first item</li>',
        '<li class="item">second item</li>',
    '</ul>'
].join(''); // 使用 jion 拼接

(function($, Mx) {
    var fruit = 'banner';
})(jQuery, Mx); // 虽然 jQuery 是全局变量，但最好在闭包中显式声明参数，这样可以方便知道该组件使用了哪些框架。另：最后不要忘了';'

//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//

/************************************************ 
*
* 类的功能介绍，简述类的使用方法和功能。
* @require: a.js
*           b.js // 依赖的 js 文件
* @author: 作者
* @create: 创建时间
* @modify: 最后修改时间，对于通用组件不做强制要求。但是对于业务代码，每次修改需写明负责人和时间。
* 
*************************************************

/**
 * 方法的功能介绍
 * @param: {string} str
 *          {object} options // 指明参数的类型
 * @return: {string} str // 返回类型
 * @author: 作者
 * @create: 创建时间
 * @modify: 最后修改时间
 */

    // 首先定义构造函数，
    function MyClass(options) { // 参数可选
        this.option = options;
    }

    // 通过原型扩展类
    MyClass.prototype.method = function(params) { 
        // do something...
    }
});

// 通过使用 new 来创建自定义类的实例
var myFirstClass = new MyClass({name: 'beile'});

    myFirstCLass.method = function(params) {
        // do another thing...
    }
```    
    而不要直接修改类的原型来达到目的，
```{bash}
    MyClass.prototype.method = function(params) { // 不推荐！除非你的所有对象实例都需要修改这个方法。
        // do something...
    }