代码太长且重复，ISO短缺(Too long and repetitive code, ISO shorthands)

我正在尝试使用jQuery制作谷歌浏览器扩展程序。现在，这是有效的，但它太长了（它不是“少写更多”）。所以我正在寻找一些速记。这是一个做了什么

// max-width function from http://www.labs.skengdon.com/maxSize ;(function($){$.fn.maxSize=function(options){if(typeof options!=='object'){var options={width:options,height:options}};return this.each(function(){$img=$(this);var F;var FW=0;var FH=0;if(options.width){FW=$img.width()/options.width;F=1;};if(options.height){FH=$img.height()/options.height;F=0;};if(FW&&FH){F=FW/FH;};if((F>=1)&&(FW>=1)){$(this).width(options.width);};if((F<=1)&&(FH>=1)){$(this).height(options.height);};});};})(jQuery); // this insert divs $('ol.floatcontainer').filter(':contains(Images)').after('<div id="wrapper" class="wrapper" name="wrapper"><div id="scroll" class="scroll" ></div><div id="big" class="big" name="big"><div id="loader" class="loading"></div></div><div id="footer" class="footer" name="footer"><p class="url"></p></div></div>'); $('#wrapper').css({"background-color":"#FFFFFF","margin":"0"}); $('.scroll').css({"background-color":"#ccc","padding":"0px"}); $('#big').css({"background-color":"#ddd","clear":"left"});//,"padding":"20px" $('#footer').css({"background-color":"#eee","height":"1%"});

现在是我重复第16次的loooong和可怕的代码

if ($('.forumrow table').find('img:eq(0)').filter('img[src*="thumbs"]').length > 0) { $('.forumrow table').find('img:eq(0)').live("click",function(event) { event.preventDefault(); $('div.sc_menu').show(); $('#wrapper').css({"background-color":"#FFFFFF","margin":"0"}); $('#scroll').css({"background-color":"#ccc"});//,"padding":"20px" $('#big').css({"background-color":"#ddd","clear":"left","padding":"0px"});//"width":"500px","height":"375px" $('#footer').css({"background-color":"#eee","height":"1%"}); $('div#loader').css({"width":"500px","height":"375px","overflow":"hidden"}); $('div#loader.loading').css({"background":"url(http://i.imgur.com/pOA7f.gif) no-repeat center center"}); var linkim1 = $(".forumrow table a:has(img):eq(0)").attr('href'); var imsrc1 = $('.forumrow table').find('img:eq(0)').attr('src'); var imsrc1sp = imsrc1.split(/thumbs/); var imsrc1spdes = imsrc1sp[1]; var imsrc1spsin = imsrc1sp[0]; $(function () { $('#loader').empty(); $('#loader').addClass('loading'); var img = new Image();//var img = new Image(500,375); $(img).load(function () { $(this).css('display', 'none'); $('#loader').removeClass('loading').append(this); $(this).fadeIn(); $(this).maxSize({ width: 500, height: 375 }); }).error(function () { var imsrc1nntr = imsrc1spdes.split(/\//)[1]; var big1nntr = imsrc1spsin + imsrc1nntr; $('#loader').empty(); $('#loader').addClass('loading'); var img = new Image(); $(img).load(function () { $(this).css('display', 'none'); $('#loader').removeClass('loading').append(this); $(this).fadeIn(); $(this).maxSize({ width: 500, height: 375 }); }).attr('src', big1nntr); $('.url').replaceWith('<p class="url"><br />Image<br /><input class="primary textbox" type="text" name="bbcode" value="[img]'+imsrc1spsin+''+imsrc1nntr+'[/img]" size="70" onclick="this.focus();this.select()"><br />Linked Image<br /><input class="primary textbox" type="text" name="bbcode" value="[url=' +linkim1+ '][img]'+imsrc1spsin+''+imsrc1nntr+'[/img][/url]" size="70" onclick="this.focus();this.select()"></p>'); }).attr('src', imsrc1spsin+'medium'+imsrc1spdes); $('#loader').wrap('<a href="' +linkimm1+ '"></a>'); $('.url').replaceWith('<p class="url"><br />Image<br /><input class="primary textbox" type="text" name="bbcode" value="[img]'+imsrc1spsin+'medium'+imsrc1spdes+'[/img]" size="70" onclick="this.focus();this.select()"><br />Linked Image<br /><input class="primary textbox" type="text" name="bbcode" value="[url=' +linkim1+ '][img]'+imsrc1spsin+'medium'+imsrc1spdes+'[/img][/url]" size="70" onclick="this.focus();this.select()"></p>'); }); $('img[src*="thumbs"]').css("-webkit-box-shadow","0px 0px 0px black, 0px 0px 0px black"); $(this).css("-webkit-box-shadow","2px 2px 2px black, 2px 1px 10px black"); }); //end first if }

现在这就是我重复的事了

if ($('.forumrow table').find('img:eq(1)').filter('img[src*="thumbs"]').length > 0) { $('.forumrow table').find('img:eq(1)').live("click",function(event) { event.preventDefault(); $('div.sc_menu').show(); $('#wrapper').css({"background-color":"#FFFFFF","margin":"0"}); $('#scroll').css({"background-color":"#ccc"});//,"padding":"20px" $('#big').css({"background-color":"#ddd","clear":"left","padding":"0px"});//"width":"500px","height":"375px" $('#footer').css({"background-color":"#eee","height":"1%"}); $('div#loader').css({"width":"500px","height":"375px","overflow":"hidden"}); $('div#loader.loading').css({"background":"url(http://i.imgur.com/pOA7f.gif) no-repeat center center"}); var linkim2 = $(".forumrow table a:has(img):eq(1)").attr('href'); var imsrc2 = $('.forumrow table').find('img:eq(1)').attr('src'); var imsrc2sp = imsrc2.split(/thumbs/); var imsrc2spdes = imsrc2sp[1]; var imsrc2spsin = imsrc2sp[0]; $(function () { $('#loader').empty(); $('#loader').addClass('loading'); var img = new Image();//var img = new Image(500,375); $(img).load(function () { $(this).css('display', 'none'); $('#loader').removeClass('loading').append(this); $(this).fadeIn(); $(this).maxSize({ width: 500, height: 375 }); }).error(function () { var imsrc2nntr = imsrc2spdes.split(/\//)[1]; var big2nntr = imsrc2spsin + imsrc2nntr; $('#loader').empty(); $('#loader').addClass('loading'); var img = new Image(); $(img).load(function () { $(this).css('display', 'none'); $('#loader').removeClass('loading').append(this); $(this).fadeIn(); $(this).maxSize({ width: 500, height: 375 }); }).attr('src', big2nntr); $('.url').replaceWith('<p class="url"><br />Image<br /><input class="primary textbox" type="text" name="bbcode" value="[img]'+imsrc2spsin+''+imsrc2nntr+'[/img]" size="70" onclick="this.focus();this.select()"><br />Linked Image<br /><input class="primary textbox" type="text" name="bbcode" value="[url=' +linkim2+ '][img]'+imsrc2spsin+''+imsrc2nntr+'[/img][/url]" size="70" onclick="this.focus();this.select()"></p>'); }).attr('src', imsrc2spsin+'medium'+imsrc2spdes); $('#loader').wrap('<a href="' +linkimm2+ '"></a>'); $('.url').replaceWith('<p class="url"><br />Image<br /><input class="primary textbox" type="text" name="bbcode" value="[img]'+imsrc2spsin+'medium'+imsrc2spdes+'[/img]" size="70" onclick="this.focus();this.select()"><br />Linked Image<br /><input class="primary textbox" type="text" name="bbcode" value="[url=' +linkim2+ '][img]'+imsrc2spsin+'medium'+imsrc1spdes+'[/img][/url]" size="70" onclick="this.focus();this.select()"></p>'); }); $('img[src*="thumbs"]').css("-webkit-box-shadow","0px 0px 0px black, 0px 0px 0px black"); $(this).css("-webkit-box-shadow","2px 2px 2px black, 2px 1px 10px black"); }); //end second if }

有没有办法不重复这个第16次？也许是短线或功能？

I'm trying to make a google chrome extension using jQuery. Now, this is working but it's too long (it isn't "write less do more"). So I'm looking for some shorthand. This is what a did

Now the loooong and horrible code that I repeat 16th times

Now this is what I repeat i.e.

Is there a way for don't repeat this 16th times? Maybe shorthands or functions?

最满意答案

如何使用数组，函数和for循环？不会大幅提高可读性，但会减少复制意大利面。：d

imgsrc = new Array(); .... function magic (index) { if ($('.forumrow table').find('img:eq(' + index + ')').filter('img[src*="thumbs"]').length > 0) { $('.forumrow table').find('img:eq($index)').live("click",function(event) { event.preventDefault(); $('div.sc_menu').show(); $('#wrapper').css({"background-color":"#FFFFFF","margin":"0"}); $('#scroll').css({"background-color":"#ccc"});//,"padding":"20px" $('#big').css({"background-color":"#ddd","clear":"left","padding":"0px"});//"width":"500px","height":"375px" $('#footer').css({"background-color":"#eee","height":"1%"}); $('div#loader').css({"width":"500px","height":"375px","overflow":"hidden"}); $('div#loader.loading').css({"background":"url(http://i.imgur.com/pOA7f.gif) no-repeat center center"}); var linkim[$index] = $(".forumrow table a:has(img):eq(" + index + ")").attr('href'); var imsrc[$index] = $('.forumrow table').find('img:eq(' + index + ' . ')').attr('src'); var imsrcsp[index] = imsrc[index].split(/thumbs/); var imsrcspdes[index] = imsrcsp[index][1]; var imsrcspsin[index] = imsrc2sp[index][0]; $(function () { $('#loader').empty(); $('#loader').addClass('loading'); var img = new Image();//var img = new Image(500,375); $(img).load(function () { $(this).css('display', 'none'); $('#loader').removeClass('loading').append(this); $(this).fadeIn(); $(this).maxSize({ width: 500, height: 375 }); } }).error(function () { var imsrc2nntr = imsrc2spdes.split(/\//)[1]; var big2nntr = imsrc2spsin + imsrc2nntr; $('#loader').empty(); $('#loader').addClass('loading'); var img = new Image(); $(img).load(function () { $(this).css('display', 'none'); $('#loader').removeClass('loading').append(this); $(this).fadeIn(); $(this).maxSize({ width: 500, height: 375 }); }).attr('src', big2nntr); $('.url').replaceWith('<p class="url"><br />Image<br /><input class="primary textbox" type="text" name="bbcode" value="[img]'+imsrc2spsin+''+imsrc2nntr+'[/img]" size="70" onclick="this.focus();this.select()"><br />Linked Image<br /><input class="primary textbox" type="text" name="bbcode" value="[url=' +linkim2+ '][img]'+imsrc2spsin+''+imsrc2nntr+'[/img][/url]" size="70" onclick="this.focus();this.select()"></p>'); }).attr('src', imsrc2spsin+'medium'+imsrc2spdes); $('#loader').wrap('<a href="' +linkimm2+ '"></a>'); $('.url').replaceWith('<p class="url"><br />Image<br /><input class="primary textbox" type="text" name="bbcode" value="[img]'+imsrc2spsin+'medium'+imsrc2spdes+'[/img]" size="70" onclick="this.focus();this.select()"><br />Linked Image<br /><input class="primary textbox" type="text" name="bbcode" value="[url=' +linkim2+ '][img]'+imsrc2spsin+'medium'+imsrc1spdes+'[/img][/url]" size="70" onclick="this.focus();this.select()"></p>'); }); $('img[src*="thumbs"]').css("-webkit-box-shadow","0px 0px 0px black, 0px 0px 0px black"); $(this).css("-webkit-box-shadow","2px 2px 2px black, 2px 1px 10px black"); }); //end second if } for (i=0; i<16; i++) { magic(i); }

How about using arrays, a function, and a for loop? Doesn't improve readability a whole lot, but cuts down on the copy pasta. :D

更多推荐