1.Js和页面只加载一次，放在同一个容器中

1.1 请求的控制

    Jquery的ajax方法中，属性async用于控制请求是同步还是异步，默认是true,即ajax请求默认是异步请求。但有时需要在数据请求完成时才进行下一步操作，这时需要对async进行动态控制。

   $.ajaxSettings.async = false;
    …进行请求…
   $.ajaxSettings.async = true;

1.2 动态加载js

    可通过判断当前容器中的某个js方法是否已有，没有的话进行加载。

if(typeof myJsMethod != 'undefined' && myJsMethod instanceof Function){

       $.ajaxSettings.async = false;

       $.getScript("js/my.js");

       $.ajaxSettings.async = true;

}

​​1.3 动态加载html

    可通过判断当前容器中的某个标签的ID(全局唯一)是否已有，没有的话进行加载。

if(!$("#myDiv").length > 0){

        $.ajaxSettings.async = false;

        $.post("loadMyDivHtml",function(result){

              $("#myDiv").html(result);//页面拼接

              $.parser.parse($("#myDiv"));//页面渲染，这样样式之类的才能生效

        });

        $.ajaxSettings.async = true;

}

2.Js和页面加载多次，部分在同一个容器中

本例在SpringBoot、thymeleaf情况下进行说明。每次需要用到时再重新加载一次。

2.1 定义公共CSS的引用

定义公共的CSS文件引用，命名为CommonCSS.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--公用的CSS-->
<!--<head th:fragment="commonCSS">-->
<div th:fragment="commonCSS">
    <link rel="stylesheet" type="text/css" th:href="@{{path}/css/style.css(path=${contextPath})}"/>
    <link rel="stylesheet" type="text/css" th:href="@{{path}/css/themes/default/easyui.css(path=${contextPath})}"/>
    <link rel="stylesheet" type="text/css" th:href="@{{path}/css/themes/icon.css(path=${contextPath})}"/>

    <link rel="stylesheet" type="text/css" th:href="@{{path}/layui/css/layui.css(path=${contextPath})}"/>

    <!--定义Web访问上下文，用于JS等请求的前缀部分-->
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}" />
</div>
<!--</head>-->
</html>

 

2.2 定义公共JS的引用

定义公共的JS文件引用，命名为CommonJS.html

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<!--公用的JS-->

<div th:fragment="common_js">

    <script type="text/javascript" th:src="@{{path}/js/libs/jquery.min.js(path=${contextPath})}"/>

    <script type="text/javascript" th:src="@{{path}/js/libs/jquery.easyui.min.js(path=${contextPath})}"/>

    <script type="text/javascript" th:src="@{{path}/layui/layui.js(path=${contextPath})}"></script>

    <script type="text/javascript">

        // 公共的上下文

        var ctx_path = $("meta[name='ctx']").attr("content");

    </script>

    <script type="text/javascript" th:src="@{{path}/js/utils.js(path=${contextPath})}"></script>

</div>

</html>

​​​​​​​​​​​​​​2.3 在各个html中引入

在Head标签引入公共的CSS和JS.

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

    <div th:replace="common/commonCSS::commonCSS"></div>

    <div th:replace="common/commonJS::common_js"></div>

    <!--自身的js-->

    <script type="text/javascript" th:src="@{{path}/js/my.js(path=${contextPath})}"/>

</head>

​​​​​​​​​​​​​​2.4 在自定义中使用Web上下文

$.get(ctx_path+'/getNumbers', function (result) {

      alert(result);
​
});
​

注：仅供个人参考！

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生