五星评分功能插件的原理及代码实现

stars.png

星级评分功能插件的实现原理：

原理分析
HTML{
ul.rating#rating>li.rating-item*5
}

CSS {
两张背景图片(点亮的星星/灰色的星星)
}

JS行为 {

遍历所有的星星，在循环中去点亮指定位置的星星，熄灭剩余星星
mouseover事件：{
    鼠标移入的时候mouseover（遍历所有的星星颗数）{
        click事件： 点亮指定星星
    }
}
mouseout事件：{
    鼠标离开的时候mouseoout（遍历所有的星星颗数）{
        熄灭剩余星星
    }
}

}

代码实现：

但是，以上这段代码有问题：

1. 暴露的全局变量太多，不利于代码拓展

解决办法1：独立命名空间。
解决办法2： 立即执行的匿名函数的写法(function(){}）()， 使得我们的变量变成局部作用域。

2. 事件绑定的写法是为每一颗星星都绑定了每一次事件，这样会造成事件浪费。

3. 事件无法复用。

针对以上发现的问题，对JS代码进行改进：

以为到此就算圆满的话，那就太幼稚了，试想一下，一两个月后，产品经理会告诉你："我们需要增加新功能，比如用户可以选中半颗星...."。

好吧，那只能继续改改改......

这里就有引出一个设计模式，那就是【开放封闭原则】：即对拓展是开放的，而对修改是封闭的:

改写JS：

代码拓展：点亮半颗星功能

原理分析：
利用mousemove
e.pageX
$().offset().left
e.pageX - $().offset().left
$().width()/2

最后，抽象出父类：

然鹅，问题又来了，正常情况下，用户点选好星星后，选中结果就会发送出去，用户就不能再继续点选其他剩余几颗星星的，

所以，以上代码依然不够满足业务场景，继续修改：

点击查看预览效果