0

我有我今天创建的这个小提琴。这是一个用于星级评分的 jquery 插件。

它在 div 标签中呈现它需要的所有内容，并使用设置进行自定义。

$('#myNewRatingControl').makeStar({ 
    sourceImage: urlOfImage 
}).starRating({
    sourceImage: urlOfImage,
    hoverImage: urlOfImage,
    initialRating: 3
});

这是一种享受，我对此印象深刻。但是，我想做一些事情来优化它。我试图实现这些优化，但没有运气。

它们如下：

  1. 将它们压缩为一个函数，因为附加到图像的点击事件处理程序，我无法做到这一点。它们仅在 DOM 更新时应用，直到 jquery 函数返回它的输出。至少这是我所理解的，请使用我的 JQuery 来告诉我！- 已解决请参阅顶部的小提琴。
  2. 图片预加载。我遇到了一些图像预加载器，但我不知道如何在这种情况下使用它们。将它们放入何处，以及如何在它们被预加载后调用它们。
  3. 由于第一个已经解决，我想知道如何在插件（范围）内使第二个函数私有？

请你能用我的小提琴向我展示如何实现这些优化吗？

谢谢，

4

1 回答 1

0

所以，我有这个新的小提琴，我做了以下事情：

  1. 缩短了代码
  2. 重构了代码
  3. 启用三态星（悬停，选中，未选中）
  4. 为 selectedImage 引入了另一个设置

现在只剩下：

  1. 私有化功能范围
  2. 进行图像预加载

查看这两段代码以了解所做的不同优化。

三州代码：

    function setImageSrcProper()
    {
        for (var i = 1; i < settings.numberOfStars; i++)
        {
            var id = '#star' + i;
            var selected = $(id).attr('data-selected');
            var hover = $(id).attr('data-hover');
            if (selected == 'true')
            {
                $(id).attr('src', settings.selectedImage);   
            }
            else
            {
                $(id).attr('src', settings.sourceImage);   
            }

            if (hover=='true')
            {
                $(id).attr('src', settings.hoverImage);   
            }
        }
    }

我将data-selectedanddata-hover用于三态，基本思想是在任何时候，星星要么被选中，要么未被选中。然后当鼠标被引入时，悬停将覆盖这些状态中的任何一个。鼠标移出后，状态将恢复到原来的状态，并且所有内容都data-hover将被伪造。

于 2013-06-18T14:50:41.597 回答