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

Javascript DRY Design Patterns - Functions vs Object

本文关键字：对象 函数 DRY 设计模式 Javascript      更新时间：2023-09-26

下面是一个创建并附加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;
}

首先我要编写一个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元素。

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

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仅包括具有类drop-move-controller的div。

这取决于它将运行多少次。如果不是很多，那么我将准备一个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;
}
相关文章：