Javascript 链式操作以及流程控制

╰+攻爆jí腚メ 2022-07-12 02:50 120阅读 0赞

春节过后，感觉过年吃的油腻的食品转化的脂肪都长到 脑子去了。 根本转不动啊

上班第一天 实在是写不动代码了， 顺手打开多天为看的 收件箱，查看查看邮件，看看春节期间 风云变幻的前端圈又有哪些大事发生。（在这里先为 GitLab 的那位运维同学 默哀一分钟）

在 sg 的邮件中 看到了一道有意思的题目。

原生JS 实现一个 lazyMan 效果

what ? lazyman 是什么鬼，顺其自然的百度了一下 ![675289-20170207161805588-790811743.gif][]

-------------------------------------------------------------假装有分割线------------------------------------------------------------------

把题目转换成 代码就是如下的 一个意思。

题目： ![675289-20170207161649416-771130633.png][]

-------------------------------------------------------------假装有分割线------------------------------------------------------------------

答案： ![675289-20170207161708932-1205144020.png][]

-------------------------------------------------------------假装有分割线------------------------------------------------------------------

思考： 这个题目主要考察哪些内容呢？（我们一步步往下看）

1、首先，看到这个 链式操作 我们能想到的就是 我们原来在使用 JQ 的时候 经常会去 操作DOM 的时候会用到的 $.addClass('xxx').removeClass('xxx') 这样的操作对吧

那么我们仔细思考一下，为什么 这种写法 是能够执行，且不会报错呢？

因为 $.addClass('xxx') 这是一个已经执行过的方法了，就是相当于 上面这种链式写法是 在一个方法后面又去 执行一个方法， 如果原生直接这么去写，肯定是会报错

说 前面这个方法 不包含后面的这个方法。（报这个错误是正常的，为什么呢？ 因为本身确实没有啊，因为 func 其本身就是一个 obj，但是这个 obj 中不包含第二个方法）

-------------------------------------------------------------假装有分割线------------------------------------------------------------------

2、那我们首先想到的就是 构造函数， 然后 给这个构造函数的 原型上去添加链式操作需要的方法。

好，那我们先码上 初级 的代码。![675289-20170207171631338-1980243967.gif][]

// 构造函数 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 方法， 去执行 存放在数组中的下一个方法。

继而，我们得到了我们想要的 链式操作 以及 很 明确的 流程控制。

可能有同学会问 流程控制 体现在 哪里。

回过头来，我们再 仔细的看下题目。

为什么会去 执行 两遍这个程序，因为就是为了体现 程序执行过程是 有序的，而不是随便任意执行。 （完）

![675289-20170207175355588-1492415023.png][]

[675289-20170207161805588-790811743.gif]: /images/20220711/f30991dd12754700b4bf4b4f83bf8b3a.png
[675289-20170207161649416-771130633.png]: /images/20220711/1b3b3508a38d4deca66d1a2f2be34e33.png
[675289-20170207161708932-1205144020.png]: /images/20220711/42c568eadabf4b0eab1aa16d915985a2.png
[675289-20170207171631338-1980243967.gif]: /images/20220711/edae86ff79f74292870e9674ddfabe2a.png
[675289-20170207175355588-1492415023.png]: /images/20220711/b914962e4ec84e2cb532b812e4f1b17a.png