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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3835 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

我还是建议初涉前端的开发人员慎用。。方便的同时会让你丢很多东西。

第 1 条附言 · 2014-05-13 14:44:02 +08:00

哎，我从来没说反对用jquery，为啥你们都认为我在吐槽jquery呢？

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

虽然那样没错。但是给后人维护带来了不便。

错误信息

span

jquery

47 条回复 • 2014-05-13 15:01:36 +08:00

flynngao

2014-05-12 15:50:24 +08:00

lz是菜鸟？

qazwsxedc121

2014-05-12 16:06:15 +08:00

整个js都是这样吧,脑子里有数的人自然会写出靠谱的代码来,想瞎搞的人你给他再严的框架他也能瞎写

loading

2014-05-12 16:09:55 +08:00 via Android

您是说我用getElementbyId就不能瞎搞了？

您是在大公司上班吧，欢迎到我们民间来视察！

loading

2014-05-12 16:10:46 +08:00 via Android

#反正以后重(bu)构(guan)

66beta

2014-05-12 16:12:22 +08:00

初涉的应该用吧，学习上手快高级了就写原生了

jsonline

2014-05-12 16:14:01 +08:00

jQuery: 怪我咯？

ddyy

2014-05-12 16:15:52 +08:00

jquery就是用来写一些外围的东西的，你还打算用它担大梁？

zakokun

2014-05-12 16:17:47 +08:00

怪jQuery!?

akfish

2014-05-12 16:18:49 +08:00

错的不是菜刀，而是用菜刀的人。

Ricky123

2014-05-12 16:20:50 +08:00

都不知道槽点在哪里。。

learnshare

2014-05-12 16:22:09 +08:00

jQuery 的定位可能不是这个，但它可以这么用。

jsonline

2014-05-12 16:24:19 +08:00

50%以上的JS都是门外汉写的。——鲁迅

hinobou

2014-05-12 16:26:45 +08:00

感觉jQuery躺枪了

zythum

2014-05-12 16:27:52 +08:00

jQuery: 怪我咯？

hkongm

2014-05-12 16:31:12 +08:00

工具是死的，人是活的

sanddudu

2014-05-12 16:38:24 +08:00

@jsonline
写 JS 的人中，60% 在使用 jQuery，但是之中 50% 的人都是门外汉。 ——白岩松

xiaomajia008

2014-05-12 16:40:32 +08:00

我可能没描述好，我是觉得一些代码能组织一下就组织一下。

第一行 $('#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

2014-05-12 16:41:58 +08:00

和jquery没有关系，开发本身不太给力。

Mac

2014-05-12 17:40:08 +08:00

LZ你该怪的是HTML标准，尼妹的哪来这么多ID SPAN DIV标签，直接用一图片格式解析不就得了嘛。。。。

chrisyipw

2014-05-12 18:03:58 +08:00

@xiaomajia008 这明显和 jQuery 无关，是开发者的水平问题，不过 jQuery 过于易用、易上手的特性确实导致开发者水平走极端了。

zzNucker

2014-05-12 18:31:25 +08:00

叫你们小码农去看下jQuery最佳实践就行了。

zhouquanbest

2014-05-12 19:08:13 +08:00

jQuery：怪我啰

xcc7624

2014-05-12 19:22:59 +08:00 via Android

感觉现在的工具易用性比以前好了许多，随便学几个月就自称程序员，实际上是个码农，其实像我这种菜鸟程序员就应该转行！

xcc7624

2014-05-12 19:23:43 +08:00 via Android

感觉现在的工具易用性比以前好了许多，随便学几个月就自称程序员，实际上是个码农，其实像我这种菜鸟码农就应该转行！

muzuiget

2014-05-12 19:30:40 +08:00

和 JQuery 没关系，开发者水平问题，用原生接口也会这个德性。

i8d0g

2014-05-12 21:17:39 +08:00

同属于乱搞界的楼主不妨给点干货怎么写jquery才高端才不是乱搞

mtmzorro

2014-05-12 23:19:05 +08:00

同LS 有人提到的，开发人员不力不要怪语言、框架。。

就jQuery而言，推荐写这代码的人去看看 http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html jQuery 最佳实践。

soulteary

2014-05-13 00:57:30 +08:00

@xiaomajia008 不满足现状可以让你变的更好，但是只是抱怨却不思考现有方案的益处不利于成长。似乎上面这句话说的太空，那么留三道题给楼主，如你所说：

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

连续几行这样的。

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

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

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

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

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

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

三人行必有我师，或许直面所有的问题，逐个解决会让你变的更好。

chshouyu

2014-05-13 01:12:41 +08:00

“菜刀真是给了一些人砍人的机会~”

sneezry

2014-05-13 01:16:43 +08:00

@soulteary 又看到认为v2支持md的小伙伴了，喜闻乐见，哈哈

bakac

2014-05-13 07:01:33 +08:00

不靠谱的人写不靠谱的代码, 看来楼主也属于不靠谱的人

xiaomajia008

2014-05-13 09:26:39 +08:00

@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

2014-05-13 09:42:55 +08:00

LZ吐槽的是“编码规范“

tititake

2014-05-13 10:17:25 +08:00

难道不应该是
$('#a').xxx1()
.xxx2()
.xxx3();

belin520

2014-05-13 11:25:47 +08:00

jQuery：怪我咯？

miniwade514

2014-05-13 11:55:48 +08:00 via Android

@xiaomajia008
17楼，追求性能就不要写 $('#boxA .abc') 这种东西，想表明嵌套关系可以用注释

xiaomajia008

2014-05-13 12:34:12 +08:00

@miniwade514 我只是举个例子说实在想$ class 还不如那样

t2doo

2014-05-13 12:49:50 +08:00

混口饭吃，能用就行，这么讲究干嘛

soulteary

2014-05-13 13:09:56 +08:00

@xiaomajia008 还是之前的那句回复，额外的不需要多说。

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

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

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

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

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

几年前看到和自己风格迥异的代码，我也会不淡定，不过现在会细心观察别人代码架构和细节的可取之处，他山之石可以攻玉，勉之。

superbear

2014-05-13 13:36:50 +08:00

Jquery是用来吸引新手的，展现javascript的魅力

Seita

2014-05-13 13:41:52 +08:00

我经常

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

连续几行这样的。

nickelchen

2014-05-13 13:52:47 +08:00

jQuery多省事
当你要一个个createElement 然后不断的appendChild时，多怀念
$("<div><input type="text"><span></span>")
这种东西。
还有删除一个 node 的父节点时,原生的是要多啰嗦
node.parentNode.parentNode.removeChild(node.parentNode)
全部都应该使用jQuery，不要问为什么。