如何将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文件，但仅在document.ready中进行初始化。准备好与每个页面相关的那些函数。

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的模块中，并聆听其他模块中的其他Initialization-Events，这对我来说有点干净。

但是无论如何-有

• 构建过程，而不是很多单个请求
• 几个小的“仅一件事”文件进入构建
• 由于我改编自jQuery本身的intro / outro-concatenation-Style，因此是一个自我增强的“顶层lambda函数”

大大改善了我的DRY风格，甚至提高了我的JS代码风格。