【问题标题】:How to self-identify the position of a script's tag in the DOM?如何自我识别脚本标签在 DOM 中的位置?
【发布时间】:2011-03-04 17:05:11
【问题描述】:

可能有更好的方法来做到这一点,但目前我有一个封装良好的 JavaScript 对象,它可以有一些可配置的选项。我在页面上包含了一段 HTML 代码(通过 Dreamweaver 'sn-ps'),在页面加载时,我的 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>

注意:&lt;div class="snippet"&gt; 故意没有 'id' 属性,因为我希望允许将多个这些属性拖放到一个页面上。

欢迎其他解决方案,只要它们遵守我的一些限制!

【问题讨论】:

    标签: configuration dynamic unobtrusive-javascript


    【解决方案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 对象上公开的方法

    现在我插入的内容“块”没有 id 属性,并且没有动态评估的上下文配置对象 - 我可以随意添加任意数量的变体。如果将一大堆这些 Snippet() 对象添加到我的页面中,我唯一真正关心的是性能(不太可能)。

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-02-16
    • 2011-12-20
    • 2018-03-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-09-29
    相关资源
    最近更新 更多