javascript - JavaScript 原型教程

Question

我有一个包含大量函数的 JS 脚本，主要是这样的：

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

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

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

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

score 4 · Accepted Answer

我不得不问：你考虑过只使用像 jQuery 这样的东西吗？如果你这样做了，问题就变成了：

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

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

"one two three"

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

score 1 · Accepted Answer

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

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

我也强烈推荐这本书来学习更多诸如此类的技术（是的，链接已涵盖）:-)
http://jsdesignpatterns.com/

score 1 · Accepted Answer

您无法为所有浏览器实现这一点，尤其是无法扩展 IE6 或 7 中元素上可用的方法。

老实说，如果您只在开发中包含 JQuery，您将节省大量时间。

score 0 · Accepted Answer

如果可以的话，最好使用框架，就像 cletus 说的那样。

但是，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 - JavaScript 原型教程

4 回答 4

Related

Reference