记一次Code Review

最近同事之间互相在review代码,这是我对同事的一次review分析,他看不到所以得罪不到。

主要Review的是这页面的js:https://newhouse.591.com.tw/home/housing/vr

1.eslint检测

eslint-error
eslint-error

自从我们有了使用eslint检测代码的优良传统,首先要做的就是消除eslint的错误提示。

2.归类、抽象就是一种总结

过程式的写法
过程式的写法

我们一般的思维可能是,找到程序的入口在哪里,从哪里开始执行。过程式编程就会让这种方式困难一些,一下子比较难以找到入口,就无法顺着代码的思路走下去。

我比较推荐的做法是这样的:

    var API = {
        postSendMsg: function (data, callback) { // 免費電話獲取驗證碼
      ···
        },
        freeCall: function (data, callback) { // 免費電話撥打
      ···
        },
        serviceTime: function (data, callback) { // 获取服务时间
      ···
        }
    }
var Refund = {
    init:function(){
        ...
    }
}

Refund.init();

将一些有共性的东西提取出来,进行归类到一个对象。然后有一个init函数作为入口,里面会有一些dom的初始化和事件绑定,相当于控制器。

oop
oop

3.去掉snippets一些多余代码

  function share(obj,cate) {
        var _obj = obj.parents('li'),
            _hid = _obj.attr('data-id'),
            _type = _obj.attr('data-type');

        $.post('/home/housing/areaStatistics', {hid: _hid,type:_type,cate:cate}, function (data) {})
    }

其中的function(data){}没有起作用,使用eslint就能避免这个问题。

4.jQuery中的data方法

var _key = $(this).attr('data-key');

使用data()方法会更好一些。

5.定义常量

if (!JSON.parse(localStorage.getItem('goods'))) {
            return false;
        }

其中的goods,使用常量去定义会更好一些。

6.裸文字

 <div class="backTop">
            <a href="javascript:;"></a>
            top
        </div>

尽量避免一些裸文字的节点,样式不好处理。

7.使用compass sprite优化雪碧图

作者: 曾小乱

喜欢写点有意思的东西

《记一次Code Review》有2个想法

  1. 第四点,jq data() 方法,当元素是通过 ajax 生成的并且没有自定义属性 data-*, 使用 jq data() 方法无法设置或修改自定义属性的值,只能通过 attr()

评论已关闭。