如何提取此JavaScript函数

我有以下代码：

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');
};

这就是相关的HTML。我就是这样得到变量的：

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

---

你真的不能<代码>元素来自父范围。如果将内部函数提取到更高级别的自身函数，则它将无法访问该父作用域

另外，调用函数的不是您。它被称为jqueryclick处理程序，因此您不能直接向它传递额外的参数

有很多解决方法，要么将

元素存储在其他地方，要么创建某种类型的函数存根将其传入。在我看来，这两种方法都会降低代码的可读性，而不是提高代码的可读性

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


例如，这里有一个变通方法，它将
元素存储在一个可以使用
.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');
};

var processCarouselClick=function（）{
_steps.filter（':visible'）.hide（）；
_carouselIndicators.children（'.active'）.removeClass（'active'）；
$（this）.data（“元素”）.show（）；
$（this.addClass（'active'）；
}
var_initCarousel=函数（）{
_carouselIndicators.empty（）；
_步骤。每个（函数（索引、元素）{
变量li=$（'
）。数据（“元素”，元素）；
$（li）。单击（processCarouselClick）；
_旋转唱机。附加（li）；
});
_carouselIndicators.children（）.first（）.addClass（'active'）；
};

当然，如果我们看到您的代码的更大的上下文来了解
元素
实际上是什么，我们可能可以使用DOM遍历直接查找它，而无需存储它，但由于您包含的代码部分有限，这只是一个猜测。
嗯，它不可读。但是
\u initCarousel
的问题是初始化
li
。将它们放入DOM中，分配它们的类并单击handler。但是这个问题被实际的点击处理程序一分为二。但从我的主要语言来看，我想这是我不习惯的。谢谢你的建议。@安杰洛.汉尼斯-是的，这是在JavaScript中习惯的东西（我记得从C++到JS的时候也在思考同样的事情）。当您习惯了这种样式后，您将发现访问父作用域、不必声明另一个外部函数、看到实际的点击代码等许多编程优势。。。然后，您将错过在其他语言中使用此功能。哪个内部功能？我看到两个them@Bergi所讨论的功能是最内部的功能。正如我所说，问题在于元素参数。
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');
};