如何使用jQuery而不会弄得一团糟？

时间：2014-03-01 05:05:28

标签： javascript jquery html css

我可以期待简短的答案是“只使用AngularJS / Backbone / ...（填空）”。 但我相信在我最终深入研究之前，应该有其他方法和适当的方法来完成任务。

所以现在，我使用普通的html，css，javascript，我使用的唯一库是jQuery和一些插件。

忏悔时间： 这些是我发现自己一直在做的事情，我真的认为这些是“坏”而不是“正确的事情”：

  1. 使用全局js变量将事物连接在一起。  例如

    $(document).ready(function(){
    window.someVar = ...;
    window.someFun = function(){...};
});

  2. 需要在DOM操作后再次绑定所有事件，因为它在选择一些元素并将其放在其他位置后停止工作。 例如

    $(".myElementWithSpecialActionHandler").click(function(){});

    元素重新定位后，例如插入到页面的不同位置，事件处理函数停止工作。所以我必须做

    // after DOM manipulation
// again >.<
$(".myElementWithSpecialActionHandler").click(function(){});
  3. Js代码被转储到一个巨大的“main.js”文件中。
  4. css代码被转储到一个巨大的“main.css”文件中。
  5. 由于问题“2”，我在这里和那里使用<tag onClick="someFunction(); ...>有时。
  6. 我在这里和那里使用内联css。

    7. 我是个菜鸟。但是我对编写所有这些代码感到非常不安，但我不太清楚如何“正确”。我不认为这是一个理想的问题，但我认为这对新开发者来说非常普遍。所以答案会让很多人受益。

    非常感谢任何启发，网站链接，指向优秀来源，帮助和评论家的指示！

    您诚挚的， 味道好的菜鸟=＆gt;因此他对自己的代码感到反感:(

2 个答案:

答案 0 :(得分：3)

我认为这些问题没有正确答案，但偏好/意见

1）我不喜欢在全局范围内添加变量，因此window.someVar是一种错误的做法，因为另一个非相关范围可能会意外地操纵某个值。如果您使用的是jQuery，则对全局变量的需求非常少。如果您发现自己多次使用它，那么您可能需要重新考虑解决方案

2）在创建新元素后，您需要查看event delegation而不是绑定事件处理程序。假设您要将新的input元素添加到ID为x的div中，那么您可以在dom ready handler中执行以下操作，而不是一次又一次地绑定它

$('#x').on('change', 'input', function(){})

3）我通常为我的脚本使用单个js文件，以便可以正确缓存

4）与脚本文件相同

5）在字符串文字中，我使用'作为封闭标记，以便我可以在"内部使用var x = '<div class="someclass"></div>'等html属性。

6）我通常不会使用内联css，尽可能尝试将样式信息与html标记分开

答案 1 :(得分：0)

只是为了解决这个问题，你肯定可以从使用某种前端框架中获益。我喜欢jQuery用于需要直接操作DOM的小东西。

1）其中一些是不可避免的。 JavaScript建立在全局变量之上。甚至Douglas Crockford也在“JavaScript：The Good Parts”中承认了这一点。尽量保持最低限度。查看包含事物的模式，例如立即调用的函数表达式。

3）尝试找到分解的方法，然后使用某些东西来连接和缩小它。也就是说，我也犯了过多的东西。

4）有充分的理由将事情分开。您的CSS重置可以在其自己的文件中。另一个文件中的站点范围布局。页面特定的东西可以进入他们自己的文件。模板语言可以帮助您将页面细分为可以拥有自己的CSS文件的功能部分。

5）我不知道这是老实说的问题。我见过很多人在JS字符串周围使用单引号。

6）善于黑客攻击，长期不利。只需添加另一个类（或id，如果适用）。你可以把它放在一个shame.css：http://csswizardry.com/2013/04/shame-css/

相关问题
最新问题