如何在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这个片段_ /> 
< 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属性，因为我想允许将其中一个以上的内容删除到页面上。

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

解决方案

我的其他相关问题（现在回答）现在解决了这一点，本质上我结束了：

 < div class =snippet> 
< elements ... /> 
< script type =text / javascript> 
 var tmpVarName ='configOb _'+ Math.floor（Math.random（）* 1111111）; 
文档[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））; 
} 
  

---

对于更完整的上下文的代码;

• yd = YAHOO.util.Dom


• 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屋！