javascript - 帮我看看我写的代码有什么需要改进的,求助求助
天蓬老师
天蓬老师 2017-04-10 18:06:28
[JavaScript讨论组]

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

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 = '
  • ' + '

    ' + '' + '' + '' + '

    ' + '
  • '; // 将拼接的事项插入到列表中,并且清空输入框 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 += '
  • ' + '

    ' + '' + '' + '' + '

    ' + '
  • '; }else{ complateHtml += '
  • ' + '

    ' + '' + '' + '' + '

    ' + '
  • '; } } 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();
    天蓬老师
    天蓬老师

    欢迎选择我的课程,让我们一起见证您的进步~~

    全部回复(3)
    PHP中文网

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

    $('.todoList').toDoList({
        keyDome:function(){
        ....
        },
        click:function(){
        ...
        }
    });
    伊谢尔伦

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

    PHPz
    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,防止以后类名变化导致这些函数不可用。
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号