jQuery：我应该如何构造一个由jQuery生成的新列表

Question

编辑：这个问题是关于jQuery重构的。基本上我有一大块代码，但我想看看其他人是否可以想出更好的方法来重构它。由于我是新来的jQuery我不知道如果我在正确的轨道或不符合我的设计

原帖： 我正在这增加HTML元素的页面书签。我正在构建一个侧栏，里面有一个ul。我试图让自己的风格与我的代码分开，并且还要编写一些东西，以便在将来需要进行更改时易于管理。是否有可能重构此代码，使其更清洁/更高效？

myObj = { 
$sidebar: {}, 
createSidebar: function() { 
    var self = this, $undo = {}, $redo = {}, $email = {}, $reset = {} 

    self.$sidebar = $("<div id='myObj-sidebar'><ul></ul></div>"); 

    $undo = $('<a></a>', { 
     id: 'sidebar-undo', 
     className: 'sidebar-item', 
     href: '#', 
     text: 'Undo', 
     click: function (e) { 
      //self.doUndo(); 
      e.preventDefault(); 
     } 
    }); 

    $redo = $('<a></a>', { 
     id: 'sidebar-redo', 
     className: 'sidebar-item', 
     href: '#', 
     text: 'Redo', 
     click: function (e) { 
      //self.doRedo(); 
      e.preventDefault(); 
     } 
    }); 

    $email = $('<a></a>', { 
     id: 'sidebar-change-email', 
     className: 'sidebar-item', 
     href: '#', 
     text: 'Change E-Mail', 
     click: function (e) { 
      //self.createEmailDialog(); 
      e.preventDefault(); 
     } 
    }); 

    $reset = $('<a></a>', { 
     id: 'sidebar-reset-all', 
     className: 'sidebar-item', 
     href: '#', 
     text: 'Reset All', 
     click: function (e) { 
      //self.doReset(); 
      e.preventDefault(); 
     } 
    }); 

    self.$sidebar.find('ul').append($undo, $redo, $email, $reset); 
    self.$sidebar.find('.sidebar-item').wrap('<li/>'); 
    self.$sidebar.appendTo("body"); 
} 
} 

Answer 1

我不太确定问题是什么 - 我的理解是你要求重构建议。如果这是你在找什么，这里的路我可能会实现相同的要求：

jQuery('<div><ul></ul></div>') 
    .appendTo("body") 
    .css({ 
    background: "white", 
    left: 0, 
    position: "absolute", 
    textAlign: "left", 
    top: '50%' 
    }) 
    .find('ul') 
    .css({ 
     listStyleType: 'none', 
     margin: 0, 
     padding: 0 
    }) 
    .append('<li><a href="" class="sidebar-undo">Undo</a></li>') 
    .find('.sidebar-undo') 
     .click(function(e){ 
     e.preventDefault(); 
     // your 'undo' code 
     }) 
     .end() 
    .append('<li><a href="" class="sidebar-redo">Redo</a></li>') 
    .find('.sidebar-redo') 
     .click(function(e){ 
     e.preventDefault(); 
     // your 'redo' code 
     }) 
     .end() 
    .append('<li><a href="" class="sidebar-changeEmail">Change E-Mail</a></li>') 
    .find('.sidebar-changeEmail') 
     .click(function(e){ 
     e.preventDefault(); 
     // your 'changeEmail' code 
     }) 
     .end() 
    .append('<li><a href="" class="sidebar-doReset">Reset All</a></li>') 
    .find('.sidebar-doReset') 
     .click(function(e){ 
     e.preventDefault(); 
     // your doReset code 
     }) 
     .end() 
    .find('li') 
     .css({ 
     padding: '0.5em' 
     }) 
     .end() 
    .find('a') 
     .css({ 
     background: "whatever", 
     color: "etc" 
     }); 

注：

• e.preventDefault()一般应处理程序的第一行，这样，如果稍后会引发异常，锚点仍然无法导航（更易于调试）;
• 您不需要提供任何元素ID，因为您已经对所有内容都有直接的DOM处理;
• 你的hrefs理想情况下应该是有用的，如果用户右键单击并执行“在新选项卡中打开”（使用“preventDefault”将阻止他们远离正常的左键单击）;
• 因为它是一个小书签，所以不要过多地关心分离出你的样式 - 你使用的是jQuery，所以你可以很容易地抓住你关心的元素并直接应用CSS属性;
• 上面的例子除了e事件对象之外没有其他变量 - 对我来说，这是一个比创建self引用和一堆集合对象（这只是我的观点）更优雅的解决方案。

希望这有助于！