星級評分

xiaokai 發布于2019-08-30 15:54 / 681人閱讀

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

星級評分插件

直接上圖先看為主：

具體代碼呈現:

html部分:

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所以要特別注意一下

    
//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
在優化過程中我主要用到了以下幾方面思想：

繼承：因為代碼的復用性太多，我針對有復用性的幾個地方開辟了一個新的父類,讓子類擁有和父類一樣的屬性和方法。
面向對象的設計模式，雖然現在很多人都在喊函數式編程,但在這個插件的使用過程中并沒有過多的用到這種思想
在具體的編程過程中有些地方我已經進行了注釋，如果還有不懂得可以私聊的方式進行

難點：

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

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

GPU云服務器云服務器五星級酒店 php 星級評論機柜托管T3+星級機房成都電信五星級機柜托管價

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116968.html

星級評分

摘要：代碼的完善需要更多的人參與其中，我希望有更多優秀的編程者可以參與其中一起討論可以繼續優化的地方以方便之后的改善。結尾在編程的過程中，我慢慢的發現了代碼帶來的魅力，無窮的想象力總能靠代碼來實現。星級評分插件直接上圖先看為主： showImg(https://segmentfault.com/img/bVbhgsm?w=299&h=31); 具體代碼呈現: html部分: ...

habren 2019-08-23 12:04 評論0 收藏0
星級評分

摘要：代碼的完善需要更多的人參與其中，我希望有更多優秀的編程者可以參與其中一起討論可以繼續優化的地方以方便之后的改善。結尾在編程的過程中，我慢慢的發現了代碼帶來的魅力，無窮的想象力總能靠代碼來實現。星級評分插件直接上圖先看為主： showImg(https://segmentfault.com/img/bVbhgsm?w=299&h=31); 具體代碼呈現: html部分: ...

calx 2019-08-02 11:35 評論0 收藏0
Vue實戰—評價組件的設計與實現（6）

摘要：本篇文章我們進一步深入項目設計評價組件。使得組件更加便于維護。路徑配置內自動補全設置通過重命名設置對組件導入模塊時進行了重命名。全部有圖點評使用引入的組件組件就是上圖標記的分隔線。在上篇文章我們將項目頭部模塊進行了編寫與數據渲染。本篇文章我們進一步深入項目設計評價組件。 showImg(https://segmentfault.com/img/bVbt6IP?w=374&h=417...

cocopeak 2019-08-23 18:13 評論0 收藏0
構建基于Spark的推薦引擎（Python）

摘要：協同過濾提出了一種支持不完整評分矩陣的矩陣分解方法不用對評分矩陣進行估值填充。使用的是交叉最小二乘法來最優化損失函數。構建基于Spark的推薦引擎（Python）推薦引擎背后的想法是預測人們可能喜好的物品并通過探尋物品之間的聯系來輔助這個過程在學習Spark機器學習這本書時，書上用scala完成，自己不熟悉遂用pyshark完成，更深入的理解了spark對協同過濾的實現在這里我...

nanfeiyan 2019-07-30 15:09 評論0 收藏0