如何自我识别脚本标签在DOM中的位置？ [英] How to self-identify the position of a script's tag in the DOM?

问题描述

可能有更好的方法，但目前我有一个很好的封装，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> code>没有'id'属性的目的，因为我想允许其中一个以上被放到一个页面。

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

解决方案

我的其他相关问题（现已解答）现在解决了这个问题，基本上我结束了：

 < div class =snippet> 
< elements ... /> 
< script type =text / javascript> 
 var tmpVarName ='configOb _'+ Math.floor（Math.random（）* 1111111）; 
 document [tmpVarName] = {
 remainingVisible：true，
 hoverBehaviour：false 
}; 
< / script> 
< / div> 
  

...然后在每个页面加载的脚本中，扫描任何适当的元素和config：

  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））; 
} 
  

---

Snippet.init（）和Snippet.setId（）是一个名为Snippet（）的Module对象的公开方法

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

There may be a better way of doing this, but currently I have an nicely encapsulated, JavaScript object which can have some configurable options. I include a chunk of HTML code on a page (via Dreamweaver 'snippets'), and on page load my JS file runs through the DOM and identifies any of those code chunks as a particular functionality, and goes ahead and sets that functionality up.

That's all fine up until I wish to add more than one object on a page, and have them be configurable. The important point here is that you can add as many of these objects onto a page as you like with my current setup - because they're generic at that point, and have no 'id' attribute.

Now I wish to configure these objects, so I thought, "How about an external file containing the config settings, which these objects check for and apply if a config object is found". This works fine too, but the config data feels a bit 'removed' now. I imagine this will be annoying for my other colleagues eventually, it's just another Thing To Remember.

So to my question, I'm happy to insert these code blocks which will still trigger self-instantiating objects on page load - but what I'd like to try is also inserting a script block which contains the config settings. I need a means of that inserted code block knowing that its parent element is the context for configuration.

Example code:

<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>

Note: The <div class="snippet"> has no 'id' attribute on purpose, because I want to allow for more than one of these to be dropped onto a page.

Other solutions welcome, so long as they adhere to my few restrictions!

解决方案

My other related question (now answered) addresses this now, essentially I ended up with:

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

...and then in a script loaded on every page, which scans for any appropriate elements to instantiate and config:

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 ) );
}

---

For a more complete context of the above code;

• yd = YAHOO.util.Dom
• Snippet.init() and Snippet.setId() are exposed methods on a Module object called Snippet()

Now that my inserted 'chunks' of content have no id attribute, and dynamically evaluated, contextual config objects - I am free to add as many variants as I like. My only real concern is performance if a whole bunch of these Snippet() objects are added to my page (not likely).

这篇关于如何自我识别脚本标签在DOM中的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！