网站代码的格式化/内务管理 - 主要是JS

Question

我有一个相当大的网站（它还在增长），当我在过去创建它们时，我从来没有真正需要很多JS，但是这个很有活力，有很多弹出框等等。

任何人，在首次加载页面时运行代码的最佳方式是什么。我知道window.onload等，但我的意思是我应该把所有东西放在这里吗？

例如;我创建了自己的表单元素，例如下拉框，开关和制表符选择器，我想为这三个不同的元素添加一个javascript函数（它们都有一个类名来处理它们的元素 - 即切换classname是'switch_holder'等等......

我可以通过jquery.each函数轻松完成此操作，然后在其中使用click功能，但这对我来说似乎不是很专业/动态，而且我宁愿尝试用纯JS编写它所以我有控制我在我网站上发生的事情。

我知道这是一篇冗长的帖子，但任何人都可以解答这些问题：  1 - 在页面加载时维护代码  2 - 将eventlisteners添加到纯JS中具有类名的元素（即没有库）

非常感谢！ ：）

Answer 1

最好不要使用onLoad，而是使用JQuery添加需要在文档加载时调用的方法：

How to launch jQuery Fancybox on page load?

通过使用JQuery而不是将代码直接放在onLoad属性中，您可以使用该弹出窗口的代码保留用于加载每个弹出窗口的特定代码，而不是使用它的HTML。

    $(document).ready(function() {
        // put your onLoad statements here
    });

Answer 2

  

1 - 在页面加载时维护代码

您可以将script标记放在页面的最末端，就在结束</body>标记之前。这就是YUI人建议你说的。这样，它不会减慢您的明显页面加载速度，并且可以访问DOM之前的所有元素。一些有用的参考文献：

• YUI best practices
• Google on when the DOM is ready

  

2 - 将eventlisteners添加到纯JS中具有类名的元素（即没有库）

大多数现代浏览器都支持document.getElementsByClassName。对于那些没有的浏览器（比如旧版本的IE），你可以找到它的几个JavaScript实现。

实际添加将要求您处理不支持addEventListener的IE版本。幸运的是，这很容易，因为有attachEvent。只需要一个实用程序功能来检测哪些可用并使用它。

---

偏离主题：你已经说过你不想使用图书馆，但坦率地说，如果你想构建任何复杂的东西并希望它能运行各种各样的库浏览器，我建议重新考虑。您可以使用jQuery，Prototype，YUI，Closure或{{3等库来充分利用批次的辛勤工作和研究}}。它们不仅提供方便的实用功能。一个好的库也可以解决已知的浏览器错误，在你遇到它们之前你不会知道的错误，因为有人试图使用你的页面并且它不能正常工作。使用广泛使用的，经常更新的库不是某种承认，你不是一个l33t c0d3r。它只是意味着您选择专注于自己的问题，而不是诊断浏览器错误和不一致。我的意思是...... 你知道Safari会错误报告option上的默认选定属性，除非您先访问父级selectedIndex属性？是的，我也是。