【jQuery】todolist

1

2

3 用npm命令下载依赖，优点：不用去网上找链接，代码都一样

4.jQuery自动下载进node_modules文件下

npm install jquery --save  这句命令的意思是保存，使package.json文件与node_modules同步(save以后dependencies下才有jquery，有利于项目部署，此时若删掉node_modules文件，保留package.json，直接npm install会自动下载相关依赖)

5.把代码写成这种形式，避免直接写到window中（可能将window的属性覆盖）

;(function(){
    'use strict';

})();

6.传统reset方法http://meyerweb.com/eric/tools/css/reset/index.html

现采用normalize方法：https://necolas.github.io/normalize.css/（或http://www.bootcdn.cn/normalize/）

其命令为：npm install normalize.css

在html中引用normalize.css时应该放在第一位

7.原理框图如下

8.storejs插件

参考：https://www.awesomes.cn/repo/marcuswestin/store-js

适用于所有浏览器的本地存储，不使用 cookies 或者 flash。会根据浏览器的不同选择 localStorage, globalStorage, 和 userData 作为存储引擎。

store.js 公开了一个简单的接口来实现跨浏览器的本地存储。

// Store 'marcus' at 'username'
store.set('username', 'marcus')

// Get 'username'
store.get('username')

// Remove 'username'
store.remove('username')

// Clear all keys
store.clear()

// 存储一个对象字面量 -  store.js 内部使用了 JSON.stringify 
store.set('user', { name: 'marcus', likes: 'javascript' })

//  获取存储的对象 -  store.js  内部使用了 JSON.parse 
var user = store.get('user')
alert(user.name + ' likes ' + user.likes)

// Get all stored values
store.getAll().user.name == 'marcus'

// Loop over all stored values
store.forEach(function(key, val) {
    console.log(key, '==', val)
})

在本项目中

    function refresh_task_list() {
        store.set('task_list',task_list);
        render_task_list();
    }

function get(index) {
    return store.get('task_list')[index];
}

9.datatimepicker插件

参考：http://www.jq22.com/jquery-info332

该插件可以精确到分钟

function render_task_detail(index) {
            if(index===undefined||!task_list[index]) return;
            var item =task_list[index];
            var tpl=
                '<form>'+
                '<div class="content">'+
                (item.content||'')+
                '</div>'+
                    '<div class="input-item"><input style="display: none" type="text" name="content" value="'+item.content+'"></div>'+
                '<div>'+
                '<div class="desc input-item">'+
                '<textarea name="desc">'+(item.desc||'')+'</textarea>'+
                '</div>'+
                '</div>'+
                '<div class="remind input-item">'+
                    '<label>提醒时间</label>'+
                '<input class="datetime" name="remind_date" type="text" value="'+(item.remind_date||'')+'">'+
                '</div>'+
                '<div input-item><button type="submit">更新</button></div>'+
                '</form>';

        /*清空task详情模板*/
        $task_detail.html(null);
        /*使用新模板*/
        $task_detail.html(tpl);
        $('.datetime').datetimepicker();
        /*选中其中的form元素*/
        $update_form=$task_detail.find('form');
        $task_detail_content=$update_form.find('.content');
        $task_detail_content_input=$update_form.find('[name=content]');
        /*双击内容元素显示input，隐藏自己*/
        $task_detail_content.on('dblclick',function () {
            $task_detail_content_input.show();
            $task_detail_content.hide();
        })
        
        $update_form.on('submit',function (e) {
            e.preventDefault();
            var data={};
            /*获取表单中各个input的值*/
            data.content=$(this).find('[name=content]').val();
            data.desc=$(this).find('[name=desc]').val();
            data.remind_date=$(this).find('[name=remind_date]').val();
            update_task(index,data);
            hide_task_detail();
        })
    }

项目中使用到了Deferred（延迟）对象，具体可以参考我的另一篇文章：http://www.cnblogs.com/yujihang/p/6875263.html