Question

我一直在努力改进这个网页，我确信当你看到下面的代码时你们都笑了，但是我一直在教自己javascript，所以我有点自豪到目前为止，我已经能够独立完成了。问题是，一旦你开始点击地图上的几个城市，我所做的就是有点儿马车，我不够精通它。此外，我确信我已经采取了漫长的风景路线来使代码运行，所以我转向全知道社区，希望有人可以教这个人如何编码。

您可以在此处查看完整开发：http://buhmanphotography.com/map/

以下是我看到的错误的视频：http://buhmanphotography.com/map/buggyCode/

$(document).ready(function() {
        // Show the Map Container
        $('.locBox a').click(function (e) {

            // Initialize info for clicked location
            var initLocInfo = $(this).attr("rel") + "Ctn";

            // Show Initial Information
            $('#' + initLocInfo).show();
            $('#' + initLocInfo).css('opacity','1');
            $('#' + initLocInfo).addClass('modActive'); 


            // Initialize Button State on Map
            var initLocBtn = $(this).attr("rel") + "Btn";
            $('#' + initLocBtn).css('backgroundPosition','top');

            // Open Map Box
            $("#mapModalCtn").show();
            $("#mapModalCtn").animate({
                opacity: 1
            }, 500);
            e.preventDefault();
        });

        // Hide the Map Container
        $('#modalTitle a').click(function (e) {
            $("#mapModalCtn").animate({
                opacity: 0
            }, 500, function() {
                $("#mapModalCtn").hide();
                $('#modLeftCol > div').removeClass('modActive');
                $('#modLeftCol > div').hide();
                $('#modRightCol a').css('backgroundPosition','bottom');
            });
            e.preventDefault();
        });

        // Show the info for the selected Location on the Map
        $('#modRightCol a').click(function (e) {
            e.preventDefault();
            var locInfo = $(this).attr("rel") + "Ctn";
            var locBtn = $(this).attr("rel") + "Btn";

            // Change Map Location Button State
            $('#modRightCol a').css('backgroundPosition','bottom');
            $(this).css('backgroundPosition','top');

            // Hide currently visible information
            if ($('#modLeftCol > div').hasClass('modActive')) {
                $("#modLeftCol > div").animate({
                    opacity: 0
                }, 500, function(){
                     $("#modLeftCol > div").hide();
                     $("#modLeftCol > div").removeClass('modActive');

                     //Show information related to location clicked
                    $('#' + locInfo).show();
                    $('#' + locInfo).animate({
                            opacity: 1
                        }, 500, function(){
                            $('#' + locInfo).addClass('modActive');
                        });
                });
            }


        });

    });

Answer 1

Need help fixing bugs and optimizing javascript code

我将给你一些一般性建议。一般来说，在担心某些事情非常有效之前，最好先让事情发生。这并不意味着你应该故意以低效率的方式做事情，但正确性应该比优化的事情更重要。

您可以返回代码并在工作完成后对其进行优化。我发现，如果我过于专注于制作有效的东西（在我完成之前），我将永远不会完成它！

至于使代码更好，一个好的经验法则是缓存内容。

例如：

var container = $('#container');
container.css({ ‘background-color’ : ‘#f00’});
container.bind(‘click’, function() { do something });

代替：

$(‘#container’).css({‘background-color’ : ‘#f00’});
$(‘#container’).bind(‘click’, function() { do something });

每次你做$（'someElement'）都需要时间。它必须搜索整个DOM才能找到该元素。如果您要引用此DOM元素，最好保存对此元素的引用并使用此引用。因此删除所有这些不必要的查找。

考虑使用的另一件事是尽可能使用jquery的代理。如果你在同一区域内有很多点击监听器，代表就很好。

例如，而不是在.locBox类的所有链接上添加一个单击侦听器：

$('.locBox a').click(function (e) {

执行以下操作：

$(‘.locBox’).delegate(‘a’, ‘click’, function() { … do something … });

这很好，因为现在每个.locBox上只有一个监听器，它会等待点击你的链接标签冒泡然后运行事件处理程序。

我知道这并不能解决您的“错误”行为，但我认为您会发现这对未来的项目非常有用。

需要帮助修复错误和优化JavaScript代码

1 个答案: