js代码规范

1.代码块

• 不同的代码块中间空两行

  不同的代码块中间要有两行的空格，比如：最上边是引用模块，空两行之后是全局变量模块，空两行之后是下一个模块。

• 相同类型的代码块写在一起

  相同类型的代码块要写在一起，比如最上边是所有模块的引用，然后是所有的全局变量，然后是所有的….

• 符号两侧

  “=” 左右分别空一格 var base = tpl.base;

  “+” 左右分别空一格 console.log('reducedIndex:' + reducedIndex);

  var一格变量，变量左右分别空一格 var type = obj.type;

  不同的参数之间++右边++空一格

  “：”++右边++空一格 type: index

• 同一个函数内

  在一个函数内，可能有不同的操作，不同类型的操作空一行，一件事一件事的说。

  同一个dom如果多次使用，就将它定义为一个变量，另外：jQuery对象变量名要以$开头

  函数调用完之后加;

• css代码

  一般先写定位；然后width、height；最后写 color、background之类的

• 函数注释

  先写 function(a,b){

  }
  然后再它的上边， /** 再回车即可

• 关于扩展性

  有些代码太繁琐，能将其改为函数的，就改为函数

eg：将以下代码

var temp = tpl.base  + tpl.staffList  + tpl.staffList + tpl.staffList + tpl.base;
this.createHtml(temp,3);   
break;

改为

var genListTpl = function(tpl, baseCount, staffCount) {
    if (baseCount < 0 || staffCount < 0) {
        throw new Error('baseCount or staffCount cannot be negative in createList::genListTpl function');
    }

    var base = tpl.base;
    var halfBaseCount = Math.floor(baseCount / 2);
    var staff = tpl.staffList;
    var result = [];

    while (staffCount > 0) {
        result.push(staff);
        staffCount--;
    }

    while (halfBaseCount > 0) {
        result.unshift(base);  //开头一半
        result.push(base);   //结尾一半
        halfBaseCount--;
    }

    return result.join(''); //拆成字符串相加
};
var temp = genListTpl(tpl, 2, 3);
this.createHtml(temp, 3); 
break;

• 关于log

写在一个模块中
有console.log();
console.errro();  //红色注释
console.warn();  //黄色注释
var levels = {
    'dev': 1,
    'online': 2,
    'test': 3
  };
function Logger(mode) {


    this.level = levels[mode];
};
Logger.prototype = {
  log: function() {
    if (window.console && console.log) {
      if (this.level !== levels['online']) {
          window.console.apply(console, Array.prototype.slice.call(arguments));
      }
    }
  }
};

var logger = new Logger('online');

css中的 &

.m-addr-list{
    .empty{
        background: #fff;
        padding-top: 1rem;
        line-height: 1.5rem;
        text-align: center;
    }
    .place-holder{
        height: 1.5rem;
        background-color: #fff;
    }
    &.select {
    }
}

这里，empty是m-addr-list下边的类 而 select 与 m-addr-list 平级
eg

<div class="m-addr-list  select"></div>

• ===与 ==

  判断时，尽量使用严格等于 ===

  eg: 我们对 ajax 请求返回的状态码result.code进行判断时，尽量使用result.code === 0因为==会进行强制类型转换，而===则不会，避免了因强制类型转换而造成的误判。

• 数据合法性判断

  当我们需要取得某个数据下的一个值(eg:item.skuList[index].id.skuId)时，需要确保：

  1.item不为空

  2.skuList是一个数组

  3.skuList[index]不为空

  4.skuList[index]中的id不为空

否则对item.skuList[index].id.skuId取值时，就会报错，所以需要验证数据的合法性。有些情况下可以从确保以上4个条件一定满足，当无法满足时，应校验数据合法性：

let skuId;

isExisty(item) && 
isArray(item.skuList) &&
isExisty(item.skuList[index]) &&
isExisty(item.skuList[index].id)&&
(skuId = item.skuList[index].id.skuId)

• 代码要尽量保持简洁

  eg：

  let getCurrentTabEmptyArray = (tabItems) => {
      let len = tabItems.length;
      return new Array(len);
      //这块直接 return new Array(tabItems.length); 更简洁，因为len变量并没有做其它处理
  }

• 代码一定要适当的进行分段，增加可读性

  let func = () => {
      // 定义部分 
      let a = 0;
      let b = 1;
  
      // 数据处理部分
      a += b;
  
      // 输出部分
      return a;
  }

• 不要在一行内写所有的逻辑判断、属性

  一行太长的话影响阅读。

• 赋值在代码规范中不建议用逗号运算符来一次赋值

  这样容易因中间赋值出错时发生断路。

• 变量缓存

  一个变量在代码段中使用超过两次，就要缓存下来，以有意义的名字替代。

  1.代码更简洁、清晰，一处修改整体生效

  2.在js的嵌套属性查询或是涉及dom操作的部分，缓存中间结果将会大大提升查询效率。 像JQuery中的查询操作，每次查询都需要重新遍历dom树，若不缓存会很影响性能。

代码语义化

• 使用函数作状态的判断，更好维护
  eg：
  代码规范中提到的对 ajax 请求返回的数据状态判断 result.code进行判断，更好的做法是将其封装为一个通用的方法：

  let isResultSuccessful = (result) => {
      return isExisty(result) && isExisty(result.code) && result.code == '0';
      // isExisty 为验证传入的参数是否存在的方法
  }

  这样，阅读者能够更加顺畅的理解代码。

• getXXX方法，setXXX方法，initXXX或resetXXX方法 从函数名就可以了解函数的作用，所以一般情况下：

  • getXXX方法中，都应该要有返回值
  • setXXX的方法，都不应该有返回值，而是设置值
  • initXXX或resetXXX方法，包含了以上两个过程
    eg：
    

    let prdtData;
    
    //一定要有返回值
    let getData = () => {
        return {
            skuPrice: 1,
            skuId: 1008,
            poSkuId: 320,
        }
    }
    
    //不应该有返回值，而是在设置值
    let setData = ({skuPrice,skuId}) = > {
        prdtData = {
            price: skuPrice,
            id: skuId,
        }
    }
    
    let resetData = () => {
        setData(getData())
    }

数据适配处理

我们获取到的数据(比如从AJAX获取)，与页面中做需要的数据结构经常是有出入的，那么这个时候就需要对数据进行适配处理。

数据处理有两种方式：

1.直接在当前模块中返回新的适配结构，适用于轻量数据，如以下情况：

//假设获取的数据为data
let data = [
    {
        skuPrice: 1, 
        skuId: 1008, 
        poSkuId:320
    },{
        skuPrice: 100, 
        skuId: 1009, 
        poSkuId:321
    },{
        skuPrice: 99, 
        skuId: 1010, 
        poSkuId:322
    }
];

// 但 data的数据结构不符合要求，要重新适配
let newData = data.map( (item, index) => {
    let {skuPrice, skuId, poSkuId} = item;
    return {
        skuPrice,
        id: {
            skuId,
            poSkuId
        }
    }
})

通过new一个适配器的形式生成新结构，因为可能会涉及多个数据实体的适配，适用于量级大、或通用性强的数据

// 在CategoryAdaptor中处理数据
new CategoryAdaptor(subItem).getData()

数据存储至本地(cache)

1.首先判断相应的key是否在缓存内
   i.若命中，以缓存的值为输入调用后续逻辑；
   ii.若未命中，获取缓存 -> 写缓存 -> 调用后续逻辑
2.得到数据的后续的逻辑可以统一声明一个函数处理