// target: 被代理的目标
// handler: 代理的行为函数
let p = new Proxy(target, handler);

 // 初始化一个handler, 该handler的内容是设置get方法， 如果我们读取了不在该对象上的属性， 则返回默认值37
let handler = {
    get: function(target, name){
        return name in target ? target[name] : 37;
    }
};
// 初始化一个proxy对象 ，
// 参数1是一个空对象， 意味着我们没有对其他变量进行绑定
// 参数2是一个handler重写了get行为
let p = new Proxy({}, handler);

p.a = 1;
p.b = undefined;

console.log(p.a, p.b);    // 1, undefined
// 此时，c不在p内， 所以返回默认值37
// 至此， 我们完成了对对象p， get方法的代理.
console.log('c' in p, p.c);    // false, 37

let target = {};
let p = new Proxy(target, {});

p.a = 37;   // 操作转发到目标

console.log(target.a);    // 37. 操作已经被正确地转发

let validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The age seems invalid');
      }
    }

    // The default behavior to store the value
    obj[prop] = value;
  }
};

let person = new Proxy({}, validator);

person.age = 100;

console.log(person.age); 
// 100

person.age = 'young'; 
// 抛出异常: Uncaught TypeError: The age is not an integer

person.age = 300; 
// 抛出异常: Uncaught RangeError: The age seems invalid

// 例如， get方法
var obj = {a: 1}
Reflect.get(obj, 'a') // ‘a’

// 类似这种效果
var likeReflect = {
    get (obj, key) {
        return obj['a']
    }
}

var obj = {
    a: 1
}
var prObj = new Proxy(obj, {
      get: function(obj, key){
        return obj[key] * 3;
    }
})
likeReflect.get(prObj, 'a')

// 手动实现构造函数OLO
function Person(name) {
    this.name = name
}

function Man(name, sex) {
    Person.call(this, name)
    this.sex = sex
}
Man.prototype = Person.prototype
Man.prototype.constructor = Man

a = new Person('lili')
b = new Man('xiaoming', 11)

// 使用工具函数实现OLO
function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

function extend(sup,base) {
    // 获取属性的属性（枚举/可读/可写/可配置）
  var descriptor = Object.getOwnPropertyDescriptor(
    base.prototype,"constructor"
  );
  // 链接原型链， 子类->父类
  base.prototype = Object.create(sup.prototype);
  // proxy的处理函数， 
//   重写construct: 使用上面的sup的新链， 并且调用原有逻辑（新建一个对象， 执行函数体， 返回obj）
//   重写apply： 保证初始化入参都被调用了 this.key = value
  var handler = {
    construct: function(target, args) {
      var obj = Object.create(base.prototype);
      this.apply(target,obj,args);
      return obj;
    },
    apply: function(target, that, args) {
      sup.apply(that,args);
      base.apply(that,args);
    }
  };
  // 以base为基础新建proxy
  var proxy = new Proxy(base,handler);
  // 重新设置constructor
  descriptor.value = proxy;
  Object.defineProperty(base.prototype, "constructor", descriptor);
  return proxy;
}

var Person = function(name){
  this.name = name
};

// 这样就很清晰了
var Boy = extend(Person, function(name, age) {
  this.age = age;
});

Boy.prototype.sex = "M";

var Peter = new Boy("Peter", 13);
console.log(Peter.sex);  // "M"
console.log(Peter.name); // "Peter"
console.log(Peter.age);  // 13

const input = document.getElementById('input');
const p = document.getElementById('p');
const obj = {};

const newObj = new Proxy(obj, {
  get: function(target, key, receiver) {
    console.log(`getting ${key}!`);
    return Reflect.get(target, key, receiver);
  },
  set: function(target, key, value, receiver) {
    console.log(target, key, value, receiver);
    if (key === 'text') {
      input.value = value;
      p.innerHTML = value;
    }
    return Reflect.set(target, key, value, receiver);
  }
});

input.addEventListener('keyup', function(e) {
  newObj.text = e.target.value;
});

let a = 1;
let b = a * 5;

a = 2;
b; // 5 我们期望， 如果a改变，那么基于a的计算都可以同步, 我们希望b为10

Object.defineProperty(obj, 'keyName', { 
    // 这里就是配置obj这个对象的keyName这个属性的地方
    get () {

    },
    set() {

    }
})

// 首先是四个属性值的属性
// enumerable : 是否可枚举 // [].length
// writeable : 是否可写 // a.prop1 = 1;
// configurable : 是否可配置 
// value : 我获取值时返回的value

// 两个方法： get/set
// 挑战1： 我需要一个fn，输入obj把里面的每一个属性都转换为可响应式，配上get/set方法
  obj = {
    a: 1, // get: "a is 1" set: "a is 2" 
    b: 1 // "b is 1"
  }
  const transform = (obj, i) => {
    var unKnow = obj[i]
    Object.defineProperty(obj, i, {
      get() {
        console.log(`getting key "${i}": ${unKnow}`, unKnow)
        return unKnow
      },
      set(value) {
        console.log(`setting key "${i}" to: ${value}`)
        unKnow = value
      }
    })
  }

  function convert (obj) {
    // Implement this!
    for (let i in obj) {
      transform(obj, i)
    }
  }

  // test 
  let a = {
    a: 1, 
    b: 2
  }

  convert(a)

// 一个依赖项就是一个watch
// watch 中的subscibers是订阅者的一个队列，里面存放每个依赖事件
// 方法： 
// depend: 为该属性增加依赖项
// notify: 数据更新时通知依赖项更新
window.Dep = class Dep {
  constructor () {
    // 订阅队列
    this.subscribers = new Set()
    // new Set([1, 2, 3, 1])
  }

  depend () {
    if (activeUpdate) {
      this.subscribers.add(activeUpdate)
    }
  }

  notify () {
    this.subscribers.forEach(sub => sub())
  }
}

let activeUpdate = null

function autorun (update) {
  const wrappedUpdate = () => {
    activeUpdate = wrappedUpdate // 这个就是一个依赖， 注意，这个其实是是外层函数
    update() // update里面要执行一个依赖收集
    activeUpdate = null
  }
  wrappedUpdate()
}

class Dep {
  constructor () {
    this.subscribers = new Set()
  }

  depend () {
    if (activeUpdate) {
      this.subscribers.add(activeUpdate)
    }
  }

  notify () {
    this.subscribers.forEach(sub => sub())
  }
}

// 批量对Obj的属性赋予响应式的能力
function observe (obj) {
  // iterate through all properties on the object
  // and convert them into getter/setters with
  // Object.defineProperty()
  Object.keys(obj).forEach(key => {
    let internalValue = obj[key]
    // each property gets a dependency instance
    // 在进行响应式的同时初始化依赖项实例， 之后再对应的getter/setter方法中形成闭包， 把依赖状态持久化
    const dep = new Dep()
    Object.defineProperty(obj, key, {
      // The getter is responsible for registering subscribers
      get () {
        // 每次进行get方法的时候， 都进行一次依赖收集
        dep.depend()
        return internalValue
      },
      // The setter is responsible for notifying change
      set (newVal) {
        // 检测值是否改变， 如果没有改变， 那么不做处理（为了性能）
        const changed = internalValue !== newVal
        internalValue = newVal
        // triggering re-computation
        // 如果发生了改变， 那么在依赖class触发依赖项的更新
        if (changed) {
          dep.notify()
        }
      }
    })
  })
  return obj
}

let activeUpdate = null

// 这里要注意一点， 你所有的， 对依赖项相关的操作，都要以匿名函数的方式传入这个函数， 才能完成依赖的收集
function autorun (update) {
  // wrap the raw update function into a "job" function that registers and
  // unregisters itself as the current active job when invoked
  const wrappedUpdate = () => {
    activeUpdate = wrappedUpdate
    update()
    activeUpdate = null
  }
  wrappedUpdate()
}

const state = {
  count: 0
}



observe(state)

autorun(() => {
  // 在state.count就触发了getter操作， 继而触发了依赖收集
  a = state.count // 0
})

// 对state.count = 1触发了setter操作， 继而触发了依赖更新， 真他妈天才
state.count = 1

a // 1

// 1. get/set批量依赖检测
const scan = (obj) => {
  for(let i in obj) {
    let prop = obj[i]  

    Object.defineProperty(obj, i, {
      get() {
        console.log('get')
        return prop
      },
      set(value) {
        console.log('set')
        prop = value
      }
    })
  }
}

// 2. 依赖项
class DepObj {
  constructor() {
    this.taskList = new Set()
  }

  getDep() {
    if (activeUpdate) { 
      // 为啥这个要使用外部变量不用传参的方式传进来呢？
      // 依赖收集的时候，在get方法内部， 在内部我们怎么访问到
      this.taskList.add(activeUpdate)
    }
  }

  notify() {
    this.taskList.forEach(item => item())
  }
}

let activeUpdate = null

function autorun (update) {
  const wrappedUpdate = () => {
    activeUpdate = wrappedUpdate // 这个就是一个依赖， 注意，这个其实是是外层函数, 在dep类里， 我们会把它存进taskList, 供通知的时候使用
    update() // update里面要执行一个依赖收集
    activeUpdate = null
  }
  wrappedUpdate()
}

// 3. 结合数据变化检测 + 依赖项收集
const scan = (obj) => {
  for(let i in obj) {
    let prop = obj[i]  
    let dep = new DepObj()
    Object.defineProperty(obj, i, {
      get() {
        console.log('get')
        dep.getDep()
        return prop
      },
      set(value) {
        console.log('set')
        let change = value === prop
        prop = value

        if(change) {
          dep.notify()
        }
      }
    })
  }
  return obj
}

const RulesPlugin = {
    // Implement this!
    install(Vue) {
      Vue.mixins({
        created() {
          if (this.$options.rules) {
            // solution
            Object.keys(this.$options.rules).map(key => {
              const rule = this.$options.rules[key]
              this.$watch(key, (newValue) => {
                const result = rule.validate(newValue)
                if(!result) {
                  console.log(rule.message)
                }
              })
            })
          }
        }
      })
    }
  }

  Vue.use(RulesPlugin)

export default {
    render (h) {
        return h('h', {}, [...])
    }
}

export default {
    render (h) {
        // 为什么是h, 首先解释一下h的意思， 就是createElement, 为啥不是c是因为设计的时候参照了hyperscript的API, 表示是通过js写html的方法
        return h('h', {}, [...]) // arg1: 标签类型 arg2: 数据对象 arg3:
    }
}

// exmple
h('div', 'some text')
h('div', { class: 'foo' }, 'some text')
h('div', {}, [
    'some text',
    h('span', 'bar')
])

import component from ''

h(component, {
    props: {... }
})

练习1： 使用render语法渲染以下html
<div>
  <h1>0</h1>
  <h2>1</h2>
  <h3>2</h3>
</div>

Vue.component('my-component', {
  functional: true,
  // Props 可选
  props: {
    // ...
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    // ...
  }
})

function fetchURL (username, cb) {
  setTimeout(() => {
    // hard coded, bonus: exercise: make it fetch from gravatar!
    cb('https://avatars3.githubusercontent.com/u/6128107?v=4&s=200')
  }, 500)
}

const Avatar = {
  props: ['src'],
  template: `<img :src="src">`
}

function withAvatarURL (InnerComponent) {
  // Implement this!
 
  return {
    props: ['username'],
    data(){
      return { // 配置默认值
        url: 'https://avatars3.githubusercontent.com/u/6128107?v=4&s=200'
      }
    },
    created () {
      // 在created阶段拿到数据， 为渲染做准备 
      fetchURL(this.username, url => {
       this.url = url 
      })
    },
    render(h) {
      // render Avatar
      return h(InnerComponent, {
        props: { // 父级组件向子级组件传递props
          src: this.url
        }
      })
    },
  }
}

const SmartAvatar = withAvatarURL(Avatar)

new Vue({
  el: '#app',
  components: { SmartAvatar }
})

render (h) {
    // render标签
    return h('div', {
        id: '',
        class: ''
    }, 'contentText')
    
    // render复合标签
    return h('div', {}, ['someText', h('div', {}, 'someText')])
    
    // render组件
    return h(component, {
        props: {
            name: 'name'
        }
    })
}

// 所以常见的main.js, 路由中常见的语法
render: h => h(app)