星级评分原理和实现

知识点：
1.5-6种实现方式
2.snippets.css和script标签位置，使用jquery cdn的好处.事件委托
3。糟粕：全局变量的依赖.没有块级作用域
4.设计模式（代码易于维护.扩展和复用)
原理分析–html结构

 <ul id="rating" class="rating">
        <li class="rating-item" title="很不好"></li>
        <li class="rating-item" title="不好"></li>
        <li class="rating-item" title="一般"></li>
        <li class="rating-item" title="好"></li>
        <li class="rating-item" title="不好"></li>
    </ul>

原理分析–css样式
使用雪碧图可以减少浏览器的请求
原理分析–js行为
mouseover事件
click事件
mouseout事件

//第一种方法，通过雪碧图移动星星的位置来实现评分
   //默认点亮的星星
    var num=2,
        $rating=$("#rating");
    //点亮
    var lightOn=function(num){
        $( $rating.find(".rating-item")).each(function(index) {
            if (index < num) {
                $(this).css("background-position", "0-32px");
            } else {
                $(this).css("background-position", "0 0");
            }
        });
    };

    //初始化
    lightOn(num);

    //事件绑定
    $rating.find(".rating-item").on("click",function(){
        num=$(this).index()+1;
    });
    $rating.on("mouseout",function(){
    lightOn(num);
});

改进js代码

解决问题：解决多次绑定事件问题–通过事件委托 事件代理
解决变量重名问题–通过添加前缀– ab+变量名

事件委托
将子元素的事件委托给父元素

全局变量问题：通过闭包来解决
(function(){
})();

代码复用
通过函数
var rating=(function(){})();
rating.init(‘#rating’,2);
rating.init(‘#rating’,3);
…
var init=function(el,num){
var #rating=$(el),
…
};

封装成jquery插件
$.fn.extend({
rating:function(num)
{
return this.each(function(){
});
}
})
设计模式
当封装一个函数时，你是在复用代码，当使用一个设计模式时，你是在复用他人的经验
设计模式是在面向对象软件设计过程中针对特定问题的简洁二
这里写代码片
“`
第二种实现方式
使用img标签插入完全点亮状态的星星半点亮的星星
没有点亮的星星