Question

下面是一个创建和附加div HTML对象的函数的代码片段。该函数从另一个函数调用，该函数向其追加其他元素。

我发现自己编写了类似的代码，如下所示。我知道编写这段代码还有另一种更有效的方法。我应该使用什么干式设计模式？这样的对象符号更好吗？例子很棒。

function create_element_container(){
  var newElement = document.createElement('div'); //create container element
      newElement.className = 'dropped'; //add classes to container element      

  var controllerContainer = document.createElement('div');
      controllerContainer.className = 'drop-element-controls';

      newElement.appendChild(controllerContainer);//Append controller container to main div

  var controller_left = document.createElement('div');
      controller_left.className = 'drop-move-controller';

      controllerContainer.appendChild(controller_left);

      var controller_left_move = document.createElement('div');
          controller_left_move.className = 'drop-move';

            controller_left.appendChild(controller_left_move);

            var controller_left_icon = document.createElement('span');
                controller_left_icon.className = 'fa fa-question fa-lg';

                controller_left_move.appendChild(controller_left_icon);

      controllerContainer.appendChild(controller_left); //Append controller Left


  var controller_middle = document.createElement('div')
      controller_middle.className = 'drop-sortable-controller';

      controllerContainer.appendChild(controller_middle);

      var controller_middle_sortable = document.createElement('div');
          controller_middle_sortable.className = 'drop-sortable';

          controller_middle.appendChild(controller_middle_sortable);

            var controller_middle_icon = document.createElement('span');
                controller_middle_icon.className = 'fa fa-arrows fa-lg';

                controller_middle_sortable.appendChild(controller_middle_icon);

      controllerContainer.appendChild(controller_middle); //Append controller Left


  var controller_right = document.createElement('div')
      controller_right.className = 'drop-remove-controller';

      controllerContainer.appendChild(controller_right);

      var controller_right_move = document.createElement('div');
          controller_right_move.className = 'drop-remove';

          controller_right.appendChild(controller_right_move);

            var controller_right_icon = document.createElement('span');
                controller_right_icon.className = 'fa fa-remove fa-lg';

                controller_right_move.appendChild(controller_right_icon);

  return newElement;

}

Answer 1

您的代码包含以下内容：

var controllerContainer = document.createElement('div');
    controllerContainer.className = 'drop-element-controls';

    newElement.appendChild(controllerContainer);

您可能需要考虑put-selector。使用put：

var controllerContainer = put(newElement, 'div.drop-element-controls');

这样做会使该功能减少2/3。然后甚至结合调用：

put(controllerContainer, 'div.drop-move-controller div.drop-move span.fa.fa-question.fa-lg <<');

替代：

 var controller_left = document.createElement('div');
      controller_left.className = 'drop-move-controller';

      controllerContainer.appendChild(controller_left);

      var controller_left_move = document.createElement('div');
          controller_left_move.className = '';

            controller_left.appendChild(controller_left_move);

            var controller_left_icon = document.createElement('span');
                controller_left_icon.className = 'fa fa-question fa-lg';

                controller_left_move.appendChild(controller_left_icon);

      controllerContainer.appendChild(controller_left); //Append controller Left

将其减少15/16。

另一种选择是创建第一个元素：

var newElement = document.createElement('div'); //create container element
    newElement.className = 'dropped'; //add classes to container element

然后做：

newElement.innerHTML = '<div class="drop-move-controller"><div class="drop-move"><span class="fa fa-question fa-lg"></span></div></div>...';

请注意，上面的HTML仅包含div类drop-move-controller。

Answer 2

首先我会写一个createElement函数：

function createElement(tagName, className) {
    var element = document.createElement(tagName);
    element.className = className;
    return element;
}

接下来，我将重写您的create_element_container函数，如下所示：

function create_element_container() {
    var newElement = createElement("div", "dropped");

    var controllerContainer = newElement
        .appendChild(createElement("div", "drop-element-controls"));

    controllerContainer
        .appendChild(createElement("div", "drop-move-controller"))
        .appendChild(createElement("div", "drop-move"))
        .appendChild(createElement("span", "fa fa-question fa-lg"));

    controllerContainer
        .appendChild(createElement("div", "drop-sortable-controller"))
        .appendChild(createElement("div", "drop_sortable"))
        .appendChild(createElement("span", "fa fa-arrows fa-lg"));

    controllerContainer
        .appendChild(createElement("div", "drop-remove-controller"))
        .appendChild(createElement("div", "drop-remove"))
        .appendChild(createElement("div", "fa fa-remove fa-lg"));

    return newElement;
}

您可以执行此操作，因为parent.appendChild(child)会返回child元素。

Answer 3

这取决于它运行的次数。如果不是很多，那么我会准备一个DOM字符串，并使用innerHTML将所有内容放入某个容器中。这将更具可读性和可维护性。

基本示例：

function create_element_container(){
    var elm, template;

    elm = document.createElement('div'); //create container element
    elm.className = 'dropped';

    template = '<div class="something another"> \
                    <span></span> \
                </div> \
                <span class="foo"></span>';

    // this makes our template text into a real DOM elements
    elm.innerHTML = template;

    return elm;
}

Javascript DRY设计模式 - 函数与对象

3 个答案:

基本示例：