星级评分插件
- 直接上图先看为主：
- 具体代码呈现:
html部分:
<ul class="wrap-star">
<li class="inner-star" title="很差"></li>
<li class="inner-star" title="差"></li>
<li class="inner-star" title="一般"></li>
<li class="inner-star" title="良好"></li>
<li class="inner-star" title="非常棒"></li>
</ul>
<ul class="wrap-star2">
<li class="inner-star" title="很差"></li>
<li class="inner-star" title="差"></li>
<li class="inner-star" title="一般"></li>
<li class="inner-star" title="良好"></li>
<li class="inner-star" title="非常棒"></li>
</ul>
CSS部分:
/*网页的全局样式 解决兼容问题*/
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,tr,td,form,input,select,textarea,span,img,a,em,strong,*{ margin:0; padding:0;}
body{ font-family:"宋体"; font-size:12px; color:#000000;}
ul,ol,li{ list-style:none;}
h1,h2,h3,h4,h5,h6{ font-size:14px;}
input,select,textarea{ vertical-align:middle;}
img{ border:none; vertical-align:middle;}
a{ text-decoration:none; color:#333333;}
a:hover{ color:#009999;}
.clear{ clear:both; height:0px; width:0px; overflow:hidden;}
body{
background: #666;
}
.wrap-star,.wrap-star2{
width: 105px;
height: 21px;
margin: 100px auto;
}
.inner-star{
width: 21px;
height: 21px;
float: left;
background: url("commstar.png") no-repeat 0 -21px;
cursor: pointer;
}
JS部分:
//此部分用到了sea.js所以要特别注意一下
<script src="sea.js"></script>
<script>
seajs.config({
alias : {
"jquery" : "./jquery.js",
}
})
seajs.use("./defaults.js");
</script>
//default.js部分:
define(function(require,exports,module){
//当前目录
var $ = require("./jquery.js");
$(()=>{
var StarProduct=(function(){
var extend=function(childClass,parentClass){
var B=function(){};
B.prototype=parentClass.prototype;
childClass.prototype=new B();
childClass.prototype.constructor=childClass;
}
var Star=function(el,options){
this.$el=$(el);
this.$item=this.$el.find("li");
this.opts=options;
this.add=1;
this.selectEvent="mouseover";
}
Star.prototype.init=function(){
this.comStar(this.opts.num);
if(!this.opts.readyOnly){
this.bindEvent();
}
};
Star.prototype.comStar=function(num){
num=parseInt(num);
this.$item.each(function(ind){
if(ind<num){
$(this).css("background-position","0 0");
}else{
$(this).css("background-position","0 -21px");
}
});
};
Star.prototype.bindEvent=function(){
var that=this;
var itemLen=this.$item.length;
this.$el.on(that.selectEvent,".inner-star",function(e){
var $this=$(this);
var num=0;
that.select(e,$this);
num=$(this).index()+that.add;
that.comStar(num);
(typeof that.opts.select==="function") && that.opts.select.call(this,num,itemLen);
that.$el.trigger('select',[num,itemLen]);
}).on("click",".inner-star",function(){
that.opts.num=$(this).index()+that.add;
(typeof that.opts.chosen==="function") && that.opts.chosen.call(this,that.opts.num,itemLen);
that.$el.trigger('chosen',[that.opts.num,itemLen]);
}).on("mouseout",function(){
that.comStar(that.opts.num);
});
};
Star.prototype.select=function(){
throw new Error("此方法需在子类重构");
};
Star.prototype.unbindEvent=function(){
this.$el.off();
}
//整棵星
var Startring=function(el,options){
Star.call(this,el,options)
this.selectEvent="mouseover";
}
extend(Startring,Star);
Startring.prototype.comStar=function(num){
Star.prototype.comStar.call(this,num);
};
Startring.prototype.select=function(){
this.add=1;
}
//半颗星
var Starhret=function(el,options){
Star.call(this,el,options);
this.selectEvent="mousemove";
}
extend(Starhret,Star);
Starhret.prototype.comStar=function(num){
var count=parseInt(num);
var ishret=parseInt(count)!==num;
Star.prototype.comStar.call(this,count);
if(ishret){
this.$item.eq(count).css("background-position","0 -42px");
}
};
Starhret.prototype.select=function(e,$this){
if(e.pageX-$this.offset().left<$this.width()/2){
this.add=0.5;
}else{
this.add=1;
}
}
var defaults={
mode:"Startring",
num:1,
readyOnly:false,
select:function(){},
chosen:function(){}
}
var mode={
"Startring":Startring,
"Starhret":Starhret
}
var Init=function(el,option){
var $el=$(el),
dataRating=$el.data("rating");
var options=$.extend({},defaults,typeof option==="object" && option);
if(!mode[options.mode]){
options.mode="Startring";
}
if(!dataRating){
$el.data("rating",(dataRating=new mode[options.mode](el,options)));
dataRating.init();
}
if(typeof option==="string") dataRating[option]();
};
$.fn.extend({
rating:function(option){
return this.each(function(){
Init(this,option);
})
}
})
return {
init:Init
}
})();
StarProduct.init(".wrap-star",{
mode:"Starhret",
num:2.5,
chosen:function(){
StarProduct.init(".wrap-star","unbindEvent");
}
});
$(".wrap-star2").rating({
num:2,
mode:"Startring",
chosen:function(){
$(".wrap-star2").rating("unbindEvent");
}
})
$(".wrap-star").on("select",function(e,num,total){
console.log(num+"/"+total);
}).on("chosen",function(e,num,total){
console.log(num+"/"+total);
});
})
})
在优化过程中我主要用到了以下几方面思想：
- 继承：因为代码的复用性太多，我针对有复用性的几个地方开辟了一个新的父类,让子类拥有和父类一样的属性和方法。
- 面向对象的设计模式，虽然现在很多人都在喊函数式编程,但在这个插件的使用过程中并没有过多的用到这种思想
- 在具体的编程过程中有些地方我已经进行了注释，如果还有不懂得可以私聊的方式进行
难点：
- 在编程过程中，我认为可能的难点就是在半颗星的编程，在半颗星的编程过程中大家可以多停留一会。
- 代码的完善需要更多的人参与其中，我希望有更多优秀的编程者可以参与其中一起讨论可以继续优化的地方以方便之后的改善。
结尾：
- 在编程的过程中，我慢慢的发现了代码带来的魅力，无穷的想象力总能靠代码来实现。每次在看别人的Demo中的按例的时候总会看到别人的代码写的如此优雅，总让我羡慕不已，同时在社区的发展过程中，我每写一篇文章也会或多或少的结交更多的朋友，希望大家通过此篇文章也可以结交更多的编程好友，这或许是我每次能够继续写下去文章的动力吧。
时间：18年9.20日