jQuery实现web备忘录-3

存储在Localstorage；
但是功能太少，比如定时无法实现
store.js比较灵活，用它.

• 确定js代码能和html代码正常交互
• 注意form表单里面的submit才有效果
• preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。
• 定义变量，然后相对的定义函数，这样会非常的清晰，层层嵌套，能溯源代码
• 在多个函数层层调用的时候，可以使用console.log(‘$a',$a)来测试是否衔接正确
• 使用循环添加自定义属性来表示item
• delete按钮没有效果的原因：jquery不会自动的更新文档流，动态与静态的区别，所以我们需要在遍历之后，进行变量的赋值
• $(‘.anchor.delete’)多个类名的查找不要加空格，否则会形成层级查找
• jquery不会自动去绑定value的变化，需要手动的在每次文档变化后添加事件。把变化之后的内容添加到监控事件的监控源中去
• {}是对象，[]是数组
• 注意作用域的问题，比如new_task就应该每天点击都要加载一下，所以不要写在全局里面。

思路：get输入值，push进变量，更新本地存储；同时建立模板，在模板中循环插入输入值
存：添加到Array->json->localstorage；
取：json->push成array->迭代到html中；
删除：点击->index->在array中删除->更新localstorage
就是它，我的天，de,de,de,只怪自己水平不够

if(!data || !index)return;

而且引出一个问题，就是只能删除一个，之后就没有继续监听该事件了

;(function(){
    'use strict';

    var $form_add_task = $('.add-task')
    , task_list = []
    , $input
    , $delete_task 
    ;

    init();

    $form_add_task.on('submit', on_add_task_submit)

    function on_add_task_submit(e){
        var new_task = {};
        // Disable the default behavior
        e.preventDefault();
        // Get new Task's value
        $input = $(this).find('input[name=content]');
        new_task.content = $input.val();
        // New task if it's value is empty,then return directly,otherwise continue
        if (!new_task.content) return;
        // In the new task
        if (add_task(new_task)){
            $input.val(null);
        }
    }

    // Find and lisen all's button onclick event
    function listen_task_delete(){
        $delete_task.on('click',function(){
            var $this = $(this);
            // 找到删除按钮所在的task元素
            var $item = $this.parent().parent();
            var index = $item.data('index');
            // 确认删除
            var tmp = confirm('Are you sure delete?')
            tmp ? delete_task(index) : null ;
        })  
    }



    function add_task(new_task){
        // Push new_task into task_list
        task_list.push(new_task);
        // Update localStorage
        // store.set('task_list',task_list);
        refresh_task_list();
        return true;
    }

    /*
     * 刷新localStorage数据并渲染模板
     * */
      function refresh_task_list() {
        store.set('task_list', task_list);
        render_task_list();

      }


    /*delete one Task*/
  function delete_task(index) {
    /*如果没有index 或者index不存在则直接返回*/
    if (index === undefined || !task_list[index]) return;

    delete task_list[index];
    /*更新localStorage*/
    refresh_task_list();
  }

    function init(){
            task_list = store.get('task_list') || [];
            // store.clear();
            if(task_list.length){
                render_task_list();
            }
        }


     /*
      * 渲染所有Task模板
      * */
    function render_task_list(){
        var $task_list = $('.task-list');
        $task_list.html('');
        for(var i=0;i<task_list.length;i++){
            var $task = render_task_item(task_list[i],i);
            $task_list.append($task);
        }

        $delete_task = $('.anchor.delete');
        listen_task_delete();
    }   

    function render_task_item(data,index){
        if(!data || !index) return;
        // Define pattern
        var list_item_tpl = 
            '<div class="task-item" data-index="' + index + '">' +
            '<span><input type="checkbox"></span>' +
            '<span class="task-content">' + data.content + '</span>' +
            '<span class="fr">' +
            '<span class="anchor delete"> 删除</span>' +
            '<span class="anchor"> 详情</span>' +
            '</span>' +
            '</div>';

        return $(list_item_tpl);
    }   

    })();

此时实现了提交和删除的功能