前端demo逻辑系列之评分插件

最新推荐文章于 2024-05-12 09:45:44 发布

非科班程序猿

最新推荐文章于 2024-05-12 09:45:44 发布

阅读量373

点赞数

文章标签： javascript css

本文链接：https://blog.csdn.net/tjlcy2019/article/details/107901862

版权

本文详细介绍了如何实现一个前端评分插件，包括不可修改的静态展示逻辑和可修改的交互逻辑。js部分涉及在元素原型链上添加评分方法，初始化数据和评分功能；css部分利用精灵图实现不同评分状态的样式。此外，还提供了事件绑定和修改评分的实现细节，以及源码链接。

摘要由CSDN通过智能技术生成

评分插件

前言

组件：独立的功能，是可以直接拿过来使用，可以动态插入也可以静态插入
插件：需要动态插入的一个功能，并且还是对已有的代码/库文件进行扩展的一些功能
源码可以查看我的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()