jquery封装评分插件

(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'
})