星級評分

calx 發(fā)布于2019-08-02 11:35 / 2665人閱讀

摘要：代碼的完善需要更多的人參與其中，我希望有更多優(yōu)秀的編程者可以參與其中一起討論可以繼續(xù)優(yōu)化的地方以方便之后的改善。結(jié)尾在編程的過程中，我慢慢的發(fā)現(xiàn)了代碼帶來的魅力，無窮的想象力總能靠代碼來實現(xiàn)。

星級評分插件

直接上圖先看為主：

具體代碼呈現(xiàn):

html部分:

CSS部分:
/*網(wǎng)頁的全局樣式 解決兼容問題*/
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所以要特別注意一下

    
//default.js部分:
define(function(require,exports,module){
    //當(dāng)前目錄
    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
在優(yōu)化過程中我主要用到了以下幾方面思想：

繼承：因為代碼的復(fù)用性太多，我針對有復(fù)用性的幾個地方開辟了一個新的父類,讓子類擁有和父類一樣的屬性和方法。
面向?qū)ο蟮脑O(shè)計模式，雖然現(xiàn)在很多人都在喊函數(shù)式編程,但在這個插件的使用過程中并沒有過多的用到這種思想
在具體的編程過程中有些地方我已經(jīng)進(jìn)行了注釋，如果還有不懂得可以私聊的方式進(jìn)行

難點：

在編程過程中，我認(rèn)為可能的難點就是在半顆星的編程，在半顆星的編程過程中大家可以多停留一會。
代碼的完善需要更多的人參與其中，我希望有更多優(yōu)秀的編程者可以參與其中一起討論可以繼續(xù)優(yōu)化的地方以方便之后的改善。

結(jié)尾：
在編程的過程中，我慢慢的發(fā)現(xiàn)了代碼帶來的魅力，無窮的想象力總能靠代碼來實現(xiàn)。每次在看別人的Demo中的按例的時候總會看到別人的代碼寫的如此優(yōu)雅，總讓我羨慕不已，同時在社區(qū)的發(fā)展過程中，我每寫一篇文章也會或多或少的結(jié)交更多的朋友，希望大家通過此篇文章也可以結(jié)交更多的編程好友，這或許是我每次能夠繼續(xù)寫下去文章的動力吧。
時間：18年9.20日