把名称和后台来的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(); });
时间: 2024-10-21 12:39:02