JSP融合vuejs升级老旧项目页面维护续篇之全局封装common.js

全局封装jquery的commonjs方法

var common = (function ($, w, d) {
    //-----私有-------------------
    var renderers = {};
    var plugins = {};
    var actionSheets = {};

    /**
     *
     *
     * 数据渲染以及插件的运行机制
     *
     *
     */

    function getRenderer(temId) {
        if (!renderers[temId]) {
            renderers[temId] = renderer();
            this[temId] = renderers[temId];
        }
        return renderers[temId];
    }

    function rendererAll(element) {
        var renderersEls = element.find("[renderer]");
        if (element.attr("renderer")) { //如果element本身有renderer
            renderersEls = renderersEls.add(element);
        }
        for (var i = 0, leng = renderersEls.length; i < leng; i++) {
            var rendererEl = renderersEls.eq(i);
            var temId = rendererEl.attr("renderer");
            var data = rendererEl.attr("data");
            var ajax = rendererEl.attr("ajax");
            var dataLoaded = rendererEl.attr("dataloaded");
            if (temId && !dataLoaded) {  //dataLoaded判断数据是否被加载过(即不能多次重复加载)
                var renderer = getRenderer(temId);
                renderer.el = rendererEl;
                if (data || ajax) {
                    renderer.getData();
                }
                renderer.initRender();
                var subElements = rendererEl.find("[id]");
//				这里让所有的带id 的元素,成为render对象的成员变量
                for (var j = 0, lengj = subElements.length; j < lengj; j++) {
                    var subId = subElements.eq(j).attr("id");
                    renderer[subId] = subElements.eq(j);
                }
                if (renderer.method) {
                    renderer.method(rendererEl);  //数据静态渲染(初始化)
                }
                rendererEl.attr("dataloaded", true);
                common[temId] = renderer;
            }
        }
        initPlugin(element);

        //初始化结束
        renderersEls.each(function () {
            var temId = $(this).attr("renderer");
            if (common[temId] && common[temId].initDone) {
                common[temId].initDone();
            }
        });
    }

    function getAjax(url, opt) {
        var loginUserInfo = {token: ''}
        try {
            loginUserInfo = Object.assign(loginUserInfo, JSON.parse(localStorage.getItem('loginUserInfo')))
        } catch(e) {

        }
        var ajaxdata = null;
        var deta = {
            headers: {
                Authorization: loginUserInfo.token
            },
            data: {
                token: loginUserInfo.token
            },
            url: url,
            dataType: "json",
            async: false,
            type: "GET",
            success: function (data) {
                ajaxdata = data.data;
                //返回错误
                if (data.result == "error" && data.status == -1 && (data.errorCode != 1104 || data.errorCode != 1105)) {
                    // alertc(data.info);
                    swal(data.info);
                    if (data.info.indexOf("用户未登录") > -1) {
                        window.location = "/system/home/home";
                    }
                    if (opt && opt.error) {
                        opt.error(data);
                    }
                }
                if (opt && opt.callback) {
                    opt.callback(ajaxdata);
                }
            },
            error: function (data) {
                console.log("getAjax Error." + url);
                //alert('error');
            },

        };
        $.ajax(deta);
        $.extend(true, deta, opt);
        return ajaxdata;
    }

    function postAjax(url, requestdata, opt) {
        var loginUserInfo = {token: ''}
        try {
            loginUserInfo = Object.assign(loginUserInfo, JSON.parse(localStorage.getItem('loginUserInfo')))
        } catch(e) {
        }
        var ajaxdata = null;
        var deta = {
            headers: {
                Authorization: loginUserInfo.token
            },
            url: url,
            dataType: "json",
            async: false,//同步
            traditional: true,
            type: "POST",
            data: {
                token: loginUserInfo.token,
                ...requestdata
            },
            success: function (data) {
                ajaxdata = data.data;
                //返回错误
                if (data.result == "error" && data.status == -1) {
                    swal(data.info);
                    if (data.info.indexOf("用户未登录") > -1) {
                        window.location = "/system/home/home";
                    }
                }

                if (opt && opt.callback) {
                    opt.callback(ajaxdata);
                }
            },
            error: function () {
                console.log("postAjax Error." + url);

                if (opt && opt.error) {
                    opt.error();
                }
            },
        };
        $.extend(true, deta, opt);
        $.ajax(deta);
        return ajaxdata;
    }

    function promiseAjax(url, requestdata, opt) {
        var loginUserInfo = {token: ''}
        try {
            loginUserInfo = Object.assign(loginUserInfo, JSON.parse(localStorage.getItem('loginUserInfo')))
        } catch(e) {

        }
        var deta = {
            headers: {
                Authorization: loginUserInfo.token
            },
            url: url,
            dataType: "json",
            async: false,//同步
            traditional: true,
            type: "POST",
            data: {
                token: loginUserInfo.token,
                ...requestdata
            },
            success: function (data) {
                ajaxdata = data.data;
                //返回错误
                if (data.result == "error" && data.status == -1) {
                    swal(data.info);
                    if (data.info.indexOf("用户未登录") > -1) {
                        window.location = "/system/home/home";
                    }
                }

                if (opt && opt.callback) {
                    opt.callback(ajaxdata);
                }
            },
            error: function () {
                console.log("postAjax Error." + url);

                if (opt && opt.error) {
                    opt.error();
                }
            },
        };
        $.extend(true, deta, opt);
        return $.ajax(deta);
    }

    function initPlugin(element) {
        for (var key in plugins) {
            var els = element.find("[" + key + "]");
            if (element.attr(key) || element.attr(key) === "") {//当有这个属性且有值的时候或者有这个属性没有值的时候执行
                els = els.add(element);
            }
            for (i = 0, leng = els.length; i < leng; i++) {
                var el1 = els.eq(i);
                var pluginDataStr = el1.attr("plugin-data");
                if (pluginDataStr) {
                    if (pluginDataStr.split(':').length >= 2) {  //多条数据的处理
                        var pluginData = eval("({" + pluginDataStr + "})");
                        var idealPluginData = (function () {
                            var temData = {};
                            for (var key in pluginData) {
                                temData[key] = eval("(" + pluginData[key] + ")");
                            }
                            return temData;
                        })();
                        el1.data = idealPluginData;
                    } else {
                        el1.data = eval("(" + pluginDataStr + ")");
                    }
                }
                plugins[key](el1);  //数据动态渲染
            }
        }
    }


    function renderer() {
        return {
            el: null,
            data: null,
            status: 0,
            result: "",
            templates: {},
            getData: function () {
                var hasajax = this.el.attr('ajax');
                var hasdata = this.el.attr('data');
                var self = this;
                if (hasajax) {
                    this.data = common.getAjax(hasajax);
                } else {
                    this.data = eval("(" + hasdata + ")");
                }
                this.data = this.formatData(this.data);

            },
            initRender: function () {
                var templateEls = this.el.find("[template]");
                var render = this;

                templateEls.each(function (index, temp) {
                    temp = $(temp);
                    var parent = temp.parent()
                    var tmp_id = temp.attr("template");
                    render.templates[tmp_id] = temp;
                    temp.parent = parent;
                });
                this.refresh();
            },
            initForm: function () {
                var valueEls = this.el.find("[name]");
                for (var i = 0, leng = valueEls.length; i < leng; i++) {
                    var valueEl = valueEls.eq(i);
                    base.val(valueEl, "");
                }
                $(this.el).find("input:checkbox").each(function (index, item) {
                    $(item).removeAttr("checked");
                });
                $(this.el).find(".showuploadFiles").remove();
            },
            refresh: function () {
                var valueEls = this.el.find("[name]");
                for (var i = 0, leng = valueEls.length; i < leng; i++) {
                    var valueEl = valueEls.eq(i);
                    var name = valueEl.attr("name");
                    var value = base.eval(name);
                    try {
                        if (typeof (value) == "object") {
                            value = "";
                            if (value && value.outerHTML && value.outerHTML.startsWith("<") && value.outerHTML.endsWith(">")) {
                                console.log("name为" + name + "的input的name值是另一个元素的id值");
                            }
                        }
                    } catch (err) {
                        value = "";
                        console.log(err);
                    }
                    if (value != "" || value === 0)
                        base.val(valueEl, value);
                    else
                        base.val(valueEl, '');
                }
                for (var tmp_id in this.templates) {
                    var temp = this.templates[tmp_id];
                    var parent = temp.parent;
                    var render = this;

                    parent.empty();
                    if (render.data) {
                        for (var i = 0, leng = render.data.length; i < leng; i++) {
                            var vo = render.data[i];
                            vo.key_code = tmp_id;
                            var t_clone = temp.clone(true);
                            common.eachChild(t_clone, function (child) {
                                base.replace(vo, child);
                            });
                            parent.append(t_clone);
                        }
                    }
                }

                // 对checkbox 的处理
                $(this.el).find("input:checkbox").each(function (index, item) {
                    var needAdd = false;
                    if ($(this).prev()[0] == undefined) {
                        needAdd = true;
                    } else {
                        var classvalue = $(this).prev()[0].classList.value;
                        if (classvalue != null && classvalue != undefined) {
                            if ($(this).prev()[0].classList.value.indexOf("ace-switch") < 0) {
                                needAdd = true;
                            }
                        } else {
                            needAdd = true;
                        }

                    }
                    if (needAdd) {
                        var cNode = item.cloneNode(true);
                        $(cNode).attr("type", "hidden");
                        //var value = base.eval(cNode.name);
                        $(cNode).val(0);
                        if ($(item.parentElement).find("input").length == 2) {
                            return;
                        }
                        $(item).before(cNode)
                        //item.before(cNode);
                        item.name = "";
                        $(item).change(function () {
                            var hiddenInput = $(this).prev()[0];
                            if (hiddenInput.value == 0) {
                                $(hiddenInput).val(1);
                            } else {
                                $(hiddenInput).val(0);
                            }
                        });
                    }

                    var nameStr = $(item).prev()[0].name;
                    var checkboxValue = base.eval(nameStr);
                    if (checkboxValue == 1) {
                        item.checked = true;
                    } else {
                        item.checked = false;
                    }
                });

                var images = this.el.find(".uploader-list");
                for (var i = 0; i < images.length; i++) {
                    var imagesHtml = "";
                    var canDelete = $(images[i].parentNode).hasClass("canDelete");
                    var nameStr = $(images[i].parentNode).attr("data-uploadfile");
                    var isRequired = $(images[i].parentNode).hasClass("required") ? ' required="required" ' : ' ';

                    var value = base.eval(nameStr);
                    try {
                        if (typeof (value) == "object" && value) {
                            if (value.outerHTML.startsWith("<") && value.outerHTML.endsWith(">")) {
                                value = "";
                                console.log("name为" + nameStr + "的input的name值是另一个元素的id值");
                            }
                        }
                    } catch (err) {
                        console.log(err);
                    }

                    var strValue = decodeURI(value);
                    var devlist = [];
                    var fileUrl = "";
                    if (strValue && strValue != "null" && strValue != "undefined" && strValue != "") {
                        if (strValue.indexOf("[") == 0 && strValue.indexOf("]") > 0) {
                            var arrValue = JSON.parse(strValue);
                            if (arrValue.length > 0) {
                                for (var m = 0; m < arrValue.length; m++) {
                                    var file_dev = "";
                                    var url_address = arrValue[m];
                                    var nameStartpoint = url_address.lastIndexOf("/") + 1;
                                    var endpoint = url_address.lastIndexOf("?");
                                    var endStr = url_address.substring(endpoint + 1);

                                    var fileId = endStr.split("=")[1];
                                    if (fileId) {
                                        var fileInfo = common.getAjax(url_address.replace("/download?", "/getFileInfo?"));
                                        if (fileInfo) {
                                            endStr = fileInfo.fileType;
                                            fileUrl = fileInfo.fileUrl;
                                        }
                                    } else {
                                        endStr = url_address.substring(url_address.lastIndexOf(".") + 1);
                                        fileUrl = url_address;
                                    }

                                    if (endStr == "jpg" || endStr == "jgeg" || endStr == "png" || endStr == "gif" || endStr == "bmp") {
                                        if (canDelete && arrValue[m]) {
                                            file_dev = "<div><img class='showuploadFiles' src=" + arrValue[m] + " width='180px' height='150px' onclick='savepic(\"" + arrValue[m] + "\")' style='height: 170px; width: 180px;margin:5px; display: block;'>" +
                                                "<i class='fa fa-times-circle showuploadFilesCircle' data-url='" + arrValue[m] + "'  aria-hidden='true' onclick='ossDeleteImage(this)'></i>";
                                        } else {
                                            file_dev = "<img class='showuploadFiles' src=" + arrValue[m] + " width='180px' height='150px' onclick='savepic(\"" + arrValue[m] + "\")' style='height: 170px; width: 180px;margin:5px; display: block;'>";
                                        }
                                        file_dev = file_dev + '</div>';
                                    } else {
                                        var fileName;
                                        if (endpoint > 0) {
                                            fileName = url_address.substring(nameStartpoint, endpoint);
                                        } else {
                                            fileName = url_address.substring(nameStartpoint, url_address.length);
                                        }
                                        file_dev = "<div><a href='" + arrValue[m] + "' target='_black' download='" + arrValue[m] + "' >" + fileName + "</a>";
                                        if (canDelete) {
                                            file_dev = file_dev + "<i class='fa fa-times-circle showuploadFilesCircle' data-url='" + arrValue[m] + "'  aria-hidden='true' onclick='ossDeleteImage(this)'></i>";
                                        }
                                        file_dev = file_dev + "<br>";
                                        file_dev = file_dev + '</div>';
                                    }
                                    devlist.push(file_dev);
                                }
                            }
                        }
                    }

                    if (!value || value == "undefined" || value == "null") {
                        value = "";
                    }
                    var inputStr = '<input type="hidden" name="' + nameStr + '" value="' + value + '" class="upload_file" data-fileUrl="' + fileUrl + '" ' + isRequired + ' />';
                    devlist.push(inputStr);
                    // imagesHtml += inputStr;
                    $(images[i]).parent().find(".showuploadFiles").remove();
                    $(images[i]).parent().find(".showuploadFilesCircle").remove();
                    $(images[i]).parent().prepend(devlist);
                }
            },
            formatData: function (data) {
                return data;
            },
            formDone: function () {
            },            
            formError: function () {
                return false;
            },
            extends: function (object) {
                $.extend(true, this, object);
            },
            hide: function () {
                this.show(false);
            },
            show: function (isShow) {
                isShow = (typeof isShow == "undefined") ? true : isShow;
                if (isShow && this.ishidden()) {
                    this.el.show();
                    this.e_show(isShow);  //该renderer显示后会调用里面的e_show()
                }
                if (!isShow && !this.ishidden())
                    this.el.hide();
            },
            e_show: function () {
            },
            ishidden: function () {
                return this.el.is(':hidden');
            },
            method: null
        }

    }

    function eachChild(parent, func) {
        func(parent);
        parent.children().each(function (index, child) {
            common.eachChild($(child), func);
        });
    }

    function getUrlParam(paramName) {
        var url = d.location.toString();
        var arrObj = url.split("?");

        if (arrObj.length > 1) {
            var arrPara = arrObj[1].split("&");
            var arr;

            for (var i = 0; i < arrPara.length; i++) {
                arr = arrPara[i].split("=");

                if (arr != null && arr[0] == paramName) {
                    return arr[1];
                }
            }
            return "";
        } else {
            return "";
        }
    }

    //-----公有-------------------
    return {
        renderers: renderers,
        plugins: plugins,
        rendererAll: rendererAll,
        initPlugin: initPlugin,
        getRenderer: getRenderer,
        actionSheets: actionSheets,
        getAjax: getAjax,
        postAjax: postAjax,
        promiseAjax: promiseAjax,
        eachChild: eachChild,
        convertCurrency: convertCurrency,
        convertCurrencyWithDecimal: convertCurrencyWithDecimal,
        dual: function (dual) {
            console.log(dual);
        },
        checktoken: function () {
            //var tokenValue  = myToken;//$("#myToken").val();
            if (myToken == null) {
                window.location.href = "/system/login/index.action";
            }
        },
        getUrlParam: getUrlParam
    }


})(jQuery, window, document);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值