var data = { name:"poetries "}
observe(data)
function update(value) {
    document.querySelector('div').innerText = value
}
new Watcher(data,'name',update)

data.name = 'yyy'


function observe(obj) {
    if(!obj||typeof obj!=='object'){ 
        return 
    }
    Object.keys(obj).forEach(key=>{ 
        defineReactive(obj,key,obj[key])
    })
}

function defineReactive(obj,key,val) {
    observe(val)
    let dep = new Dep()
    Object.defineProperty(obj,key,{ 
        enumerable:true, 

        configurable:true,

        get:function reactiveGetter() {
            console.log('get value')
            if(Dep.target){ 
                dep.addSub(Dep.target)
            }
            return val
        },

        set:function reactiveSetter(newValue) {
            console.log('change value')
            val = newValue
            dep.notify()
        }
    })
}


class Dep{ 
    constructor(){ 
        this.subs=[]
    }
    addSub(sub){ 
        this.subs.push(sub)
    }
    notify(){ 
        this.subs.forEach(sub=>{ 
            sub.update()
        })
    }
}
Dep.target=null 

class Watcher{ 
    constructor(obj,key,cb){ 
        
        Dep.target =this
        this.cb=cb
        this.obj=obj
        this.key=key
        this.value = obj[key]
        Dep.target = null

    }
    update(){ 
        this.value = this.obj[this.key]

        this.cb(this.value)
    }

}

//Vue有几个问题，Object.defineProperty不能拦截数组操作
//新增对象属性不触发组件渲染的问题
//Vue通过函数重写的方式解决了这个问题。

export function set(target:Array<any>|Object,key:any,val:any):any{
    if(Array.isArray(target)&&isValidArrayIndex(key)){ 
        //调用splice函数派发更新
        target.length = Math.max(target.length,key)
        target.splice(key,1,val)
        return val

    } 
    if(key in target &&!(key in Object.prototype)){ 
        target[key] = val
        return val
    }
    
    const ob =(target:any).__ob__

    if(!ob){ 
        target[key] = val
        return val
    }
    
    defineReactive(ob.value,key,value)

    ob.dep.notify()

    return val

}
//解决Array的一些方法无法触发响应式的问题。
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [ 
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse'
]

methodsToPatch.forEach(function (method) {
    
    const original = arrayProto[method]

    def(arrayMethods,method,function mutator(...args){ 

        const result = original.apply(this,args)
        const ob =this.__ob__
        let inserted

        switch (method) {
            case 'push':
            case 'unshift':
                inserted = args
                break;
            case 'splice':
                inserted = args.slice(2)
                break;
        }
        if(inserted) ob.observeArray(inserted)
        ob.dep.notify()
        return result
    })
})

require.ensure([], function(require){
    require('./a.js');
});

const Province = r => require.ensure([], () => r(require('@/components/Province.vue')), 'chunkname1')
const Segment = r => require.ensure([], () => r(require('@/components/Segment.vue')), 'chunkname2')
const Loading = r => require.ensure([], () => r(require('@/components/Loading.vue')), 'chunkname3')
const User = r => require.ensure([], () => r(require('@/components/User.vue')), 'chunkname3')

function _traverse (val: any, seen: SimpleSet) {
  let i, keys
  const isA = Array.isArray(val)
  if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) {
    return
  }
  if (val.__ob__) {    
        const depId = val.__ob__.dep.id    
        if (seen.has(depId)) {     return    }    
        seen.add(depId)  
  } if (isA) {
    i = val.length
    while (i—) 
        _traverse(val[i], seen)
  } else {
    keys = Object.keys(val)
    i = keys.length
    while (i—) 
        _traverse(val[keys[i]], seen)
  }
}
get(){
    pushTarget(this)
    ...
    finally{
        if (this.deep) {
        traverse(value) ////这深度观测有毛用，value也拿不到啊
    }
    popTarget()
        this.cleanupDeps()
    }
}

if (typeof Promise !== 'undefined' && isNative(Promise)) {
    const p = Promise.resolve()
    timerFunc = () => {
        p.then(flushCallbacks)
        if (isIOS) setTimeout(noop)
    }    
}else if (!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) || MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
    let counter = 1
    const observer = new MutationObserver(flushCallbacks)
    const textNode = document.createTextNode(String(counter))
    observer.observe(textNode, {
        characterData: true
    })
    timerFunc = () => {
        counter = (counter + 1) % 2
        textNode.data = String(counter)
    }
}else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
    timerFunc = () => {
        setImmediate(flushCallbacks)
    }
}else{ 
    timerFunc = () => {
        setTimeout(flushCallbacks, 0)
    }
}
``` 

## Mutation Observer API
[使用MutationObserver跟踪DOM的改变 ] (https://segmentfault.com/a/1190000014738092)

##nextTick如何理解 ??
其实最好理解的方式就是把 nextTick 看做 setTimeout(fn, 0)
 Vue 是一个数据驱动的框架，如果能在UI重渲染之前更新所有数据状态，这对性能的提升是一个很大的帮助，所有要优先选用 microtask(微任务) 去更新数据状态而不是 (macro)task(宏任务)，这就是为什么不使用 setTimeout 的原因，因为 setTimeout 会将回调放到 (macro)task 队列中而不是 microtask 队列，所以理论上最优的选择是使用 Promise，当浏览器不支持 Promise 时再降级为 setTimeout
UIWebViews 中存在很奇怪的问题，即 microtask 没有被刷新，对于这个问题的解决方案就是让浏览做一些其他的事情比如注册一个 (macro)task 即使这个 (macro)task 什么都不做，这样就能够间接触发 microtask 的刷新。

get () {
    pushTarget(this)
    let value
    const vm = this.vm
    try {
        value = this.getter.call(vm, vm)
    } catch (e) {
       ....
    } finally {
        if (this.deep) { traverse(value)
    }   
        popTarget()
        this.cleanupDeps()
    }
    return value
}
cleanupDeps () {
  let i = this.deps.length
  while (i--) {
    const dep = this.deps[i]
    if (!this.newDepIds.has(dep.id)) {
      dep.removeSub(this)
    }
  }
  let tmp = this.depIds  
  this.depIds = this.newDepIds  
  this.newDepIds = tmp
  this.newDepIds.clear()
  tmp = this.deps
  this.deps = this.newDeps
  this.newDeps = tmp
  this.newDeps.length = 0
}

const data = {
obj: {
    a: 1
    __ob__ // ob2
},
__ob__ // ob1
}
new Vue({
    data
})
Vue.set(data, 'someProperty', 'someVal')
//不允许在根对象上添加属性

const ins = new Vue({
  data: {
    arr: [1, 2]  }
})
ins.$data.arr[0] = 3 // 不能触发响应
ins.$set(ins.$data.arr, 0, 3) // 能够触发响应

Vue.set = function (obj, key, val) {
  defineReactive(obj, key, val)
  obj.__ob__.dep.notify()  
}

var Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})

VueRouter -> 

window.addEventListener(‘hashchange’,function( ){ 
    switch(location.hash)  
        case ‘#login’:
            div.innerHTML=“<h1>登陆页面</h1>" 
})

//$选择器可以用ref替代
<section class="menu_right" ref="menuFoodList"></section>
const listContainer = this.$refs.menuFoodList;

$(elem).find('.activity_menu') //替代
this.$refs.wrapperMenu.querySelectorAll('.activity_menu')

$.each //替代
listContainer.forEach((item, index) => {
    this.shopListTop[index] = item.offsetTop;
});

v-bind -> setAttribute()   
v-text -> innerText    
v-html -> innerHTML    
v-if -> 
    parent.removeChild("elem") 
    parent.append("ssss")
v-show -> 
    obj.style.display='none/block'  
v-on: ->
    addEventListener (简写成)  @
v-model -> 
    双向数据流绑定，只能给具有value属性的元素进行双向数据绑定（必须使用的具有value属性的元素） 
v-model实现自定义的表单组件:
    <currency-input v-model="price"></currency-input>

UTF-8 就是在互联网上使用最广的一种 Unicode 的实现方式。

UTF-8 最大的一个特点，就是它是一种变长的编码方式。它可以使用1~4个字节表示一个符号，根据不同的符号而变化字节长度。

UTF-8 的编码规则很简单 只有二条:

1.对于单字节的符号，字节的第一位设为0，后面7位为这个符号的 Unicode 码。因此对于英语字母，UTF-8 编码和 ASCII 码是相同的。
2.对于n字节的符号（n > 1），第一个字节的前n位都设为1，第n + 1位设为0，后面字节的前两位一律设为10。剩下的没有提及的二进制位，全部为这个符号的 Unicode 码。

//下面，还是以汉字严为例，演示如何实现 UTF-8 编码。

//严的 Unicode 是4E25（100111000100101）
//根据上表，可以发现4E25处在第三行的范围内（0000 0800 - 0000 FFFF）
//因此严的 UTF-8 编码需要三个字节，即格式是1110xxxx 10xxxxxx 10xxxxxx。
//然后，从严的最后一个二进制位开始，依次从后向前填入格式中的x，多出的位补0。
//这样就得到了，严的 UTF-8 编码是11100100 10111000 10100101，转换成十六进制就是E4B8A5。

服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码
再对主体进行解析。

-DNS解析 (查询 DNS 浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存) -> 

-TCP连接 (
 // 3次握手
 // 第一次握手 客户端发送 SYN=> 服务端 (客户端: 我来了)
 // 第二次握手 服务端发送 ACK=> 客户端 (服务端: 好嘞)
 // 第三次握手 客户端发送 ACK=> 服务端 (客户端: 好嘞)
 
 // 4次挥手
 // 第一次挥手 主动关闭方 FIN=> 被动关闭方 (客户端: 该撤了)
 // 第二次挥手 被动关闭方 ACK=> 主动关闭发 (服务端: 好嘞)
 // 第三次挥手 被动关闭方 FIN=> 主动关闭发 (服务端: 你撤那我也得撤啊 都确认了你最后再吱一声 不然我一直等着就智障了)
 // 第四次挥手 主动关闭方 ACK=> 被动关闭方 (客户端: 好勒)
) ->

-( SSL 四次握手 hello -> certificate-hello -> exchangekey -> finished )

-发送HTTP请求 (HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文) ->

-服务器处理请求返回HTTP报文 (查找资源返回状态码) ->

-浏览器解析渲染页面 (
 // T0 -> [Get HTML] => [Browser Parsing HTML & prefetch]
 // T1.0 -> [Parsing Dom (Will Parse All The Tags Before Script Soon)] 
 // T1.1 -> (Maybe CSS Recieved / JS Recieved) => [(Dom Render Blocking) Load CSS & Build CSSOM] => [Combine CSSOM + DOM -> Render Tree] => [Paint]
 // T1.2 -> [(Dom Parser Blocking) Load JS] => [Run JS] => [Parsing Dom] => (DomContentLoaded Event)
 // T1.3 -> [Composite Layers] => (Load Event)
 ) ->
连接结束

// T0
浏览器预下载: 现代浏览器很聪明，会进行 prefetch 优化，浏览器在获得 HTML 文档之后会对页面上引用的资源进行提前下载。

// T1.0
DOM解析: 解析器把 HTML 转换为 JavaScript 可存取的 Dom 对象 (由浏览器 UI Render 线程负责)
// T1.1
CSS加载: CSS加载会阻塞 DOM 渲染，不会阻塞 DOM 解析。CSS是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。
Render树: CSSOM 树和 DOM 树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。
// T1.2
JavaScript加载: JavaScript可以查询和修改 DOM 与 CSSOM，所以 JavaScript 执行会阻止 DOM 和 CSSOM 构建 （除非将 JavaScript 显式声明为异步执行）。需要尽量将JavaScript放在 body 的末尾，保证首屏页面先渲染。V8 引擎执行 JavaScript 代码。
DOMContentLoaded Event: 浏览器已经完全加载了HTML，DOM树已经构建完毕，但是像是 <img> 和样式表等外部资源可能并没有下载完毕。
// T1.3
Load Event: 浏览器已经加载了所有的资源（图像，样式表等）。

// Paint 问题
// 经过 Chrome Performance 试验结果:
// 正常情况下 CSS Loaded + Parse StyleSheet (Build CSSOM) 随后会 Paint (即 T1.1 中的 Paint)
// 个别情况下 如 JS 资源下载不耗时 原先 T1.1 中的 Paint 可能会延后到 T1.2 DomContentLoaded Event 之后

1.通过 Meta 标签控制: 
例如 - <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
只有部分浏览器支持 并为广泛使用

2.通过 HTTP 缓存控制:  
-2.1 强缓存:
 Expires 是服务器端在响应请求时用来规定资源的失效时间。  
 Cache-Control (HTTP 1.1 出现) 是服务器端在响应请求时用来规定资源是否需要被浏览器缓存以及缓存的有效时间等。  

 Cache-Control 的优先级要高于 Expires

-2.2 协商缓存:
 Etag ETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化。
 Last-Modify 该资源的最后修改时间

 服务器会优先验证ETag

触屏网页的 tap 与 click :
两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms，所以请用tap代替click作为点击事件
//(触屏穿透问题最好通过300ms隐形浮层方法解决 或者 fastclick.js)

tap 实现思路:
基于三个基础触摸事件: touchstart、touchmove、touchend
// 滑动则不触发 tap + 长按超时则不触发 tap

LocalStorage 同源则 => 可以
SessionStorage 同源也 => 不可以

ES6常用新特性:

1.let && const

2.iterable类型
/**
 * 
let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();

iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }
 */

3.for of 
// 用于遍历数组 与forEach()不同的是 它可以正确响应 break continue return 语句

4.解构赋值 
// let [a, b, c] = [1, 2, 3];

5.箭头函数 
// =>

6....操作符 
// Math.max(...[14, 3, 77]) 等同于 Math.max(14, 3, 77);

7.类
// ES6 的 class 可以看作只是一个语法糖
// 类的方法内部如果含有 this 它默认指向类的实例
// 如果一定要实现私有方法可以通过 Symbol 变通实现
const bar = Symbol('bar');
const snaf = Symbol('snaf');

export default class myClass{

  // 公有方法
  foo(baz) {
    this[bar](baz);
  }

  // 私有方法
  [bar](baz) {
    return this[snaf] = baz;
  }

  // ...
};


ES7新特性:

1.Array.prototype.includes

2.Exponentiation Operator(求幂运算)


ES8新特性:
1.Object.values + Object.entries 
// let obj = { a: 1, b: 2, c: 3 }; 
// Object.values(obj) [1,2,3]; 
// Object.entries(obj) ['a', 1], ['b', 2], ['c', 3]

2.String padding 
// 字符串填充

3.Object.getOwnPropertyDescriptors 
// writable 属性的值是否可以被重写 
// enumerable 此属性是否可以被枚举
// configurable 是否可以删除目标属性或是否可以再次修改属性的特

4.函数参数列表和调用中的尾逗号 
// Trailing commas

5.异步函数 
// Async Functions

// throttle 节流
// 例如用户8s内连续点击300次按钮 可以throttle(fn, 5000)实现节流5s内只触发一次
module.exports = function throttle (fn, time) { 

    var that = fn, 
        timer,  
        firstTime = true;

    return function () { 
        let args = arguments,
            me = this;
            
        if (firstTime) {
            fn.apply(me, args)
            return firstTime = false
        }
        if (timer) {
            return false
        }

        timer = setTimeout(function() { 
          clearTimeout(timer)
          timer = null
          fn.apply(me, args)
        }, time || 500)
    }
}



// debounce 防抖
// 例如搜索框只有在用户停止输入1s后才出现联想词 deboune(fn, 1000)
module.exports = function debounce (fn, delay) { 
    var timer = null;

    return function () {
        clearTimeout(timer);
        timer = setTimeout( function () {
            fn();
        }, delay);
    }
}

//错误用法
//会根据首个char字符assic码排序
Array.prototype.sort.call([12,1,5])
>>> (3) [1, 12, 5]

//正确用法
Array.prototype.sort.call([12,1,5],(a,b)=>(a-b))
>>> (3) [1, 5, 12]

使用Array.prototype.sort不应该只返回两种值 true false 相当于 1 0 而没有 -1

1.纯粹的函数调用: this === 全局对象 
console.log(this === window) // true

2.作为对象方法的调用: 这时 this 就指这个上级对象
x = {
  a: 1, 
  f: function() { console.log(this.a) }
}
x.f() //1

3.作为构造函数调用: this 指向这个新对象 
function o(n) { this.a = n }
let o1 = new o(1) // {a: 1}

4.call/apply调用: 指向显式调用的对象
x = {
  a: 1, 
  f: function() { console.log(this.a) }
}
x.f.call({a:2}) //2

5.箭头函数: 箭头函数不会创建自己的 this 它只会从自己的作用域链的上一层继承 this
x = {
  a: 1, 
  f: () => { console.log(this === window) }
}
x.f() //true

setTimeout(() => {console.log(1)}, 0);
new Promise((resolve, reject) => {
    resolve('ok')
}).then(function() {
    console.log(2);
}).then(function() {
    console.log(3);
}).then(function() {
    console.log(4);
});
console.log(5);

// >> 5 2 3 4 1
// 主线程的所有代码执行结束后。先从微任务queue里拿回掉函数，然后微任务queue空了后再从宏任务的queue拿函数。
// 事件循环总是 一个宏任务 => 所有微任务 => 一个宏任务 => 所有微任务 ...

六种基本数据类型

undefined
null
string
boolean
number
symbol(ES6)



一种引用类型

Object

//本质原理
原始数据类型 => 存储在栈中
//占据空间固定
引用类型 => 存储在堆中
//(而存储在变量处的值实际上是指针point,指向存储对象内存地址)
//占据空间大小会变

typeof(undefined); // undefined
typeof(null); // object ☆
typeof(true); // boolean
typeof(3); // number
typeof('str'); // string
typeof(Symbol('k')); // symbol
typeof({key: 0}); // object
typeof(function(){}); // function
typeof([1, 2, 3]); // object  ☆

let arr = [1, 2, 3]

console.log(arr instanceof Array); // true // es6

Object.prototype.toString.call(arr) === '[object Array]'; // true

arr.constructor === Array; // true

let obj = {};

// 直接 for in + hasOwnProperty
function ieo (obj) {
   for (var i in obj) {
      if (obj.hasOwnProperty(i)) {
        return false;
      }
   }
   return true;
}



ieo(obj); // true

JSON.stringify(obj) === '{}'; // true

Object.keys(obj).length === 0; // true // es6

1.箭头函数不会创建自己的this 只会从自己的作用域链的上一层继承this ☆

2.通过 call() 或 apply() 方法调用一个函数时 第一个参数会被忽略 (bind也同样成立)

3.不绑定Arguments对象

4.不能和new一起使用 和new一起用会抛出错误
// 因为使用箭头函数后this会指定闭合的当前上下文，而当函数做为构造器的时候，this又会指向生成的实例， 这个造成歧义。

5.没有prototype

6.不能使用yield关键字

XSS: 跨站脚本攻击
恶意web用户将代码植入到提供给其它用户使用的页面中

XSS防范:
永远不要相信用户的输入 后端转义 + 前端转义

CSRF: 跨站请求伪造
一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法

CSRF 防范

1.最基础的防范就是在 Get 与 Post 区别的文章中有说过
Post 请求要比 Get 更为安全 但只能说会 Pass 一些低级攻击选手。

2.请求来源限制——验证 HTTP Referer 字段
在 HTTP 请求头中有一个字段叫 Referer 它记录了请求的来源地址 
服务器需要做的是验证这个来源地址是否合法 如果是来自一些不受信任的网站 则拒绝响应
(但是 Refer 也能伪造)

1. CSRFToken 
使用随机数作为请求参数来校验

hash模式: [hash 改变] + [监听 hashChange] + [route map 执行回调]
history模式: [主动 pushState 改变 Path] + [route map 执行回调]