0

我正在创建一个 JavaScript 库。这个库会将自己附加到 HTML 文档中的一个或多个 div。我想自动附加以方便用户集成库。对于 HTML 元素如何以这种方式向库标识自己，是否有事实上的标准或最佳实践？现在，我查找 ID 以某个前缀开头的所有元素，例如 id="fooLibDiv1" 或 "fooLibMyDiv" 等等。这感觉很脆弱。寻找像 'attachFooLib="yes"' 这样的非标准属性会更好吗？或者寻找特定的 CSS 类？等等。

（FWIW，我不想要求我的用户使用 jQuery。另外：不要在这里寻找代码，而应该是正确的设计方法。）

4

3 回答 3

1

使用类。正如你所说，这些不是“特定的 CSS 类”，“类”只是说特定元素属于一组相似的元素。并且这些相似的元素被类似地对待 - 无论是在 CSS 的情况下的设计还是在你的情况下的行为。

于 2011-02-28T19:45:21.340 回答
1

我不会为此目的使用 id。您的用户可能出于其他原因想要在元素上使用 id。此外，使用额外的属性会阻止验证，同样，一些用户可能想要这样。

我会使用类。我认为为您的库命名它们会很好，因此例如您可以使用类名fooLibButton或fooLibList类似的东西。由于一个元素可以有多个类，这不会导致 id 会导致的问题。

如果您不使用 jquery，您仍然可以轻松获取这些元素：

/*
 * addLoadEvent based upon this blog article:
 *
 * http://simon.incutio.com/archive/2004/05/26/addLoadEvent
 */
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {oldonload();func();}
    }
}

/*
 * As proposed by Bernard Marx on:
 * http://www.webmasterworld.com/forum91/1729.htm
 */
function getElementsByCondition(condition,container) {
    container = container||document
    var all = container.all||container.getElementsByTagName('*')
    var arr = []
    for(var k=0;k<all.length;k++){
        var elm = all[k]
        if(condition(elm,k)){
            arr[arr.length] = elm
        }
    }
    return arr
}
function checkWetherContainsClass(classname,element){
    var classes =
    element.className.split(" ");
    var found = false;
    var k=0;
    while(k<classes.length&&classes!=classname){k++;}
    return !(k == classes.length);
}

function getElementsByClass(classname,container){
    return getElementsByCondition(function(x,y){return checkWetherContainsClass(classname,x);},container);
}

但是要回答您的问题：afaik，不，没有事实上的标准。

于 2011-02-28T19:51:39.123 回答
1

CSS 选择器。几乎所有 JS 框架（jQuery、原型...）都使用此方法。Web 开发人员熟悉 CSS 选择器语法并且易于使用。

http://simonwillison.net/2003/Mar/25/getElementsBySelector/

创建一个 init 函数，该函数采用 CSS 选择器并将您的库附加到结果元素列表。

于 2011-02-28T21:12:35.810 回答