Shenlvmeng's Blog

(function(win, doc){
  var docEl = doc.documentElement,
    resizeEvt = 'onorientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= 750) {
       docEl.style.fontSize = '100px';
      } else {
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
      }
    };
  //省去addEventListener兼容性处理
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(window, document);

var person = {
  _name: '',  //`_`表示只能通过方法访问
  nickname: '酱'
};
Object.defineProperty(person, 'name', function () {
  get: function () {
    return this._name;
  },
  set: function (newValue) {
    this.nickname = newValue + '酱';
    this._name = newValue;
  }
});

var EventUtil = {
  // 全局事件管理
  var events = {},
  // 注册事件
    on = function (type, handler) {
      if (events[type]) {
        events[type].push(handler);
      } else {
        events[type] = [handler];
      }
    },
    // 触发事件
    emit = function (type) {
      if (!events[type]) return;
        for (var i = 0, len = events[type].length; i < len; i++) {
          events[type][i];
      }
    };
};

constructor (value: any) {
  this.value = value
  this.dep = new Dep()  //一个 Dep对象实例，Watcher 和 Observer 之间的纽带
  this.vmCount = 0
  def(value, '__ob__', this)  //把自身 this 添加到 value 的 __ob__ 属性上
  if (Array.isArray(value)) { //对 value 的类型进行判断
    const augment = hasProto
      ? protoAugment
      : copyAugment
    augment(value, arrayMethods, arrayKeys) // 数组增强方法
    this.observeArray(value) //如果是数组则观察数组
  } else {
    this.walk(value) //否则观察单个元素。
  }
}

constructor (
  vm: Component,
  expOrFn: string | Function,
  cb: Function,
  options?: Object
) {
  this.vm = vm
  vm._watchers.push(this)// 将当前 Watcher 类推送到对应的 Vue 实例中
  ......
  // parse expression for getter
  if (typeof expOrFn === 'function') {
    // 如果是函数，相当于指定了当前订阅者获取数据的方法，每次订阅者通过这个方法获取数据然后与之前的值进行对比
    this.getter = expOrFn
  } else {
    this.getter = parsePath(expOrFn)// 否则的话将表达式解析为可执行的函数
    ......
  }
  this.value = this.lazy
    ? undefined
    : this.get()   //如果 lazy 不为 true，则执行 get 函数进行依赖收集
}

/**
 * Evaluate the getter, and re-collect dependencies.
 */
get () {
  pushTarget(this)  // 设置全局变量 Dep.target，将 Watcher 保存在这个全局变量中
  const value = this.getter.call(this.vm, this.vm) // 调用 getter 函数，进入 get 方法进行依赖收集操作
  // "touch" every property so they are all tracked as
  // dependencies for deep watching
  if (this.deep) {
    traverse(value)
  }
  popTarget()  // 将全局变量 Dep.target 置为 null
  this.cleanupDeps()
  return value
}

//...
  constructor () {
    this.id = uid++
    this.subs = [] //存储 Watcher 实例的数组
  }
//...
  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

  notify () {
    // stablize the subscriber list first
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {   //遍历 Watcher 列表，调用 update 方法进行更新操作
      subs[i].update()
    }
  }

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options) //开始初始化步骤
}

initMixin(Vue) //插入初始化代码
stateMixin(Vue) //插入数据绑定代码
eventsMixin(Vue) //插入事件相关代码
lifecycleMixin(Vue) //插入生命周期代码
renderMixin(Vue) //插入模板渲染代码

function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
//...
    initLifecycle(vm)   //vm 的生命周期相关变量初始化
    initEvents(vm)    // vm 的事件监控初始化
    initRender(vm)  // 模板解析
    callHook(vm, 'beforeCreate')
    initState(vm) //vm 的状态初始化，prop/data/computed/method/watch 都在这里完成初始化
    callHook(vm, 'created')
    if (vm.$options.el) {
	  vm.$mount(vm.$options.el)
    }
}

export function initState (vm: Component) {
  vm._watchers = []  //新建一个订阅者列表
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)  // 初始化 Props，与 initData 差不多
  if (opts.methods) initMethods(vm, opts.methods)  // 初始化 Methods，Methods 的初始化比较简单，就是作用域的重新绑定。
  if (opts.data) {
    initData(vm) // 初始化 Data，响应式关键步
  } else {
    observe(vm._data = {}, true /* asRootData */) //如果没有 data，则观察一个空对象
  }
  if (opts.computed) initComputed(vm, opts.computed)// 初始化 computed，这部分会涉及 Watcher 类以及依赖收集，computed 其实本身也是一种特殊的 Watcher
  if (opts.watch) initWatch(vm, opts.watch)// 初始化 watch，这部分会涉及 Watcher 类以及依赖收集
}

function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? data.call(vm)
    : data || {}
  if (!isPlainObject(data)) {// 保证data必须为纯对象
    ......
  }
  // proxy data on instance
  const keys = Object.keys(data)
  const props = vm.$options.props
  let i = keys.length
  while (i--) {
    if (props && hasOwn(props, keys[i])) {// 是props，则不代理
      ...... //如果和 props 里面的变量重了，则抛出 Warning
    } else {// 否则将属性代理的 vm 上，这样就可以通过 vm.xx 访问到 vm._data.xx
      proxy(vm, keys[i]) //proxy方法遍历 data 的 key，把 data 上的属性代理到 vm 实例上
    }
  }
  // observe data
  observe(data, true /* asRootData */)  //关键一步，observe(data, this)方法来对 data 做监控
}

/**
 * Attempt to create an observer instance for a value,
 * returns the new observer if successfully observed,
 * or the existing observer if the value already has one.
 * 返回一个 Observer 对象
 */
export function observe (value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value)) {  //如果不是对象和数组则不监控，直接返回
    return
  }
  let ob: Observer | void
  //判断 value 是否已经添加了 __ob__ 属性，并且属性值是 Observer 对象的实例。避免重复引用导致的死循环
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {    //如果是就直接用
    ob = value.__ob__
  } else if (
    observerState.shouldConvert && //只有 root instance props 需要创建 Observer 对象
    !isServerRendering() && //不是服务端渲染
    (Array.isArray(value) || isPlainObject(value)) && //数组或者普通对象
    Object.isExtensible(value) && //可扩展对象
    !value._isVue // 非 Vue 组件
  ) {
    ob = new Observer(value)  //关键步！在 value 满足上述条件的情况下创建一个 Observer 对象
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob // 返回一个 Observer 对象
}

walk (obj: Object) {
  const keys = Object.keys(obj)
  for (let i = 0; i < keys.length; i++) {
    defineReactive(obj, keys[i], obj[keys[i]]) //遍历对象，结合defineReactive方法地柜将属性转化为getter和setter
  }
}

/**
 * Define a reactive property on an Object.
 */
export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: Function
) {
  const dep = new Dep()  //每个对象都会有一个 Dep 实例，用来保存依赖 (Watcher 对象)
  ......
  let childOb = observe(val)   //结合 observe 函数进行将对象的对象也变成监控对象
  // 最重点、基石、核心的部分：通过调用 Object.defineProperty 给 data 的每个属性添加 getter 和 setter 方法。
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // 依赖收集的重要步骤
      if (Dep.target) {//如果存在Dep.target这个全局变量不为空，表示是在新建Watcher的时候调用的，代码已经保证
        dep.depend()    // 依赖收集
        if (childOb) {
          childOb.dep.depend() // 处理好子元素的依赖 watcher
        }
        if (Array.isArray(value)) { // 如果是数组，进一步处理
          dependArray(value)
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      ......
      childOb = observe(newVal)    // 对新数据重新 observe，更新数据的依赖关系
      dep.notify()   // 通知dep进行数据更新，这个方法在前面的 Dep 类中讲过
    }
  })
}

update () {
  /* istanbul ignore else */
  if (this.lazy) {
    this.dirty = true
  } else if (this.sync) {
    this.run()
  } else {
    queueWatcher(this)
  }
}

//这里是一个需要异步完成的函数asy和回调函数cal
asy(), cal();
//它们的定义和使用像下面这样
function asy (callback) {
    setTimeout(function () {
        //异步工作代码
        callback();
    }, 0);
}

function cal () {
    console.log('Hello!'); //或其它什么
}

asy(cal);

target.on('someevent', handler); // 注册事件
target.emit('someevent'); //触发事件

var EventUtil = {
    // 全局事件管理
    var events = {},
    // 注册事件
        on = function (type, handler) {
            if (events[type]) {
                events[type].push(handler);
            } else {
                events[type] = [handler];
            }
        },
    // 触发事件
        emit = function (type) {
            if (!events[type]) return;
            for (var i = 0, len = events[type].length; i < len; i++) {
                events[type][i];
            }
        };
};

function async(request, callback) {
    // Do something.
    asyncA(request, function (data) {
        // Do something
        asyncB(request, function (data) {
            // Do something
            asyncC(request, function (data) {
                // Do something
                callback(data);
            });
        });
    });
}

var promise = new Promise(function (resolve, reject){
    if (/* 异步操作成功 */) {
        resolve(val);
    } else {
        reject(err)
    }
});

promise.then(function (val) {
    //success handler
}, function (val) {
    //failure handler
});

// 或是
promise.then(function (val) {
    //success handler
}).catch(err) {
    //error handler
}

// 处理一批次的异步任务
var p = Promise.all([p1, p2, p3]),
    q = Promise.race([p1, p2, p3]);

//constructor
var Promise = function() {
    this.callbacks = [];
}

Promise.prototype = {
    construct: Promise,
    resolve: function(result) {
        this.complete("resolve", result);
    },

    reject: function(result) {
        this.complete("reject", result);
    },

    complete: function(type, result) {
        while (this.callbacks[0]) {
            this.callbacks.shift()[type](result);
        }
    },

    then: function(successHandler, failedHandler) {
        this.callbacks.push({
            resolve: successHandler,
            reject: failedHandler
        });

        return this;
    }
}

function asyncFunc() {
	// 执行someFunc后交出执行权
    var t = yield someFunc();
}

function* gen () {
    for (let i = 0; i < 10; i++) {
        yield i;
    }
}

var g = gen(); 
g.next(); // 1
g.next(); // 2

function* gen () {
    var x = yield 1;
    try {
        yield x;
    } catch (e) {
        console.log(e);
    }
}

var g = gen(); 
g.next(); // 1
g.next(2); // 2
g.throw('some error') // 'some error'

function* gen() {
    var text = yield fetch('http://www.example.org/data.json');
    console.log(text);
}

var g = gen();
g.next().value.then(function (data) {
    return data.json();
}).then(function (data) {
    g.next(data);
});

var fs = require('fs');
var co = require('co');

function readFile(path) {
    return function (callback) {
        fs.readFile(path, {encoding: 'utf-8'}, cb);
    }
}

function* gen() {
    var d1 = yield readFile('file1.js');
    console.log(d1);
    var d2 = yield readFile('file2.js');
    console.log(d2);
}

co(gen);

function co(gen) {
  var ctx = this;
  var args = slice.call(arguments, 1);

  return new Promise(function(resolve, reject) {
    if (typeof gen === 'function') gen = gen.apply(ctx, args);
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    onFulfilled();

    function onFulfilled(res) {
      var ret;
      try {
        ret = gen.next(res);
      } catch (e) {
        return reject(e);
      }
      next(ret);
    }

    function onRejected(err) {
      var ret;
      try {
        ret = gen.throw(err);
      } catch (e) {
        return reject(e);
      }
      next(ret);
    }

    function next(ret) {
      if (ret.done) return resolve(ret.value);
      var value = toPromise.call(ctx, ret.value);
      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
      return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
        + 'but the following object was passed: "' + String(ret.value) + '"'));
    }
  });
}

var readFile = function (path) {
    var ctx = this;
    return new Promise (function (resolve, reject){
        readFile.call(ctx, function (err, data){
            if (err) reject(err);
            resolve(data);
        });
    });
}

function* gen() {
    var d1 = yield readFile('file1.js');
    console.log(d1);
    var d2 = yield readFile('file2.js');
    console.log(d2);
}

var g = gen();

g.next().value.then(function (data) {
    g.next(data).value.then(function (data) {
        g.next(data);
    });
})

// 执行器
function run (gen) {
    var g = gen;

    function next(data) {
        var res = g.next(data);
        if (res.done) return res.value;
        res.value.then(function (data) {
            next(data);
        })
    }

    next();
}

run(gen);

// 执行器
function f(a, b) {
    return a + b;
}

f(x * 3 + 1, 1);

// 可以写成下面这样

function thunk () {
    return x * 3 + 1;
}

function f(thunk, 1) {
    return thunk() + 1;
}

var thunk = function(fn) {
    return function () {
        var args = Array.prototype.slice.call(arguments);
        return function (done) {
            args.push(done);
            fn.apply(this, args);
        }
    }
}

function thunkify(fn) {
    assert('function' == typeof fn, 'function required');
    // 返回一个包含thunk函数的函数，返回的thunk函数用于执行yield，而外围这个函数用于给thunk函数传递参数
    return function() {
        var args = new Array(arguments.length);
        // 缓存当前上下文环境，给fn提供执行环境
        var ctx = this;
 
        // 将参数类数组转化为数组（实现方式略显臃肿，可直接用Array.prototype.slice.call(arguments)实现）
        for (var i = 0; i < args.length; ++i) {
            args[i] = arguments[i];
        }
 
        // 真正的thunk函数（有且只有一个参数是callback的函数，且callback的第一个参数为error）
        // 类似于：
        // function(cb) {fs.readFile(path, {encoding: 'utf8}, cb)}
        return function(done) {
            var called;
 
            // 将回调函数再包裹一层，避免重复调用；同时，将包裹了的真正的回调函数push进参数数组
            args.push(function() {
                if (called) return;
                called = true;
                done.apply(null, arguments);
            });
 
            try {
                // 在ctx上下文执行fn（一般是异步函数，如：fs.readFile）
                // 并将执行thunkify之后返回的函数的参数（含done回调）传入，类似于执行：
                // fs.readFile(path, {encoding: 'utf8}, done)
                // 关于done是做什么用，则是在co库内
                fn.apply(ctx, args);
            } catch (err) {
                done(err);
            }
        }
    }
};

async function readFile() {
    var d1 = await readFile('file1.js');
    console.log(d1);
    var d2 = await readFile('file2.js');
    console.log(d2);
}

function fn(args) {
  return spawn(function* () {
    //...
  });
}
function spawn (genF, self) {
  return new Promise(function (resolve, reject) {
    var gen = genF.call(self);
    step(() => gen.next(undefined));
    function step (nextF) {
      var next;
      try {
        next = nextF();
      } catch(e) {
        // finished with failure, reject the promise
        reject(e);
        return;
      }
      if (next.done) {
        // finished with success, resolve the promise
        resolve(next.value);
        return;
      }
      // not finished, chain off the yielded promise and `step` again
      Promise.resolve(next.value).then(
        v => step(() => gen.next(v)),
        e => step(() => gen.throw(e))
      );
    }
  });
}

var btn = document.getElementById('button');
btn.onclick = function () {
    alert(this.id); // "button"
}
//删除
btn.onclick = null;

var btn = document.getElementById('button');
btn.addEventListener("click", function () {
    alert(this.id);
}, false);
btn.addEventListener("click", function () {
    alert(this.id + " again.");
}, false);

var EventUtil = {
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    removeHandler: function(element, type, handler) {
    if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
}

var player = document.getElementById("video"),
    btn = document.getElementById("video-play"),
    curtime = document.getElementById("curtime"),
    duration = document.getElementById("duration");

//更新播放时间
duration.innerHTML = player.duration;

//为按钮添加处理事件
EventUtil.addHandler(btn, "click", function (e) {
    if (player.paused) {
        player.play();
        btn.value = "Pause!";
    } else {
        player.pause();
        btn.value = "Play!";
    }
});

//定时更新时间
setInterval(function () {
    curtime.innerHTML = player.currentTime;
}, 250);

if (audio.canPlayType("audio/mpeg")){
    //进一步处理
}