代码之家 › 专栏 › 技术社区 › danjah

如何自我识别脚本标记在DOM中的位置?

unobtrusive-javascript dynamic configuration

1

danjah · 技术社区 · 14 年前

也许有更好的方法可以做到这一点,但目前我有一个封装得很好的JavaScript对象,它可以有一些可配置的选项。我在一个页面(通过Dreamweaver的“snippets”)中包含了一块HTML代码,在页面加载时,我的JS文件运行在DOM中,并将这些代码块中的任何一个标识为一个特定的功能,然后继续执行并设置该功能。

在我希望在一个页面上添加多个对象并让它们可配置之前,这一切都很好。重要的是你可以在我当前的设置中,您可以随意添加任意多的这些对象到页面中,因为它们在当时是通用的,没有“id”属性。

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

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

示例代码:

<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”属性,因为我希望允许将多个属性放到一个页面上。

其他解决方案欢迎,只要他们坚持我的几个限制!

1 回复 | 直到 14 年前

1

0

Community rohancragg 7 年前

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()的模块对象上的公开方法

既然我插入的“块”内容没有id属性,并且动态地评估了上下文配置对象,那么我可以随意添加任意多的变体。我唯一真正关心的是性能,如果将这些snippet()对象添加到我的页面中(不太可能)。