吐槽:jquery 真是给了一些人乱搞的机会~ - V2EX
请不要在回答技术问题时复制粘贴 AI 生成的内容
xiaomajia008

吐槽:jquery 真是给了一些人乱搞的机会~

  •  
  •   xiaomajia008 May 12, 2014 8174 views
    This topic created in 4384 days ago, the information mentioned may be changed or developed.
    满篇的$,什么都$,id class element 就这样搞,一点都不考虑以后万一换标签换样式了怎么办?

    校验,全是 append("<span>错误信息</span>"),懒得想也起码在页面上配置一下阿,以后改文字错误信息还找你?错误信息的样式以后怎么定制?

    整个文件看下来乱糟糟一点规划都没有。。。

    更牛的是明明用不到的js也乱引,还好jquery 容错不报错。。。

    我还是建议初涉前端的开发人员慎用。。方便的同时 会让你丢很多东西。
    Supplement 1    May 13, 2014
    哎,我从来没说反对用jquery,为啥你们都认为我在吐槽jquery呢?

    难道我的意思不是因为它便利,所以有人胡乱写?

    虽然那样没错。但是给后人维护带来了不便。
    47 replies    2014-05-13 15:01:36 +08:00
    flynngao
        1
    flynngao  
       May 12, 2014
    lz是菜鸟?
    qazwsxedc121
        2
    qazwsxedc121  
       May 12, 2014
    整个js都是这样吧,脑子里有数的人自然会写出靠谱的代码来,想瞎搞的人你给他再严的框架他也能瞎写
    loading
        3
    loading  
       May 12, 2014 via Android
    您是说我用getElementbyId就不能瞎搞了?

    您是在大公司上班吧,欢迎到我们民间来视察!
    loading
        4
    loading  
       May 12, 2014 via Android
    #反正以后重(bu)构(guan)
    66beta
        5
    66beta  
       May 12, 2014
    初涉的应该用吧,学习上手快高级了就写原生了
    jsonline
        6
    jsonline  
       May 12, 2014   11
    jQuery: 怪我咯?
    ddyy
        7
    ddyy  
       May 12, 2014
    jquery就是用来写一些外围的东西的,你还打算用它担大梁?
    zakokun
        8
    zakokun  
       May 12, 2014
    怪jQuery!?
    akfish
        9
    akfish  
       May 12, 2014
    错的不是菜刀,而是用菜刀的人。
    Ricky123
        10
    Ricky123  
       May 12, 2014
    都不知道槽点在哪里。。
    learnshare
        11
    learnshare  
       May 12, 2014
    jQuery 的定位可能不是这个,但它可以这么用。
    jsonline
        12
    jsonline  
       May 12, 2014   2
    50%以上的JS都是门外汉写的。鲁迅
    hinobou
        13
    hinobou  
       May 12, 2014
    感觉jQuery躺枪了
    zythum
        14
    zythum  
       May 12, 2014
    jQuery: 怪我咯?
    hkongm
        15
    hkongm  
       May 12, 2014
    工具是死的,人是活的
    sanddudu
        16
    sanddudu  
       May 12, 2014   1
    @jsonline
    写 JS 的人中,60% 在使用 jQuery,但是之中 50% 的人都是门外汉。 白岩松
    xiaomajia008
        17
    xiaomajia008  
    OP
       May 12, 2014
    我可能没描述好,我是觉得一些代码能组织一下就组织一下。

    第一行 $('#a').xxxx
    第三行 $('#a').xxxx

    连续几行这样的。

    难道就不能先 var a = $('#a');
    然后下面再 a.xxxx?

    再者

    <div id="boxA">
    <p class="abc"></p>
    <p class="abc"></p>
    <p class="abc"></p>

    </div>

    类似这种的
    $('.abc') 满篇都是的,
    没说不可以用,确实能实现效果
    但是多了以后性能问题怎么办呢?

    那么$('#boxA .abc') 这样会不会好点?维护人员也知道是哪里的问题


    练习可以随便搞,公司产品上线的东西可不能随心所欲了。
    soundbbg
        18
    soundbbg  
       May 12, 2014
    和jquery没有关系,开发本身不太给力。
    Mac
        19
    Mac  
       May 12, 2014
    LZ你该怪的是HTML标准,尼妹的哪来这么多ID SPAN DIV标签,直接用一图片格式解析不就得了嘛。。。。
    chrisyipw
        20
    chrisyipw  
       May 12, 2014
    @xiaomajia008 这明显和 jQuery 无关,是开发者的水平问题,不过 jQuery 过于易用、易上手的特性确实导致开发者水平走极端了。
    zzNucker
        21
    zzNucker  
       May 12, 2014
    叫你们小码农去看下jQuery最佳实践就行了。
    zhouquanbest
        22
    zhouquanbest  
       May 12, 2014
    jQuery:怪我
    xcc7624
      &bsp; 23
    xcc7624  
       May 12, 2014 via Android
    感觉现在的工具易用性比以前好了许多,随便学几个月就自称程序员,实际上是个码农,其实像我这种菜鸟程序员就应该转行!
    xcc7624
        24
    xcc7624  
       May 12, 2014 via Android
    感觉现在的工具易用性比以前好了许多,随便学几个月就自称程序员,实际上是个码农,其实像我这种菜鸟码农就应该转行!
    muzuiget
        25
    muzuiget  
       May 12, 2014
    和 JQuery 没关系,开发者水平问题,用原生接口也会这个德性。
    i8d0g
        26
    i8d0g  
       May 12, 2014
    同属于乱搞界的 楼主不妨给点干货 怎么写jquery才高端 才不是乱搞
    mtmzorro
        27
    mtmzorro  
       May 12, 2014
    同LS 有人提到的,开发人员不力不要怪语言、框架。。

    就jQuery而言,推荐 写这代码的人去 看看 http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html jQuery 最佳实践。
    soulteary
        28
    soulteary  
       May 13, 2014
    @xiaomajia008 不满足现状可以让你变的更好,但是只是抱怨却不思考现有方案的益处不利于成长。似乎上面这句话说的太空,那么留三道题给楼主,如你所说:


    ````
    第一行 $('#a').xxxx
    第三行 $('#a').xxxx

    连续几行这样的。

    难道就不能先 var a = $('#a');
    然后下面再 a.xxxx?
    ````


    **Q1:是否有场景下,使用JQ必须重新获取元素。**


    ````
    满篇的$,什么都$,id class element 就这样搞,一点都不考虑以后万一换标签换样式了怎么办?
    ````

    **Q2:且不论这句话语句是否通顺,如果要进行大规模迭代,什么样子的方式可以较为合理的组织代码。**


    ````
    校验,全是 append("<span>错误信息</span>"),懒得想也起码在页面上配置一下阿,以后改文字错误信息还找你?错误信息的样式以后怎么定制?
    ````

    **Q3:这种情况如果该如何回归组件&模块化设计,所谓配置,应该包含哪些要素。**


    三人行必有我师,或许直面所有的问题,逐个解决会让你变的更好。
    chshouyu
        29
    chshouyu  
       May 13, 2014   2
    “菜刀真是给了一些人砍人的机会~”
    sneezry
        30
    sneezry  
       May 13, 2014
    @soulteary 又看到认为v2支持md的小伙伴了,喜闻乐见,哈哈
    bakac
        31
    bakac  
       May 13, 2014
    不靠谱的人写不靠谱的代码, 看来楼主也属于不靠谱的人
    xiaomajia008
        32
    xiaomajia008  
    OP
       May 13, 2014
    @soulteary

    感谢回复,我也只是就自己看到的问题吐槽而已,因为jquery提供了很方便的东西,所以造成很多人开发的时候不会思考问题。

    Q1:
    当然,有些条件下是需要重新获取元素。

    我这里说的是指这样的:

    <div id="abc"></div>

    $('#abc').bind('click',function(){
    $('#abc').html('')
    $('#abc').xxx
    $('#abc').xxx
    $('#abc').xxx
    })

    还有这样的

    for(var i = 0, i < xxx ; i ++){
    $('#abc').xxxx
    }

    这是让我吐槽的地方,当然如果写原生的也会试这样,跟开发人员水平有关。

    那么我之所以说 jquery 给一些开发人员乱搞的机会,那么看Q2

    Q2:
    满篇都是$.
    再举我上面的例子
    div#abc

    p.pic
    p.pic
    p.pic

    直接上来就是$('.pic'),试问,这样真的保险?
    如果是原生js,会让人那么容易取到?谁能保证其它开发人员不会改class 不会增加 相同的class?
    所以我说,如果要用那么也最好 $('#abc .pic'),这样最起码后面改代码的人知道你获取的是哪些节点。这样你大规模的换代码以这个区域就会失效,否则一直$('.xxx')难免会出错。

    我自己观点还是以id会钩子比较好。

    Q3:

    不说一些模块化配置这么高深的。因为方便,我看到很多人直接

    $('xxxx').append('<div>......</div>')

    append进一大堆东西进去。

    一个最简单的问题,当要换append里面的模板会不会造成要大量改js的时候?
    可以写一些简单的封装函数,可惜我这里情况并没有。。

    有些公司 html js 是分开的。。如果每次更新模板都要找相关的js人员,岂不是太痛苦?

    还是那点,如果是原生js。不会这么方便的 append,最起码你会一个个create,看到大量代码或许你会想到封装起来。

    当然,你也可能偷懒,直接 innerHTML('xxxx')

    但是,又有问题来了。你如果在有事件不会空得元素后面直接innerHTML 会导致事件失效。。这是不是又是一个可以触发开发人员想办法解决的点?

    所以我才会有以上吐槽。
    tobyzw
        33
    tobyzw  
       May 13, 2014
    LZ吐槽的是“编码规范“
    tititake
        34
    tititake  
       May 13, 2014
    难道不应该是
    $('#a').xxx1()
    .xxx2()
    .xxx3();
    icanfork
        35
    icanfork  
       May 13, 2014
    jQuery:怪我咯?
    miniwade514
        36
    miniwade514  
       May 13, 2014 via Android
    @xiaomajia008
    17楼,追求性能就不要写 $('#boxA .abc') 这种东西,想表明嵌套关系可以用注释
    xiaomajia008
        37
    xiaomajia008  
    OP
       May 13, 2014
    @miniwade514 我只是举个例子说实在想$ class 还不如 那样
    t2doo
        38
    t2doo  
       May 13, 2014
    混口饭吃,能用就行,这么讲究干嘛
    soulteary
        39
    soulteary  
       May 13, 2014   1
    @xiaomajia008 还是之前的那句回复,额外的不需要多说。

    @tititake 将this链式转送这个是个不错的语法糖,不过可惜po主举例没有提到。(扯远了

    Q1同样存在极限状况,当触发事件不唯一时,click的fn不能保证元素是否还是缓存中的this||e.target,

    Q2简洁、高效、易于维护,一直以来是以奇怪的关系维持在一起的,有时相生,有时此消彼长,原始作者的意图在一次次的迭代后可能不会太清晰,作为维护者唯一的职责就是尽可能的延续他正确的风格,修缮他不正确的地方。

    Q3如果你们公司是如此,那么不妨使用前端渲染的方式逐步迭代掉叫你痛苦的部分,而且如你所愿,定义在统一的模版文件中,或者页面打印config,改动量也不会特别大吧,那么修改掉就好,何必吐槽呢。

    私以为知行合一才是我们这些维护者该做的。

    几年前看到和自己风格迥异的代码,我也会不淡定,不过现在会细心观察别人代码架构和细节的可取之处,他山之石可以攻玉,勉之。
    superbear
        40
    superbear  
       May 13, 2014
    Jquery是用来吸引新手的,展现Javascript的魅力
    Seita
        41
    Seita  
       May 13, 2014
    我经常

    第一行 $('#a').xxxx
    第三行 $('#a').xxxx

    连续几行这样的。
    nickelchen
        42
    nickelchen  
       May 13, 2014
    jQuery多省事
    当你要一个个createElement 然后不断的appendChild时,多怀念
    $("<div><input type="text"><span></span>")
    这种东西。
    还有删除一个 node 的父节点时,原生的是要多嗦
    node.parentNode.parentNode.removeChild(node.parentNode)
    全部都应该使用jQuery,不要问为什么。
    yolio2003
        43
    yolio2003  
       May 13, 2014
    壮哉,终于看出来我大jquery的气势啦,没事怪神马jQuery
    towser
        44
    towser  
       May 13, 2014
    不怪代码猴,怪行业分工不细致。后端代码猴兼写前端就是这个样子。这是社会主义发展的副产物。孙海英
    jarlyyn
        45
    jarlyyn  
       May 13, 2014
    1.一般来说,是$('abc').xxx().xxx()这样吧?要么就是 $(xxx).each(function(){$(this).xxx})吧?感觉楼主的场景很少见啊。
    2.$(.xxx)我觉得没问题啊,这个就是类怎么定义的问题了。这玩意至少也要和css里对应的元素定义相匹配。
    gouflv
        46
    gouflv  
       May 13, 2014
    低端黑, 看不惯代码自己写呗, 吐槽有什么意义
    fundon
        47
    fundon  
       May 13, 2014
    代码也不是都是一步到位的,吐嘈该吐嘈的,分享该分享的,且看且实践

    https://www.google.com.hk/search?q=jquery+best+practice
    About     Help     Advertise     Blog     API     FAQ     Solana     3132 Online   Highest 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 156ms UTC 14:59 PVG 22:59 LAX 07:59 JFK 10:59
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86