生成不引人注目的JS

时间:2010-06-10 06:32:46

标签: javascript unobtrusive-javascript

我已经阅读了很多关于不引人注目的JS以及如何生成它以及所有爵士乐......

我的问题是:我的网站严重依赖mod_rewrite,因此基本上所有网页请求都会发送到生成网页主体结构的index.php,然后包含相应的网页。现在,网站中有不同的部分,每个部分使用不同的Javascript函数(例如,针对不同的AJAX请求)。

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

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

3 个答案:

答案 0 :(得分:3)

您可以在辅助PHP页面生成的HTML中使用addEventListener(标准)或attachEvent。

语法很简单。 E.g。

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

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

答案 1 :(得分:1)

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

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

这对你的项目有意义吗?

答案 2 :(得分:1)

我只是将它放在.js文件中。

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

mysite_page_a.js - 第a页的唯一功能

mysite_page_b.js - 第b页的唯一功能

对于第b页,您包括b.js,而在第a页上您将包含a.js

然后在各自的unique.js中,您可以将您的功能包含在ondomready或类似的内容中。

将它与PHP分开,然后它不再是一个烦恼,它也意味着你可以依靠缓存来保持你的页面负载更轻薄。

您还可以查看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风格的选择器,到目前为止非常麻烦。