Question

我有一个包含大量功能的JS脚本，大概就是这样：

function id(i) {
    if(document.getElementById)
        return document.getElementById(i);
    return;
}

每次输入document.getElementById（）只会节省很多字节。我的问题是我经常在元素中添加和删除类和其他属性。我希望能够做到这一点：

id('main').addClass("someClass");

有谁知道任何可以解释这个的好的Javascript原型教程？感谢。

Answer 1

我不得不问：你考虑过使用像jQuery这样的东西吗？如果您遇到问题，只需：

$("#main").addClass("someClass");

你已经完成了。如果目标是自己实现它（如果是，为什么？）那么你只需要知道如果一个元素有3个类，那么实际的属性就是：

"one two three"

另一方面当然是编写扩展方法。

Answer 2

您正在寻找的技术是方法链。基本上，“id”函数应返回一个对象实例，该实例上有“addClass”方法。并且该方法将“返回此”。

这是一个解释这个概念的教程：
http://javascriptant.com/articles/32/chaining-your-javascript-methods

我还强烈推荐这本书来学习更多这样的技巧（是的链接被覆盖）:-)
http://jsdesignpatterns.com/

Answer 3

你无法为所有浏览器实现这一点，特别是它无法扩展IE6或7中元素的可用方法。

老实说，如果你只是在开发中包含JQuery，那么你可以节省一些时间。

Answer 4

如果可以的话，最好选择一个框架，就像克莱托斯所说的那样。

然而，AnthonyWJones不太正确 - 不可能扩展通用Element对象上可用的方法，但可以仍然将它添加到单个元素。

您的id函数可以使用addClass方法扩展返回的元素：

function get(id){
    el = document.getElementById(id);
    el.addClass = function(cls){
        // your addClass code here
        // (remember IE uses className, others use class)
    };
    return el;
}

您甚至可以将它添加到Element对象（它会自动将其添加到页面上的所有元素），用于支持此功能的浏览器，然后只在IE的id函数中添加方法 - 这将节省内存和速度稍微提高应用程序，特别是当你开始添加很多Element方法时。

这种行为正是MooTools解决这个问题的原因 - 重申最好尽可能使用框架！

JavaScript原型教程

4 个答案: