HTML5 данных со сложным объектом JSON и JavaScript

Question

я наткнулся на странное требование (устанавливается самостоятельно) ...

Я создаю легко интегрировать AJAX контента загрузчик плагин с большим количеством опций и обратных вызовов. Поскольку загрузчик является классом, и разработчик может иметь несколько экземпляров на одной странице, я хотел избавиться от всего уродливого кода, необходимого для каждой инициализации, и решил вместо этого использовать атрибуты данных - они выглядят потрясающе и профессионально!

Вопрос: Как добавить функции и javascript вообще в атрибут данных?

Пример:

var url = "someurl/goes/here/"; 
var Template = new TemplateEngine('Name', { 
    onCreate: function(template, parts) { 
     // do something with template parts 
     template.ID += 1; 
    }, 
    onRender: function(template, parts) { 
     template.addClass('flash'); 
    } 
}); 
var settings = { 
    container: DOM_ELEMENT|STRING, 
    template: Template, 
    disableDefaultRender: true, 
    // a bunch of hooks and callbacks like this: 
    onBeforeRequest: function(loader, data) { 
     new_data = data; 
     // modify request data somehow 
     loader.requestData = new_data; 
    }, 
    onRender: function(loader, data) { 
     loader.renderData(data, function(part) { 
      // define specific rendering logic for different template parts 
      // in required 
     }); 
    }, 
    onAfterRequest: function(loader, data) { 
    }, 
    onError: function(loader, data) { 
    } 
    // etc, etc 
}; 
var THE_LOADER = new SuperFancyAjaxLoader(url, settings); 

Моя первоначальная идея заключается в том, чтобы как-то поставить все выше внутри указанного атрибута данных:

<div data-fancy-stuff="{all-or-most-of-the-above}">more stuff</div> 

и сделать сам скрипт найти все элементы и инициализировать экземпляры для каждого из них:

var elements = document.querySelector('[data-fancy-stuff]'); 
for(item in elements) { 
    try { 
     var data = elements[item].getAttribute('data-fancy-stuff'); 
     var THE_LOADER = new SuperFancyAjaxLoader(data.url, data.settings); 
    } catch (ex) { 
     console.log('Someone messed with prototypes'); 
    } 
} 

Идея помещения функций javascript внутри атрибут идиот? Или есть способ на самом деле поместить некоторые js внутри атрибута?

Я понимаю, что если требуется так много javascript, бессмысленно пытаться помещать его в атрибут, но в реальных случаях (для этой конкретной задачи) у меня будет 3-5 загрузчиков контента на странице, большая часть они (или все) будут использовать один и тот же шаблон и логику визуализации, но все они должны будут самостоятельно изменить данные запроса.

p.s. Eval - Зло.

Редактировать: Я открыт для разработки предложений, которые не связаны с внешними инфраструктурами MVC.

Answer 1

Возможно, я не очень хорошо понимаю, но вы хотите предоставить некоторые модули/классы/объекты JavaScipt через атрибут HTML5 ???

Я думаю, что это плохой дизайн. Кажется, это смесь разных слоев.

Итак, технически U имеет только ОДНУ способность - вызвать eval даже после PS, потому что eval - единственная точка, где JavaScript может получить другой JavaScript из String - ТОЛЬКО.

Но если U хочет динамически загружать некоторые сложные javascript в качестве реакции на данные в некоторых элементах, это очень хорошая идея, чтобы изучить и применить наиболее совершенную вещь для таких сценариев - хорошо известную команду require.js http://requirejs.org/. И если вы хотите с трудом связать DOM с некоторыми данными и поведением, вы должны изучить некоторые из решений MVC JavaScript - AngularJS, Backbome, Amber и так далее.

По дизайну у вас нужно разделить приложение на уровень презентации, где DOM будет жить, и бизнес-уровень будет работать в JavaScript. Чтобы связать их друг с другом, вы используете дескрипторы строки/JSON в атрибуте DOM и динамически загружаете JavaScript с помощью перезаписи головы на лету или с помощью XHR + eval, такой дизайн является асинхронным, быстрым и является основным выбором всех надежных сетевых приложений из gmail для всех остальных крутых сотрудников. Чтобы помочь создать приложение с такой моделью - require.js является лучшим и наиболее известным помощником.