关于许多DOM方法重构JavaScript代码

Question

I'm a beginner in JavaScript, and i'm writing a simple To-do list application. That accepts user input and adds it as a task in a form of a checkbox .

The problem is that, the code has become more and more repetitive, I tried to make functions for the most repeating parts. But i feel that there's a better way to do that using some kind of DOM native functions.

Here's my code (i'm writing a comment where i feel that there're better choice to make):

window.onload = function(){
    submitBtn.addEventListener("click", function(){ 

         //Some code ...                

        var task = document.createElement("input"); 
        task.id = "task" + i;
        task.type = "checkbox"; 

        var taskLabel = document.createElement("label"); 
        taskLabel.htmlFor = "task" + i;
        taskLabel.appendChild(document.createTextNode(textBox.value));

         //This is from a function i've created to create buttons
        var deleteBtn = createButton("delete");
        var undoBtn = createButton("undo", "none");
        var divideBtn = createButton("divide");

        var taskContainer = document.createElement("p"); 

        //A LOT of appendChild is happening .. How can i minimize that using 
        //native DOM methods
        taskContainer.appendChild(task); 
        taskContainer.appendChild(taskLabel);
        taskContainer.appendChild(deleteBtn);
        taskContainer.appendChild(divideBtn);
        taskContainer.appendChild(undoBtn);

        taskPool.appendChild(taskContainer);        

         //the rest of the code ....



    }); 


}

Answer 1

This is the reason most people use jQuery and template systems like Handlebars or Mustache. It's actually a lot faster, not to mention cleaner to implement and thus easier to maintain, to simply insert your complete view block into the DOM instead of manually creating the individual DOM elements and appending them one by one.

The recommended way to manipulate the DOM using jQuery is to do something like:

var taskName = 'task'+i,
    taskLabel = textBox.value,
    taskHtml =
        '<div>
            <input type="checkbox" name="'+taskName+'">
            <label for="'+taskNAme+'">'+taskLabel+'</label>
            <fieldset>
                <button id="btnDel'+i+'">Delete</button>
                <button id="btnDiv'+i+'">Divide</button>
                <button id="btnUndo'+i+'">Undo</button>
            </fieldset>
        </div>';
$(taskHtml).appendTo('#TaskPool');

Creating large DOM constructs in a single go through innerHTML is a lot faster than manually creating and appending the individual elements.

However, this still requires mixing HTML and JS, which is pretty ugly. So that's why these days developers opt for templates, which allow you to do something like:

<script id="task-template" type="text/x-handlebars-template">
    <div>
        <input type="checkbox" name="task{{i}}">
        <label for="task{{i}}">{{label}}</label>
        <fieldset>
            <button id="btnDel{{i}}">Delete</button>
            <button id="btnDiv{{i}}">Divide</button>
            <button id="btnUndo{{i}}">Undo</button>
        </fieldset>
    </div>
</script>

Then in your click handler:

var source = $("#task-template").html(),
    template = Handlebars.compile(source),
    context = {
      i: i,
      label: textBox.value
    },
    html = template(context);
$('#TaskPool').append(html);

And from there, you can take it one step further and add two-way data binding, such as through Angular.js, Kockout.js or jsViews (+ jsRender). Then you just have something like this:

<ol id="TasksList">
    <li ng-repeat="task in tasks | orderBy:orderProp">
        <input type="checkbox" name="{{task.name}}" ng:model="task.checked">
        <label for="{{task.name}}">{{task.label}}</label>
        <fieldset>
            <button ng-click="deleteTask(task.id)">Delete</button>
            <button ng-click="divideTask(task.id)">Divide</button>
            <button ng-click="undoTask(task.id)">Undo</button>
        </fieldset>
    </li>            
</ol>

And in your controller:

$scope.orderProp = 'id';
$scope.nextId = 0;
$scope.addTask = function(label) {
    var id = $scope.nextId++,
        task = {
            id: id,
            label: label,
            name: 'task'+id,
            checked: false
        };
    $scope.tasks.push(task);
};
$scope.deleteTask = function(id) { ... };
$scope.divideTask = function(id) { ... };
$scope.undoTask = function(id) { ... };

Answer 2

If you want to minimize your code wherever you can then using a library like jquery would be one of your best options.

However, if in this case you'd prefer to stick to 'pure' javascript, you could avoid all the appends up there, by adding a method to the Node object of the DOM similar to this one:

/* is Node.prototype.multiAppend already defined? */
if( typeof Node.prototype.multiAppend !== "function" ) {
    Node.prototype.multiAppend = (function() {
        /*get the Array.prototype.slice method to use on the returned function*/
        var slice = [].slice;

        /*the function multiAppend comes to be*/
        return function() {
            var i = 0,
                max = arguments.length;

            for (; i < max; i++) {
                this.appendChild(arguments[i]);
            }

            /*allow chainability*/
            return this;
        };
    })();
}

This would allow you to do something like this:

var item = document.getElementsByClassName('item')[0],

    /*create elements*/
    h1 = document.createElement("h1"),
    div = document.createElement("div"),
    p = document.createElement("p");

    /*append them to item with just one line*/
    item.multiAppend(h1, div, p)​​​;​​​​​

Take a look at the demo here: http://jsfiddle.net/8mjBR/2/ *