主要Review的是这页面的js:https://newhouse.591.com.tw/home/housing/vr
1.eslint检测
自从我们有了使用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的初始化和事件绑定,相当于控制器。
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>
尽量避免一些裸文字的节点,样式不好处理。
第四点,jq data() 方法,当元素是通过 ajax 生成的并且没有自定义属性 data-*, 使用 jq data() 方法无法设置或修改自定义属性的值,只能通过 attr()
拜大神