javascript - 如何将 DRY 原则应用于 JavaScript 和查询

Question

我有大约 30 个网页，它们都是 HTML 表单。每个页面都有两个或更多不同的表单元素——选择、输入文本、复选框、文本区域——以及各种 ui 元素、弹出窗口、表单验证等。我正在尝试重构页面中使用的 jquery 以使用 DRY 原则，但是我不知道该怎么做。这里是一些使用的 jquery 的例子:

示例代码块 A:

    $(".show-tool", _container).mouseover(function() {
        $(this).nextAll(":hidden").css('display','block');
    });

示例代码块 B:

$(".optional").blur(function(){
    if ($(this).val() == '') 
    { 
        $(this).addClass('optional'); 
        $(this).val('(Optional)');
    }
});

示例代码块 C:

$('.howtoremain').click(function() {
    $('.hiddendiv').slideToggle("10000");
    if($(this).hasClass('howtoremain')) {
        $(this).removeClass('howtoremain').addClass('howtoremain2');
    }
    else {
        $(this).removeClass('howtoremain2').addClass('howtoremain');
    }
});

所有这些都包含在 document.ready 中。上面的实际代码列表并不相关。我试图让每个 HTML 页面只包含相关的 jquery 代码。例如，第 1 页可能使用代码块 A 和 B。第 2 页可能使用 A、B、C、D、E 和 F。第 3 页可能使用代码块 C 和 G。而不是一个巨大的文档。准备好每个代码块(如果对于同一表单元素，一个代码块需要与另一个代码块略有不同，这可能会在某些时候导致错误)，你如何编写这个代码？每个代码块有一个 javascript 文件似乎也很糟糕，因为它会导致每个页面多次点击服务器。我想我正在尝试获取一个大的 javascript 文件，但只在文档中初始化。准备好与每个页面相关的那些函数。

Answer 1

在我的项目中，我转而使用每个模块的多个 JS 文件，并在构建过程中将它们连接成一个闭包。这类似于 jQuery 在其构建过程中所做的(参见 intro.js、outro.js)

这样，我可以在较小的文件中使用细粒度的 DRY 模块，然后将它们连接起来。对于您的示例 B，典型的单个模块文件可能如下所示:

( function($) {
    var subjects = $('.optional');
    if ( subjects.length === 0 ) {
        // this is a knockout criteria for this module, thus exit this enclosed function
        return;
    }

    subjects.blur(function(){
        if ($(this).val() == '') 
        { 
            $(this).addClass('optional'); 
            $(this).val('(Optional)');
        }
    });

    // now use whatever you need to initialise.
})($);

如您所见，我使用外部函数不仅是为了保持我的作用域干净，更重要的是，当我意识到当前页面/事件不需要它时能够立即取消模块的初始化/... - 当然，您可能会找到几种更有效的方法来确定每个模块是否应该自行初始化。

在一些项目中，我有一个构建脚本来将这些模块连接到另一个闭包中，它可能看起来像这样:

( function( window ) {
    var $ = window.jQuery; //call me paranoid, but I like my vars clean
    $(document).ready( function() {
        // stuff the modules here, one after another, in any sensible order.
    });
}(window);

在其他项目中，我能够将 $(document).ready()-Bit 移动到需要 document.ready 的模块中，并在其他项目中监听其他 Initialisation-Events，这对我来说感觉更干净一些。

但无论如何 - 拥有

• 构建过程而不是大量的单个请求
• 几个小的、“只有一件事”的文件要进入构建
• 由于我从 jQuery 本身改编的 intro/outro-Concatenation-Style，一个 self 执行的“顶级 lambda 函数”

显着改善了我的 DRY-ness，甚至改善了我的 JS 代码风格。