生成不显眼的 JS

Question

我已经阅读了很多关于不显眼的 JS 以及如何生成它以及所有爵士乐的内容......

我的问题是：我有一个严重依赖mod_rewrite 的网站，所以基本上所有页面请求都发送到index.php，它生成页面的主要结构，然后包含适当的页面。现在，网站中有不同的部分，每个部分使用不同的 Javascript 函数（例如，用于不同的 AJAX 请求）。

现在，如果我只是将一个函数附加到页面的onload，显然这件事不会起作用，因为我不必为每个页面初始化相同的东西......那么最好的方法是什么处理这种情况？

我希望情况清楚，如果需要我很乐意澄清

Answer 1

您可以在附属PHP页面生成的HTML中使用addEventListener（标准）或attachEvent。

语法很简单。例如

document.addEventListener("load", someFunction, false);

这允许您在 index.php 中生成完整的正文标记，但为每个页面运行不同的加载处理程序。另请注意，您可以在同一个元素上多次使用它。

Answer 2

Nico，我建议为每个包含的页面创建一个自定义 javascript 代码（无论您在页面上的哪个位置包含脚本标记），并且正如 Matthew 建议的那样，在您定义一个在页面加载时运行的函数之后，使用addEventListener 在“加载”时加载该自定义函数
假设您在包含文档的正文中的某处定义了一个函数 pageinit()

function pageinit(){..
}
window.addEventListener("load", function() { pageinit(); }, false); 

这对您的项目有意义吗？

Answer 3

我只是把它放在一个 .js 文件中。

mysite_common.js - 站点范围内的常用工具和函数

mysite_page_a.js - 页面 a 的独特功能

mysite_page_b.js - 页面 b 的独特功能

对于页面 b，您将包含 b.js，而对于页面 a，您将包含 a.js

然后在您各自的 unique.js 中，您可以将您的功能包装在 ondomready 或类似的文件中。

将它与您的 PHP 分开，这样以后就不会那么烦人了，这也意味着您可以依靠 js 的缓存来保持页面加载更精简。

您还可以查看诸如 YUI 加载器之类的东西，它允许您执行更复杂的事情，例如按需加载 js 功能位。

您可以使用事件委托来根据上下文提供不同的功能。

基本上，它通过将事件侦听器附加到捕获子元素点击的容器元素来工作。然后，您可以一起取消单个事件侦听器，并查看来自父级的提示。 说：

<div id='container' class='page_a'>
...
    <input name='somename'>
...
</div>

然后

var attachDelegates = function(container){
    container.onclick = function(e) {
    e = e || window.event;
    var t = e.target || e.srcElement;

    //Your logic follows
    if(t.name === 'somename'){
         dosomething(t);
    }
    if(t.className === 'someclass'){
         ... something else ...
    }
};

和onload = function(){attachDelegates('container');};

每个页面的 attachDelegates 函数可能不同，或者您可以有一个单一的函数和简单的容器附加提示，或者可以选择性地附加哪些类。

这些是更加连贯的解释和示例：
http://cherny.com/webdev/70/javascript-event-delegation-and-event-hanlders
http://blog.andyhume.net/event-delegation-without-javascript-library

我个人使用 YUI3 http://developer.yahoo.com/yui/3/examples/node/node-evt-delegation.html

因为它为我提供了 CSS3 样式选择器，并且到目前为止非常轻松。