Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 07.JS代码重构

原文地址：http://www.work100.net/training/monolithic-project-iot-cloud-admin-manager-js.html
更多教程：光束云 - 免费课程

JS代码重构

序号	文内章节	视频
1	概述	-
2	Select2控件初始化通用模块	-
3	消息提示通用模块	-
4	表单验证通用模块	-
5	模态对话框通用模块	-
6	各视图文件代码修改	-
7	实例源码	-

请参照如上章节导航进行阅读

1.概述

我们进行视图页面编码时会编写自己的JS脚本，同时也会使用第三方的UI控件，其实这些JS脚本及UI控件大多数都是通用的，都可以提炼为公用模块，接下来我们将完成这些提炼工作。

2.Select2控件初始化通用模块

页面中用到 select 控件时，需要引入 Bootstrap 的样式效果，要达到效果，则需在页面加载时执行如下代码：

//Initialize Select2 Elements
$('.select2').select2();

//Initialize Select2 Elements
$('.select2bs4').select2({
   
    theme: 'bootstrap4'
});

下面我们将如上代码提取到一个公用的 js 文件中。

首先，在 /webapp/static/assets/js/ 目录下新建一个文件 select2-utils.js，代码如下：

let Select2 = function() {
   

    let handleInitSelect2 = function() {
   
        //Initialize Select2 Elements
        $('.select2').select2();

        //Initialize Select2 Elements
        $('.select2bs4').select2({
   
            theme: 'bootstrap4'
        });
    }

    return {
   
        init: function() {
   
            handleInitSelect2();
        }
    }
}();

$(function() {
   
    Select2.init();
});

然后，删除原有页面中的自定义 js 代码，用引入文件的方式代替，代码如下：

<script src="/static/assets/js/select2-utils.js"></script>

3.消息提示通用模块

对于页面中用到的消息提示，比如 操作成功、操作失败 ，我们是使用如下代码实现的：

成功消息

const Toast = Swal.mixin({
   
    toast: true,
    position: 'top',
    showConfirmButton: false,
    timer: 2000,
    timerProgressBar: true,
    onOpen: (toast) => {
   
        toast.addEventListener('mouseenter', Swal.stopTimer)
        toast.addEventListener('mouseleave', Swal.resumeTimer)
    }
})

Toast.fire({
   
    type: 'success',
    title: '操作成功'
})

失败消息

const Toast = Swal.mixin({
   
    toast: true,
    position: 'top',
    showConfirmButton: false,
    timer: 2000,
    timerProgressBar: true,
    onOpen: (toast) => {
   
        toast.addEventListener('mouseenter', Swal.stopTimer)
        toast.addEventListener('mouseleave', Swal.resumeTimer)
    }
})

Toast.fire({
   
    type: 'error',
    title: '操作错误'
})

提取公用

我们将如上方法提取到一个公用的 js 文件中，在 /webapp/static/assets/js/ 目录下新建一个文件 message-utils.js，代码如下：

let Message = function() {
   

    <