Question

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

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

我有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' -->

应用更改

以下是我（无效率）如何使用我的工具集对文本进行更改的示例（我重复这个“格式”，对于我可以在文本上更改的每个属性）：

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

我已开始研究对象，但无法找到满足此特定需求的最佳结构。我知道我要求很多，但我只需要提示我应该如何组织代码（从左上角看）。非常感谢。

Jquery - 什么是一个小的所见即所得的最佳结构

应用更改

重置更改

0 个答案: