Question

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

原帖： 我正在开发一个书签，它将HTML元素添加到页面中。我正在建立一个侧边栏，里面有一个带有ul的div。我正在尝试将我的样式与我的代码分开，并且还要编写一些内容，以便在将来需要进行更改时它们将易于管理。是否有可能重构此代码以使其更清晰/更有效？

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引用和一堆集合对象（这只是我的意见）更优雅的解决方案

希望这有帮助！

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

1 个答案: