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

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

/* 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();});

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