我在一个前端项目中用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]
我在一个前端项目中用js整理的一些通用方法,其中使用到的思想,主要就是约定了。的更多相关文章
- thinkphp在前端页面的js代码中可以使用 U方法吗? 可以使用模板变量如__URL__等吗?
thinkphp在前端页面的js代码中可以使用 U方法吗? : 可以的! tp的U方法, 是"全局的", 什么是全局的? 就是, 可以在 "任何地方"使用的: ...
- Asp.Net中用JS中操作cookie的方法
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="cookies.aspx.cs& ...
- js文件流下载通用方法
通常我们会用到文件流下载文件,下面给大家一个通用的文件流下载的js /* *下载文件 * options:{ * url:'', //下载地址 * isNewWinOpen:false,是否新窗口打开 ...
- js写的一些通用方法
Js获取当前浏览器支持的transform兼容写法 // 获取当前浏览器支持的transform兼容写法 function getTransfrom() { var transform = '', / ...
- javascript功能插件大集合 前端常用插件 js常用插件
转载来源:https://github.com/jobbole/aw... 包管理器管理着 javascript 库,并提供读取和打包它们的工具.•npm – npm 是 javascript 的包管 ...
- 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...
- 前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化
本项目利用 VueI18n 组件进行国际化,使用之前,需要进行安装 $ npm install vue-i18n 一.框架引入步骤: 1. 先在 main.js 中引入 vue-i18n. // 国 ...
- 前端(小程序)项目Aes.js/Md5.js加密的处理方法
做项目中需要对前端数据加密传输这个时候需要用到前端加密的算法主要是:Aes.js,Md5.js 一.Vue项目用到的aes.js加密. 1.直接在index.html引入aes.js或者在npm in ...
- 在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用, ...
随机推荐
- XStream轻松转换xml和java对象
首先引入所需的jar: xstream-1.4.9.xpp3_min-1.1.4c.dom4j-1.6.1, 或用maven管理jar包时在pom.xml中添加: <!-- https://mv ...
- 圣思源Java视频36节练习源码分享(自己的190+行代码对比老师的39行代码)
题目: * 随机生成50个数字(整数),每个数字范围是[10,50],统计每个数字出现的次数 * 以及出现次数最多的数字与它的个数,最后将每个数字及其出现次数打印出来, * 如果某个数字出现次数为0, ...
- Selenium搭配TestNG
用Maven来构建TestNG依赖: <dependency> <groupId>org.testng</groupId> <artifactId>te ...
- Jmeter非GUI命令参数说明
查看帮助 -h, --help print usage information and exit 查看版本 -v, --version print the version information an ...
- django2.0 以上版本安装 xadmin
1.xadmin的下载 源码包下载地址: https://github.com/sshwsfc/xadmin/tree/django2 2.使用命令安装xadmin pip install 你下载的压 ...
- extjs/js时间校验
//时间秒判断var re=/^(?:19|20)[0-9][0-9]-(?:(?:0[1-9])|(?:1[0-2]))-(?:(?:[0-2][1-9])|(?:[1-3][0-1])) (?:( ...
- day-13 python库实现简单非线性回归应用
一.概率 在引入问题前,我们先复习下数学里面关于概率的基本概念 概率:对一件事发生的可能性衡量 范围:0<=P<=1 计算方法:根据个人置信区间:根据历史数据:根据模拟数据. 条件概率:B ...
- Hexo 博客部署到 GitHub
本文简单记录了一下把 Hexo 部署到 GitHub 上的过程,也是搭建静态博客最常用的一种方式. 前面写了关于如何把 Hexo 安装在树莓派上的教程,但树莓派毕竟是连着自己的家的路由器,万一哪天网断 ...
- java rmi浅谈
首先比较下RPC和RMI的差别: 首先java提供了RMI的api,jdk1.5之后虚拟机自动生成两个类:存根类stub和骨架类skelton. stub是给客户端的,当客户端调用远程对象的一个方法时 ...
- 使用SetOperations(无序)操作redis
方法 c参数 s说明 Long add(K key, V... values); K key:集合key V... values:key对应的值 向集合中添加一个或多一个元素 Long remove( ...