Javascript DRI 设计模式 - 函数和对象

Question

下面是创建和附加 div HTML 对象的函数的代码 sn-p。该函数是从另一个函数调用的，该函数将附加元素附加到它。

我发现自己正在编写如下所示的类似代码。我知道必须有另一种更有效的方式来编写这段代码。我应该使用什么枯燥的设计模式？对象表示法是否更适合这样的事情？例子会很棒。

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

首先我会写一个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 2

您的代码由以下重复组成：

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 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;
}