生成不引人注目的 JS

Question

我读过很多关于不引人注目的 JS 以及如何生成它和所有爵士乐的内容...

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

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

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

Answer 1

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

语法很简单。例如，

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

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

Answer 2

Nico，我建议为每个包含的页面创建自定义 JavaScript 代码（无论页面上的哪个位置包含脚本标记），并且正如 Matthew 建议的那样，在定义要在页面加载时运行的函数后，使用 addEventListener 来在“load”上加载该自定义函数
假设您在所包含文档的正文中的某个位置定义了一个函数 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-事件委托和事件处理程序
http://blog.andyhume.net/event-delegation-without-javascript-库

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

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