Question

所以，就在最近，我一直在使用一个在悬停和鼠标移动时调用的脚本。这是一个图像预览脚本。在脚本中，我有2个if-else语句和2个if语句。

在我看到之后，因为代码中存在大量冗余，我认为如果我进行一些重构并将其全部外包给函数可能是最好的。但是当我完成函数时，我看到我只保存了大约10行代码，并且有1个if-else语句和2个if语句。所以在我看来它更快，但后来我不确定函数调用是否实际上增加了更多的开销。

以下是代码......注释掉的所有内容都是我最初的内容，但合并到一个名为pos

的函数中

只是好奇知道哪个更快，哪个更好。

this.imagePreview = function(){ 
    /* CONFIG */

        xOffset = 10;
        yOffset = 30;
        maxHeight = $(document).height();
        maxWidth = $(document).width();

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

    /* END CONFIG */

    $("a.imagePreview").hover(function(e){
        var img = $(this).find('img').attr('src');
        img = img.substring(0,img.lastIndexOf("."));

        var height = $('#preview').height();
        var width = $('#preview').width();

        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $(".imagePreviewContainer").append("<p id='preview'><img src='"+ img +"pview.png ' alt='Image preview' /><span>"+ c +"</span></p>");

        pos(e, width, height, maxWidth, maxHeight, true);

/*      if((e.pageX + yOffset + width + 20) > $(window).width()){
            $("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX - yOffset - width) + "px")
                .fadeIn("fast");
        }
        else{
            $("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px")
                .fadeIn("fast");
        }

        if((e.pageY + yOffset + height + 50) > maxHeight){
            $('#preview')
                .css("top",(e.pageY - xOffset - $('#preview').height()) + "px");
        }
        console.log("Page height : " + maxHeight);*/
    },
    function(){
        this.title = this.t;    
        $("#preview").remove();
    }); 
    $("a.imagePreview").mousemove(function(e){

        var height = $('#preview').height();
        var width = $('#preview').width();

        pos(e, width, height, maxWidth, maxHeight, false);

/*      if((e.pageX + yOffset + width + 20) > maxWidth){
            $("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX - yOffset - width) + "px")
        }
        else{
            $("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px")
        }
        console.log("Page height : " + maxHeight);

        if((e.pageY + yOffset + height + 50) > maxHeight){
            $('#preview')
                .css("top",(e.pageY - xOffset - height) + "px");
        }*/
    });

};

var pos = function(e, width, height, maxWidth, maxHeight, fIn){
    var xOffset = 10;
    var yOffset = 30;
    var xChange = 0;
    var yChange = 0;

    if((e.pageX + width + 50) > maxWidth){
        xChange = width + yOffset + yOffset;
    }
    if((e.pageY + height + 60) > maxHeight){
        yChange = height;
    }

    if(fIn){
        $('#preview')
            .css("top",(e.pageY - xOffset - yChange) + "px")
            .css("left",(e.pageX + yOffset - xChange) + "px")
            .fadeIn("fast");
    }
    else{
        $('#preview')
            .css("top",(e.pageY - xOffset - yChange) + "px")
            .css("left",(e.pageX + yOffset - xChange) + "px");
    }
}

jQuery是更快的函数调用或if语句

0 个答案: