Question

我有一个项目即将构建一个界面，允许用户使用预定义的模板和代码片段构建内容。

我们已经决定使用jQuery和jQuery UI框架来帮助我们处理拖放/排序部分。还需要进行一些编辑，我将使用contenteditable结合jQuery的CSS函数。

我已经对这两个框架（并且喜欢它们）有相当多的经验，但到目前为止，我的典型项目已经运行到大约50行，而这一个将运行到更多，使用更多的功能和写我自己的插件。

在我开始研究项目之前，我想知道jQuery是否存在任何常见的陷阱 - 有点像'jQuery - Bad Parts'。是否有最好的避免功能？是否有需要解决的功能？

我读过this link但现在已经2年了，从那以后jQuery（和浏览器）发生了很多变化。

_{任何“使用此框架代替”或“不使用框架”的答案都将被忽略 - 我使用jQuery。任何不提供解决方案的'jQuery is rubbish'咆哮也将被忽略。只有建设性意见。如果我知道如何在JavaScript中做得更好jQuery，我就不会使用jQuery。}

Answer 1

我会回答你的一半问题。这是基于痛苦经历的陷阱清单，并非所有我都有解决方案。

大量使用长链选择器的诱惑（“ul＃leftnav li p a.current”）会使你的代码变得脆弱。它可能很聪明（“嘿，我是CSS主人！”），但是当布局以任何非平凡的方式改变时它很容易破裂。
使用DOM作为数据库。使用.data（）将数据附加到DOM元素，跟踪页面状态以及将DOM元素链接在一起似乎是一个巧妙的想法，但是如果你过分了，你就会开始忘记在哪里。
在$（document）.ready（）中添加太多东西。再一次，在这里初始化所有事件和数据是很自然的，但很快就会遇到组织和订购问题。研究类似MVC的解决方案，以保持组织有序。
不完全跨浏览器。尽早经常在所有目标浏览器中进行测试！ jQuery虽然是一个很棒的抽象，但仍然是一个漏洞。事件和属性在不同的JS引擎中的行为并不总是完全相同。

Answer 2

保持胶水最小

我在jQuery中所做的事情，我已经学会了以避免：

过度使用大而聪明的插件。保持简单或保持原状。
大而复杂的文件。保持文件小而具有描述性。
污染全局命名空间。使用每个文件的闭包。导出到命名空间。
使用$()构建标记。使用骨干/小胡子的模板来保持js干净。
脆弱的CSS选择器。尽可能按ID选择，使用层次结构会导致问题。

保持可维护性

我在jQuery中所做的事情，我每次都学会做：

绝对可以使用自动化测试。维护代码结构，让您高枕无忧。
在模型中将状态信息保留在DOM之外。
选择存储回调函数，并通过var name over crazy function nesting引用它们。
尽早使用最小的框架来建立惯例。

最后一个是必须的。有无数种方法来组织项目的JS方面。选择像ember.js之类的东西来给你一套约定，然后坚持下去！

Answer 3

无论项目是否使用jQuery，最重要的挑战之一是代码组织。

使用jQuery，编写这样的代码非常容易：

$.get('/data', function (data) {
    // process data, then
    alertThing.fadeIn(function () {
        // when the alert is visible, handle clicks
        alertButton.click(function () {
            // the user confirmed, so post
            $.post('/data', function () {
                // ... and on and on
            });
        });
    });
});

您最终会遇到难以阅读和调试的长链和/或深层嵌套函数。使用Deferred对象可以提供帮助，但最好将应用程序拆分为松散耦合的组件。您甚至可以将可重用（表示，与DOM相关）的代码打包到plugins。

jQuery的优势在于跨浏览器DOM操作;在组织程序/业务逻辑时，jQuery不是正确的工具。（在DOM上存储非表示数据基本上是一个拐点。）

Backbone或JavaScriptMVC等框架通过为您的代码提供结构来提供帮助。这是“另一个学习的框架”，但如果没有它，你最终还是会编写自己的类似MVC的代码。

Answer 4

最大的陷阱之一是IE6。我发现自己经常不得不努力使jqueryUI的东西在IE6中运行而忘记尝试使它在IE 5.5中工作

Answer 5

我是N00B但是我遇到的Jquery功能无法正常工作的大多数问题都是在$（“div＆gt; label”）类型的函数中。有时它在IE中显然不起作用（我猜7），我必须明确指定它。当我在IE7中加载大量脚本时，Document.Ready函数也不适用于我。总体而言尽管上述事情可能是由于我的错误造成的我发现最好避免使用ELE.children("#id")而不是ELE.find(".class")，因为这会给你一些布局的灵活性，因为你会在类似的元素上做很多事情（比如复制多个div）我唯一的建议是使用Classes而不是ID，并使用Find而不是Children。我想在这里说的是，如果你使用Find而不是孩子，只要他们在不同的容器中就可以从单个元素的布局中获得独立。（希望这很有用）

Answer 6

要避免的一个不良做法陷阱是在javascript中进行大量的HTML生成。例如，我看到很多这样的东西：

$('<a href="'+url+'">'+text+'</a>').appendTo('#container');

小心！ 90％的情况下，这种代码生成的类似标记与已经来自服务器的代码相似。换句话说，只要链接的标记发生变化，您就必须追捕javascript并更新它。

我强烈建议您在首次尝试使用javascript生成HTML时立即使用官方jQuery templates插件！

Answer 7

我个人经常使用jQuery工作，我可以说你将遇到的问题不是jQuery，而是javascript本身的性质。您需要保持代码的有序和记录。尝试使用某种mvc（backbonejs，javascript mvc或类似的东西）。避免全球变量。使用命名空间来处理您使用的对象。尽可能少地使用document.ready。否则你会过度污染它再次......它会变得混乱。

保持事物的javascript特性，如使用闭包，对象和方法。

小心地将字符串附加到dom中。确保使用.load（）或.clone（）从模板文件中获取html。如果你使用backbone或javascriptmvc，这将是固有的。

希望这会有所帮助并祝你好运！

什么是jQuery最重要的挑战，作为开发人员我可以做些什么呢？

7 个答案:

保持胶水最小

保持可维护性

什么是jQuery最重要的挑战，作为开发人员我可以做些什么呢？

7 个答案:

保持胶水​​最小

保持可维护性

保持胶水最小