Как самостоятельно определить положение тега скрипта в DOM? - PullRequest
Новая
       14

Как самостоятельно определить положение тега скрипта в DOM?

1 голос
/ 17 июня 2010

Возможно, есть лучший способ сделать это, но в настоящее время у меня есть хорошо инкапсулированный объект JavaScript, который может иметь некоторые настраиваемые параметры. Я включаю кусок HTML-кода на страницу (через Dreamweaver 'snippets'), и при загрузке страницы мой 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 Ответ

0 голосов
/ 21 июня 2010

Мой другой связанный вопрос (теперь ответил) решает эту проблему сейчас, по сути, я закончил с: 

<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 () представляют собой открытые методы объекта Module, называемого Snippet ()

Теперь, когда мои вставленные «порции» контента не имеют атрибута id и динамически оцениваются контекстные объекты конфигурации - я могу добавить столько вариантов, сколько мне нравится. Моя единственная реальная проблема - это производительность, если целая куча этих объектов Snippet () будет добавлена ​​на мою страницу (маловероятно).

...