如何在javascript库中处理大量HTML_Javascript_Html

如何在javascript库中处理大量HTML

javascript html

如何在javascript库中处理大量HTML,javascript,html,Javascript,Html,我的任务是创建一个javascript库。此库的作用是在任何网站上创建具有多个选项/步骤的复杂表单。（这意味着我们无法访问部署表单的网站。）使用库的代码如下所示： <body> <div id="container"></div> </body> <script src="http://wwww.example.com/path/

我的任务是创建一个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>


（功能（）{
var dom=document.getElementById（'container'）；
var mb=新的MLibrary（dom）；
初始化（）；
})();

填写后，此表单最终将发送到我们的API端点，并在那里进行处理。
由于表单的复杂性，我需要使用javascript创建大量元素。表单的HTML源代码约为600行HTML
事实证明，在一个.js文件中包含这么多的HTML很难维护，阅读起来也很糟糕。
出于性能考虑，我需要尽可能避免AJAX请求，这意味着我应该避免将HTML存储在服务器上，并通过AJAX获得它。

如果不能使用AJAX获取HTML，如何在javascript库中处理大量HTML以使其可维护

我已经使用JSFIDLE创建了这个库的一个非常基本的版本：

不久前，我也遇到了同样的问题。基本上，我必须将html与js捆绑在一起。在开发过程中，所有代码都保存在自己的文件中：html在

.html

中，js在

.js

中，less或sass在各自的文件中。然后Webpack将通过组合所有这些文件来构建应用程序，给我一个

build.js

文件（名称是可配置的）

该文件可能比一般的JS文件大，但它包含了应用程序所需的所有内容，这意味着没有AJAX来获取HTML或应用程序的其他部分。由于该文件将保存在浏览器的缓存中，因此您需要实现缓存破坏（不在本问题的讨论范围内）。

您可以通过编程动态使用JSON输入创建HTML标记。用于生成标记的JSON输入可以使用AJAX调用检索，或者在应用程序初始化时存储在LocalStorage中，或者延迟加载