function Foo(name,age) {
    this.name = name
    this.age = age
    this.class = 'class-1'
    // return this // 默认有这一行
}

const f = new Foo('lyr', 20) // new 的时候this会先变成一个空对象，

// 扩展
const a = {}; 是 const a = new Object() 的语法糖
const a = []; 是 const a = new Array() 的语法糖
function Foo() {} 是 const a = new Function() 的语法糖

// 使用 instanceof 判断一个函数是否是一个变量的构造函数
// 判断变量是不是数组
// 变量 instanceof Array

const obj = {}
const arr = []
function fn() {}
// 所有的引用类型除了null（数组，对象，函数）都具有对象的特性，可自由扩展属性
obj.a = 100
arr.a = 100
fn.a = 100
// 所有的引用类型除了null（数组，对象，函数）都具有__proto__属性, 属性值是一个普通的对象
console.log(obj.__proto__)
console.log(arr.__proto__)
console.log(fn.__proto__)
// 所有的函数都有一个prototype属性, 属性值也是一个普通的对象
console.log(fn.prototype)
// 所有的引用类型除了null（数组，对象，函数）, __proto__属性值指向它的构造函数的prototype属性值
console.log(obj.__proto__ === Object.prototype)
// 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__(也就是它的构造函数的prototype)中寻找
function Foo(name, age) {
    this.name = name // this指的时实例f
}
Foo.prototype.alertName = function() {
    alert(this.name) // this指的时实例f
}
const f = new Foo('lyr')
f.printName = function() {
    console.log(this.name) // this指的时实例f
}
f.printName()
f.alertName()
for (var item in f) {
    if(f.hasOwnProperty(item)) {
        // 只遍历本身的属性，不遍历原型的属性
        // 高级浏览器已经在for in中屏蔽的来自原型的属性
    }
}

// 原型链
f.toString() // 要去f.__proto__.__proto__ ... 中去找

// instanceof
f instanceof Foo; // f的__proto__ 一层一层往上，能否对应到 Foo.prototype
f instanceof Object; // f的__proto__ 一层一层往上，能否对应到 Object.prototype

// 封装dom查询到例子
function Elem(id) {
    this.elem = document.getElementById(id)
}
Elem.prototype.html = function(val) {
    var elem = this.elem
    if(val) {
        elem.innerHTML = val
        return this // 链式操作
    } else {
        return elem.innerHTML
    }
}
Elem.prototype.on = function(type, fn) {
    var elem = this.elem
    elem.addEventListener(type, fn)
    return this // 链式操作
}

var div1 = new Elem('div1')
console.log(div1.html())
div1.html('<a>点击</a>').on('click', function() {
    console.log(111)
})

console.log(a) // undefined
var a = 100
// 等价于
var a = undefined
console.log(a)
a = 100

fn('lyr') // 'lyr' 20
function fn(name) {
    age = 20
    console.log(name, age)
    var age

    console.log(this)
    console.log(arguments)
}
// 等价于
function fn(name) {
    var age
    age = 20
    console.log(name, age)

    console.log(this) // window
    console.log(arguments)
}
fn('lyr')

const a = {
    name: 'a',
    fn: function() {
        console.log(this.name)
    }
}
const b = {name: 'b'}
a.fn() // this === a
a.fn.call(b) // this === b
const fn = a.fn
fn() // this === window

// 构造函数
function Foo(name) {
    const this = {}
    this.name = name
    return this
}
const f = new Foo('lyr')

// call apply bind
function fn1(name, age) {
    console.log(name, this)
}
fn1.call({x: 100}, 'call', 20)
fn1.apply({x: 200}, ['apply', 20])

const fn2 = function(name, age) {
    console.log(name, this)
}.bind({x: 300})
fn2('bind', 20)

// 没有块级作用域
if(true) {
    var name = 'lyr'
}
console.log(name) // lyr

for(var i = 0; i < 10; i++) {}
console.log(i) // 10
// es6
if(true) {
    const age = 10
}
console.log(age) // error: age is not defined

for(let i = 0; i < 10; i++) {}
console.log(i) // i is not defined
// 函数和全局作用域
var a = 100
function fn() {
    var a = 200
    console.log('fn', a)
}
console.log('global', a)
fn()

// 定义时的父级作用域
var a = 100
function fn1() {
    var b = 200
    function fn2() {
        var c = 300
        console.log(a, b, c)
    }
    fn2()
}
fn1()

// 父级作用域是定义时候的作用域，而不是执行时候的作用域

// 函数作为返回值
function F1() {
    var a = 100
    const b = function() {
        console.log(a) // a 自由变量，向父级作用域去寻找 -- 函数定义的父级作用域
    }
    return b
}
var f1 = F1() // f1 === b
var a = 2000
f1() // 100, 函数执行是全局作用域

// 函数作为参数
function F1() {
    var a = 100
    const b = function() {
        console.log(a) // a 自由变量，向父级作用域去寻找 -- 函数定义的父级作用域
    }
    return b
}
var f1 = F1() // fn === b
function F2(fn) {
    var a = 300
    fn()
}
F2(f1)

// 错误
var i, a
for(i = 0; i<10;i++) {
    a = document.createElement('a')
    a.innerHTML = i + '<br>'
    a.addEventListener('click', function(e) {
        e.preventDefault()
        alert(i) // 自由变量，要去父作用域取值, 所有点击的结果都是10
    })
}
// 正确
var i, a
for(i = 0; i<10;i++) {
    (function(i) {
        a = document.createElement('a')
        a.innerHTML = i + '<br>'
        a.addEventListener('click', function(e) {
            e.preventDefault()
            alert(i) // 自由变量，要去父作用域取值
        })
    })(i)
}

function isFirstLoad() {
    var _list = []
    return function(id) {
        if(_list.indexOf(id) >= 0) {
            return false
        } else {
            _list.push(id)
            return true
        }
    }
}
var firstLoad = isFirstLoad()
firstLoad(10) // true
firstLoad(10) // false
firstLoad(20) // true

// alert() 同步

// 结果：start, end, ajax
console.log('start')
$.get('/a.json',function(data) {
    console.log('ajax')
})
console.log('end')

// 结果：start, end, img
console.log('start')
const img = document.createElement('img')
img.onload = function() {
    console.log('img')
}
// img.onerror = function() {
//     console.log('onerror')
// }
console.log('end')

// 结果：start, end, button
console.log('start')
const btn = document.getElementById('btn')
btn.addEventListener('click', function() {
    console.log('btn')
})
console.log('end')

// 异步和单线程
console.log(1)
setTimeout(function() {
    console.log(2)
})
console.log(3)

// 日期和math
Date.now() // 当前时间毫秒数
const dt = new Date()
dt.getTime() // 毫秒数
dt.getFullYear() // 年
dt.getMonth() // 月 0-11
dt.getDate() // 日 0-31
dt.getHours() // 时 0-23
dt.getMinutes() // 分 0-59
dt.getSeconds() // 秒 0-59

获取随机数 Math.random()
// 数组和对象
const arr = [1, 2, 3]
arr.forEach((item, index) => {
    console.log(item, index)
})
arr.every((item, index) => {
    if(item < 5) {
        return true
    }
})
arr.some((item, index) => {
    if(item < 5) {
        return true
    }
})

arr.filter((item, index) => {
    if(item < 2) {
        return true
    }
})
arr.sort((a, b) => (a-b))
arr.map((item, index) => {
    return
})

const obj = {a: 1, b: 2}
var key
for(key in obj) {
    if(obj.hasOwnProperty(key)) {
        console.log(key, obj[key])
    }
}

function formatDate(dt) {
    if(!dt) {
        dt = new Date()
    }
    const year = dt.getFullYear()
    const month = dt.getMonth() + 1
    const date = dt.getDate()
    if(month < 10) {
        month = '0' + month
    }
    if(date < 10) {
        date = '0' + date
    }
    return `${year}-${month}-${date}`
}

const random = Math.random()
random = random = '0000000000'
random = random.slice(0, 10)
console.log(random)

function forEach(obj, fn) {
    var key
    if (obj instanceof Array) {
        obj.forEach((item, index) => fn(index, item))
    } else {
        for(key in obj) {
            if(obj.hasOwnProperty(key)) {
                fn(key, obj[key])
            }
        }
    }
}
// 应用
const arr = [1,2,3]
const obj = { x: 1, y: 2}
forEach(arr, (index, item) => {
    console.log(index, item)
})
forEach(obj, (key, val) => {
    console.log(index, item)
})

// 获取dom节点
docuemnt.getElementById('div1') // 元素
document.getElementsByTagName('div') // 集合
document.getElementsByClassName('.container') // 集合
const pList = document.querySelectorAll('p') // 集合
集合就是类数组: length, arr[0]
const p = pList[0]
p.style.width // 获取样式
p.style.width = '100px' // 修改样式
p.className // 获取class
p.className = 'p1' // 修改class

// prototype
p.nodeName // p 获取元素标签名
p.nodeType // 获取元素标签类型
const obj = { a: 111, b: 222} // obj.a 就是prototype

// Attribute
p.getAttribute('data-name')
p.setAttribute('data-name', 'lyr')
p.getAttribute('style')
p.setAttribute('style', 'font-size: 20px;')

// 新增节点
var div1 = document.getElementById('div1')
// 新增新节点
var p1 = document.createElement('p')
p1.innerHTML = '1111'
div1.appendChild(p1)
// 移动已有节点(原来的地方就没有了)
var p2 = document.getElementById('p2')
div1.appendChild(p2)
// 获取父元素
p1.parentElement
div1.parentElement
// 获取子元素
div1.childNodes // 数组 [text, p#p1, text, p#p2, text] 会把换行，空格等作为文本显示出来
// 把空节点获取出来，nodeType === 3 是text，nodeType === 1是常规的标签节点。nodeName === 'P' nodeName=== '#text'
// 删除节点
const childNodes = div1.childNodes
div1.removeChild(childNodes[1])

// navigator
var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
// screen
screen.width
screen.height
// location
location.href // 全部
location.protocol // 协议 http
location.host // 域名 XXX.com
locatoin.pathname // /aaa.html
location.search // ?a=1111
location.hash // #mid=100
// history
history.back()
history.forward()

// 一个通用的事件监听函数
var btn = document.getElementById('btn1')
btn.addEventListener('click', function(event) {
    console.log('clicked')
})
function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn)
}
var a = document.getElementById('link1')
bindEvent(a, 'click', function(e) {
    e.preventDefault() // 阻止默认行为
    alert('clicked')
})
// IE兼容问题
attachEvent

// 事件冒泡, 先触发本身节点事件-->父级元素事件--> ... --> body事件
var child = document.getElementsByTagName('a')
var wrap = document.getElementById('wrap')
var body = document.body
e.stopPropatation() // 阻止冒泡，child不会触发wrap和body事件
// 代理(会随时增加子元素)
wrap.addEventListener('click', function(e) {
    const target = e.target // 事件在哪儿触发的就是target
    if(target.nodeName === 'A') {
        alert(target.innerHTML)
    }
})

function bindEvent(elem, type, selector, fn) {
    if(fn === null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, function(e) {
        var target
        if(selector) {
            target = e.targert
            if(target.matches(selector)) {
                fn.call(target, e)
            }
        } else {
            fn(e)
        }
    })
}

// 使用代理
var wrap = document.getElementById('wrap')
bindEvent(wrap, 'click', 'a', function(e) {
    console.log(this.innerHTML)
})
// 不适用代理
var child = document.getElementById('a1')
bindEvent(child, 'click', function(e) {
    console.log(child.innerHTML)
})

// XMLHttpRequest
// IE低版本使用 ActiveXObject
var xhr = new XMLHttpRequest()
xhr.open('GET', '/api', false)  // false说明是异步
xhr.onreadystatechange = function() {
    // 这个函数是异步执行的
    if(xhr.readyState === 4) {
        if(xhr.status === 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.send(null)

export default {
    a: 100
}
import utils from './utils'
export function fn1 {}
export const a = {}
import {fn1, a } from './utils'

// JS 构造函数
function Test(x,y) {
    this.x = x;
    this.y = y
}
Test.prototype.add = function() {
    return this.x + this.y
}
const test = new Test(1,2)
console.log(test.add())
// class 基本语法
// typeof Test // function
// Test === Test.prototype.constructor
// test.__proto__ === Test.prototype
class Test extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: []
        }
    }
    render() {
        return (<div>hello</div>)
    }
    componentDidMount() {}
}
class Test {
    constructor(x,y) {
        this.x = x
        this.y = y
    }
    add() {
        return this.x + this.y
    }
}
const test = new Test(1,2)
console.log(m.add())
// 继承
function Animal() {
    this.eat = function() {
        console.log('animal eat')
    }
}
function Dog() {
    this.bark = function() {
        console.log('dog bard')
    }
}
Dog.prototype = new Animal()
const hashiqi = new Dog()

class Animal {
    constructor(name) {
        this.name = name
    }
    eat() {
        console.log(this.name, 'eat')
    }
}
class Dog extends Animal {
    constructor(name) {
        super(name) // 指的就是 Animal, 就是 Animal.prototype.constructor, 只要有extents就要把super() 写上
        this.name = name
    }
    say() {
        console.log(this.name, 'say')
    }
}
const dog = new Dog('哈士奇')
dog.say()
dog.eat()

// promise方法定义
function loadImg(src) {
    return new Promise(function(resolve, reject) {
        const img = document.createElement('img')
        img.onload = function() {
            resolve(img)
        }
        img.onerror = function() {
            reject()
        }
        img.src = src
    })
}
// promise方法使用
const src = "http://xxx.png"
const result = loadImg(src)

result.then(function(img) {
    console.log(img.width)
}, function() {
    console.log('failed')
})
// 可以分步骤写很多个回调函数
result.then(function(img) {
    console.log(img.height)
}, function() {
    console.log('failed')
})

const obj = {a: 10, b: 20, c: 30}
const { a, b } = obj
const arr = [1,2,3]
const [x,y,z] = arr // x === arr[0] y === arr[1] z === arr[2]

for(let item in obj) { // var就可以在外部访问到了
    console.log(item)
}
// 编译之后为
for(var _item in obj) {
    console.log(_item)
}
console.log(item) // undefined

function (a, b = 0) {}

() => {
    this // this指向函数体中最近的一层作用域, 而不是window
}
function fn() {
    console.log(this) // { a: 100}
    arr.map(item => {
        console.log(this) // { a: 100 }
    })
    arr.map(function(item) {
        console.log(this) // window
    })
}
fn.call({a: 100})

// 使用
var $p = $('p')
var $div1 = $('#div1')
// css html 是原型方法
$p.css('color', 'red')
$p.html()
$div1.css('color', 'blue')
$div1.html()
// jq和zepto通过$()方法实例化对象，每个实例都可以从原型中访问到事先定义好的各种方法

// zepto(从下往上读)
(function(window) {
    var zepto = {}
    function Z (dom, selector) {
        var i, len = dom ? dom.length : 0
        for(i = 0; i<len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }
    zepto.Z = function(dom, selector) {
        // 出现了new关键字
        return new Z(dom, selector)
    }
    zepto.init = function(selector) {
        // 弱化了源码，只针对原型
        var slice = Array.prototype.slice
        const dom = slice.call(document.querySelectorAll(selector))
        return zepto.Z(dom, selector)
    }
    var $ = function(seletor) {
        return zepto.init(seletor)
    }
    window.$ = $

    $.fn = {
        constructor: zepto.z,
        css: function(key, value) {},
        html: function(value) {
            return 'html: 这是一个字符串'
        }
    }
    Z.prototype = $.fn
})(window)
// jq
(function(window) {
    var jQuery = function(selector) {
        return new jQuery.fn.init(selector)
    }

    jQuery.fn = {
        css: function() {console.log('css')},
        html: function() {return 111}
    }

    // 定义构造函数
    var init = jQuery.fn.init = function(selector) {
        var slice = Array.prototype.slice
        const dom = slice.call(document.querySelectorAll(selector))

        var i, len = dom ? dom.length : 0
        for(i = 0; i<len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }

    init.prototype = jQuery.fn

    window.$ = jQuery
})(window)

    // 一个简单的插件
    $.fn.getNodeName = function() {
        return this[0].nodeName
    }
    // 给$.fn增加一个新的属性,增加一个新的功能（一个插件）
    // 为什么要加在 $ 上面，而不是别的什么内部变量，因为只有$会暴露在window上
    // 将插件扩展统一到$.fn.xxx上面

// jq 1.5之前, 现在也可以这么写，但是1.5之前只支持这么写
var ajax = $.ajax({
    url: 'data.json',
    success: function() {
        console.log(1)
    },
    error: function() {
        console.log(0)
    }
})
console.log(ajax) // 返回一个 XHR 对象

// jq 1.5之后
var ajax = $.ajax('data.json')
ajax.done(function() {
    console.log(1)
}).fail(function() {
    console.log(0)
}).done(function() {
    console.log(222)
})
ajax.then(function() {
    console.log(1)
}, function() {
    console.log(0)
}).then(function() {
    console.log(1)
}, function() {
    console.log(0)
})
console.log(ajax) // 返回一个 deferred 对象

// deferred 应用1
var wait = function() {
    var task = function() {
        console.log('执行完成')
        // 1
        // 2
        // 3
    }
    setTimeout(task, 200)
}
wait()
// 在执行完task之后，还要进行一些复杂的操作
function waitHandle() {
    var dtd = $.Deferred()
    // 将 Deferred 适量 dtd, 进行一系列封装之后，返回
    var wait = function(dtd) {
        var task = function() {
            console.log('执行完成')
            dtd.resolve()
            // dtd.reject()
        }
        setTimeout(task, 2000)
        return dtd
    }

    // 返回值是 dtd
    return wait(dtd)
}

var w = waitHandle()
w.then(function() {
    console.log('ok1')
}, function() {
    console.log('error1')
})
w. then(function() {
    console.log('ok2')
}, function() {
    console.log('error2')
})

// dtd的API分为两类，用意不同
第一类：dtd.resolve dtd.reject（主动触发）
第二类：dtd.then dtd.done dtd.fail（被动受监听）
这两类要分开，在外部不能主动触发
var w = waitHandle()
w.reject() // 主动执行完之后，后面的then函数将执行失败的回调
w.then(function() {
    console.log('ok')
}, function() {
    console.log('error')
})
// 解决方法 promise(), 不再返回dtd实例，而是返回promise() 里面只有被动触发的方法
function waitHandle() {
    var dtd = $.Deferred()
    var wait = function(dtd) {
        var task = function() {
            console.log('执行完成')
            dtd.resolve()
            // dtd.reject()
        }
        setTimeout(task, 2000)
        return dtd.promise() // 只有被动触发的方法, 外部不能调用resolve，reject
    }
    return wait(dtd)
}

// 异常捕获
result.then(function() {
    // 只处理成功的函数
}).then(function() {
}).catch(function(error) {
    // 统一捕获异常
    // 语法报错，和reject报错都可以捕获
})
// 多个串联（A请求的结果是B请求的参数）
var resultA = loadImg(src1)
var resultB = loadImg(src2)
resultA.then(function(dataA) {
    console.log(dataA)
    return resultB
}).then(function(dataB) {
    console.log(dataB)
}).catch(function(ex) {
    console.error(ex)
})
// promise.all() 全部完成, promise.rece() 只有一个完成
// Promise.all Promise.rece 接收一个promise对象数组，待全部完成之后统一执行success
Promise.all([result1, result2]).then(datas => {
    console.log(datas, datas[0], datas[1])
})
Promise.race([result1, result2]).then(data => {
    // 最先执行完成的data
    console.log(data)
})

const load = async function() {
    const result = await loadImg('http://xxx.png')
}

<ul id="list">
    <li class="item">item1</li>
    <li class="item">item2</li>
</ul>

// 用js模拟
{
    tag: 'ul',
    attrs: {
        id: 'list'
    },
    children: [{
        tag: 'li',
        attrs: {
            className: 'item', // class js的关键字, 所以用className
            children: ['Item 1']
        }
    }, {
        tag: 'li',
        attrs: {
            className: 'item',
            children: ['Item 2']
        }
    }]
}

// 用jq和vDOM分别实现：将一个对象数组展示成一个表格，当修改数组信息，表格也跟着修改。
<div id="container"></div>
<button id="btn-change">change</button>
const data = [{
    name: '张三',
    age: 20
}, {
    name: '李四',
    age: 21
}, {
    name: '王五',
    age: 22
}]
/*jq实现*/
// 每次改变table的整个都会改变，性能不好
// 渲染函数
function render(data) {
    var $container = $('#container')
    // 清空容器
    $container.html('')
    // 拼接table
    var $table = $('<table>')
    $table.append($('<th><td>name</td><td>age</td></th>'))
    data.forEach(item => {
        $table.append($(`<tr><td>${item.name}</td><td>${item.age}</td></tr>`))
    })
    // 渲染到页面
    $container.addend($table)
}
$('#btn-change').click(function() {
    // 修改某一行数据
    data[1].age = 30
    data[2].name = '朱六'
    // 再重新渲染 re-render
    render(data)
})
// 页面加载完立即执行（初次渲染）
render(data)

<ul id="list">
    <li class="item">item1</li>
    <li class="item">item2</li>
</ul>
var vnode = h('ul#list', {}, [
    h('li.item', {}, 'Item1'),
    h('li.item', {}, 'Item2'),
])
patch(doucment.getElementById('container'), vnode)
var newVnode = h('ul#list', {}, [
    h('li.item', {}, 'aaaaa'),
    h('li.item', {}, 'bbbbb'),
])
patch(vnode, newVnode) // 找出新的vnode和旧的有什么区别，然后替换

// 应用
// 引入snabbdom文件 有 snabbdom.js snabbdom-class.js snabbdom-props.js snabbdom-style.js snabbdom-eventlist.js h.js 这一堆文件
// 引入之后 window.snabbdom就已经有值了
var snabbdom = window.snabbdom
// 定义path
var patch = snabbdom.init([
    snabbdom_class,
    snabbdom_props,
    snabbdom_style,
    snabbdom_eventlisteners
])
// 定义h
var h = snabbdom.h
// 生成 vnode
var vnode = h('ul#list', {}, [
    h('li.item', {}, 'Item1'),
    h('li.item', {}, 'Item2'),
])
patch(doucment.getElementById('container'), vnode)
document.getElementById('btn-change').addEventListener('click', function() {
    // 生成 newVnode
    var newVnode = h('ul#list', {}, [
        h('li.item', {}, 'Item1'),
        h('li.item', {}, 'bbb'),
    ])
    patch(vnode, vnode)
})

/*重做demo*/
var vnode
function render(data) {
    var newVnode = h('table', {}, data.map(item => {
        var tds = []
        var i
        for(i in item) {
            if(item.hasOwnProperty(i)) {
                tds.push(h('td', {}, item[i] + ''))
            }
        }
        return h('tr', {}, tds)
    }))
    if(vnode) {
        // re-render
        patch(vnode, newVnode)
    } else {
        // 初次渲染
        patch(container, newVnode)
    }
    // 存储当前newVode结果
    vnode = newVnode
}

// 初次渲染
render(data)
// 更改变化
document.getElementById('btn-change').addEventListener('click', function() {
    data[1].age = 30
    data[2].name = '朱六'
    // re-render
    render(data)
})

// patch(container, vnode)
function createElement(vnode) {
    const { tag, attrs, children } = vnode
    if(!tag) {
        return null
    }
    // 创建元素
    const elem = document.createElement(tag)
    // 属性
    let attrName
    for(attrName in attrs) {
        if(attrs.hasOwnProperty(attrName)) {
            elem.setAttribute(attrName, attrs[attrName])
        }
    }
    // 子元素
    children.forEach(childVnode => {
        // 给elem添加子元素
        createElement(childVnode)
    })
    // 返回真实的DOM元素
    return elem
}
// patch(vnode, newVnode)
// 根节点不会变，递归比较变化
function updateChildren(vnode, newVnode) {
    const children = vnode.children || []
    const newChildren = newVnode.children || []

    children.forEach((childVnode, index) => {
        const newChildVnode = newChildren[index]
        if(childVnode.tag === newChildVnode.tag) {
            // 一样，就深层次对比，递归
            updateChildren(childVnode, newChildVnode)
        } else {
            // 不一样，就替换, 替换需要真实的dom节点
            replaceNode(childVnode, newChildVnode)
        }
    })
}
function replaceNode(vnode, newVnode) {
    // 替换需要真实的dom节点
    const elem = vnode.elem
    const newElem = createElement(newVnode)
    // dom替换
}

// jq 实现todo-list
<input type="text" name="" id="txt-title"/>
<button id="btn-submit">submit</button>
<ul id="ul-list"></ul>
const $txtTitle = $('#txt-title')
const $btnSubmit = $('#btn-submit')
const $ulList = $('#ul-list')
$btnSubmit.click(function() {
    const title = $txtTitle.val()
    if(!title) {
        return
    }
    var $li = $(`<li>${title}</li>`)
    $ulList.append($li)
    $txtTitle.val('')
})
// vue 实现todo-list
<div id="app">
    <input v-model="title"/>
    <button v-on:click="add">submit</button>
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>
const vm = new Vue({
    el: '#app',
    data: {
        title: '',
        list: []
    },
    methods: {
        add: function() {
            this.list.push(this.title)
            this.title = ''
        }
    }
})

// data.name, 被代理到vm上了, vm.name 就是data.name
var vm = new Vue({
    el: '#app',
    data: {
        name: 'lyr',
        age: 20
    }
})

// 将对象属性到获取和设置都变成函数, 对象被访问时可以监听到，被设置到时候可以监听到
var obj = {}
var _name = 'lyr'
Object.defineProperty(obj, 'name', {
    get: function() {
        console.log('get')
        return _name
    },
    set: function(newVal) {
        console.log('set')
        _name = newVal
    }
})
console.log(obj.name) // 可以监听到
obj.name = '李月茹' // 可以监听到

// 模拟vue怎么监听name,age
// var vm = new Vue({
//     el: '#app',
//     data: {
//         name: 'lyr',
//         age: 20
//     }
// })

var vm = {}
var data = {
    age: 10,
    name: 'lyr'
}

var key, value
for(key in data) {
    // 命中闭包，新建一个函数，保证key的独立作用域
    (function (key) {
        // 将data属性代理到vm上, data是实例化的时候传进来到参数
        Object.defineProperty(vm, key, {
            get: function() {
                console.log('get')
                return data[key]
            },
            set: function(newVal) {
                console.log('set')
                data[key] = newVal
            }
        })
    })(key)
}

// with的用法
var obj = {
    name: 'lyr',
    age: 20,
    getAddress: function() {
        console.log('aaa')
    }
}
// 不用with
function fn() {
    console.log(obj.name)
    console.log(obj.age)
    obj.getAddress()
}
fn()
// 使用with, with有解构的作用
function fn() {
    with(obj) {
        console.log(name)
        console.log(age)
        getAddress()
    }
}

<div id="app">
    <p>{{price}}</p>
</div>

// 模版最终转化为
function render() {
    with(this) {
        // this就是vm这个vue实例，_c === vm._c; _v === vm._v; _s === vm._s
        return _c(
            'div',
            {
                attrs: {"id": "app"}
            },
            [
                _c('p', [_v(_s(price))]) // _s 就是toString, _v创建文本节点，_c创建标签
            ]
        )
    }
}

// 从哪里可以看到render函数: 源码中搜索code.render, 打印,就可以找到模版的render函数
// 复杂一点儿的例子，render函数是什么样子的
// v-if v-for v-on都是怎么处理的
// vue2.0开始支持预编译，开发环境写模版，经过工具编译打包，生产环境就是js代码，即上面的render函数。
// react 组件化 jsx模版，经过编译生成js代码，jsx语法已经标准化。
    with(this) {
        return _c(
            'div',
            {
                attrs: {"id": "app"}
            },
            [
                _c('div', [
                    _c(
                        'input',
                        {
                            directives: [{
                                name: 'model',
                                rawName: 'v-model',
                                value: (title),
                                expression: 'title'
                            }],
                            domProps: {
                                value: (title)
                            },
                            on: {
                                input: function($event) {
                                    if($event) {
                                        return title = $event.target.value // vm.title = $event.target.value
                                    }
                                }
                            }
                        }
                    ),
                    _v(""),
                    _c("button", {
                        on: {
                            click: add // vm.add
                        }
                    }, [_v('submit')])
                ]),
                _v(""),
                _c("div", [
                    _c('ul', _l((list), function(item) { // vm._l 是个for循环
                        return _c('li', [_v(_s((item)))])
                    }))
                ])
            ]
        )
    }

function updateComponent() {
    // vm._render 即上面的render函数，返回 vnode
    vm._update(vm._render())
}
vm._update(vnode) {
    const prevVnode = vm._vnode
    vm._vnode = vnode
    if(!prevVnode) {
        vm.$el = vm.__patch__(vm.$el, vnode)
    } else {
        vm.$el = vm.__patch__(prevVnode, vnode)
    }
}

// to-do-list
class List extends component {
    render() {
        const list = this.props.data
        return <ul>
            {
                list.map((item, index) => <li key={index}>{item}</li>)
            }
        </ul>
    }
}

class Input extends component {
    state = {
        title: ''
    }
    changeValue(e) {
        this.setState({
            title: e.target.value
        })
    }
    submit() {
        this.props.addTitle(this.state.title)
        this.setState({
            title: ''
        })
    }
    render() {
        const { title } = this.state
        return <div>
            <input value={title} onChange={this.changeValue}/>
            <button onClick={this.submit}>submit</button>
        </div>
    }
}

class Todo extends component {
    state = {
        list: ['a', 'b', 'c'],
    }
    addTitle(title) {
        const currentList = this.state.list
        this.setState({
            list: currentList.concat(title)
        })
    }
    render() {
        const { list } = this.state
        return <div>
            <Input addTitle={this.addTitle}></Input>
            <List data={list}></List>
        </div>
    }
}

// jsx
<div>
    <img src="avatar.png" className="profile"/>
    <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>
// jsx会解析成
React.createElement('div', {id: 'div1'}, child1, child2, ...)
React.createElement('div', {id: 'div1'}, [...])

React.createElement('div', null,
    React.createElement('img', { src: 'avatar.png', className: 'profile'}),
    React.createElement('h3', null, [user.firstName, user.lastName].join(' ')),
)

React.createElement('ul', null, [1,2,3].map((item, index) => {
    return React.createElement('li', {key: index}, item)
}))
// 所以，react组件中必须引入React

import Input from './input/index.js'
import List from './List/index.js'
function render() {
    render() {
        const { list } = this.state
        return <div>
            <Input addTitle={this.addTitle}></Input>
            <List data={list}></List>
        </div>
    }
}

// 编译为
import Input from './input/index.js'
import List from './List/index.js'
function render() {
    return React.createElement('div', null,
        React.createElement('Input', {addTitle: this.addTitle.bind(this)} ),
        React.createElement('List', {data: this.state.list} ),
    )
}

React.createElement('List', {data: this.state.list} )
// 等价于
var list = new List({data: this.state.list}) // 生成实例，返回实例的render函数
var vnode = list.render()
// 每个组件都返回一个render函数，不管有多少层组件，都会一层一层的执行render函数，最终转化成html

// setState的异步
addTitle(title) {
    const currentList = this.state.list
    console.log(this.state.list) // []
    this.setState({ // 异步
        list: currentList.concat(title)
    })
    console.log(this.state.list) // []
}

addTitle(title = 'aaa') {
    const currentList = this.state.list
    this.setState({
        list: currentList.concat(title)
    })
    this.setState({
        list: currentList.concat(title + 1)
    })
    this.setState({
        list: currentList.concat(title + 2)
    })
    console.log(this.state.list) // [aaa2], 直接执行最后一个，前面两个没有执行
}

// setState的过程
addTitle(title) {
    const currentList = this.state.list
    this.setState({ // 异步
        list: currentList.concat(title)
    }, () => {
        // 每个组件都extend React.Component, Component父类中定义的方法
        // setState中会默认执行这个回调
        this.renderComponent()
    })
}
// 模拟Component
class Component {
    constructor(props) {}

    renderComponent() {
        const prevVnode = this._vnode
        const newVnode = this.render()
        patch(prevVnode, newVnode)
        this._vnode = newVnode
    }
}

    if(boolean) {}
    if(表达式) {} else {}
    if(表达式) {} else if {} else {}
    // let val = prompt('请输入'); // 有返回结果。带确定按钮，点取消，值为null
    // new Date().getDay() // 获取星期，返回值number(0-6),周日是0

    switch(判断某个变量) {
        case value:
            document.write('dddd')
            break;
        case value1:
        case value2:
            console.log('aaa')
            break;
        default: console.log('dfskdfsk')
    }

    for(语句1;语句2;语句3) { 被执行代码 }
    // 语句1：循环代码块开始前执行
    // 语句2：代码块循环条件
    // 语句3：代码块执行后执行
    // for嵌套：外层为假时内层不执行；先执行外层再执行内层，直到内层条件为假时再返回外层执行
    // for适合已知循环次数的循环体，while适合未知
    while(条件) { 被执行代码 }
    //至少要执行一次
    do { 被执行代码 } while(j < 10)

    break：彻底退出循环体
    continue：结束本次循环，继续下一次

    // 打印所有0-50之间除20之外的5的倍数
    for() {
        if(n === 20) {
            continue // 本次循环不执行
        }
        console.log(n)
    }

function arrAvg() {
	let sum = 0
	let i
	const len = arguments.length
	for (i = 0; i < len; i++) {
		sum += arguments[1]
	}
	return sum / len
}
// 有返回必须有接收
const req = arrAvg(1, 2, 3, 4)

// 查找

// 可以是document也可以是别的DOM元素
const box = document.getElementById('box')
const tags = document.getElementsByTagName('li') // 返回数组
const ulLi = document.getElementById('list1').getElementsByTagName('li')

// 设置样式
ele.style.styleName = styleValue
box.style.color = '#f00'
box.style.fontWeight = 'bold'
// ele: dom元素
// styleName：样式名称,驼峰
// styleValue： 样式值

// 属性
ele.innerHTML // 获取ele元素开始标签和结束标签之间的HTML和文本内容
ele.innerHTML = '' // 设置
ele.className // 获取ele元素的class属性
ele.className = 'cls' // 设置ele元素的class属性 （如果之前有，会替换）
// 操作属性
ele.getAttribute('attribute') // attribute:要获取的html属性，如id，type
// 如果是DOM元素（标签）自带的属性直接用点获取：box.id, box.align。class除外，用box.className
// 如果是你自己设置的用getAttribute("attribute")方法
ele.setAttribute('attribute', value) // 有兼容性
// attribute:要设置的属性名
// value为attribute的值,如果是字符串要加引号
box.setAttribute('isRight', false)
ele.removeAttribute('attribute') // attribute：要删除的属性名称

/*
匹配字符串的规则
*/
// 类，[abc]
[abc]: abc中的一个
// 类取反 [^abc]
[^abc]: 不是字符abc的内容
// 范围类[a-z]
[a-z]: 从a到z的任意字符
[a-zA-Z]: a-z,A-Z
[0-9-]: 从0-9和字符-
// 预定义类
. : 除了回车换行之外的所有字符 [^/r/n]
\d: 数字字符[0-9]
\D: 非数字字符[^0-9]
\s: 空白符[\t\n\x0B\f\r]
\S: 非空白符[^\t\n\x0B\f\r]
\w: 单词字符（字母数字下划线）[a-zA-Z_0-0]
\W: 非单词字符[^a-zA-Z_0-0]
// 边界
^: 开头
$: 结尾
\b: 单词边界
\B: 非单词边界
// 量词, {}
?: 出现0次或者一次，最多一次
+: 出现1次或者多次，最少一次
*: 出现0次或者多次，任意次
{n}: 出现n次
{n,m}: 出现n到m次
{n,}: 至少出现n次
// 贪婪模式: 尽可能多的匹配
'12345678'.replace(/\d{3-6}/g, 'X') // X78, 会匹配最大的次数
// 非贪婪模式：一旦匹配成功就不再继续，只要在量词后面加上?即可
'12345678'.replace(/\d{3-6}?/g, 'X') // XX78, 一旦匹配成功就不再继续 123->X 456->X
'123456789'.match(/\d{3-5}?/g)// ["123", '456', '789']
// 分组(): 使量词作用于分组,而不是一个字符; 或 |作用于分组;反向引用 $1可以拿到组匹配到的内容; 忽略分组，在分组内加上?:即可
'a1b2c3d4'.replace(/([a-z]\d){3}/g, "X") // Xd4, 匹配一个字母加一个数字连续出现3次的情况
'2015-02-23'.replace(/(\d{4})-(\d{2})-(\d{2})/g, '$1$2$3')
(?:Byron).(ok)
// 前瞻(?=)(?!), 断言, js不支持后顾
正则表达式是从文本 头->尾，文本尾部方向成为"前"
匹配到一个人叫张三的时候，还得判断他爸爸是不是叫张二
断言要匹配，但是不会被替换
exp(?=assert)
exp(?!assert)
\w(?=\d) //匹配是不是文字, 且该文字后面是数字
// 正则对象的属性,方法
// 属性
global: 是否全文搜索，默认false
ignore case: 是否大小写敏感，默认false
multiline: 多行搜索，默认false
lastIndex: 这一轮匹配完了，下一轮的开始位置。在非全局情况下lastindex不生效
sourch: 正则表达式

const reg = /\w/gim;
reg.global // true
reg.ignoreCase // true
reg.multiline // true
reg.lastIndex // true
reg.sourch // "\w"
// 方法
RegExp.prototype.test(str)
reg.test('dkfsdkfsd') // true
reg.test('$') // false
RegExp.prototype.exec(str)// 没有匹配到返回null,否则返回一个结果数组

// 字符串对象的正则方法
String.prototype.search(reg) // 忽略全局搜索，index或者-1
'dfdsfsd'.search('d')
String.prototype.match(reg)// 数组
String.prototype.split(reg) // 数组
String.prototype.replace(reg, '替换成谁') // 数组， '替换成谁'可以是function(匹配结果,group1 ...groupx ,index,原字符串)

/*
IDE 中规则复杂的字符串查找替换
*/
// 匹配 单词is，\b是单词边界
\bis\b
// http://aaa/bbb/ccc.jpg 去掉所有jpg文件的协议头。 .+任意字符至少一次, 小括号是分组, 用$1可以获取匹配到的内容
http:(\/\/.+\.jps)
$1
// 日期替换： \d数字，{4}重复次数，[-/]或者, ^开头，$结尾, ()分组
^(\d{4})[/-](\d{2})[/-](\d{2})$
$1-$2-$3

/*
js 正则处理字符串

js中通过内置对象RegExp支持正则表达式

有两种方法实例化RegExp对象
字面量: const reg = /\bis\b/g;
构造函数: const reg = new RegExp('\\bis\\b', 'g')
修饰符: g全文搜索, i忽略大小写, m多行搜索（有换行符默认第二行开头也不会匹配,加上m会被匹配）
字符串:  'my name is lyr'.replace(reg, "要替换成的字符串");
*/

// 例1:
setTimeout(function() {
    console.log(1)
}, 0);
new Promise(function(a, b) {
    console.log(2);
    for(var i = 0; i < 10; i++) {
        i == 9 && a();
    }
    console.log(3);
}).then(function() {
    console.log(4)
});
console.log(5)
// 结果: 2，3，5，4，1
// promise的定义是同步的，then是异步的
// 例2:
console.log(1);
setTimeout(function() {
  console.log(2);
}, 0);
Promise.resolve().then(function() {
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);
// 结果: 1,5,3,4,2

// 例3:
Promise.resolve().then(()=>{ // promise1
  console.log('promise1')
  setTimeout(()=>{ // setTimeout1
    console.log('setTimeout1')
  },0)
})
setTimeout(()=>{ // setTimeout2
  console.log('setTimeout2')
  Promise.resolve().then(()=>{ // promise2
    console.log('promise2')
  })
},0)
// 结果：promise1,setTimeout2,promise2,setTimeout1