【JS】星级评分原理和实现（第4章 模板方法模式 - 中 ）

• 4-6 点亮半颗星星 (09:36)

• 4-4 用模板方法模式重写第一种实现方式 (03:06)
1.原理分析——点亮半颗星星
 
e.pageX是鼠标的位置
• 4-5 点亮整颗星星 (19:14)
1.拷贝一份原来的进行拓展。
这是对象使用匿名函数初始化的方法
 
注意将上一节的拓展为通过传入对象不只是一个num进行初始化


2.声明一个LightEntire对象-被点亮整颗的星星
我感觉有点像是匿名函数中代替rating 对象的对象
 
主要方法是由前面课件修改而来，主要修改对象/属性
另外注意写defaults主要是为了默认，程序初始显示或者用户不操作时


3.其中注意bindEvent的方法，下图为主要说明圈起来的this指代的是this.$el，然而需要它指代LightEntire对象，因此修改为图2
 
 


4.LightEntire对象的方法说明：
select选择时打印出是x/X颗
chosen 发送ajax确认
1）调用对象方法实现
 
测试效果：
 




2）除了调用对象的方法也可以通过对对象属性作trigger事件处理实现
 


同理增加chosen方法
 
但注意num的赋值


效果为
 


5.局部完善，对readOnly功能作完善。判断是否可读。
 


判断是否为只读事件


• 4-6 点亮半颗星星 (09:36)
1.上面LightEntire是负责点亮整颗星星的功能，
这节声明一个LightHalf对象负责点亮半颗的功能
代码结构基本相同，只是在方法中修改代码，增加不同的功能


2.lightOn加入判断传入的是否为小数，若是则将图片移动为显示出半颗星星。


代码思路：

 
这里注意parseInt不是四舍五入，而是直接取整。round才是四舍五入。


首先将LightEntire的代码整体复制一份修改为LightHalf对象，进行加入功能代码。
 


3.bindEvent根据鼠标位置传入不同的num值点亮星星
知识点：mousemove 事件通过鼠标在元素上移动来触发。事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标。
mouseover事件会在鼠标移入对象时触发


 
注意self.add是新设置的变量，用于负责是传入一颗还是半颗星星，在LightHalf中增加该属性。
 


3.就可以调用了，因为不适合自己手动切换不同对象，如果两个对象都建立，会按照顺序执行相应的方法导致重复。于是引入mode对象进行管理字符串映射。模板方法模式。
 


进行判断是为了避免用户输入异常字符，可自动更改为‘LightEntire’。


虽然看起来LightHalf的功能都能实现LightEntire整颗的，但两者不同具体主要有mousemove和mouseover方法等

要注意不断做测试，可以成功运行。