星级评分篇一 最初实现
2018-01-10 本文已影响20人
菩提树下成魔
0x01 前言
星级评分的实现网上例子诸多，然而写这篇文章是为了，在学习完视频和复现效果后的记录和反思。视频中分享者注重代码的重构和 JavaScript 实现技巧，都值得我们去学习、总结和记录。
0x02 具体实现
0x01 前端页面实现
页面内容很简单，嵌入背景图和 padding，margin 实现 5 颗星星并排在一起显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>星级评分的第一种实现方式</title>
<style type="text/css">
body,
ul,
li {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
.rating {
width: 100px;
height: 20px;
margin: 100px auto;
}
.rating-item {
float: left;
width: 20px;
height: 20px;
background: url(img/rating.png) no-repeat;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="rating" id="rating">
<li class="rating-item" title="很不好"></li>
<li class="rating-item" title="不好"></li>
<li class="rating-item" title="一般"></li>
<li class="rating-item" title="好"></li>
<li class="rating-item" title="很好"></li>
</ul>
</body>
</html>
0x02 JavaScript 实现星级评分
以下是最初的实现方式，实现非常简单。但存在诸多问题，我们将在下一篇文章中做出总结和提出。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
/**
* @param {Number} num 全局变量，指的是点亮的星星的个数
* @param {Object} $rating 全局变量，JQuery 对象，指向存放星星的父容器 ul
* @param {Object} $item 全局变量，JQuery 对象，封装所有星星对象
*/
var num = 2,
$rating = $("#rating"),
$item = $rating.find(".rating-item");
/**
* 方法：点亮星星
* @param {Number} num 点亮星星的个数
*/
var lightOn = function(num) {
// this 指的是 $item 中遍历的每颗星星对象，$item 封装所有星星
$item.each(function(index) {
if(index < num) {
$(this).css("background-position", "0 -20px")
} else {
$(this).css("background-position", "0 0")
}
});
}
/**
* index() 搜索匹配的元素，并返回相应元素的索引值，从 0 开始计数
*/
$item.on("mouseover", function() {
lightOn($(this).index() + 1);
}).on("click", function() {
// 点击修改全局变量 num，固定点亮的星星个数
num = $(this).index() + 1;
});
/**
* 移出星星后，恢复初始状态
*/
$rating.on("mouseout", function() {
lightOn(num);
});
/**
* 方法：用于本程序初始化效果
*/
lightOn(num);
</script>
为什么采用赋值式函数？我们进行讨论下。
function foo() {};
var bar = function() {};
var baz = function qux() {};
先讨论 foo，是一个标准的函数声明语句。这行代码明确地声明了一个名为 foo 的函数。函数的声明在解释器解释的过程中，是在执行期前。也就是说，你的代码还未执行前，这个函数就已经被声明了。
再讨论 bar，整个过程是这样的。首先声明一个变量 bar（这个是在执行期前），然后定义一个匿名函数表达式，最后 bar 指向这个匿名函数表达式。这种方式与 foo 的区别在于，函数 bar 是在执行期定义的。故这种方式去定义一个函数必须前置定义，否则在执行时会报类型错误 TypeError: undefined is not a function。
baz 这种情况同 bar 很相似。但是函数表达式定义了一个具名函数。也就是说这个函数是有自己的名字的。但是这个名字却不是绑定在当前作用域下的。故直接调用 qux 会出错 TypeError: undefined is not a function。
这个具名函数是为了解决严格模式下自己调用自己的问题的，例如。
var baz = function qux() {
if(true) qux();
}
baz();
总而言之，结论如下。
-
如果想后置函数的声明，我们就可以用
foo。 -
如果我只是想生成一个匿名函数把他设置为某个对象的属性，那就用
bar。 -
如果
bar满足不了，我还要递归调用自己，那就用baz/qux。
