JQuery插件优化

JQuery Plugin Optomisations

本文关键字：优化 插件 JQuery      更新时间：2023-09-26

我今天做了一把小提琴。这是一个jquery的星星评级插件。

它在div标签中呈现所需的一切，并使用设置来自定义。

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

这个很有效，我对它印象深刻。然而，我想做几件事来优化它。我试着实现这些优化，但没有运气。

它们如下:

  1. 将它们压缩成一个函数，我不能这样做，因为点击事件处理程序附加到图像。它们只在DOM被更新时才被应用，直到jquery函数返回它的输出。至少这是我所理解的，请使用我的JQuery向我展示不同的情况!
  2. 图像预加载。我遇到了一些图像预加载器，但我不知道如何在这种情况下使用它们。在哪里放置它们，以及在它们被预加载后如何调用它们。
  3. 既然第一个已经解决了，我想知道如何在插件(范围)内使第二个函数私有?

请用我的小提琴告诉我如何实现这些优化?

谢谢,

那么，我有一个新的小提琴，我做了下面的操作:

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

现在唯一剩下的是:

  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-selected和data-hover表示三态，基本思想是在任何时候恒星要么被选中，要么不被选中。然后，当鼠标被引入时，悬停将覆盖这些状态。当鼠标移出时，状态将恢复到原来的状态，并且所有data-hover将被伪造。

相关文章：