jquery封装评分插件

转载于：https://www.imooc.com/u/2084853/courses?sort=publish

(function(){
    // LightEntire.prototype = new Light();
    // LightHalf.prototype = new Light(); //如果这样会继承自有属性和原型方法 Light.prototype中的方法和Light函数通过this赋值的东西（这个我们已经通过call实现了，不需要,资源浪费）

    // 继承
    var extend = function(subClass,superClass){
        var F = function(){

        }
        F.prototype = superClass.prototype;
        subClass.prototype = new F();
        subClass.prototype.subClass = subClass;
    }
    // 父类
    var Light = function(el,options){
        this.$el = $(el);
        this.$item = this.$el.find('.rating-item');
        this.opts = options;
        this.add = 1;
        this.selectEvent = 'mouseover';

    }
    //初始化
    Light.prototype.init = function(){
        this.lightOn(this.opts.num);
        if(!this.opts.readOnly){ //判断是否只读
          this.bindEvent();
        }
    };
    Light.prototype.lightOn = function(num){
        num = parseInt(num);
           this.$item.each(function(index) {
             if (index < num) {
                $(this).css('background-image', 'url("./star-on.png")');
            } else {
                $(this).css('background-image', 'url("./star-off.png")');
            }
        });
    };
    Light.prototype.bindEvent = function(){
            var self = this,
            itemLength = self.$item.length;

            self.$el.on(self.selectEvent, '.rating-item', function(e) {
                var $this = $(this);
                var num = 0;

                self.select(e,$this);
                num = $(this).index()+self.add;
                self.lightOn( num ); //this指向 '.rating-item'

                (typeof self.opts.select === 'function') && self.opts.select.call(this,num, itemLength);//this指向的是移动的星星
                //先判断是否是函数，然后执行这个函数，用call去改变select中的this；

                self.$el.trigger('select',[num,itemLength]); 
                //移动到信息触发一个事件
            })
            .on('click', '.rating-item', function() {
                self.opts.num = $(this).index() + self.add;
                 (typeof self.opts.chosen === 'function') && self.opts.chosen.call(this, self.opts.num, itemLength);
                 self.$el.trigger('chosen',[ self.opts.num,itemLength]);
            })
            .on('mouseout', '.rating-item', function() {
                self.lightOn(self.opts.num);
            });
    };
    Light.prototype.select = function(){
        throw new Error('子类必须重写此方法');
    };
    Light.prototype.unbindEvent = function(){
        this.$el.off();
    }


    //点亮整颗星星
    var LightEntire = function(el,options){
        Light.call(this,el,options); //继承父类自有属性
        this.selectEvent = 'mouseover';

    }
    extend(LightEntire,Light);//继承父类原型方法

    LightEntire.prototype.lightOn = function(num){
       Light.prototype.lightOn.call(this,num);
    };
    LightEntire.prototype.select = function(){
        self.add = 1;
    }

      //点亮半颗星星
    var LightHalf = function(el,options){
        Light.call(this,el,options); //继承父类
        this.selectEvent = 'mousemove';
    }
    extend(LightHalf,Light);//继承父类原型方法

    LightHalf.prototype.lightOn = function(num){
        var count = parseInt(num);
        var isHalf = count !== num;

           Light.prototype.lightOn.call(this,count);

           if(isHalf){
            this.$item.eq(count).css('background-image','url("./star-half.png")');
           }
    };

    LightHalf.prototype.select = function(e,$this){
        if(e.pageX - $this.offset().left < $this.width()/2){
            this.add = 0.5;
        }else{
            this.add = 1;
        }
    }


    //默认参数
    var defaults = {
        num: 0,
        mode: 'LightEntire',
        readOnly: false,
        select: function(){

        }, //移动到星星的方法
        chosen: function(){

        } //点击星星的方法
    };
    var mode = {
        'LightHalf': LightHalf,
        'LightEntire': LightEntire
    }
    //初始化
    var init = function(el,option){
        console.log(el);
       var options = $.extend({},defaults, typeof option === 'object' && option),
            $el = $(el),
            rating = $el.data('rating');
        // new LightEntire(el,options).init();
        if(!mode[options.mode]){
            options.mode = 'LightEntire'; //纠错机制
        }
        if(!rating){ 
            $el.data('rating',(rating=new mode[options.mode](el,options))); //赋值
            rating.init();
        }
        if(typeof option ==='string'){
            rating[option]();
        }


    };

    $.fn.extend({
        rating:function(option){
            return this.each(function(){
                init(this,option);
            })
        }
    });

    return {
        init: init
    };

})();



// 提供了'select 和 chosen事件'
$('#rating').on('select', function(e,num,total){
    console.log(total +'/'+ num);
}).on('chosen',function(e,num,total){
    console.log(total +'/'+ num);
});
//点击后解绑，不允许再点击了
$('#rating2').on('chosen', function(){
    $('#rating2').rating('unbindEvent');
});
$('#rating').rating({
    num: 2.5,
    mode: 'LightHalf'
});
$('#rating2').rating({
    num: 2.5,
    mode: 'LightEntire'
})