让人蛋疼的jQuery代码

胡晋 发布于 2011/10/20 17:04
阅读 1K+
收藏 0

489827921-300x297对于一个程序员来说,看别人写的代码有时候可以学到很多的东西,但有时候却是一种折磨。折磨人的代码变量的命名:String a1 = ……;折磨人的方法命名:public void givename(String name){……} ,有更甚者一个工具类:DotaUtil.class,电子商务更Dota怎么扯上关系了,一问究竟得出答案“Do Test Action”,一个调试Action的工具类。遇上此代码真是欲哭无泪,我记得还看过一篇博文,甚至什么面包调用奶油返回香蕉之类的,真想说一句“坑爹呢”。

最近在某知名连锁型家电销售企业的电子商务部上班(就X美),在做三期的页面改版。暂时页面设计还没下来,切割还没有动工,我做实施Freemarker的更加闲得蛋疼。看了下同事写得页面效果,顿时让我蛋疼不已。请观赏代码:

$(function(){
    $(".cxjdateBox").find("li").each(function(){
        $(this).hover(function(){
            $(this).addClass("cur");
            /*商品图弹出层*/
            $(this).find(".pic").hover(
                    function(){
                        $(this).addClass("cur").find(".showPic").css("display","");
                    },
                    function(){
                        $(this).removeClass("cur").find(".showPic").css("display","none");
                    });
            /*多买多折层*/
            $(this).find(".neirong").find(".btnPcen").find(".morDiscnt").find("span").find("img").hover(
                    function(){
                     $(this).parent().find(".morDiscntTier").css("display","");
               },
                   function(){
                     $(this).parent().find(".morDiscntTier").css("display","none");
              });
        },
        function(){
            $(this).removeClass("cur");
        })          
    });
});

这JS蛋疼吗?疼啊!他每写一个绑定事件都在外面套一个 $().ready(function(){}); 你能不疼吗?

我的天呀。看一下这里带代码出现了$(this) 多少次了?11次啊!20行的代码就调用了11次的$(this)……无言以对啊。有时候不懂为什么他要分开来操作,明明是可以一行代码就能做完的事情。

好了,最最最最坑爹的是,为什么要$(this).hover()里面调用$(this).find(“.pic”).hover(),这……这是什么坑爹的逻辑啊。为什么非要hover了父才去绑定这个事件啊?为什么要用css(“display”,”")啊?jQuery不是有show的方法吗?

看到这里我有点面临痴呆的情况,我叫了另外一个同事修改了一下,修改如下:

$().ready(function(){
    $(".listNav").find(".box").find("li").each(function(){
        $(this).hover(function(){
            $(this).addClass("cur");
              /*商品图弹出层*/
               $(this).find(".pic").hover(
                 function(){
                   $(this).addClass("cur");
                   $(this).find("#bigPic").show();
                },
                function(){
                   $(this).removeClass("cur");
                   $(this).find("#bigPic").hide();
                })
               
             /*多买多折层*/
             $(this).find(".btnPcen").find(".morDiscnt").find("img").hover(
                function(){
                   $(this).parent().find("#morDiscntTier").show();
                },
                function(){
                   $(this).parent().find("#morDiscntTier").hide();
                })
        },
        function(){
            $(this).removeClass("cur");
        });
        
    });
});

我肯定,这两个是一伙的,想把我弄死的还是想我弄死你们,上班太闲了闹着玩是吧。我相信了,在职场上是很残酷的。不过还好,他们没有用到面包调用奶油返回香蕉,假如那天我看到他们写这样的方法我估计我不会在这里写博客了。而是吐血身亡了。$(this).find(“.pic”).hover()“;” 都不加“;”的,他测试是怎么通过的?

$(this).addClass("cur");
$(this).find("#bigPic").show();//为什么写两行呢?一行不行吗? 

$(this).addClass("cur").find("#bigPic").show();//功能还不是一样吗?

转自: Maxzu

加载中
0
哥很低调
哥很低调
也许同事只是真的不是很清楚jQuery的用法吧,特别是链式写法。
0
mark35
mark35

至少该知道 $(this)应该复用的

var that = $(this);

that.hover(...)

that.find(...)

0
傅小黑
傅小黑

$(this)用了11次

$(this).find("#bigPic")用了2次

$(this).parent().find("#morDiscntTier")用了两次

$(this).find(".btnPcen").find(".morDiscnt").find("img")三个选择器

$(".listNav").find(".box").find("li")两个选择器





0
yak
yak
jquery没出现之前,美工是不写脚本的,jquery出现以后,很多美工开始写程序了
0
我土鳖
javascript句尾不加分号一样过 但是出什么错误就天知道了
bovver
bovver
如果没有分号就不能压缩代码了,
我土鳖
@胡晋 : 内部规范还是?javascript的规范里没说一定要写分号啊。内部规范我就不知道了= =
胡晋
胡晋
但至少遵循规范吧?
0
沙逛鱼
沙逛鱼
jquery好像也有缓存的,多次调用$(this),并不是每次都重新生成jquery对象
胡晋
胡晋
我猜..我猜的$(this)其实就是返回一个变量而已!
0
匿名t3a
匿名t3a
还好 结构清淅 蛋疼个鸟  是没心思看代码吧
胡晋
胡晋
首先不是说他代码写的不够清晰...我只是有点郁闷!!为什么要在hover里面再去绑定子元素的hover事件.这样...不就多次绑定?性能上面说不过去吧..!!!第一个写的是一个Java程序员.第二次写的是一个页面切割...但我实在看不过去hover(hover())这种方式..!!!
0
sniperBlank
sniperBlank
确实有点蛋疼。这段代码还可以精简很多很多。
0
李永兵
李永兵
哈哈,这个代码结构最起码是清晰的,如果代码连换行都没有,那楼主更是。。。。。。
0
sam_ai
sam_ai
估计是美工出身吧,对于程序,美工可以学会,但永远不要指望美工懂。美工只是解决问题的人。
返回顶部
顶部