名站网址导航为大家提供关于网站网页设计设计相关的的教程知识。
- 本篇文章具体介绍如下
前段时间买了一本国产js设计模式的书，是企鹅公司曾探大牛写的，书名叫《JavaScript设计模式与开发实践》，第一次买国产书（其实压根就没买过几本书-_-），入手后快速过了一遍，感觉写的很不错。整体目录架构布局合理，行文流畅，知识点的切入很棒。。。回来，不扯远了，其中有一章就是职责链模式，下面我们一起来看下。
什么是职责链模式
职责链模式
使多个对象都有机会（有可能）处理请求，把这些对象设置成一条链，并沿着这条链传递该请求，直到某个对象处理了请求为止，职责链模式最大的好处避免了请求的发送者和接收者之间的耦合关系。通过下面例子和具体代码来充分理解职责链模式。
生活中的职责链模式
还是引用书中的一个例子，因为这个例子真的很贴切。
挤过公交车的人都知道，如果从后面上车，你根本无法走到前面去刷卡，这个时候一般会这样做，叫前面的人帮你把卡递给前面的人直接到递到刷卡机那里刷卡成功。首先请求可以理解为“我要刷卡”，前面的人和刷卡机这些对象组成了处理链来处理“我要刷卡”这个请求。不难看出职责链模式有两个特点
1、请求者不需要知道谁是真正的处理者
2、处理的方式是链式一个接一个的、有一定顺序的
项目中的职责链模式
进入主题，先来看一张伪效果图吧：
会员等级积分效果
如果拿到这样的效果图，可以先想下用JS如何实现呢？要是以前我应该会象下面这样
| 1 2 3 4 5 6 7 8 9 10 | var point = 3800; //这里假设拿到了积分数 if (point >= 0 && point < 2000){ console.log( '等级为0' ); } else if (point >= 2000 && point < 6000){ console.log( '等级为1' ); } //... //... //... |
这样下来if这砣具体代码估计相当庞大了，请求者和每个对象有一定的耦合关系
请求与处理者之间的耦合关系
下面看下职责链模式来实现这个效果，首先最终需求是“获取会员等级”，具体代码如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | var userLevel = ( function () { var $level = $( '#pointLevelBar' ).children(); var $barArrow = $( '#pointArrow' ); var between = 140; //节点之间的距离 var eleWidth = $level.width(); var lightLineMix = 10; //一个修正值; //返回积分对应比例的长度 var getTrueLength = function (level, point) { var len = 0; switch (level) { case 0: len = between * point / 2000; break ; case 1: point = point - 2000; len = between * point / 4000; break ; case 2: point = point - 6000; len = between * point / 4000; break ; case 3: point = point - 10000; len = between * point / 20000; break ; case 4: //有这一天么? point = point - 30000; len = between * point / 70000; break ; } if (point === 0 || point === 2000 || point === 6000 || point === 10000 || point === 30000 || point === 100000){ //整点居中 len = len - eleWidth / 2; } return len; }; var userLevel = function (fn) { this .fn = fn; this .nexthandler = null ; }; userLevel.prototype = { setNexthandler: function (handler) { this .nexthandler = handler; }, requesthandler: function () { var r = this .fn.apply( this , arguments); if (r === 'next' ) { //不是本等级的分数，交给下一个等级处理 return this .nexthandler && this .nexthandler.requesthandler.apply( this .nexthandler, arguments); } return r; }, //更新UI updateUI: function (level, point) { var lightLine = '' ; //高亮的进度条 var len = getTrueLength(level, point); len = len between * level eleWidth * (level 1) - lightLineMix; $level.filter( ':lt(' (level 1) ')' ).find( '.level-ico' ).addClass( 'level-ico-hover' ); lightLine = '<b style=" width:' len 'px;" class="bg-line-hover" data-id="lightLine_' level '"></b>' ; $( '#pointLevelBarOuter' ).append(lightLine); $barArrow.css({ 'left' : len - 115 / 2 lightLineMix }).show(); $barArrow.find( '.point' ).text(point); $barArrow.find( '.level' ).text(level); } }; //各个等级逻辑 var v0 = function (point) { if (point >= 0 && point < 2000) { this .updateUI(0, point); } else { return 'next' ; } }; var v1 = function (point) { if (point >= 2000 && point < 6000) { this .updateUI(1, point); } else { return 'next' ; } }; var v2 = function (point) { if (point >= 6000 && point < 10000) { this .updateUI(2, point); } else { return 'next' ; } }; var v3 = function (point) { if (point >= 10000 && point < 30000) { this .updateUI(3, point); } else { return 'next' ; } }; var v4 = function (point) { if (point >= 30000 && point < 100000) { this .updateUI(4, point); } else { return 'next' ; } }; var v5 = function (point) { if (point >= 100000) { this .updateUI(5, point); } else { return 'next' ; } }; var levelV0 = new userLevel(v0); var levelV1 = new userLevel(v1); var levelV2 = new userLevel(v2); var levelV3 = new userLevel(v3); var levelV4 = new userLevel(v4); var levelV5 = new userLevel(v5); //设置处理链 levelV0.setNexthandler(levelV1); levelV1.setNexthandler(levelV2); levelV2.setNexthandler(levelV3); levelV3.setNexthandler(levelV4); levelV4.setNexthandler(levelV5); return function (){ return levelV0.requesthandler.apply(levelV0, arguments); }; })(); var pointAmount = $( '#pointLevelBar' ).attr( 'data-point' ); userLevel(pointAmount); |
具体代码应该更好理解些！通过setNexthandler把各个等级的处理对象按一定顺序组成链，处理对象v0只处理积分在point >= 0 && point < 2000这个范围内的请求，如果超出这个范围，就把请求传递给处理链上设置好的下一个请求对象。v1,v2,v3…都是如此，观察发现这些对象都具有两个功能；
1、首先他有处理请求的功能
2、设置请求的下一个处理对象
所以这些处理对象应该是某个类的实例，而在类中实现了以上两个功能，我是这样理解的不知道对不对。具体代码中getTrueLength的实现按理也要封装到各个处理对象上，有兴趣可以自己研究实现。
职责链模式中的角色
1、请求发送者客户端，没有他一切都是浮云
2、抽象的请求处理类，该类中一般会定义处理请求和设置下家的接口
3、真正的请求处理对象，对象可以处理掉请求或者把请求传递给下家
职责链模式优缺点
优点：
1、避免了请求发布者与请求处理者之间的耦合，发布者不需要知道到底谁能处理他的请求，他只需要把请求抛给处理链就行了，不需要和处理链上的每个对象发生耦合关系；链中的对象也不需要知道链的结构，只负责本身的实现，如果处理不了把请求传递给链中下一个对象就行了，这样处理链上各对象的实现可以自由的改动。
2、灵活方便的设置处理链的顺序
3、很方便的增加或者修改新的处理对象，这点有赖于第一点中解耦
缺点：
1、创建大量的处理对象，很有可能处理请求时根本用不上该对象
2、由于变化的部分都被封装到了处理对象里，逻辑相对分散
职责链模式或者说面向对象，有的时候可能会把事情搞的很复杂，就象上面的例子也许按传统的if else if来处理具体代码会更少，效率会更高，but也要考虑具体代码的维护性和可读性，总之就是根据自身实际情况来权衡吧。本文主要是借项目中的一个实际的例子来加深对职责链模式理解
好了关于网站网页设计设计相关的这篇文章就给大家介绍到这里不明白的地方给本站留言。声明，本站内容来源于互联网，如果侵犯了你的权益请联系本站删除。,邂逅职责链模式：js实现会员等级CSS3 box-shadow应用制作Drop Shadow效果
在介绍CSS3系列时，我花了一篇很长的篇幅专门介绍了CSS3的box-shadow属性以及其具体的使用等。在此文末尾还介绍了使用box-shadow配合CSS3的伪类中的“:before”和“:after”制作Box Drop Shadow效果的实例。随着CSS3和hTML5的不断发展和壮大，大家在平时中也发现了不少实例或网站都不需要使用图片来进行设计了，直接使用具体代码来完成。今天我们就在前面的基础上进行深层次的挖掘――使用CSS3的制作不同的Box Drop Shadow效果。 如：
