Question

过去几天我一直在建造自己的carasol。

我的Jquery基于网络上的教程，也来自SO的帮助和建议。

我不是一个Jquery大师只是一个发烧友，并认为我的代码有点草率，因此帖子。

以下是工作代码的链接：http://jsfiddle.net/JHqBA/2/ （更新后的链接）

基本上会发生什么：如果有人用网址中的＃值点击页面，它会显示相应的幻灯片，例如www.hello.com＃two，这会滑到两个幻灯片

如果有人点击了数字，它会显示相应的幻灯片

next和prev也会滑过幻灯片。

问题是，有什么我可以写的更好，因为我知道有很多重复的代码。

我理解这是一个很大的问题，但它会帮助我学习更多（我认为我的代码是一个小老派）

如果有任何人有任何问题，请随时提出并回答它做了什么或应该做什么。

Sluap

---编辑----

我现在只做了一个aniamtion函数，它已经摆脱了很多重复的代码。

我还没有考虑 on function ，但很快就会这样做。

我想了解更多关于在jQuery ready block之外创建一个新函数的更多信息，因为我无法使其工作或完全理解我是如何让它工作的对不起

在我对这个项目感到满意之前，任何更多的提示都会非常糟糕。

也有更好的写作方式：

if ($slideNumber == 1) {
    $('#prev').attr("class", "not_active")
    $('#next').attr("class", "active")
}
else if ($slideNumber == divSum) {
    $('#next').attr("class", "not_active");
    $('#prev').attr("class", "active");
}
else {
    $('#prev').attr("class", "active")
    $('#next').attr("class", "active")
};

Jquery full：

$(document).ready(function () {

    ////////////////////////////  INITAL SET UP  /////////////////////////////////////////////

    //Get size of images, how many there are, then determin the size of the image reel.
    var divWidth = $(".window").width();
    var divSum = $(".slide").size();
    var divReelWidth = divWidth * divSum;

    //Adjust the image reel to its new size
    $(".image_reel").css({ 'width': divReelWidth });

    //set the initial not active state
    $('#prev').attr("class", "not_active");

    ////////////////////////////  SLIDER  /////////////////////////////////////////////

    //Paging + Slider Function
    rotate = function () {
        var triggerID = $slideNumber - 1; //Get number of times to slide
        var image_reelPosition = triggerID * divWidth; //Determines the distance the image reel needs to slide
        //sets the active on the next and prev
        if ($slideNumber == 1) {
            $('#prev').attr("class", "not_active")
            $('#next').attr("class", "active")
        }
        else if ($slideNumber == divSum) {
            $('#next').attr("class", "not_active");
            $('#prev').attr("class", "active");
        }
        else {
            $('#prev').attr("class", "active")
            $('#next').attr("class", "active")
        };
        //Slider Animation
        $(".image_reel").animate({
            left: -image_reelPosition
        }, 500);
    };

    ////////////////////////////  SLIDER CALLS  /////////////////////////////////////////////

    //click on numbers
    $(".paging a").click(function () {
        $active = $(this); //Activate the clicked paging
        $slideNumber = $active.attr("rel");
        rotate(); //Trigger rotation immediately
        return false; //Prevent browser jump to link anchor
    });


    //click on next button
    $('#next').click(function () {
        if (!$(".image_reel").is(':animated')) { //prevent clicking if animating
            var left_indent = parseInt($('.image_reel').css('left')) - divWidth;
            var slideNumberOn = (left_indent / divWidth);
            var slideNumber = ((slideNumberOn * -1) + 1);
            $slideNumber = slideNumber;
            if ($slideNumber <= divSum) { //do not animate if on last slide
                rotate(); //Trigger rotation immediately
            };
            return false; //Prevent browser jump to link anchor
        }
    });

    //click on prev button
    $('#prev').click(function () {
        if (!$(".image_reel").is(':animated')) { //prevent clicking if animating
            var left_indent = parseInt($('.image_reel').css('left')) - divWidth;
            var slideNumberOn = (left_indent / divWidth);
            var slideNumber = ((slideNumberOn * -1) - 1);
            $slideNumber = slideNumber;
            if ($slideNumber >= 1) { //do not animate if on first slide
                rotate(); //Trigger rotation immediately
            };
        }
        return false; //Prevent browser jump to link anchor
    });

    //URL eg:www.hello.com#one                  
    var hash = window.location.hash;
    var map = {
        one: 1,
        two: 2,
        three: 3,
        four: 4
    };
    var hashValue = map[hash.substring(1)];
    //animate if hashValue is not null
    if (hashValue != null) {
        $slideNumber = hashValue;
        rotate(); //Trigger rotation immediately
        return false; //Prevent browser jump to link anchor
    };
});

Answer 1

问题和答案已移至https://codereview.stackexchange.com/questions/8634/jquery-carasol-build-finished-and-would-like-advice-on-best-practice-neateni/8635#8635

1）关注点分离

首先将您的代码重构为更细粒度的函数。您可以在http://en.wikipedia.org/wiki/Separation_of_concerns

了解有关SoF的更多信息

更新：例如。而不是让你的卷轴调整代码内联，把它放在它自己的功能中，如下所示：

function setImageReelWidth () {
    //Get size of images, how many there are, then determin the size of the image reel.
    var divWidth = $(".window").width();
    var divSum = $(".slide").size();
    var divReelWidth = divWidth * divSum;

    //Adjust the image reel to its new size
    $(".image_reel").css({ 'width': divReelWidth });                            
}

这实现了两件事：

一个。首先，它将逻辑上具有凝聚力的代码块分组，将其从主代码中删除，从而产生更清晰的代码栖息地。湾它通过描述其功能的函数名称有效地为代码块提供了标签，因此更容易理解代码。

稍后，您还可以将整个事物封装在自己的“类”（函数）中，然后将其移动到自己的js文件中。

2）jQuery“on”功能

使用“on”功能附加点击事件，而不是“点击”功能。 http://api.jquery.com/on/ 这还有一个额外的好处，即将它绑定到与你的选择器匹配的未来元素，即使它们还不存在。

3）就绪功能

// I like the more succinct:
$(handler)
// Instead of:
$(document).ready(handler)

但是你可能会喜欢更明显的语法。

这些只是一些事情的开始。

- 更新1 -

好的，StackOverflow并不适合正在进行的重构工作，但我们会做的。我认为你应该在你的问题中保留原始代码块，以便未来的读者可以看到它的起源以及它如何系统地改进。

我想了解更多关于创建新功能的信息 jQuery ready block因为我无法正常工作或完全理解我怎么能让它工作抱歉

我对jsfiddle.net并不熟悉，但它看起来很酷且很有帮助，但如果你不知道发生了什么，也可能会有点混乱。我不确定:)，但我认为脚本编辑器窗口会生成一个由.html文件自动引用的.js文件。

所以这里是一个在就绪块之外定义的函数的例子，但是从内部引用。

function testFunction () {
    alert ('it works');
}
$(document).ready(function () {
    testFunction();

    // ... other code
});

这应该会弹出一个警告框，在加载页面时说“它工作正常”。你可以自己试试。然后，一旦你开始工作，你就可以将其他逻辑上有凝聚力的代码块重构为自己的函数。之后你可以将它们全部包装到自己的javascript“类”中。但我们会做到这一点。

Jquery - Carousel build已完成，并希望获得有关最佳实践/整理代码的建议

1 个答案: