页面模态框异步加载及依赖引用

原创 · 金汉江 · 2022-11-18

为了减少单个页面代码量，提高页面加载速率，一些非立即展示的内容，可异步加载

处理方式

在服务端生成模态弹框，包含JS方法事件等处理
在服务端生成JSON数据，在本页面生成页面节点

服务端生成模态弹框

1 主页面包含各种按钮，点击后需要弹窗处理

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button onclick="btn1click()">Button1</button>
<button onclick="btn2click()">Button2</button>
<button onclick="btn3click()">Button3</button>

<div id="test1-modal-tag"></div>
<div id="test2-modal-tag"></div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
//----以下方法会在页面最顶部初始化----
var loadModalUrls = {};
function loadModal(tag, url, callback) {
    if (loadModalUrls[url] || $("#"+tag+"-tag").length == 0) {
        callback && callback();
        return true
    }
    $.ajax({
        url: url,
        type: "GET",
        success: function (page) {
            loadModalUrls[url] = true;
            $("#"+tag+"-tag").replaceWith(page);
            callback && callback()
        },
        error: function (error) {
            console.error(error)
        }
    });
}
//----以上方法会在页面最顶部初始化----

// 以下Js变量可php生成 var selectOptions = <?=json_encode([['id'=>1,'val'=>'option1'], ...])?>;
var selectOptions = [{"id":1,"val":"option1"},{"id":2,"val":"option2"},{"id":3,"val":"option3"}];

function btn1click() {
    // loadModal('test1-modal', '/modal/index.php?a=test1', function(){
    //     initTest1Modal();
    // })
    btn1clickwithcallback()
}
function btn1clickwithcallback(show=true, callback) {
    loadModal('test1-modal', '/modal/index.php?a=test1', function(){
        initTest1Modal(show);
        callback && callback();
    })
}
function btn2click() {
    loadModal('test2-modal', '/modal/index.php?a=test2', function(){
        initTest2Modal();
    })
}
function btn3click() {
    // 先加载modal1, 然后加载modal2
    btn1clickwithcallback(false, function(){
        btn2click();
    })
}
function parentEvent() {
    alert('parent windows');
}
</script>
</body>
</html>

2 服务端逻辑处理

/modal/index.php

<?php

switch($_GET['a'])
{
    case 'test1':
        // 可以处理
        require(__DIR__.'/test1.php');
        break;

    case 'test2':
        // 可以处理
        require(__DIR__.'/test2.php');
        break;
}

3 服务端页面渲染modal框页面
/modal/test1.php

<div id="test1-modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <form>
        <select id="select1"></select>
        <button type="button">点击</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="submitTest1Modal()">Save changes</button>
      </div>
    </div>
  </div>
</div>
<script>
$(document).ready(function(){
    // 在这里可以引用父窗口的JS变量
    var optionHtml = '';
    $.each(selectOptions, function(i,o){
        optionHtml += '<option value="'+o['id']+'">'+o['val']+'</option>';
    })
    $('#select1').html(optionHtml);

    // 点击事件
    $('#test1-modal form button').click(function(){
        alert('hello world');    
    })
})
// 初始化模态框方法
function initTest1Modal(show=true)
{
    if(show) {
      $('#test1-modal').modal('show');
    }
}
// 调用父窗口的事件
function submitTest1Modal()
{
    // 这里也可以引用父窗口的方法
    parentEvent();
    // 提交数据处理
    $.ajax({

    })    
}
</script>

/modal/test2.php

<div id="test2-modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal2</h4>
      </div>
      <div class="modal-body">
        <form>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="submitTest2Modal()">Save changes</button>
      </div>
    </div>
  </div>
</div>
<script>
$(document).ready(function(){

})
// 初始化模态框方法
function initTest2Modal()
{
    $('#test2-modal').modal('show');
}
function submitTest2Modal() {

}
</script>

← 如何在Mac上通过LMX训练自己的模型 → Redis Stream 使用