如何在JavaScript庫中處理大量HTML

Question

我受命創建一個JavaScript庫。
該庫的作用是在任何網站上創建具有多種選擇/步驟的復雜表格。 （這意味着我們無權訪問部署表單的網站。）

使用該庫的代碼如下：

<body>
    <div id="container"><!-- Here should be inserted my HTML form --></div>
</body>
<script src="http://wwww.example.com/path/to/myLibrary.js"></script>
<script>
    (function() {
        var dom = document.getElementById('container');
        var mb = new MLibrary(dom);
        mb.initialize();
    })();
</script>

填寫完畢后，此表單最終會發送到我們的API端點，並在其中進行處理。
由於表單的復雜性，我需要使用javascript創建大量元素。 表單的HTML源代碼是大約600行HTML
事實證明，在.js文件中包含這么多HTML十分荒謬，難以維護且難以閱讀。
由於性能目的，要求我盡可能避免AJAX請求，這意味着我應該避免將HTML存儲在服務器上並通過AJAX獲得它。

如果您不能使用AJAX來獲取HTML，那么如何在javascript庫中處理大量HTML以使其可維護？

我使用JSFiddle創建了該庫的非常基本的版本： https ://jsfiddle.net/xd4ojka2/

Answer 1

我不久前也遇到了同樣的問題。 基本上，我必須使用Webpack將 html和js捆綁在一起。 在開發中，所有代碼都保存在其自己的文件中：.html內的.html ， .js中的.js ，各自文件中的sass或sass。 然后，Webpack將通過組合所有這些文件來構建應用程序，為我提供一個build.js文件（名稱是可配置的）。

該文件可能比普通的JS文件大，但它具有應用程序所需的所有內容，這意味着無需AJAX即可獲取HTML或應用程序的其他部分。 由於此文件將保留在瀏覽器的高速緩存中，因此您需要實現高速緩存清除（超出此問題的范圍）。

Answer 2

您可以即時使用JSON輸入以編程方式創建HTML標簽。 可以使用AJAX調用來檢索用於生成標記的JSON輸入，也可以在應用初始化時將其存儲在LocalStorage中，或者可以延遲加載。

如何在JavaScript庫中處理大量HTML

問題描述

2 個解決方案

解決方案1
1 2017-02-08 18:59:51

解決方案2
-1 2017-02-08 19:12:27

如何在JavaScript庫中處理大量HTML

問題描述

2 個解決方案

解決方案1 1 2017-02-08 18:59:51

解決方案2 -1 2017-02-08 19:12:27

解決方案1
1 2017-02-08 18:59:51

解決方案2
-1 2017-02-08 19:12:27