处理Ajax HTML块的正确方法

Question

所以我想知道处理通过Ajax使用的HTML的“规范”或“适当”方法是什么。

例如，是否应将所有HTML保留在使用它的实际页面中？ 或者我应该只是一个ajax调用来加载它？

自从加载量减少一倍以来，将其加载到页面中的性能是否有所提高？ 还是在页面加载时加载额外的数据而抵消了它。

这是一个截图，说明了我的意思。.您可以看到{name}，它根据用户提供的内容而有所改变（当然，字符数有限）。

任何帮助/意见表示赞赏！ 谢谢！

询问者的部分​​来源：

<!-- text field -->
    <div class="add-field-wrapper float-left">
        <input type="radio" value="text" name="input_type" id="rad-type-text" class="type-radio-btn">
        <label for="rad-type-text" class="radio-lbl" data-tooltip="Used for simple inputs such as: <b>Phone Number</b> or <b>Email Address</b>">
            <img src="https://placeholdit.imgix.net/~text?txtsize=16&txt=70x70&w=70&h=70" class="field-type-icon" />
            <div class="field-type-text">Text Field</div>
        </label>
    </div>

    <!-- select -->
    <div class="add-field-wrapper float-left">
        <input type="radio" value="select" name="input_type" id="rad-type-select" class="type-radio-btn">
        <label for="rad-type-select" class="radio-lbl" data-tooltip="Use this option when you need to provide a list of choices for the user." >
            <img src="https://placeholdit.imgix.net/~text?txtsize=16&txt=70x70&w=70&h=70" class="field-type-icon" />
            <div class="field-type-text">Select Menu</div>
        </label>
    </div>

    <!-- textarea -->
    <div class="add-field-wrapper float-left">
        <input type="radio" value="textarea" name="input_type" id="rad-type-textarea" class="type-radio-btn">
        <label for="rad-type-textarea" class="radio-lbl" data-tooltip="The textarea field will appear as a <b>WYSIWIG</b> (What you see is what you get) editor. This allows for some customization of the appearance of the input.">
            <img src="https://placeholdit.imgix.net/~text?txtsize=16&txt=70x70&w=70&h=70" class="field-type-icon" />
            <div class="field-type-text">Text Area</div>
        </label>
    </div>

编辑：

    <!-- Datepicker HTML block - used in JS -->
<div id="datepicker_html" style="display: none;">
    <div id="{name}-block" class="datepicker-wrapper form-input-wrapper">
        <div class="template-drag-handle"><img src="images/design/up-down-icon.png" class="template-drag-handle-icon" alt="Drag" /></div>
        <div class="inputs-wrapper">
            <div class="form-row"><input type="text" name="{name}" class="input-datepicker" placeholder="{placeholder}" id="{name}"/></div>
        </div>
        <?php echo $default_template_chkbox_options_html; ?>
    </div>  
</div>

那是html的“片段”。它被加载到JS变量中：

这就是它的处理方式-添加名称，更改占位符（可以根据需要多次重复使用）

function addDatePickerField(){
    //Get the HTML
    var datepicker_html = $('#datepicker_html').html();

    datepicker_html = datepicker_html.replaceAll(/{name}/g, input_name_underscores);
    datepicker_html = datepicker_html.replaceAll('{placeholder}', input_name);

    $('#template-fields-wrapper').append(datepicker_html);

    wrapUpAddInput('datepicker');
}   

我现在不知道是否最好做一个ajax调用，存储“外部” html并在需要时调用它—例如，该datepicker HTML块将存储在单独的文件中，然后保存在链接上，加载到DOM中。

Answer 1

我将尽力解决您的问题，即使这是一个非常广泛的问题。

通常，通过ajax请求动态加载内容（例如HTML）并不总是可以提高性能，这实际上取决于您正在做的事情和要实现的目标。

您是否应该始终在初始请求中预加载所有HTML内容？ 还是应该在页面已经加载到屏幕上之后再加载ajax的一部分？ 那完全取决于您的应用程序和需求。

我将举例说明：

假设我正在开发一个内容网站，该网站主要是面向内容的（例如文章），并且将通过传统的Web浏览器（台式机或移动设备）提供内容，那么通过ajax为每个页面加载我的文章可能不是一个好主意，因为很少罕见的例外。

另一方面-

如果我正在开发一个Web应用程序，需要“实时”发送和接收数据块，那么这个包含丰富UI的项目必须具有丰富的，类似于“企业”的经验，正在执行，更新和更新内容在我保存工作或执行操作时，无需刷新和重新加载应用程序页面即可流畅地实时显示-我当然会使用ajax请求来处理某些工作。

另一个方面是页面的总加载时间：

某些网站在页面主体加载后通过ajax加载其HTML-通过这样做，它们减少了页面的感知加载时间（对我来说是“感知”）-对用户而言，它似乎加载速度更快由于部分页面几乎是立即加载的，因此页面内部的某些块通过ajax异步加载。

就像我说过的那样，这是一个非常广泛的问题，有很多方法可以学习和研究，以最终找到最适合您的特定需求的方法。

祝好运