Fe-7 js-todo

作者: 吕阳 | 来源:发表于2018-01-06 17:18 被阅读49次

Fe-7-1

数据类型

在 js 中, 每一个变量(也就是每一个值)都有一个类型

内置的基本数据有以下几种类型
number 数字
string 字符串
boolean 布尔变量（只有两个值 true 或 false）
object 对象, 是高级一点的内容
null 和 undefined

这两个东西很相似, 有这么两个东西主要是历史原因造成的
具体细节可看这个链接, 不过不需要关心
http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html

函数也是一个变量, 稍微特殊点, 但在 js 中没什么本质不同
它的类型是函数

// 为一个变量赋值就创建了一个变量
// JavaScript 中, 变量只是对值的一个引用
// 比如下面, 分别把 3 个不同类型的值赋值给变量 a

var a
a = 1       // a 是 number
a = 1.1     // number
a = 'good'  // string

// 可以用 typeof 语句得到一个变量的类型
a = 10
b = true
c = 'I am good'
log('type a', typeof a)
log('type b', typeof b)
log('type c', typeof c)

运行, 输出如下
type a number
type b boolean
type c string

前提定义log函数

// 定义 log 函数
var log = function() {
    console.log.apply(console, arguments)
}

微信截图_20180106125231.png

单行字符串变多行字符串用转意符号

多行字符串
多行字符串又称模板字符串
使用反引号, 键盘左上角波浪线

var a = `多
行
字符串`

log('多行字符串', a)

a = `
i
am
good
`

log('多行字符串 2', a)

不同的数据类型是不能混用的
比如 float 就不能当下标

转义符
在代码中表示字符串的时候, 很多东西不方便表示, 因此我们使用转义符的方式来表示
转义符是字符串中的特殊符号，由反斜杠（backslash）开始
接另一个字符结束
常用的转义符有
还有一些别的转义符，但极少使用，对于这种东西，不必记忆，知道有这么回事就好了。

// \n     // 表示一个换行符
// \t     // 表示一个 TAB（制表符）
// \\     // 表示一个反斜杠 \
// \'     // 表示一个单引号
// \"     // 表示一个双引号
//
// 例子：
log('I\'a\tm \n\ngood\n')

微信截图_20180106165038.png

高阶函数就是函数当参数传递

// =====
// 高阶函数
// =====
//
// 高阶函数这个名字很唬人, 实际上概念很简单——函数可以作为参数传递
//
// 有什么用呢？灵活性高，舒适度佳
// 请看例子
//
// String 函数是用来把数据转换成 string 类型的一个函数
log('string ', String(6.3))

var process = function(array, processor) {
    /*
    array 是一个数组
    processor 是一个函数, 注意, 这是一个函数, 所以可以调用

    把 array 中的每个元素都用 processor 函数处理并返回一个
    新的 array
    */
    var l = []
    for (var i = 0; i < array.length; i++) {
        var a = array[i]
        // processor 必须能调用成功, 否则这里就跪了
        var element = processor(a)
        l.push(element)
    }
    return l
}

// 创建一个 array, 包含 3 个 number
var array = [1.1, -2.2, 3.3]

// String 内置函数
var stringList = process(array, String)
log('stringList', stringList)

// Math.floor 函数可以把小数转成整数, 可以自行试试
process(array, Math.floor)

// 输出结果如下
// 我们可以看到, process 函数通过 参数传进来的函数 对数据进行了处理
// stringList ['1.1', '-2.2', '3.3']


// =====
// 匿名函数
// =====
//
// 有时候要传递高阶函数的时候, 函数很短, 可能就一行
// 如果去定义一个新函数有人觉得划不来, 就想了一个偷懒的办法
// 那就是匿名函数
// 匿名函数的意思是没有函数名, 一般定义了就用
// 实际上我们之前写的函数都是匿名函数, 只不过把它赋值给了一个变量而已

// 例子
// 定义一个 square 函数求平方
var square = function(n) {
    return n * n
}

// 用上面的 process 函数处理试试
var array = [1, 2, 3]
var squareList = process(array, square)
log('square list', squareList)

var addList = process(array, function(n){
    // 我们定义一个接受一个参数的函数并且直接使用, 它没有名字
    return n + 1
})
log('add list', addList)


// 输出结果如下
// square list [1, 4, 9]
// add list [2, 3, 4]

微信截图_20180106130947.png

Fe-7-2 Todo

添加，删除，完成，还有本地存储

todo.gif

todo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Todo</title>
  <style>
    .done {
      color: gray;
      text-decoration: line-through;
      background: lightblue;
    }
  </style>
</head>
<body><div class="todo-form">
  <input id="id-input-todo" type="text">
    <button id="id-button-add" name="button">Add</button>
</div>
<div id="id-div-container">
  <div class="todo-cell">
              <!-- <button class='todo-done'>完成</button>
              <button class='todo-delete'>删除</button>
              <span class='todo-content' contenteditable='true'>上课</span>
            
             -->

  </div>
</div>
<script src="todo.js" charset="utf-8"></script>
</body>
</html>

todo.js

// 2016/12/06
//
// 此为第 7 课的上课内容 2
//
// 这部分的主要内容有
//
// 通过一个 Todo 应用, 学习下面这个概念
// 1, 什么是事件委托
// 2, 为什么需要事件委托
// 3, 如何实现事件委托
//
// 时间操作
// content editable (标签的可编辑属性)
// localStorage (本地存储) 和 JSON 数据格式
//
//
// 应该都能看懂, 不懂的稍微做个笔记, 等上课讲解


// 自己定义一个 log 函数
var log = function() {
    console.log.apply(console, arguments)
}

// 用自己实现的 e 替代 document.querySelector
// 因为这个东西太长了
var e = function(selector) {
    return document.querySelector(selector)
}

// 给 add button 绑定添加 todo 事件
var addButton = e('#id-button-add')
addButton.addEventListener('click', function(){
    // 获得 input.value
    var todoInput = e('#id-input-todo')
    var todo = todoInput.value
    // 添加到 container 中
    insertTodo(todo, false)
    // 添加之后 保存 todos
    saveTodos()
})

var insertTodo = function(todo, done) {
    // 添加到 container 中
    var todoContainer = e('#id-div-container')
    var t = templateTodo(todo, done)
    // 这个方法用来添加元素
    // 第一个参数 'beforeend' 意思是放在最后
    todoContainer.insertAdjacentHTML('beforeend', t);
}

var templateTodo = function(todo, done) {
    var status = ''
    if(done) {
        status = 'done'
    }
    var t = `
        <div class='todo-cell ${status}'>
            <button class='todo-done'>完成</button>
            <button class='todo-delete'>删除</button>
            <span class='todo-content' contenteditable='true'>${todo}</span>
        </div>
    `
    return t
}

// 事件委托相关概念
// ===
//
// 问题在于, todo 都是运行的时候才添加的元素
// 对于这样的元素, 我们没办法实现绑定事件
// 我们可以把 click 事件绑定在事先存在的父元素上
// 然后在运行的时候检查被点击的对象(通过 event.target 属性)
// 是否是我们需要的对象, 这个概念就是事件委托

var todoContainer = e('#id-div-container')

// 通过 event.target 的 class 来检查点击的是什么
todoContainer.addEventListener('click', function(event){
    log('container click', event, event.target)
    var target = event.target
    // classList.contains 可以检查元素是否有一个 class
    if(target.classList.contains('todo-done')) {
        log('done')
        // target.parentElement 用来获取按钮的父节点
        // 给 todo div 开关一个状态 class
        var todoDiv = target.parentElement
        toggleClass(todoDiv, 'done')
        // 改变 todo 完成状态之后，保存 todos
        saveTodos()
    } else if (target.classList.contains('todo-delete')) {
        log('delete')
        // 找到按钮的父节点并且删除
        var todoDiv = target.parentElement
        todoDiv.remove()
        // 删除之后 保存 todos
        saveTodos()
    }
})

// 这个函数用来开关一个元素的某个 class
var toggleClass = function(element, className) {
    // 检查元素是否拥有某个 classs
    if (element.classList.contains(className)) {
        // 拥有则删除之
        element.classList.remove(className)
    } else {
        // 没有则加上
        element.classList.add(className)
    }
}


// localStorage（本地存储） 是浏览器自带的功能
// localStorage 可以用来存储字符串数据, 在浏览器关闭后依然存在
// 但是不同页面拥有各自独立的 localStorage
// 存储方法如下
localStorage.name = 'gua'
// 关闭浏览器, 再次打开, 仍然能获取到这个值
// log('关闭浏览器后', localStorage.name)
//
// 利用 localStorage 就可以存储 todo
// 但是 todo 存在 array 中
// 而 localStorage 只能存储 string 数据
// 所以没办法直接存储
//
// 可行的办法如下
// 存储的时候把 array 转换为字符串
// 读取的时候把字符串转成 array
// 这个过程通常被称之为 序列化 和 反序列化
//
// 在 js 中, 序列化使用 JSON 数据格式
// 全称 JavaScript Object Notation (js对象标记)
// 这个格式已经是现在用于互联网数据交换的事实标准格式了
// ISO 是国际标准
// IEEE 国际电子电气工程师协会
// GB 中国国标

var s = JSON.stringify([1, 2, 3, 4])
log('序列化后的字符串', typeof s, s)
var a = JSON.parse(s)
log('反序列化后的数组', typeof a, a)

// 使用 JSON 序列化后, 就可以把 todo 存入浏览器的 localStorage 了

// 定义一个函数， 用于把 数组 写入 localStorage
var save = function(array) {
    var s = JSON.stringify(array)
    localStorage.todos = s
}

// 定义一个函数， 读取 localStorage 中的数据并解析返回
var load = function() {
    var s = localStorage.todos
    return JSON.parse(s)
}

// 定义一个函数， 把页面上所有的 todo 用 save 保存
var saveTodos = function() {
    // 1 先选出所有的 content 标签
    // 2 取出 todo
    // 3 添加到一个 数组中
    // 4 保存数组
    log('save todos')
    var contents = document.querySelectorAll('.todo-content')
    var todos = []
    for (var i = 0; i < contents.length; i++) {
        var c = contents[i]
        var done = c.parentElement.classList.contains('done')
        var todo = {
            done: done,
            content: c.innerHTML,
        }
        // 添加到数组中
        todos.push(todo)
    }
    // 保存数组
    save(todos)
}

var loadTodos = function() {
    var todos = load()
    log('load todos', todos)
    // 添加到页面中
    for (var i = 0; i < todos.length; i++) {
        var todo = todos[i]
        insertTodo(todo.content, todo.done)
    }
}

loadTodos()

// 时间标准库
// 常用用法如下
// var d = new Date()
// d.getFullYear()
// 年份, 2016
// d.getMonth()
// 月份, 0-11
// d.getDate()
// 日期, 1-31
// d.getHours()
// 小时, 0-23
// d.getMinutes()
// 分钟, 0-59
// d.getSeconds()
// 秒数, 0-59
// d.getMilliseconds()
// 毫秒, 0-999
// d.getDay()
// 星期几, 0-6

var now = function() {
    var d = new Date()
    var nm = d.getFullYear()
    var yt = d.getMonth() + 1
    var ri = d.getDate()
    var ui = d.getHours()
    var ff = d.getMinutes()
    var mc = d.getSeconds()

    return `${nm}/${yt}/${ri} ${ui}:${ff}:${mc}`
    // return nm + '/' + yt + '/' + ri + ' ' + ui + ':' + ff + ':' + mc
}

Fe-7 js-todo

Fe-7-1

数据类型

高阶函数就是函数当参数传递

Fe-7-2 Todo

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Fe-7 js-todo

Fe-7-1

数据类型

高阶函数 就是函数当参数传递

Fe-7-2 Todo

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

高阶函数就是函数当参数传递