如何在JavaScript库中处理大量HTML
[英]How to handle large amount of HTML in a javascript library
问题描述
I was tasked to create a javascript library. 
我受命创建一个JavaScript库。
The role of this library is to create a complex form with multiple choices/steps on any website. 该库的作用是在任何网站上创建具有多种选择/步骤的复杂表格。 (It means that we don't have access to the website where the form is deployed.) （这意味着我们无权访问部署表单的网站。）
The code to use the library is the following : 使用该库的代码如下：
<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>
Once filled, this form is finally sent to our API endpoint where it is treated. 填写完毕后，此表单最终会发送到我们的API端点，并在其中进行处理。
Because of the complexity of the form, I need to create a huge amount of element using javascript. 由于表单的复杂性，我需要使用javascript创建大量元素。 The HTML source code of the form is ~600 lines of HTML 表单的HTML源代码是大约600行HTML
Having this much HTML inside a .js file has proved to be ridiculously hard to maintain and horrible to read. 事实证明，在.js文件中包含这么多HTML十分荒谬，难以维护且难以阅读。
Because of performance purpose, I was required to avoid AJAX request as much as possible which means that I should avoid to store the HTML on the server and get it through AJAX. 由于性能目的，要求我尽可能避免AJAX请求，这意味着我应该避免将HTML存储在服务器上并通过AJAX获得它。
If you can't use AJAX to get HTML, how can you handle a large amount of HTML inside a javascript library in order for it to be maintainable ?
如果您不能使用AJAX来获取HTML，那么如何在javascript库中处理大量HTML以使其可维护？
I've created a very basic version of this library using JSFiddle : https://jsfiddle.net/xd4ojka2/ 我使用JSFiddle创建了该库的非常基本的版本： https ://jsfiddle.net/xd4ojka2/
2 个解决方案
解决方案1
1 2017-02-08 18:59:51
I faced the same problem awhile back. 我不久前也遇到了同样的问题。 Basically, I had to bundle my html with my js with Webpack . 基本上，我必须使用Webpack将 html和js捆绑在一起 。 In development, all code lives in it's own file: html inside .html , js in .js , less or sass in their respective files. 在开发中，所有代码都保存在其自己的文件中：.html内的.html ， .js中的.js ，各自文件中的sass或sass。 Then Webpack will build the app by combining all these files, giving me a build.js file (the name is configurable). 然后，Webpack将通过组合所有这些文件来构建应用程序，为我提供一个build.js文件（名称是可配置的）。
That file might be bigger than your average JS file, but it has all the stuff your app needs, meaning no AJAX to fetch HTML, or other parts of the app. 该文件可能比普通的JS文件大，但它具有应用程序所需的所有内容，这意味着无需AJAX即可获取HTML或应用程序的其他部分。 Since this file will be kept in browser's cache, you need to implement a cache busting (outside of the scope of this question). 由于此文件将保留在浏览器的高速缓存中，因此您需要实现高速缓存清除（超出此问题的范围）。
解决方案2
-1 2017-02-08 19:12:27
You could programmatically create HTML tags using JSON input on the fly. 您可以即时使用JSON输入以编程方式创建HTML标签。 The JSON input for generating the markup can be retrieved using AJAX calls or stored in LocalStorage on app initialization or be lazy loaded. 可以使用AJAX调用来检索用于生成标记的JSON输入，也可以在应用初始化时将其存储在LocalStorage中，或者可以延迟加载。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.