javascript - JQuery 插件优化

Question

我有这个fiddle我今天创造的。这是一个用于星级评分的 jquery 插件。

它在 div 标签内呈现它需要的一切，并使用设置进行自定义。

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

这是一种享受，我对它印象深刻。但是，我想做几件事来优化它。我已尝试实现这些优化，但没有成功。

它们如下:

1. 将它们压缩成一个函数，我不能这样做，因为图像上有点击事件处理程序。它们仅在 DOM 更新后应用，直到 jquery 函数返回它的输出。至少这是我所理解的，请使用我的 JQuery 向我展示其他情况! -已解决，请参阅顶部的 fiddle 。
2. 图像预加载。我遇到过一些图像预加载器，但我不知道如何在这种情况下使用它们。将它们放入何处，以及在预加载后如何调用它们。
3. 既然第一个已经解决了，我想知道如何在插件(范围)内将第二个函数设为私有(private)？

请问您能否使用我的 fiddle 向我展示如何实现这些优化？

谢谢，

Answer 1

所以，我有这个新的 fiddle我已完成以下操作:

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

现在唯一剩下的就是:

1. 私有(private)化功能范围
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-selected 和 data-hover 作为三态，基本思想是星星要么被选中，要么被取消选中.然后当引入鼠标时，悬停将覆盖这些状态中的任何一个。鼠标移开时，状态将恢复到原来的状态，并且所有 data-hover 都将被伪造。