微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!
出来专题提供出来的最新资讯内容,帮你更好的了解出来。
动态放入后台给的键值对显示出来,然后动态返回数据难点:数据格式问题
一、动态放入后台的值将'应发'下的键数据${key}放入html中,记得使用转义字符  ``  ,这个符号实在键盘左上角的第二列第一个,来表示里面写的是html格式的代码。然后 ${this.data.data['应发'][i][key]}是遍历每行的key对应的值,然后再把html给放入你的html文件中,用prepend()方法for (var i = 0; i < this.data.data['应发'].length; i++) {for (var key in this.data.data['应发'][i]) {var money_html = `<div class="row"><label for="#"> ${key}</label> :<input name='yf' type="text" class="form-control" value="${this.data.data['应发'][i][key]}"></div>`;break;}$('#yf_money').prepend(money_html);}for (var i = 0; i < this.data.data['应扣'].length; i++) {for (var key in this.data.data['应扣'][i]) {var money_html = ` <div class="row"><label for="#"> ${key}</label> :<input name="yk" type="text" class="form-control" value="${this.data.data['应扣'][i][key]}"></div>`;break;}$('#yk_money').prepend(money_html);}二、然后动态返回数据    大概返回的数据就是对象下放两个列表(前端叫做对象){字典下几条列表(前端叫做数组)},然后再放两个字符串。下面是返回的大概格式。'data':{'yf':[{'一':1},{'二':2},{'三':3}],'yk':[{'四':4},{'二':5},{'三':6}],'yy':'yy','mm':'mm'} 我的想法是这样的,由于我是前端小白啊,能力范围下我只能获取到字典下的列表中的key列表和value列表。你也可以理解为获取对象中的数组中的key数组和value数组获取input的name为yf的所有数据,获取value数组,用到each.(function(){   });的方法。$("input[name='yf']").each(function(){yf_value.push($(this).val());});$("input[name='yk']").each(function(){yk_value.push($(this).val());});然后获取label下的key数组,这里遇到另一个问题,就是我获取的label值是整个HTML的label值,但我想要获取的key数组是从第4个开始算起的,而且长度每次也是有局限的,所以这里就利用到了上面的yf_value.length,来获取我需要的数据。$('label').each(function(){b.push($(this).text());});yf_key= b.slice(4,yf_value.length+4);yk_key= b.slice(yf_value.length+4,yf_value.length+4+yk_value.length);接下来,就是比较难受一点的将两个数组拼在一个对象里了,这里呢,一定要注意if条件里的   ( i==j )这个如果写错的话,各种数据格式都会出现,一开始我以为是var的问题,改成let之后发现也并没有什么卵用。还有就是,刚开始写的时候,我是把数据push进yf和yk数组的yf.push(dict); yk.push(dict1);其实好像和下面的写法也差不多,不过下面的会舒服一点yf[i]=dict;yk[i]=dict;var yf=[];var yk=[];console.log(yk_key);for (var i=0;i<yf_key.length;i++){var dict={};for(var j=0;j<yf_value.length;j++){if(i==j){dict[yf_key[i]]=yf_value[i];yf[i]=dict;}}}for (var i=0;i<yk_key.length;i++){var dict1={};for(var j=0;j<yk_value.length;j++){if(i==j){dict1[yk_key[i]]=yk_value[i];yk[i]=dict1;}}}  总结:这里主要用的思想呢,大概有下面这几个1.获取多个input的值(用each()方法去遍历name),获取多个label的值(直接用each),有人可能会问,用id啊,但是重点是他这个input是动态生成的啊!!,用id只能获取一个值,这里你需要获取多个Input,所以id已经gg了2.还有就是label的获取,取第四个开始的数据,用到slice切片,3.怎样获取后端动态返回的数据放入html页面显示,用到${}的方法,然后再用prepend方法加入到对应html的id下4.然后就是将key列表和value列表组装成字典,用到两个for循环,然后判断i==j,再赋值即可。(将两个列表放入一个字典)。前端实习第20天,好像是吧,继续加油肝,程序猿没有下班,只有自愿加班。!!!
从真实项目中抠出来的设计模式——第一篇:策略模式
有时候因为种种原因导致我们会写出很多丑陋的代码,比如赶工时,短暂性的偷懒,不会设计模式等等导致代码沉积,一个cs上万行代码这样场景是有发生,当然这里也包括我。。。所以时间充裕一点之后就想重构一下,毕竟项目中的需求是不断变更的,面对需求变更,尽量做到最低限度的修改代码,最大化的扩充新代码,还有一点就是不要过分的追求设计模式,做到适可为止,太设计模式了会导致类太多,不好管理,在项目开发中,其实仔细考虑一下,你会发现很多业务逻辑都有相应的设计模式帮你优化,毕竟这些都是前辈们踩了无数的坑,经过无数的苦难留下来的智慧结晶。很多人列举设计模式都喜欢用生活中的例子,但毕竟生活中的例子如何应用到项目中,对我们程序员来说还是比较抽象的,所以这里我就列举我们实际的业务逻辑场景。 一:实际场景介绍    我们在做千人千面的时候,为了防止各大邮箱服务商对我们的邮件营销内容做屏蔽处理,我们采用的策略就是众多模板库中随机抽取一封html样式表,然后结合具体的商品列表生成完全不一样风格的营销内容邮件,争取最大可能的不被屏蔽,而用户自己通过我们系统做的营销邮件,我们又不能随机发送,而是用户生成什么样的邮件,我们就发什么样的邮件,ok,现在这里就有两种策略场景了,两种场景的最终目的都是生成邮件内容,对吧。 1. 普通商家做营销活动的邮件,这种策略没什么好说的,是什么就发什么。2.千人千面场景下的营销活动邮件,这种策略采用随机抽取的模式, 目前来说,我们就这两种场景,谁也指不定以后还会不会有其他的策略出来,所以有必要用策略模式玩一下。 二:构建UML    从vs2005开始就有一个强大的功能,根据cs文件自动生成uml类图,非常的直观也更容易的帮助我们设计更加合理的类图。 上面就是策略模式的uml图,各个策略类中都有一个Setup方法,用来设置email的内容,具体各个类中的代码如下: <1> AbstractStrategypublic abstract class AbstractStrategy{public abstract void Setup();} <2> RandStrategypublic class RandStrategy : AbstractStrategy{public override void Setup(){Console.WriteLine("千人千面模式下的邮件发送");}} <3> StraightStrategy public class StraightStrategy : AbstractStrategy{public override void Setup(){Console.WriteLine("普通商家发送的邮件");}} <4>StrategyContextpublic class StrategyContext{AbstractStrategy strategy = null;public void SetStrategy(AbstractStrategy strategy){this.strategy = strategy;}public void Setup(){this.strategy.Setup();}} <5> Programclass Program{static void Main(string[] args){StrategyContext context = new StrategyContext();//设置“随机策略“context.SetStrategy(new RandStrategy());context.Setup();//设置 ”直接发送“context.SetStrategy(new StraightStrategy());context.Setup();}} 最后我们运行一下: 上面就是一个最简单的策略模式,当我们设置不同的策略,就会执行相应的行为,实际当中,并不会这么简单,毕竟设计模式只是一个最优化的提炼,排除干扰看本质。 三:生产应用   首先生产中我们的AbstractSetup中的Setup方法肯定是要带有参数的,而不是简单的无参,如下:/// <summary>/// 短信,邮件,彩信设置模型/// </summary>public abstract class AbstractSetup{public abstract void Setup(LeafletEntity leaflet, DataRow row);} 然后直接赋值的逻辑也非常的简单,需要根据数据库中设置的业务逻辑判断。public class StraightSetup : AbstractSetup{public override void Setup(LeafletEntity leaflet, DataRow row){//非顾问leaflet.Title = MySqlDbHelper.GetString(row, "title");leaflet.SMSContent = leaflet.CommunicationtypeEnum.HasFlag(CommunicationTypeEnum.短信) ? MySqlDbHelper.GetString(row, "content") : string.Empty;leaflet.EDMContent = leaflet.CommunicationtypeEnum.HasFlag(CommunicationTypeEnum.邮件) ? MySqlDbHelper.GetString(row, "content") : string.Empty;leaflet.MMSContent = leaflet.CommunicationtypeEnum.HasFlag(CommunicationTypeEnum.彩信) ? MySqlDbHelper.GetString(row, "content") : string.Empty;leaflet.SendSMSCount = Convert.ToInt32(row["sendcount"]);}} 接下来就是随机抽取逻辑,这个也是通过读取随机表来进行各种操作,简单的代码如下:public class RandSetup : AbstractSetup{EventMarketingBLLNew eventMarketingBLLNew = new EventMarketingBLLNew();public override void Setup(LeafletEntity leaflet, DataRow row){var eventMarketingInfo = eventMarketingBLLNew.GetEventMarketingInfo(leaflet.MarketingID, leaflet.ShopID);if (eventMarketingInfo != null){//“短信”和“邮件”信息var communicationInfo = eventMarketingInfo.EventmarketingSmsEdmContentList.OrderBy(m => Guid.NewGuid()).FirstOrDefault();if (communicationInfo == null) return;if (leaflet.CommunicationtypeEnum.HasFlag(CommunicationTypeEnum.邮件)){//第三步:动态生成邮件模板var styleInfo = CacheUtil.GetRandomEmailStyle();var tuple = new EdmDraftBoxBLL().GetEdmHtmlTitle(communicationInfo.EDMJson, styleInfo.StyleId);leaflet.Title = tuple.Item1;leaflet.EDMContent = tuple.Item2;leaflet.Header = tuple.Item3;leaflet.SendSMSCount = 1;}if (leaflet.CommunicationtypeEnum.HasFlag(CommunicationTypeEnum.短信)){leaflet.SMSContent = communicationInfo.SMSContent;leaflet.SendSMSCount = communicationInfo.SMSCount;}if (leaflet.CommunicationtypeEnum.HasFlag(CommunicationTypeEnum.彩信)){leaflet.MMSContent = communicationInfo.MMSContent;}}}} 最后就是策略上下文:public class SetupContext{AbstractSetup abstractSetup = null;public void Set(AbstractSetup abstractSetup){this.abstractSetup = abstractSetup;}public void Setup(LeafletEntity leaflet, DataRow row){this.abstractSetup.Setup(leaflet, row);}} 好了,这个就是给大家演示的策略模式,简单来说就是一句话:针对同一命令或行为,不同的策略做不同的动作。  
从真实项目中抠出来的设计模式——第二篇:过滤器模式
一:实际场景介绍     我们在给用户做订单催付通知的时候,会有这样的一种场景,用户在系统后台设置一组可以催付的规则,比如说订单金额大于xx元,非黑名单用户,来自哪个地区,已购买过某个商品,指定某个营销活动的人等等这样的条件,如果这时用户在淘宝上下了一个订单,那程序要判断的就是看一下此订单是否满足这些规则中的某一个,如果满足,我们给他发送催付通知,这种场景是很多做CRM的同学都会遇到的问题,那针对这种场景,如何更好的规划业务逻辑呢? 二:普通的编程代码     在这里我们就不考虑多筛选条件下的性能,而只从代码维护复杂度考虑,如果不清楚设计模式的同学,大概会写出如下的代码:1 namespace ConsoleApplication12 {3 class Program4 {5 static void Main(string[] args)6 {7 var regulars = new List<Regulars>();89 regulars.Add(new Regulars() { RegularID = 1, RegularName = "规则1", AnalysisConditons = "xxxx" });10 regulars.Add(new Regulars() { RegularID = 1, RegularName = "规则2", AnalysisConditons = "xxxx" });11 regulars.Add(new Regulars() { RegularID = 1, RegularName = "规则3", AnalysisConditons = "xxxx" });12 regulars.Add(new Regulars() { RegularID = 1, RegularName = "规则4", AnalysisConditons = "xxxx" });13 regulars.Add(new Regulars() { RegularID = 1, RegularName = "规则5", AnalysisConditons = "xxxx" });1415 var filters = FilterRegularID(regulars);16 filters = FilterRegularName(filters);17 filters = FilterCondtions(filters);1819 //... 后续逻辑20 }2122 static List<Regulars> FilterRegularID(List<Regulars> persons)23 {24 //过滤 “姓名” 的逻辑25 return null;26 }2728 static List<Regulars> FilterRegularName(List<Regulars> persons)29 {30 //过滤 “age” 的逻辑31 return null;32 }3334 static List<Regulars> FilterCondtions(List<Regulars> persons)35 {36 //过滤 “email” 的逻辑37 return null;38 }39 }4041 /// <summary>42 /// 各种催付规则43 /// </summary>44 public class Regulars45 {46 public int RegularID { get; set; }4748 public string RegularName { get; set; }4950 public string AnalysisConditons { get; set; }51 }52 }       为了演示,上面的代码是从regularid,regularname,condition三个维度对regulars这个聚合对象进行AND模式的筛选过滤,当过滤维度比较多的时候,这种写法看的出来是简单粗暴,维护起来也必须简单粗暴, 所以上万行代码也就是这么出来的,设计模式告诉我们一个简单的“开闭原则”,那就是追求最小化的修改代码,这种场景有更好的优化策略吗?对应到设计模式上就是“过滤器模式”,专门针对这种场景的解决方案,一个维度一个类,然后通过逻辑运算类将他们进行组合,可以看出这是一种“结构式的设计模式”。 三:过滤器模式   好了,废话不多说,先来看一下优化后的设计图纸如下:从上面这张图纸中可以看到,我已经将三个维度的过滤方法提取成了三个子类,由此抽象出了一个IFilter接口,当然你也可以定义成抽象类,然后实现了两个运算级AND和OR子类Filter,用于动态的对原子性的RegularIDFilter,RegularNameFilter,ReuglarCondtionFilter进行AND,OR逻辑运算,下面我们再看具体代码: 1.IFilterpublic interface IFilter{List<Regulars> Filter(List<Regulars> regulars);} 2. RegularIDFilter1 public class RegularIDFilter : IFilter2 {3 /// <summary>4 /// Regulars的过滤逻辑5 /// </summary>6 /// <param name="regulars"></param>7 /// <returns></returns>8 public List<Regulars> Filter(List<Regulars> regulars)9 {10 return null;11 }12 } 3.RegularNameFilter1 public class RegularNameFilter : IFilter2 {3 /// <summary>4 /// regularName的过滤方式5 /// </summary>6 /// <param name="regulars"></param>7 /// <returns></returns>8 public List<Regulars> Filter(List<Regulars> regulars)9 {10 return null;11 }12 } 4. RegularCondtionFilter1 public class RegularCondtionFilter : IFilter2 {3 /// <summary>4 /// Condition的过滤条件5 /// </summary>6 /// <param name="regulars"></param>7 /// <returns></returns>8 public List<Regulars> Filter(List<Regulars> regulars)9 {10 return null;11 }12 } 5.AndFilter1 /// <summary>2 /// filter的 And 模式3 /// </summary>4 public class AndFilter : IFilter5 {6 List<IFilter> filters = new List<IFilter>();78 public AndFilter(List<IFilter> filters)9 {10 this.filters = filters;11 }1213 public List<Regulars> Filter(List<Regulars> regulars)14 {15 var regularlist = new List<Regulars>(regulars);1617 foreach (var criteriaItem in filters)18 {19 regularlist = criteriaItem.Filter(regularlist);20 }2122 return regularlist;23 }24 } 6.OrFilter1 public class OrFilter : IFilter2 {3 List<IFilter> filters = null;45 public OrFilter(List<IFilter> filters)6 {7 this.filters = filters;8 }910 public List<Regulars> Filter(List<Regulars> regulars)11 {12 //用hash去重13 var resultHash = new HashSet<Regulars>();1415 foreach (var filter in filters)16 {17 var smallPersonList = filter.Filter(regulars);1819 foreach (var small in smallPersonLis
从真实项目中抠出来的设计模式——第三篇:责任链模式
一:现实场景    有时候在开发的过程中,我们经常会根据某个状态的值,写出很多的ifelse逻辑,比如拿项目里面的案例来说,如果当前发送的是彩信,此种状态需要如何给实体赋值,如果是短信,邮件又是其他方式的赋值,等等此类,这种情况下一般会写出如下if判断,对吧,真实代码如下:1 if (leaflet.CommunicationtypeEnum.HasFlag(CommunicationTypeEnum.邮件))2 {3 //第三步:动态生成邮件模板4 var styleInfo = CacheUtil.GetRandomEmailStyle();56 var tuple = new EdmDraftBoxBLL().GetEdmHtmlTitle(communicationInfo.EDMJson, styleInfo.StyleId);78 leaflet.Title = tuple.Item1;9 leaflet.EDMContent = tuple.Item2;10 leaflet.Header = tuple.Item3;11 leaflet.SendSMSCount = 1;12 }1314 if (leaflet.CommunicationtypeEnum.HasFlag(CommunicationTypeEnum.短信))15 {16 leaflet.SMSContent = communicationInfo.SMSContent;17 leaflet.SendSMSCount = communicationInfo.SMSCount;18 }192021 if (leaflet.CommunicationtypeEnum.HasFlag(CommunicationTypeEnum.彩信))22 {23 leaflet.MMSContent = communicationInfo.MMSContent;24 }       上面的代码还是非常简单明了的,程序会根据leaflet.CommunicationtypeEnum的不同做不同的判断,比如说当前状态是邮件的话,程序会从30套邮件模板库中随机抽取一封,给leaflet的title,header...赋值,有些人可能会说这段代码不难看哈,确实是这样,但是如果面对需求变更呢?比如说后期需要增加微信,微博渠道,那是不是又要加上两个if才能把这个问题解决呢? 这就违背了设计模式中开闭原则,对吧,面对这种场景,可以用责任链模式摆平。 二:责任链模式     责任链模式讲的就是将请求的发送者和接收者进行分离,避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求,将这些对象连接成一条链,并且沿着这条链传递请求,直到有对象处理它为止,面对需求变更,只需要更加处理类就好了,而且客户端可以按照自己的需求拼接处理链条,是不是很强大。1. AbstractComunicationpublic abstract class AbstractComunication{AbstractComunication abstractComunication = null;public void SetHandler(AbstractComunication abstractComunication){this.abstractComunication = abstractComunication;}public abstract void HanderRequest(LeafletEntity leaflet,EventmarketingSmsEdmContentInfo communicationInfo);} 2. MMSComunication1 public class MMSComunication : AbstractComunication2 {3 public override void HanderRequest(LeafletEntity leaflet, EventmarketingSmsEdmContentInfo communicationInfo)4 {5 if (leaflet.CommunicationtypeEnum.HasFlag(CommunicationTypeEnum.彩信))6 {7 leaflet.MMSContent = communicationInfo.MMSContent;8 }9 else10 {11 abstractComunication.HanderRequest(leaflet, communicationInfo);12 }13 }14 } 3.EDMComunication1 public class EDMComunication : AbstractComunication2 {3 public override void HanderRequest(LeafletEntity leaflet, EventmarketingSmsEdmContentInfo communicationInfo)4 {5 if (leaflet.CommunicationtypeEnum.HasFlag(CommunicationTypeEnum.邮件))6 {7 //第三步:动态生成邮件模板8 var styleInfo = CacheUtil.GetRandomEmailStyle();910 var tuple = new EdmDraftBoxBLL().GetEdmHtmlTitle(communicationInfo.EDMJson, styleInfo.StyleId);1112 leaflet.Title = tuple.Item1;13 leaflet.EDMContent = tuple.Item2;14 leaflet.Header = tuple.Item3;15 leaflet.SendSMSCount = 1;16 }17 else18 {19 abstractComunication.HanderRequest(leaflet, communicationInfo);20 }21 }22 } 4.SMSComunication1 public class SMSComunication : AbstractComunication2 {3 public override void HanderRequest(LeafletEntity leaflet, EventmarketingSmsEdmContentInfo communicationInfo)4 {5 if (leaflet.CommunicationtypeEnum.HasFlag(CommunicationTypeEnum.短信))6 {7 leaflet.SMSContent = communicationInfo.SMSContent;8 leaflet.SendSMSCount = communicationInfo.SMSCount;9 }10 else11 {12 abstractComunication.HanderRequest(leaflet, communicationInfo);13 }14 }15 } 5.客户端调用1 AbstractComunication communication1 = new EDMComunication();2 AbstractComunication communication2 = new SMSComunication();3 AbstractComunication communication3 = new MMSComunication();45 //手工将三个Comunication 凭借成一个链条,形成单链表的模型6 communication1.SetHandler(communication2);7 communication2.SetHandler(communication3);89 communication1.HanderRequest(leaflet, communicationInfo); 其实上面的代码,需要绕一下脑子的就是如何通过SetHandler将三个xxxComunication拼接成一个单链表的形式,链表怎么拼接在于客户端如何设置sethandler,灵活性完全就在客户端这边,然后就非常方便将leaflet在责任链中游走,最终会被某一状态处理逻辑处理,讲到这里,我想大家应该都知道责任链模式是干嘛的了,由于是真实案例就不方便跑代码了,下面我构建一个责任链模型,大家比照一下就可以了,是不是有种请求和处理的分离,而且我还可以根据需要组合我的责任链,其实js的冒泡机制就是这种模式的一个体现。public abstract class AbstractHandler{protected AbstractHandler abstractHandler = null;public void SetHandler(AbstractHandler abstractHandler){this.abstractHandler = abstractHandler;}public virtual void HandleRequest(int request) { }}public class ConcreteHandler1 : AbstractHandler{public override void HandleRequest(int request){if (request == 1){Console.WriteLine("handler1 给你处理了");}else{abstractHandler.HandleRequest(req