Jquery - Какая структура лучше всего подходит для небольшого вайсвига?

Question

Stackoverflow предупреждает меня, что мой вопрос может быть субъективным, пока я его создаю, я прочитал часто задаваемые вопросы, но я все еще не уверен, что мне разрешено это задавать. Извините заранее, если этот вопрос субъективен, пожалуйста, закройте его, если это так.

Я изучаю jQuery, работая над небольшим инструментом, который хочу создать для себя. Я дизайнер, и я хочу иметь возможность просмотреть, как выглядят шрифты в Интернете, чтобы сделать свой типографский выбор. Инструмент представляет собой тестер типа в форме wysiwg. Я хочу создать свой собственный, потому что ни один из существующих онлайн-инструментов не позволяет изменять ширину текста, это важная функция, так как читаемость также зависит от количества слов, отображаемых в каждой строке текста.

У меня есть 2 разных тестера, к которым можно получить доступ во вкладках, чтобы вы могли сравнить 2 конфигурации вашего текста. Каждый элемент имеет уникальный идентификатор, я читал, что самый лучший селектор 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' -->

Применить изменения

И вот пример того, как я (неэффективно) применяю изменения к тексту с помощью моего набора инструментов (я много раз повторяю этот «формат», для каждого свойства, которое я могу изменить в тексте):

$('#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);
});

Я начал изучать объекты, но не смог найти наилучшую структуру для этой конкретной потребности. Я знаю, что я прошу много, но мне просто нужен намек на то, как я должен организовать код (с точки зрения слева вверху). Это будет с благодарностью.