帮我看看我写的代码有什么需要改进的，求助求助

Question

这是一个任务清单，不知道还有什么可以改进的地方，特别是编码方式啊，帮我看看

function ToDolist(){
    this.addItem = $('#add-item');
    this.section = $('.section');
    this.list = $('.list-container .list');
    this.complateElem = $('.complate');
    this.footer = $('.section-footer');
    this.title = $('.title');  
    this.eventType = 'click';
    this.localStorage = window.localStorage;
    this.localStorageNextLength = localStorage.length;


    this.init();
}    

ToDolist.prototype = {
    init : function(){
        var This = this;
        var array = this.getAllLocalStorage();

        // console.log(array);
        // this.localStorage.clear();
        this.pushLocalStorageToDom(array);

        //    给回车按键绑定新增事项事件
        this.addItem.on('keydown', function(event){
            if(event.keyCode === 13){
                This.add();
            }
        });
        //    给销毁按钮绑定销毁事件
        this.section.delegate('.destroy', this.eventType, function(event) {
            var parentLi = $(event.currentTarget).parents('li');
            This.del(parentLi);

        });
        //    给完成按钮绑定完成事件
        this.section.delegate('.toggle', this.eventType, function(event) {
            var parentLi = $(event.currentTarget).parents('li');
            This.complate(parentLi);
    
        });
        //    给完成的事项绑定回撤事件
        this.section.delegate('.complate .toggle', this.eventType, function(event) {
            var parentLi = $(event.currentTarget).parents('li');
            This.reset(parentLi);
        });
        //    显示完成的事项
        this.title.on('click', function(){
            This.show(This.complateElem);
        });
    },
    add : function(){
        var Item = {
            "complate" : 0,
            "itemId" : ++this.localStorageNextLength,
            "addTime" : new Date().getTime(),
            "data" : this.addItem.val()
        };
    
        var json = JSON.stringify(Item);//将JSON对象转化成字符串
        this.saveTolocalStorage(json);

        var itemHtml = '<li data-id="' + this.localStorageNextLength + '">' + '<div class="view">' + '<input class="toggle" type="checkbox">' + '<label>' + Item.data + '</label>' + '<input type="button" class="destroy" value="销毁">' + '</div>' + '</li>';
        //    将拼接的事项插入到列表中，并且清空输入框
        this.list.append(itemHtml);
        this.addItem.val("");
    },
    del : function(elem){
        var localStorageId = 0;
        elem.remove();
        this.localStorageNextLength--;
        localStorageId = elem.attr('data-id');
        this.removeLocalStorageItem(localStorageId);
    },
    show : function(elem){
        if($(elem).is(':visible')){
            $(elem).hide();
        }else{
            $(elem).show();
        }
    },
    complate : function(elem){
        elem.addClass('complate');
        this.footer.find('.list').append(elem);
        var id = elem.attr('data-id');
        var data = elem.find('label').html();

        this.updataLocalStorage(id, data, "complate");
    },
    reset : function(elem){
        elem.removeClass('complate');
        this.list.append(elem);

        var id = elem.attr('data-id');
        var data = elem.find('label').html();

        this.updataLocalStorage(id, data, "reset");
    },
    saveTolocalStorage : function(json){
        this.localStorage.setItem('item' + this.localStorageNextLength, json);
    },
    getLocalStorage : function(key){
        return this.localStorage.getItem(key);
    },
    getAllLocalStorage : function(){
        var i = 0;
        var temp = null;
        var array = [];

        //    这里从1开始循环是因为存储到locaStorage的key是从1开始的
        for(var item in this.localStorage){
            temp = this.getLocalStorage(item);
            temp = JSON.parse(temp);

            if(temp){
                array.push(temp);
            }
        }
        return array;
    },
    removeLocalStorageItem : function(id){
        //////////////////////////////////////////////
        // 删除localStorage项就报错
        // console.log(id);
        this.localStorage.removeItem('item' + id);
        if(this.localStorage.length >= 1){
            this.resetLocalStorageKey(id);
        }
        
    },
    pushLocalStorageToDom : function(array){
        var i = 0;
        var len = array.length;
        var elemHtml = '';
        var complateHtml = "";
        var tempId = 0;

        for(i = 0; i < len; i++){
            if(!array[i]['complate']){
                elemHtml += '<li data-id="' + array[i].itemId + '">' + '<div class="view">' + '<input class="toggle" type="checkbox">' + '<label>' + array[i].data + '</label>' + '<input type="button" class="destroy" value="销毁">' + '</div>' + '</li>';
            }else{
                complateHtml += '<li class="complate" data-id="' + array[i].itemId + '">' + '<div class="view">' + '<input class="toggle" type="checkbox" checked="checked">' + '<label>' + array[i].data + '</label>' + '<input type="button" class="destroy" value="销毁">' + '</div>' + '</li>';
            }
        }
        this.list.append(elemHtml);
        this.footer.find('.list').append(complateHtml);
    },
    updataLocalStorage : function(id, data, type){
        type = type === 'reset' ? 0 : 1;

        var Item = {
            "complate" : type,
            "itemId" : id,
            "addTime" : new Date().getTime(),
            "data" : data
        };
        var json = JSON.stringify(Item);//将JSON对象转化成字符串
        this.localStorage.setItem('item' + id, json);
    },
    resetLocalStorageKey : function(id){
        var temp = null;
        var array = [];
        var json = null;
        
        id++;
        

        //    每次销毁事件触发时，对localStorage中的数据项key进行重排
        //    循环将后面的数据项key前移
        for(var i = id, j = i; i <= this.localStorageNextLength + 1; i++){

            j = i - 1;
            json = {};

            temp = JSON.parse(this.localStorage.getItem('item' + i));
            json.complate = temp.complate;
            json.itemId = --temp.itemId;
            json.addTime = temp.addTime;
            json.data = temp.data;
            console.log(json);
            json = JSON.stringify(json);
            
            this.localStorage.setItem("item" + j, json);
        }
        this.localStorage.removeItem("item" + (this.localStorageNextLength + 1));
        
    }
};
var toDolist = new ToDolist();

Answer 1

和DOM操作耦合台紧密，推荐使用JQuery插件开发的方式
将DOM元素和针对DOM执行的回调函数分离

$('.todoList').toDoList({
    keyDome:function(){
    ....
    },
    click:function(){
    ...
    }
});

Answer 2

楼主发github吧别个可以fork提交自己的review

Answer 3

this.addItem = $('#add-item');
this.section = $('.section');
this.list = $('.list-container .list');
this.complateElem = $('.complate');
this.footer = $('.section-footer');
this.title = $('.title');  
this.eventType = 'click';
this.localStorage = window.localStorage;
this.localStorageNextLength = localStorage.length;


//这一块东西其他可以用一个对象去配置他，暴露一个参数出去。例如 opt
//可以有默认的一个参数  default_opt={},在prototype 里面  定义一个 getopt()  枚举 opt，防止以后类名变化导致这些函数不可用。