一蔑滓、前期準(zhǔn)備工作

1.下載font-awesome或引進(jìn)都可以

<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">

-實(shí)心星星樣式
<i class="fa fa-star" aria-hidden="true" ></i>
-空心星星樣式
<i class="fa fa-star-o" aria-hidden="true" ></i>

2.引進(jìn)jquery

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js">
 </script>

3.創(chuàng)建div
用于測試效果

<div id="container"></div>

二枣抱、實(shí)現(xiàn)js效果

最終效果圖

1.需要實(shí)現(xiàn)的效果

• 默認(rèn)生成實(shí)心star和空心star
• 鼠標(biāo)移入時，從開始位置到當(dāng)前位置都為fa-star(實(shí)心)入偷，其他為fa-star-o(空心)
• 鼠標(biāo)移出恢復(fù)復(fù)默認(rèn)樣式
• 鼠標(biāo)點(diǎn)擊時哗魂，從開始位置到當(dāng)前位置都為fa-star(實(shí)心)蒙幻，其他為fa-star-o(空心)

2.思考實(shí)現(xiàn)

2.1 默認(rèn)生成實(shí)心star和空心star

var count = 10  //生成star總數(shù)
var score = 5   //生成實(shí)心數(shù)
for (let i = 0; i < count; i++) {
      //定義生成star的i標(biāo)簽，為實(shí)心和空心的公共部分
      var star = $(`<i class="fa star" aria-hidden="true" style="color:gold;font-size:12px;"></i>`)
      //控制實(shí)心個數(shù)
      if (i < score) {
          //添加實(shí)心樣式
         star.addClass("fa-star")
       } else {
          //添加空心樣式
         star.addClass("fa-star-o")
       }
      //在div中添加
      $("#container").append(star)
 }

默認(rèn)效果圖

2.2鼠標(biāo)移入mouseenter

• 使用index()找到當(dāng)前star的位置衣迷，遍歷所有的star,開始到當(dāng)前為fa-star畏鼓，其他為fa-star-o

 $(".star").mouseenter(function () {
      //獲取當(dāng)前元素的位置
      var val = $(this).index() + 1
     $(".star").each(function (i) {
             if (i < val) {
        //當(dāng)前元素增加實(shí)心樣式去除空心樣式
                $(this).addClass("fa-star").removeClass("fa-star-o")
              } else {
       //當(dāng)前元素增加空心樣式去除實(shí)心樣式
        $(this).addClass("fa-star-o").removeClass("fa-star")
          }
      })
 })

鼠標(biāo)移入

2.3鼠標(biāo)移出mouseleave

• 恢復(fù)默認(rèn)樣式（開始生成時）（鼠標(biāo)未點(diǎn)擊）
• 移除后，開始到點(diǎn)擊位置star都為實(shí)心（鼠標(biāo)點(diǎn)擊以后）蘑险，通過變量score控制數(shù)量

  $(".star").mouseleave(function () {
       $(".star").each(function (i) {
            if (i < score) {
             //當(dāng)前元素增加實(shí)心樣式去除空心樣式
            $(this).addClass("fa-star").removeClass("fa-star-o")
             } else {
              //當(dāng)前元素增加空心樣式去除實(shí)心樣式
             $(this).addClass("fa-star-o").removeClass("fa-star")
           }
       })
   })

2.4鼠標(biāo)點(diǎn)擊click

• 點(diǎn)擊之后滴肿，開始到點(diǎn)擊位置為實(shí)心，改變score的值來實(shí)現(xiàn)

 $(".star").click(function () {
   score = $(this).index() + 1
 })

3.改善代碼

• 實(shí)現(xiàn)效果后佃迄，檢查所寫代碼是否存在重復(fù)泼差，有可將重復(fù)的部分改寫成函數(shù)，進(jìn)行封裝調(diào)用呵俏，減少代碼量

鼠標(biāo)移入和移出處代碼重復(fù)堆缘，可進(jìn)行封裝,改善如下

//重復(fù)部分封裝成setStar函數(shù)
 function setStar(val) {
    $(".star").each(function (i) {
     if (i < val) {
          $(this).addClass("fa-star").removeClass("fa-star-o")
           } else {
             $(this).addClass("fa-star-o").removeClass("fa-star")
          }
   })
 }
//鼠標(biāo)移入
 $(".star").mouseenter(function () {
      setStar($(this).index() + 1)
  })
//鼠標(biāo)移出
  $(".star").mouseleave(function () {
         setStar(score)
    })

三、升級為插件

1.思考插件需要做到什么

• 引入相關(guān)文件即可使用
• 有復(fù)用性普碎，在這個項(xiàng)目中可以使用吼肥，另一個項(xiàng)目中也可以使用
• 有易用性，用戶調(diào)用簡單，不繁瑣

2.根據(jù)思考完善內(nèi)部代碼缀皱，用戶可根據(jù)需求更改參數(shù)

第一步

• 創(chuàng)建raty.js斗这，定一個閉包區(qū)域，防止插件污染
• 使用$.fn.extend()擴(kuò)展jquery 方法啤斗，制作插件

;
(()=>{
      $.fn.extend({
            raty(options){  }
      })
})()
;

注意：$.extend方法和$.fn.extend方法都可以用來擴(kuò)展jQuery功能表箭，$.extend方法是在jQuery全局對象上擴(kuò)展方法；
$.fn.extend方法是在$選擇符選擇的jQuery對象上擴(kuò)展方法
擴(kuò)展jQuery的公共方法一般用$.extend方法
定義插件一般用$.fn.extend方法

第二步

• 此插件用戶可更改idcontainer钮莲，生成星星總數(shù)count免钻、默認(rèn)實(shí)心數(shù)score、顏色color崔拥、大小size
  參數(shù)較多极舔，所以用對象傳參（不更改的情況有默認(rèn)值）
• 對原代碼中的變量進(jìn)行修改

代碼如下：

 // 默認(rèn)值
var settings = {
      count: 10,//star總數(shù)
      score: 5,//star實(shí)心數(shù)
       color: "gold",//star顏色
       size: "12px"http://star大小
  }
  $.extend(settings, options)//合并兩個對象,將用戶傳過來的值更新到settings中
  settings.container = "#" + this.attr("id")//獲取調(diào)用id
 for (let i = 0; i < settings.count; i++) {
      var star = $(`<i class="fa star" aria-hidden="true" style="color:${settings.color};font-size:${settings.size};"></i>`)
       if (i < settings.score) {
             star.addClass("fa-star")
       } else {
           star.addClass("fa-star-o")
        }
       $(settings.container).append(star)
 }

第三步

• 檢查代碼，防止效果互相影響
  例如如下情況：

代碼不嚴(yán)謹(jǐn)链瓦，效果相互影響展示

• 效果只能在當(dāng)前調(diào)用id內(nèi)發(fā)生拆魏，不能影響其他id,；
  遍歷star也只能在當(dāng)前調(diào)用star內(nèi)澡绩；

所以在鼠標(biāo)事件中加入idsettings.container,函數(shù)setStar中也加入settings.container

更改代碼如下：

//在當(dāng)前調(diào)用的id里面
 $(settings.container + " .star").mouseenter(function () {
       setStar($(this).index() + 1)
 })
 $(settings.container + " .star").mouseleave(function () {
                        setStar(settings.score)
 })
  $(settings.container + " .star").click(function () {
  settings.score = $(this).index() + 1
  })
function setStar(val) {
 $(settings.container + " .star").each(function (i) {
          if (i < val) {
         $(this).addClass("fa-star").removeClass("fa-star-o")
           } else {
               $(this).addClass("fa-star-o").removeClass("fa-star")
            }
          })
  }

四稽揭、使用方法
1.下載或引用font-awesome
因?yàn)椴寮褂玫男切鞘莊ont-awesome的圖標(biāo)，所以需要引入或者下載

<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">

<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">

2.引進(jìn)jquery

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

3.創(chuàng)建div
創(chuàng)建兩個div進(jìn)行測試肥卡，一個展示默認(rèn)效果溪掀，一個展示傳參后效果

 <!-- 默認(rèn)效果 -->
 <p>默認(rèn)效果</p>
<div id="container"> </div>
 <!-- 更改 -->
 <p>傳參后</p>
 <div id="container2"></div>

4.在script中引用

 <script>
   $("#container").raty()
     $("#container2").raty({
             count: 6,
             score: 1,
             color: "Crimson"
            })
  </script>

引用效果圖