Question

可能有更好的方法，但目前我有一个很好的封装的JavaScript对象，可以有一些可配置的选项。我在页面上包含一大块HTML代码（通过Dreamweaver'片段'），在页面加载时，我的JS文件在DOM中运行并将任何代码块标识为特定功能，然后继续设置该功能。

在我希望在页面上添加多个对象并让它们可配置之前，这一切都很好。这里重要的一点是，可以使用我当前的设置将任意数量的这些对象添加到页面上 - 因为它们在那时是通用的，并且没有'id'属性。 / p>

现在我希望配置这些对象，所以我想，“包含配置设置的外部文件如何，如果找到配置对象，这些对象将检查并应用”。这也很好，但配置数据现在感觉有点“删除”。我想这最终会让我的其他同事烦恼，这只是另一件要记住的事情。

所以对于我的问题，我很乐意插入这些代码块，它们仍会在页面加载时触发自我实例化对象 - 但我想尝试的还是插入一个包含配置设置的脚本块。我需要一种插入代码块的方法，知道它的父元素是配置的上下文。

示例代码：

<div class="snippet">
    <_contents of this 'snippet'_/>
    <script type="text/javascript">
        new Snippet().init({
            rootElement: REFERENCE_TO_THIS_SCRIPT_TAGS_PARENT_NODE,
            configOptionA: true,
            configOptionB: false
        });
    </script>
</div>

注意：<div class="snippet">目的没有'id'属性，因为我想允许将多个这些属性放到页面上。

欢迎其他解决方案，只要他们遵守我的一些限制！

Answer 1

My other related question（现已回答）现在解决了这个问题，基本上我最终得到了：

<div class="snippet">
    <elements... />
    <script type="text/javascript">
        var tmpVarName = 'configOb_'+Math.floor(Math.random()*1111111) ;
        document[tmpVarName] = {
            remainVisible:true,
            hoverBehaviour:false
        };        
    </script>
</div>

...然后在每个页面上加载的脚本中扫描任何适当的元素来实例化和配置：

var snippets = yd.getElementsBy(function(el){
                    return yd.hasClass(el, "snippet");
                },null,document );
for( var i=0; i<snippets.length;i++ )
{
    var s = snippets[i] ;
        yd.generateId(s, '_snippet_'+i );
    var tag = yd.getElementBy(function(el){
                return true;
            },'script',s );
    var ob = new Snippet();
        ob.setId( s.id );
        ob.init( eval( tag.innerHTML ) );
}

有关上述代码的更完整的上下文;

yd = YAHOO.util.Dom
Snippet.init（）和Snippet.setId（）是名为Snippet（）的Module对象的公开方法

现在我插入的'chunk'内容没有id属性，并且动态评估了上下文配置对象 - 我可以随意添加尽可能多的变体。如果将一大堆这些Snippet（）对象添加到我的页面（不太可能），我唯一真正关心的是性能。

如何自我识别DOM中脚本标签的位置？

1 个答案: