jQuery: как мне структурировать новый список, сгенерированный jQuery - PullRequest
Новая
       3

jQuery: как мне структурировать новый список, сгенерированный jQuery

0 голосов
/ 01 июня 2011

edit: Этот вопрос касается рефакторинга 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");
}
}

1 Ответ

1 голос
/ 02 июня 2011

Я не совсем уверен, в чем вопрос - моя интерпретация заключается в том, что вы просите совета по рефакторингу. Если это то, что вы ищете, вот способ, которым я бы, вероятно, реализовал те же требования: 

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() обычно должна быть первой строкой вашего обработчика, поэтому, если позднее выдается исключение, якорь все равно не будет перемещаться (проще для отладки);
  • вам не нужно указывать ни один из ваших идентификаторов элементов, поскольку у вас уже есть прямые DOM-дескрипторы;
  • ваши hrefs в идеале должны быть полезны, перенаправляя пользователя на легитимную страницу, если он щелкнет правой кнопкой мыши и сделает "открыть в новой вкладке" (использование "protectDefault" не позволит им перемещаться при обычном щелчке левой кнопкой мыши);
  • , поскольку это букмарклет, не беспокойтесь о разделении ваших стилей - вы используете jQuery, поэтому вы можете легко получить нужные вам элементы и напрямую применить свойства CSS;
  • В приведенном выше примере нет никаких переменных, кроме объекта события e - для меня это более элегантное решение, чем создание ссылки self и группы объектов коллекции (это только мое мнение).

Надеюсь, это поможет!

...