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函数放在属性idiotic中的想法是什么？或者有没有办法在属性中实际放置一些js？

据我所知，如果需要这么多javascript，尝试将其放在属性中是没有意义的，但在现实生活中（对于这个特定的任务），每页我会有3-5个内容加载器，其中大部分都是（或全部）将使用相同的模板和渲染逻辑，但他们都必须自己不同地修改请求数据。

P.S。 Eval是邪恶的。

编辑：我愿意设计不涉及第三方MVC框架的提案。

Answer 1

可能我不太了解，但你想通过HTML5属性提供一些JavaScipt模块/类/对象???

我认为这是糟糕的设计。它似乎是不同层次的混合物。

所以技术上你只有一个能力 - 即使在你的PS之后调用eval，因为eval是JavaScript可以从String中获取其他JavaScript的唯一点 - 只有。

但是如果你想动态加载一些复杂的javascript作为对某些元素中数据的反应，那么学习并应用这些场景的最终终极事物是一个非常好的想法 - 很久以前就知道了.js {{3} }。如果您想要将DOM与某些数据和行为绑定在一起，您必须学习一些MVC JavaScript解决方案 - AngularJS，Backbome，Amber等。

按照设计，你必须将你的应用程序拆分到DOM将存在的表示层，而业务层将是JavaScript存在的。要将它们彼此绑定，您可以在DOM属性中使用字符串/ JSON描述符，并使用动态头重写或XHR + eval动态加载JavaScript，这种设计是异步，快速的，并且是gmail中所有基于网络的可靠应用程序的主要选择。对所有其他酷的工作人员。为了帮助使用这样的模型构建应用程序 - require.js是最好的，也是最知名的帮助者。

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

1 个答案: