首页 » JavaScript » 【JS】星级评分原理和实现(第4章 模板方法模式 - 下 )

【JS】星级评分原理和实现(第4章 模板方法模式 - 下 )

原文 http://blog.csdn.net/qq_32616843/article/details/79228798

2018-02-02 02:00:07阅读(185)

 第4章 模板方法模式 
• 4-7 提取出抽象父类 (12:45)

• 4-8 完善整个程序 (08:39)


• 4-7 提取出抽象父类 (12:45)
1.由于想要提取出抽象父类,因此先分析LightEntire和LightHalf有什么区别。
this.add
LightOn中LightHalf实现了LightEntire的方法,并增加了自己的。
bindEvent中this.mouseover/this.mousemove( 后面用self.selectevent定义 )
而mousemove方法其实是基于mouseover写的,而增加了传入小数的方法。
 【<a href=JS】星级评分原理和实现(第4章 模板方法模式 - 下 )" src="http://img.blog.csdn.net/20180201150904130?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzI2MTY4NDM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
将增加的方法提出成为select抽象为父类方法进行子类继承重写实现。


2.思路是将两者完善,更便于分析出公共的父类。
提取出父类方法(这里基于LightEntire实现)
 【JS】星级评分原理和实现(第4章 模板方法模式 - 下 )


4.对子类进行修改。
方法是:和父类相同的方法不用写,不同的进行重写
【JS】星级评分原理和实现(第4章 模板方法模式 - 下 )【JS】星级评分原理和实现(第4章 模板方法模式 - 下 )

 


 


5.这里使用的是extend()来实现继承
若父类构造函数过于复杂,会很大影响性能。
【JS】星级评分原理和实现(第4章 模板方法模式 - 下 )

 


• 4-8 完善整个程序 (08:39)
1.目标:想实现的功能是当点击后,不能再操作了。因为正常程序都是当点击后就等级确认当前值然后发送出去相应信息。
2.思路是:
1)实现方法通过调用时覆盖chosen默认方法,传入字符串调用程序自身进行对原有绑定的解绑定功能。
 【JS】星级评分原理和实现(第4章 模板方法模式 - 下 )


2)修改程序初始化方法让其能识别传入的字符串并调用其方法
 【JS】星级评分原理和实现(第4章 模板方法模式 - 下 )
主要是$el和rating的使用,注意.data()的用法。(在 jQuery 1.4.3 用.data(obj)设置一个元素的数据对象可以扩充元素上原先存储数据。)
判断rating是否已生成避免多次对mode进行实例化。
注意上面options是处理整个rating对象的.init;而下面的的判断字符串主要针对rating 的解绑定功能字符串识别。


3)解绑定实质为解除所有方法
 【JS】星级评分原理和实现(第4章 模板方法模式 - 下 )


到这里,程序可以实现目标功能。
3.继续优化。优化为jQuery插件。
 【JS】星级评分原理和实现(第4章 模板方法模式 - 下 )
注意写在对象里的return前。


进行调用。
不过jQuery要绑定事件要通过.on来执行,好像不能直接传入。
 
【JS】星级评分原理和实现(第4章 模板方法模式 - 下 )

4.这种写法思路:如果要增加1/4星星的就仿照半颗的来写


最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹