Question

我有以下代码：

var _initCarousel = function () {
    _carouselIndicators.empty();

    _steps.each(function(index, element) {
        var li = $( '<li></li>' );
        $(li).click(function () {
            _steps.filter(':visible').hide();
            _carouselIndicators.children('.active').removeClass('active');
            $(element).show();
            $(this).addClass('active');
        });

        _carouselIndicators.append( li );
    });

    _carouselIndicators.children().first().addClass('active');
};

如何在与_initCarousel相同的级别上提取内部函数。问题是元素参数。如何将它传递给内部函数？

目标是提高可读性和可维护性。

    <ol class="carousel-indicators">
    </ol>

    <div class="step" style="background-image: url(./images/p2.jpg);">
        //...
    </div>

    <div class="step" style="background-image: url(./images/p1.jpg);">
        //...
    </div>

这是相关的HTML。这就是我如何获得变量：

    _steps = $('.step');
    _carouselIndicators = $('.carousel-indicators');

Answer 1

你真的不可能。 element来自父作用域。如果你将内部函数提取到更高级别的内部函数，它将无法访问该父作用域。

另外，你不是那个叫这个功能的人。它被称为jQuery点击处理程序，因此您无法直接向其传递其他参数。

有许多解决方法涉及将element存储在其他地方或涉及创建某种将传递它的函数存根。在我看来，它们会让你的代码不那么可读而不会更多可读。

在javascript中，使用可以访问其父作用域的内联匿名函数通常具有显着优势，并且可以显着简化代码。这是一个可读和可维护的结构，广泛用于主要的javascript项目（如jQuery）。我很好奇为什么你认为这不可读或不可维护？一旦你真正理解它们，像这样的闭包是一个强大的javascript工具，可以帮助你编写更清晰的代码，而不是要避免的。

例如，这是一个解决方法，可以将element存储在您可以使用.data()访问它的位置。我个人宁愿保留在父作用域中使用element的原始结构，而不是必须存储/检索它的额外步骤。

var processCarouselClick = function() {
     _steps.filter(':visible').hide();
     _carouselIndicators.children('.active').removeClass('active');
     $(this).data("element").show();
     $(this).addClass('active');
}

var _initCarousel = function () {
    _carouselIndicators.empty();

    _steps.each(function(index, element) {
        var li = $( '<li></li>' ).data("element", element);
        $(li).click(processCarouselClick);
        _carouselIndicators.append( li );
    });

    _carouselIndicators.children().first().addClass('active');
};

当然，如果我们看到代码的较大上下文知道element实际上是什么，我们可以使用DOM遍历直接找到它而不存储它，但是使用有限的代码部分你可以＃39;包括在内，这只是猜测。

如何提取此JavaScript函数

1 个答案: