如何将DRY原理应用于javascript和查询

Question

我有大约30个网页，都是超文本标记语言表单。每个页面都有两个或更多不同的表单元素——选择、输入文本、复选框、文本区域——以及各种用户界面元素、弹出窗口、表单验证等。我正在尝试重构页面中使用的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');
    }
});

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

Answer 1

在我的项目中，我已经开始在每个模块中使用多个JS文件，并将它们连接到构建过程中的闭包中。这类似于jQuery在其构建过程中所做的工作（参见intro.js、outro.js）

通过这种方式，我可以在较小的文件中使用细粒度、干燥的模块，然后将它们连接起来。对于示例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.
})($);

如您所见，我使用outer函数不仅是为了保持范围干净，更重要的是，我能够在意识到当前页面/事件/…-当然，您可以找到几种更有效的方法来确定每个模块是否应该初始化自身。

在一些项目中，我有一个构建脚本，用于将这些模块连接到另一个闭包中，该闭包可能如下所示：

( 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);

在其他项目中，我可以移动<代码>$（文档）。ready（）-输入文档所在的模块。准备就绪是必要的，并且倾听其他人内部的其他初始化事件，这对我来说有点干净。

但不管怎样-拥有

• 构建过程，而不是大量的单个请求

显着改善了我的干燥度，甚至改善了我的JS代码风格。