具有復雜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);

我的最初想法是將上述所有內容放入上述data屬性中：

<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個內容加載器，其中大多數（或全部） ）將使用相同的模板和呈現邏輯，但它們都必須自行修改請求數據。

ps Eval是邪惡的。

編輯：我願意設計不涉及第三方MVC框架的建議。

Answer 1

可能是我不太了解，但是您想通過HTML5屬性提供一些JavaScipt模塊/類/對象？？？

我認為設計不好。 它似乎是不同層的混合。

因此，從技術上講，U僅具有一種功能-即使在PS之后也可以調用eval，因為eval是唯一可以從String獲取其他JavaScript的點。

但是，如果U要動態加載某些復雜的javascript作為對某些元素中的數據的反應，那么在這種情況下學習並應用最最終的東西是一個好主意-眾所周知的require.js http://requirejs.org/ 。 而且，如果您幾乎不想將DOM與某些數據和行為綁定，則必須學習一些MVC JavaScript解決方案-AngularJS，Backbome，Amber等。

通過設計，您必須將您的應用程序拆分為表示層，在該層將使用DOM，而在業務層將使用JavaScript。 要將它們彼此綁定，可以在DOM屬性中使用字符串/ JSON描述符，並使用動態頭重寫或XHR + eval動態加載JavaScript，這種設計是異步，快速的，並且是gmail中所有基於固體網絡應用程序的主要選擇給其他人。 為了幫助使用這種模型構建應用程序-require.js是最好的，也是最著名的幫助器。