Javascript 链式操作以及流程控制
春节过后，感觉过年吃的油腻的食品转化的脂肪都长到 脑子去了。 根本转不动啊
上班第一天 实在是写不动代码了， 顺手打开多天为看的 收件箱，查看查看邮件，看看春节期间 风云变幻的前端圈又有哪些大事发生。（在这里先为 GitLab 的那位运维同学 默哀一分钟）
在 sg 的邮件中 看到了一道有意思的题目。
原生JS 实现一个 lazyMan 效果
what ? lazyman 是什么鬼，顺其自然的百度了一下 
-------------------------------------------------------------假装有分割线------------------------------------------------------------------
把题目转换成 代码就是如下的 一个意思。
题目： 
-------------------------------------------------------------假装有分割线------------------------------------------------------------------
答案： 
-------------------------------------------------------------假装有分割线------------------------------------------------------------------
思考： 这个题目主要考察哪些内容呢？（我们一步步往下看）
1、首先，看到这个 链式操作 我们能想到的就是 我们原来在使用 JQ 的时候 经常会去 操作DOM 的时候会用到的 $.addClass('xxx').removeClass('xxx') 这样的操作对吧
那么我们仔细思考一下，为什么 这种写法 是能够执行，且不会报错呢？
因为 $.addClass('xxx') 这是一个已经执行过的方法了，就是相当于 上面这种链式写法是 在一个方法后面又去 执行一个方法， 如果原生直接这么去写，肯定是会报错
说 前面这个方法 不包含后面的这个方法。（报这个错误是正常的，为什么呢？ 因为本身确实没有啊，因为 func 其本身就是一个 obj，但是这个 obj 中不包含第二个方法）
-------------------------------------------------------------假装有分割线------------------------------------------------------------------
2、那我们首先想到的就是 构造函数， 然后 给这个构造函数的 原型上去添加链式操作需要的方法。
好，那我们先码上 初级 的代码。
// 构造函数
function _lazyMan(name) {
console.log(name);
}
然后我们简单的封装一下
// 构造函数
function _lazyMan(name) {
console.log(name);
}
/* 封装 */
function lazyMan(name) {
return new _lazyMan(name);
}
lazyMan('zz'); // zz
-------------------------------------------------------------假装有分割线------------------------------------------------------------------
3、我们再给我们的构造函数的原型 添加方法
// 构造函数原型上的 sleep fn
_lazyMan.prototype.sleep = function() {
console.log('i am sleepping');
}
// 构造函数原型上的 eat fn
_lazyMan.prototype.eat = function() {
console.log('i am eatting');
}
然后实例化 构造函数，并给其赋值，看结果
lazyMan('zz').eat()
// zz
// i am eatting
lazyMan('zz').eat().sleep()
// zz
// i am eatting
// error 报错
思考： 为什么会报错么？
上文已给解答。
-------------------------------------------------------------假装有分割线------------------------------------------------------------------
4、我们需要如何去操作才能完成我们 真正想要的东西呢？
我们 是不是需要一个 数组 来存储我们的 事件，然后 有一个 next 的 方法 专门去 执行我们数组中的方法呢？
按照这个思路，我们来尝试着 组织 下我们的代码。
// 构造函数
function _lazyMan(name) {
this.tasks = [];
var that = this;
var fn = (function(n) {
var name = n;
return function() {
console.log(name);
that.next();
}
})(name)
this.tasks.push(fn);
setTimeout(function() {
that.next();
},0)
}
// 事件调度函数
_lazyMan.prototype.next = function() {
var fn = this.tasks.shift();
fn && fn();
}
// 构造函数原型上的 sleep fn
_lazyMan.prototype.sleep = function() {
var that = this;
var fn = (function() {
return function() {
console.log('i am sleepping');
that.next();
}
})()
this.tasks.push(fn);
return this; // 实现链式调用
}
// 构造函数原型上的 eat fn
_lazyMan.prototype.eat = function() {
var that = this;
var fn = (function() {
return function() {
console.log('i am eatting');
that.next();
}
})()
this.tasks.push(fn);
return this; // 实现链式调用
}
其实上面的 代码还可以更加简化一些。
但是在 实际的应用中肯定包含了更多的 变量需要去利用 闭包 去保存、 但是 ES6 的出现 会让代码 一如既往的简洁。
lazyMan('zz').eat().sleep().eat();
lazyMan('zz').sleep().eat();
通过上面的代码，我们发现，我们把 我们链式操作的方法在 构造函数实例化的 时候， 均存入到了 我们定义的 tasks 数组中去了。
在 链式操作调用方法的时候，先去 执行 原型链上的 链式上的 第一个方法，然后再去 执行 next 方法， 去执行 存放在数组中的下一个方法。
继而，我们得到了我们想要的 链式操作 以及 很 明确的 流程控制。
可能有同学会问 流程控制 体现在 哪里。
回过头来，我们再 仔细的看下题目。
为什么会去 执行 两遍这个程序，因为就是为了体现 程序执行过程是 有序的，而不是随便任意执行。 （完）
