Question

谁能帮我详细解释一下这段Jquery代码，每行都解释一下好吗？ 我新手看不懂！

ph$ = {
bindEvt : function() {
var o = {};
o.btn_sell_l = $("#pageLeft");
if (o.btn_sell_l.length > 0) {
o.btn_sell_l.bind("click", function() {
ph$.scrollLveSell('right');
});
}
o.btn_sell_r = $("#pageRight");
if (o.btn_sell_r.length > 0) {
o.btn_sell_r.bind("click", function() {
ph$.scrollLveSell('left');
});
}

},
scrollLveSell : function(o) {
if (this.cfg.lv_flag == 0)
return false;
var tar = $("#sell_order");
var tar2 = $("#sell_order_t");
tar.stop();
tar2.stop();
var max_num = $("#sell_order>li").length;
var width = 196;
var left = 0;
var pos = tar.position();
//alert(pos.left + "|" + width);
if (o == "left") {
if (Math.abs(pos.left)+width > width*(max_num-5)) {
return false;
}
left = pos.left - width;
} else if (o == "right") {
if (pos.left >= 0) {
return false;
}
left = pos.left + width;
}
left = left + "px";
//alert(left);
ph$.cfg.lv_flag = 0;
tar.animate({
left: left
}, 600);
tar2.animate({
left: left
}, 600, function() {
ph$.cfg.lv_flag = 1;
//alert(pos.left);
});
},

cfg : {

},
init : function() {
this.bindEvt();
}
};

jQuery(function($) {
ph$.init();

});

Answer 1

本人javascript半桶水,高手勿喷...但欢迎指正....
我从这段代码的调用顺序说起吧
=====================
首先起作用的是
jQuery(function($) {
ph$.init();
});
意思就是从网页准备好之后,调用ph$对象的init()方法;
先看ph$是何物
ph$ = {};
ph$是json对象,json对象有属性或方法,调用方法是json.属性或json.方法()
==========================
然后去看看ph$.init()方法
init : function() {
this.bindEvt();
}
除了this,其他没什么好说的
如果想要在一个function内使用this指向非window对象,通常需要实例化一个function,例如 a = new a();酱紫在a这个对象内,this指向a本身.
但是现在this是在json对象内,是指向json对象本身:即ph$,也就是说ph$已经是实例化的了
至于两种实例化方法,最明显的区别就是a()这个function可以实例化多个独立对象,例如a = new a();b = new b();而json对象只能由a = {}这样来实例化,是不能复用的.
======================
所以 this.bindEvt(); 是调用 ph$.bindEvt();
去看看bindEvt();
bindEvt : function() {
var o = {};
o.btn_sell_l = $("#pageLeft");
if (o.btn_sell_l.length > 0) {
o.btn_sell_l.bind("click", function() {
ph$.scrollLveSell('right');
});
}
o.btn_sell_r = $("#pageRight");
if (o.btn_sell_r.length > 0) {
o.btn_sell_r.bind("click", function() {
ph$.scrollLveSell('left');
});
}
}
o为json对象
o.btn_sell_l = $("#pageLeft");
把o的属性 btn_sell_l 赋值为$('#pageLeft')这个jquery选择器返回的数组,选择的是网页中id为pageLeft的元素

if (o.btn_sell_l.length > 0) {
o.btn_sell_l.bind("click", function() {
ph$.scrollLveSell('right');
});
}
o.btn_sell_l.length > 0 等于 $("#pageLeft").length > 0
jquery找不到id为pageLeft不会返回false,所以使用length判断有没有找到元素,大于零就是找到了

o.btn_sell_l.bind("click", function() {
ph$.scrollLveSell('right');
});
绑定click事件到o.btn_sell_l这个对象,事件内容为调用Ph$的scrollLveSell方法,传参right
下面的 o.btn_sell_r 等一段的代码与以上的功能差不多,这里不作复述
下面看Ph$的scrollLveSell方法
卧槽,好长,请听下回分解....

追问

你别这么搞笑好吧！ 赶紧继续分解！

追答

你理解了上面的再说吧
scrollLveSell里面大概的功能就是做移动效果用的,我挑主要的说说
tar.stop();//停止tar的动画
tar2.stop();//停止tar2的动画
tar.animate({
left: left
}, 600);
//添加tar移动效果,tar移动到left为600
//tar.stop()的作用就是停止这个动画
tar2.animate({
left: left
}, 600, function() {
ph$.cfg.lv_flag = 1;
//alert(pos.left);
});//添加tar2的移动效果,移动到600结束后执行回调function:设ph$.cfg.lv_flag为1
其余都是判断语句,不想多说