我在一个前端项目中用js整理的一些通用方法,其中使用到的思想,主要就是约定了。

把名称和后台来的json数据约定起来,可以达到的效果就是可以将东西统一化,减少差异,提升模块等的通用性,此后就可以实现具体不同模块内容可以自动或拷贝赋值的方式

2016.7.18 refactor string formatter code:

    String.prototype.format = function () {
var that = this;
var params = arguments;
function applychange(arrayorobject) {
for (var i in arrayorobject) {
var regtoreplace = new RegExp("({)" + i + "(})");
var valtoreplace = arrayorobject[i];
var replacing = function () { return regtoreplace.test(that); }
while (replacing()) {
that = that.replace(regtoreplace, valtoreplace);
}
}
}
applychange(typeof ps[0] !== 'object' ? params : params[0]);
return that;
};

  

another realization, more slim:

    String.prototype.format = function () {
var me = this;
var ps = arguments;
function chg(el) {
for (var i in el) {
var reg = new RegExp("({)" + i + "(})");
var val = el[i];
var ing = function () { return reg.test(me); }
while (ing()) {
me = me.replace(reg, val);
}
}
}
chg(typeof ps[0] !== 'object' ? ps : ps[0]);
return me;
};

  

顺带,这个前端项目中用到的控件,一般是手写,其他类型,比如菜单是  accordion.js这个手风琴控件

note: 关于 {在字符串中的匹配,以""的字符串中,因为\是转义符,"\"是不允许出现的,即在字符串中一定是"\\",所以首先转一次得到\\为字符串的转义符,再+{,即可匹配得到{

(function () {
    "Use Strict";
    String.prototype.format = function (arg) {
        var that = this;
        var args = arguments;
        if (arg instanceof Object && args.length == 1) {
            for (var i in arg) {
                var reg = new RegExp("({" + i + "})");
                while (reg.test(that)) {
                    that = that.replace(reg, arg[i]);
                }
            }
        }
        else {
            for (var i = 0; i < args.length; i++) {
                var reg = new RegExp("({)" + i + "(})");
                var param = args[i];
                while (reg.test(that)) {
                    that = that.replace(reg, param);
                }
            }
        }
        return that;
    }
})();

  

/* File Created: 十二月 18, 2014 
*@Author iGO
*@LastModify 2014-12-19
**/
//使用闭包,为了增加开发效率而写的自动化赋值的类 //todo: string对象 添加公有format方法
(String.prototype.format = function(args) {
    var result = this;
    if (arguments.length > 0) {
        if (arguments.length == 1 && typeof (args) == "object") {
            for (var key in args) {
                if (args[key] != undefined) {
                    var reg = new RegExp("({" + key + "})", "g");
                    result = result.replace(reg, args[key]);
                }
            }
        } else {
            for (var i = 0; i < arguments.length; i++) {
                if (arguments[i] != undefined) {
                    //var reg = new RegExp("({[" + i + "]})", "g");//这个在索引大于9时会有问题,谢谢何以笙箫的指出
                    var regt = new RegExp("({)" + i + "(})", "g");
                    result = result.replace(regt, arguments[i]);
                }
            }
        }
    }
    return result;
})(); //todo:封装的一些公用的小方法
var commonHelper = (function ($, commonHelper) {
    var baseUrl = "http://51creator.vicp.net/cloudants/";     var $id = function (id) { return document.getElementById(id); }
    commonHelper.doNothing = function () { };
    //暂不启用!通用赋值,将所有判断做明确,用一个统一的端口接入,实现所有代码共用一套操作,达到最大复用。减少不同具体模块方法的差异,增加通用性
        commonHelper.applyAlt= function(jsonObject) {
            for (var i in jsonObject) {
                var obj = $id(i);
                var objVal = jsonObject[i];
                //赋值text
                if (obj && !(objVal instanceof Array && obj.innerText)) {
                    $("#" + i).text(jsonObject[i]);
                }
                //赋值图片 图片判断
                if (obj.tagName == "img") {
                    $("#" + i).attr("src", objVal);
                }
                //赋值图表,类型为几种,canvas,内层判断为 按后缀,bar line 和pichart                 //赋值模板
            }
        }     commonHelper.apply = function (jsonObject) {
        if (!jsonObject) return "";
        for (var i in jsonObject) {
            if (document.getElementById(i) && !(jsonObject[i] instanceof Array)) {
                $("#" + i).text(jsonObject[i]);
            }
        }
    }
    commonHelper.applySrc = function (jsonObject) {
        for (var i in jsonObject) {
            if (jsonObject[i].toString().indexOf(".") > -1)
                $("#" + i).attr("src", jsonObject[i]);
        }
    }
    commonHelper.applyChartBar = function (jsonObject) {
        for (var i in jsonObject) {
            if (i.toString().indexOf("_bar") != -1 && document.getElementById(i) != null) {
                var ctx3 = document.getElementById(i).getContext("2d");
                window.myBar3 = new Chart(ctx3).Bar(jsonObject[i], { responsive: true });
            }
        }
    }
    commonHelper.applyChartLine = function (jsonObject) {
        for (var i in jsonObject) {
            if (i.toString().indexOf("_line") != -1 && document.getElementById(i) != null) {
                var ctx2 = document.getElementById(i).getContext("2d");
                window.myLine2 = new Chart(ctx2).Line(jsonObject[i], { responsive: true });
            }
        }
    }
    commonHelper.applyPiChart = function (ret) {
        for (var i in ret) {
            if (document.getElementsByClassName(i).length > 0)
                $("." + i).attr("data-percent", ret[i]).easyPieChart({
                    animate: 1000,
                    size: 100,
                    lineCap: "square",
                    scaleColor: "#ccc",
                    trackColor: "#ddd",
                    barColor: "#0093dd",
                    lineWidth: "3"
                }); ;
        };
    }     commonHelper.applyTemplate = function (el, template) {
        var text = "", args = arguments;
        if (arguments.length >= 2) {
            for (var i = 2; i < arguments.length; i++) {
                var reg = new RegExp("({)" + (i - 2) + "(})", "g");
                template = template.replace(reg, arguments[i]);
            }
        }
        text = template;
        $("#" + el).html(text);
    }     commonHelper.applyTemplate = function (el, template, argArray) {     }     commonHelper.getUrl = function (token) {
        return baseUrl + token;
    }     return commonHelper;
})(jQuery, commonHelper || {}); 模块写法,使用了js模块架构模式中的Module模式
/* File Created: 十二月 9, 2014 */

/*
*Latest Modify:2014-12-12
*Updator:iGO
*login logic 
*
**/ var page351Helper = (function ($, page351Helper, ajaxHelper, commonHelper) {
    "Use Strict";
    var applyStoreInfo_RT = function (ret) {
        ret = ret || { "success": true, "store_lunname": "lun1", "store_errors": "10", "store_alarms": "10" };
        commonHelper.apply(ret);
    }
    var applyStoreCapacity_RT = function (ret) {
        ret = ret || { "success": true, "store_total": "100G", "store_used": "50G", "store_health": "20%" };
        commonHelper.apply(ret);
        $("#store_used").height(ret.store_health);
    }
    var applyStoreFullInfo_RT = function (ret) {
        ret = ret || { "success": true, "store_id": "1", "store_name": "store1", "store_lunlocation": "XXX", "store_type": "XXX", "store_volumespace": "XXX", "store_linkhosts": "8", "store_linkvms": "4", "store_pathsmode": "XXX", "store_allpaths": "18" };
        commonHelper.apply(ret);
    }
    var applyStoreIODelay_RT = function (ret) {
        ret = ret || {};
        commonHelper.applyChartBar(ret);
        commonHelper.apply(ret);
    }
    var applyStoreEntity_RT = function (ret) {
        ret = ret || {};
        commonHelper.apply(ret);
    }     page351Helper.initial = function () {
        //todo:接口:store!getStoreInfo_RT
        ajaxHelper.post({
            url: commonHelper.getUrl("store!getStoreInfo_RT"),
            data: { store_id: "" },
            success: applyStoreInfo_RT
        });
        //todo:接口:store!getStoreCapacity_RT
        ajaxHelper.post({
            url: commonHelper.getUrl("store!getStoreCapacity_RT"),
            data: { store_id: "" },
            success: applyStoreCapacity_RT
        });
        //todo:接口:getStoreFullInfo_RT
        ajaxHelper.post({
            url: commonHelper.getUrl("getStoreFullInfo_RT"),
            data: { store_id: "" },
            success: applyStoreFullInfo_RT
        });
        //todo:接口:store!getStoreIODelay_RT 
        ajaxHelper.post({
            url: commonHelper.getUrl("store!getStoreIODelay_RT"),
            data: { store_id: "" },
            success: applyStoreIODelay_RT
        });
        //todo:接口:store!getStoreEntity_RT
        ajaxHelper.post({
            url: commonHelper.getUrl("store!getStoreEntity_RT"),
            data: { store_id: "" },
            success: applyStoreEntity_RT
        });
    }     return page351Helper; })(jQuery, page351Helper || {}, AJAXHelper, commonHelper);
$(function () {
    page351Helper.initial();
}); [Ps:把有一个需要改进的地方说一下吧,因为这个项目本来前端是分块儿的,所以数据上一般是不重复的,在数据上加了前缀,但是按一般的方法,此处数据映射赋值的时候缺少了context上下文,也就导致可能会出现后面的赋值覆盖掉前面的值,这里最好是配一下context,就是在module的模块上加上接口名称吧,然后映射到页面取值的时候需要在映射器这里取父容器为context的div]
上一篇:容器编排系统K8s之Prometheus监控系统+Grafana部署


下一篇:C语言switch/case圈复杂度优化重构