Javascript如何实现独立组件？

Question

我已经实现了简单的待办事项列表 http://jsfiddle.net/tw9p9sw3/，可能有 add/remove 待办事项。

    (function (todoApp) {
    'use strict';

    todoApp.todoItemValue = '';

    function _appendListNode() {
        var listNode = document.createElement('li');
        listNode.className = 'list-group-item';
        listNode.appendChild(document.createTextNode(todoApp.todoItemValue));
        listNode.appendChild(_createRemoveItemButton());
        todoList.appendChild(listNode);
    }

    function _createRemoveItemButton() {
        var removeButtonNode = document.createElement('a'),
            removeButtonLabel = 'Remove';

        removeButtonNode.className = 'badge';
        removeButtonNode.appendChild(document.createTextNode(removeButtonLabel));

        return removeButtonNode;
    }

    function _addItem() {
        todoApp.todoItemValue = document.getElementById('todoInput').value;
        _appendListNode();
        document.getElementById('todoInput').value = '';
    }

    function _removeItem() {
        var nodeToRemove = this.parentNode;
        this.parentNode.parentNode.removeChild(nodeToRemove);
    }

    function _addEventHandlers() {
        document.getElementById('todoListForm').addEventListener('submit', function (event) {
            event.preventDefault();
            _addItem();
        });

        /*
         * Used delegated event cause todo list is not static,
         * so we don't need to add events for remove buttons each time after DOM of todo list have changed
         */
        document.getElementById('todoList').addEventListener('click', function (event) {
            if (event.target && event.target.nodeName === 'A') {
                event.preventDefault();
                _removeItem.call(event.target);
            }
        });
    }

    todoApp.init = function () {
        _addEventHandlers();
    };

}(window.todoApp = window.todoApp || {}));

//////////////////////////////////////////////////////////
// INITIALIZATION
//////////////////////////////////////////////////////////
document.onload = todoApp.init();

问题是如何将此待办事项列表重新制作为独立组件，例如，我可以 inject/instanciate 在同一页面上两次，并且待办事项列表实例之间应该没有冲突。

Answer 1

基本上你需要创建 TodoList class，所以你可以创建这个 class 的实例，正如评论中建议的那样使用 OO 编程。

代码如下：

var TodoListComponent = (function () {
    'use strict';

    var todoListTemplate =  '<div>' +
        '<div class="todo-list">' + 
        '<div class="form-container">' +
        '<form role="form" class="todoListForm">' + 
            '<div class="form-group">' +
                '<label for="todoInput">Add todo item</label>' +
                '<input type="text" class="form-control todoInput" required>' +
            '</div>' +
            '<button type="submit" class="btn btn-success">Submit</button>' +
        '</form>' +
    '</div>' +
    '<div class="list-container">' +
        '<ul class="list-group todoList">' + 
            '<li class="list-group-item list-group-item-success">Todo list</li>' +
       '</ul>' +
   '</div>' +
   '</div>' +
   '</div>';

    function TodoList() {

        this.initialize = function() {
            this.$el = $(todoListTemplate);
            this.todoItemValue = '';
            this._initEvents();
        }

        this._initEvents = function() {
            var self = this;

            this.$el.find('.todoListForm').on('submit', function (event) {
                event.preventDefault();
                self._addItem();
            });

            /*
             * Used delegated event cause todo list is not static,
             * so we don't need to add events for remove buttons each time after DOM of todo list have changed
             */
            this.$el.find('.todoList').on('click', function (event) {
                if (event.target && event.target.nodeName === 'A') {
                    event.preventDefault();
                    self._removeItem.call(event.target);
                }
            });
        }

        this._appendListNode = function () {
            var listNode = $('<li>');
            listNode.addClass('list-group-item');
            listNode.text(this.todoItemValue);
            listNode.append(this._createRemoveItemButton());
           this.$el.find('.todoList').append(listNode);
        }

        this._createRemoveItemButton = function () {
            var removeButtonNode = $('<a>'),
                removeButtonLabel = 'Remove';

            removeButtonNode.addClass('badge');
            removeButtonNode.text(removeButtonLabel);

            return removeButtonNode;
        }

        this._addItem = function() {
            var input = this.$el.find('.todoInput');
            this.todoItemValue = input.val();
            this._appendListNode();
            input.val('');
        }

        this._removeItem = function() {
            var nodeToRemove = this.parentNode;
            this.parentNode.parentNode.removeChild(nodeToRemove);
        }

         this.render = function() {
             return this;
         }

        this.initialize();
    }

    return TodoList;
}());

//////////////////////////////////////////////////////////
// INITIALIZATION
//////////////////////////////////////////////////////////

var todoList1 = new TodoListComponent();
var todoList2 = new TodoListComponent();

$('body').append(todoList1.render().$el);
$('body').append(todoList2.render().$el);

和 jsfiddle link：http://jsfiddle.net/tw9p9sw3/10/

这行得通，但是如果你想使用数据，将项目发送到某个地方或其他地方，那么你可能会通过 DOM 获得它，这又糟糕又混乱。

尝试使用Backbone，其中DOM仅用于表示，数据由Javascript持有。

示例如下：

http://backbonejs.org/docs/todos.html

Javascript如何实现独立组件？

How to implement independent component in Javascript?

javascript

components

modularity