jQuery：我应该如何构建由 jQuery 生成的新列表

Question

编辑：这个问题是关于 jQuery 重构的。基本上我有一大段代码，但我想看看其他人是否能想出更好的方法来重构它。由于我是 jQuery 新手，我不确定我的设计是否走在正确的轨道上

原始帖子： 我正在开发一个书签，它将 HTML 元素添加到页面中。我正在构建一个侧边栏，它是一个 div ，里面有一个 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 句柄；
• 理想情况下，您的 href 应该是有用的，如果用户右键单击并执行“在新选项卡中打开”，则将用户带到合法页面（使用“preventDefault”将阻止他们通过常规左键单击导航）；
• 因为它是一个小书签，所以不必太担心分离样式 - 您正在使用 jQuery，因此您可以轻松获取您关心的元素并直接应用 CSS 属性；
• 上面的示例除了 e 事件对象之外没有任何变量 - 对我来说，这是一个比创建 self 引用和一堆集合对象更优雅的解决方案（这只是我的意见）。

希望这有帮助！