CloudSQLAdminPanel/public/scr/index-dev.js

import { DH_NOT_SUITABLE_GENERATOR } from "constants";

function Router() {
    this.router = {}
    this.beforeFun = null
    this.afterFun = null
}

Router.prototype = {
    init: function () {
        const windowLoad = handleEvent('load', {
            onElement: window,
            withCallback: this.urlChange()
        })
        //路由切换
        const hashChange = handleEvent('hashchange', {
            onElement: window,
            withCallback: this.urlChange()
        })
        //异步引入js通过回调传递参数
        window.RESOLVE_INIT = null

    },
    hashCapture: function () {
        let hashDeatail = location.hash.split("?"),
            hashName = hashDeatail[0].split("#")[1], //路由地址
            params = hashDeatail[1] ? hashDeatail[1].split("&") : [], //参数内容
            query = {}

        for (let i = 0; i < params.length; i++) {
            let item = params[i].split("=");
            query[item[0]] = item[1]
        }
        return {
            path: hashName,
            query: query
        }
    },
    refresh: function (hash) {
        if (this.beforeFun) {
            this.beforeFun({
                to: {
                    path: hash.path,
                    query: hash.query
                },
                next: function () {
                    this.routers[hash.path].callback.call(this, hash)
                }
            })
        } else {
            this.routers[hash.path].callback.call(this, hash)
        }
    },
    urlChange: function () {
        let hash = this.hashCapture()

        if (this.routers[hash.path]) {
            this.refresh(hash)
        } else {
            //未注册的hash跳转至首页
            location.hash = '/index'
        }
    },
    reg: function (path, callback) {
        path = path.replace(/\s*/g, ""); //过滤空格
        if (callback && Object.prototype.toString.call(callback) === '[object Function]') {
            this.routers[path] = {
                callback: callback, //回调
                fn: null //存储异步文件状态
            }
        } else {
            console.trace('注册' + path + '地址需要提供正确的的注册回调')
        }
    },
    beforeEach: function (callback) {
        if (Object.prototype.toString.call(callback) === '[object Function]') {
            this.beforeFun = callback;
        } else {
            console.trace('路由切换前钩子函数不正确')
        }
    },
    afterEach: function (callback) {
        if (Object.prototype.toString.call(callback) === '[object Function]') {
            this.afterFun = callback;
        } else {
            console.trace('路由切换后回调函数不正确')
        }
    },
    asyncFun: function (file, transition) {
        // var self = this;
        if (this.routers[transition.path].fn) {
            this.afterFun && this.afterFun(transition)
            this.routers[transition.path].fn(transition)
        } else {
            console.log("开始异步下载js文件" + file)
            let _body = document.getElementsByTagName('body')[0],
                scriptEle = document.createElement('script')

            scriptEle.type = 'text/javascript';
            scriptEle.src = file;
            scriptEle.async = true;
            RESOLVE_INIT = null;
            scriptEle.onload = function () {
                console.log('下载' + file + '完成')
                this.afterFun && this.afterFun(transition)
                this.routers[transition.path].fn = RESOLVE_INIT
                this.routers[transition.path].fn(transition)
            }
            _body.appendChild(scriptEle);
        }
    },
    //同步操作
    syncFun: function (callback, transition) {
        this.afterFun && this.afterFun(transition)
        callback && callback(transition)
    }
}

/**
 * 事件监听处理类
 * 
 * @param {string} eventName 表示监听事件类型的字符串
 * @param {object} [{ onElement, withCallback, useCapture = false }={}] 监听对象 回调函数 useCapture
 * @param {function} thisArg 
 * @returns function
 */
function handleEvent(eventName, {
    onElement,
    withCallback,
    useCapture = false
} = {}, thisArg) {
    const element = onElement || document.documentElement

    function handler(event) {
        if (typeof withCallback === 'function') {
            withCallback.call(thisArg, event)
        }
    }

    handler.destroy = function () {
        return element.removeEventListener(eventName, handler, useCapture)
    }

    element.addEventListener(eventName, handler, useCapture)
    return handler
}

Ajax = {
    /**
     * 发送Get请求
     * 
     * @param {!string} url 请求地址
     * @param {?function} next 回调函数
     */
    get: function (url, next) {
        let xhr = new XMLHttpRequest();

        if (url.includes('?')) {
            // 在URL有其他参数时，添加一个date参数加入当前时间以避免缓存
            xhr.open('GET', url + '&date=' + new Date().getTime(), true);
        } else {
            // 添加一个date参数加入当前时间以避免缓存
            xhr.open('GET', url + '?' + new Date().getTime(), true);
        }
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // 更改XMLHttpRequest对象withCredentials属性以支持跨域Cookies
        xhr.withCredentials = true;
        xhr.responseType = 'json';
        xhr.onload = function (res) {
            // 获取请求接口返回值
            let response = res.target.response;

            next.call(this, response);
        };
        xhr.send();
    },
    /**
     * 发送Post请求
     * 
     * @param {!string} url 请求地址
     * @param {?string} data post请求参数
     * @param {?function} next 回调函数
     */
    post: function (url, data, next) {
        let xhr = new XMLHttpRequest();

        if (url.includes('?')) {
            // 在URL有其他参数时，添加一个date参数加入当前时间以避免缓存
            xhr.open("POST", url + '&' + new Date().getTime(), true);
        } else {
            // 添加一个date参数加入当前时间以避免缓存
            xhr.open("POST", url + '?' + new Date().getTime(), true);
        }
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // 更改XMLHttpRequest对象withCredentials属性以支持跨域Cookies
        xhr.withCredentials = true;
        xhr.responseType = 'json';
        xhr.onload = function (res) {
            // 获取请求接口返回值
            let response = res.target.response;

            next.call(this, response);
        };
        xhr.send(data);
    }
}

Util = {
/*     permissionCheck: function (next) {
        this.ajax.get('http://admin.cloudsql.1473.cn/v1/index/signStatus', function (response) {
            if (response.status == 'signedin') {
                next.call(this);
            } else {
                window.location.hash = '/signin';
            }
        }.bind(this));
    },
    tableGenerator: function (params) {
        
    }
 */}