【jQuery】todolist

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

巴特西

【jQuery】todolist

最新文章

热门文章