我有大约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.可能使用A,B,C,D,E和F.可能使用代码块C和G.而不是每个代码都有一个巨大的文档。 block(如果一个代码块需要与另一个代码块略有不同,对于相同的表单元素,可能会在某些时候导致错误),你如何编码呢?每个代码块有一个javascript文件似乎也很糟糕,因为它会导致每页多次点击服务器。我想我正在尝试获取一个大的javascript文件,但只在文档中初始化。已经完成了与每个页面相关的那些函数。
答案 0 :(得分:1)
在我的项目中,我已经过去为每个模块使用多个JS-Files并将它们连接到构建过程中的闭包中。这类似于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的模块中,并在其他人中收听其他初始化事件,这对我来说感觉更清洁。
但无论如何 - 有
显着改善了我的DRY-ness,甚至是我的JS代码风格。