具有复杂JSON对象和javascript的HTML5数据属性

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个内容加载器，他们中的大多数(或全部)将使用相同的模板和呈现逻辑，但他们都必须以不同的方式修改请求数据。

附注：伊瓦尔就是邪恶。

编辑:我对不涉及第三方MVC框架的设计建议持开放态度。

Answer 1

也许我不太明白，但是您想通过JavaScipt属性提供一些HTML5模块/类/对象吗？

我觉得设计不好。它似乎是不同层次的混合。

所以从技术上讲，你只有一种能力--即使是在你的PS之后，你也可以调用eval，因为eval是JavaScript唯一可以从String获得其他JavaScript的地方。

但是，如果您想动态加载一些复杂的javascript作为对某些元素中的数据的反应，那么最好学习并将最终极的东西应用到这样的场景中--众所周知的require.js http://requirejs.org/。如果您不想将DOM与某些数据和行为绑定，那么您必须学习一些MVC JavaScript解决方案-- AngularJS、Backbome、Amber等等。

通过设计，您必须将您的应用程序拆分到表示层，DOM将在其中驻留，而业务层将位于JavaScript中。为了将它们绑定到一起，您可以在DOM属性中使用字符串/JSON描述符，并使用实时头重写或由XHR+eval动态加载XHR+eval，这样的设计是异步的、快速的，并且是从gmail到所有其他酷员工的所有基于网络的应用程序的主要选择。要用这样的模型来帮助构建应用程序-- require.js是最好的，也是最著名的助手。