评分插件
前言
- 组件:独立的功能,是可以直接拿过来使用,可以动态插入也可以静态插入
- 插件:需要动态插入的一个功能,并且还是对已有的代码/库文件进行扩展的一些功能
- 源码可以查看 我的GitHub上的项目地址https://github.com/tjlcy/StarRating
也可以看文章里面。
效果图:
不可修改的评分插件逻辑(写好的)
这部分像是用户之前评价完展现在页面中的效果。
js部分
首先,在元素的原型链上设置插入评分的方法,然后在其中构造对象存储数据,并且初始化数据。
然后,设置评分函数。
之后,在评分函数上初始化结构和功能
评分结构:
创建div并设置类名,插入到页面中
创建span并设置类名,插入到div之中
创建的span一类放星星,需要根据数据进行遍历,另外一类放描述信息。
通过添加类名展现评分之后的效果
在初始化(init)中调用评分结构并配合html和css以及数据将其静态效果展现在页面中。
模拟数据:
绑定实例事件,实例事件调用插入评分的方法,内部写入数据
css部分
图是一张精灵图或称为雪碧图,通过调节这张图的位置展现不同的样式
css具体处理方案请看代码注释部分
可修改的评分插件的逻辑
js部分
接着上面的js逻辑。
绑定事件:
设置鼠标移入和点击及移出的事件调用修改评分的方法(starRating)
修改评分:
获取星星那个span标签,判断星星是不是小于等于评分,是的话,添加指定类名,不是则移出指定类名,并且根据检测到的事件添加相应描述
方法均写在原型链上
源码:
js主体部分:
// max 最大的分数(总星数)
// score 当前的评分
// message 评分的描述
// disabled 是否禁用(是否可以修改分数 false可以修改 true不可以修改)
function StarRating(options) {
// 如果options里有 执行前者,没有的话执行后者(默认)
this.max = options.max || 5;
this.score = options.score || 0;
this.message = options.message || ['极差', '差', '合格', '良好', '优秀'];
this.disabled = options.disabled || false;
this.Dom = null;
}
// 初始化结构以及功能
StarRating.prototype.init = function() {
// 1.创建评分结构
this.createElement(); //调用评分结构
// 2.修改评分功能
if (!this.disabled) {
this.bindEvent()