Jquery –所见即所得的最佳结构是什么

Question

Stackoverflow 警告我，我的问题在我创建时可能是主观的，我已阅读常见问题解答，但我仍然不确定是否允许我提出。提前抱歉，如果这个问题是主观的，如果是这样的话，请关闭它。

我正在学习 jQuery，同时开发一个我想为自己创建的小工具。我是一名设计师，我希望能够预览字体在网络上的外观，以做出我的排版选择。该工具是一个类型测试器，采用所见即所得的形式。 我想创建自己的，因为现有的在线工具都不允许您更改文本的宽度，这是一个重要的功能，因为可读性还取决于每行文本上显示的字数。

我有 2 个不同的测试器，可以在选项卡下访问，以便您可以比较文本的 2 个配置。每个元素都有一个唯一的 id，我读到最有效的 jQuery 选择器是 $('#myID') 选择器。 我已经用我的 jQuery 基本知识完成了应用程序，一切正常。我不需要该应用程序在旧浏览器上运行（我使用 html5 contenteditable），因为它仅为我和设计师朋友设计，但仍想优化代码。所以我想知道这个应用程序的最佳结构是什么。

这是我的标记的简化版本：

<div class="pane">
    <div id="testercontent1" class="preview">
      <p class="editable" contenteditable="true">Here is the default placeholder text</p>
    </div>
    <div class="tools">
      <form autocomplete="off">
        <select id="fonts-tester1">
          <option value="Arial" selected="selected">Arial</option> 
          <option value="Courier New">Courier New</option> 
          <option value="Georgia">Georgia</option> 
          <option value="Times New Roman">Times New Roman</option> 
          <option value="Trebuchet MS">Trebuchet MS</option> 
          <option value="Verdana">Verdana</option> 
        </select>
        <input type="checkbox" class="bold" id="bold1" /><label>Bold</label>
        <input type="checkbox" class="italic" id="italic1" /><label>Italic</label>
        <input type="checkbox" class="uline" id="uline1" /><label>Underline</label>
        <input type="checkbox" class="allcaps" id="allcaps1" /><label>Allcaps</label>
        <input type="radio" class="pleft" name="radio1" id="pleft1" checked="checked" /><label>Alignleft</label>
        <input type="radio" class="pcenter" name="radio1" id="pcenter1" /><label>Center</label>
        <input type="radio" class="pright" name="radio1" id="pright1" /><label>Alignright</label>
        <input type="radio" class="pjustify" name="radio1" id="pjustify1" /><label>Jusitfy</label>
        <div class="type-size"><label>Size</label><input type="text" id="size1" class="spinner" value="13" /></div>
        <div class="type-leading"><label>Leading</label><input type="text" id="lineheight1" class="spinner" value="20" /></div>
        <div class="type-kerning"><label>Kerning</label><input type="text" id="kerning1" class="spinnerkerning" value="0" /></div>
        <div class="word-spacing"><label>Word spacing</label><input type="text" id="wordspacing1" class="spinnerwordspacing" value="0" /></div>
        <div class="column-width"><label>Column width</label><input type="text" id="colwidth1" class="spinnercolumn" value="600" /></div>
        <input type="button" id="resetall1" value="Reset all" />
      </form>
    </div>
</div>

<!-- This is repeated a second time with all the id numbers set to '2' -->

应用更改

这是我如何（低效地）使用我的工具集对文本应用更改的示例（我多次重复此“格式”，对于我可以在text）：

$('#uline1, #uline2').click(function(){
    var num = this.id.substr(-1);
    $('#testercontent' + num).toggleClass('previewuline');
}); 

$('#kerning1, #kerning2').change(function(){
    var num = this.id.substr(-1);
    $('#testercontent' + num).css('letter-spacing', $(this).val()+'px');
});

重置更改

此外，如果您注意到，我有一个“重置全部”按钮，可以重置我在工具集中更改的所有参数，并将文本属性“重新初始化”回默认值。为此，我将所有值更改回默认值，但我确信有一种非常有效的方法可以做到这一点（这与我应用更改的方式有关）：

$('#resetall1, #resetall2').click(function(){
    var num = this.id.substr(-1);
    $('#testercontent' + num).css('font-family', 'Arial').css('text-align', 'left').removeClass('previewbold').removeClass('previewitalic').removeClass('previewuline').removeClass('previewallcaps').css('font-size', '13px').css('line-height', '20px').css('letter-spacing', '0').css('word-spacing', '0');
    $('#bold' + num).removeAttr('disabled');
    $('#bold' + num + '-checkbox span').removeClass('disabled');
    $('#italic' + num).removeAttr('disabled');
    $('#italic' + num + '-checkbox span').removeClass('disabled');
    $('#testercontent' + num + ' p').css('width', '600px');
    $('#guide' + num).css('left', '630px');
    $('#testercontent' + num).css('color', '#000000').css('backgroundColor', '#ffffff');
    $('#typecolor-selector' + num).ColorPickerSetColor('#000000');
    $('#typecolor-selector' + num + ' div').css('backgroundColor', '#000000');
    $('#typehex' + num).attr('value', '000000');
    $('#bgcolor-selector' + num).ColorPickerSetColor('#ffffff');
    $('#bgcolor-selector' + num + ' div').css('backgroundColor', '#ffffff');
    $('#bghex' + num).attr('value', 'ffffff');
    $('#tester' + num + ' span').removeClass('checked');
    $('.pleft' + num).addClass('checked');
    $('#colwidth' + num).attr('value', '600');
    $('.ruler-off' + num).addClass('checked');
    $('#ruler' + num).hide();
    $('#guide' + num).removeClass('guide-on').css("left","670px");
    $('#tester' + num + ' form').get(0).reset();
    $.uniform.update('#tester' + num + ' select');
    $('#codebox' + num).slideUp(250);
});

我已经开始研究对象，但无法找出最好的方法满足这种特定需求的结构。 我知道我要求很多，但我只需要一个关于如何组织代码的提示（从左上角的角度）。我们将不胜感激。