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 方法, 去执行 存放在数组中的下一个方法。
继而,我们得到了我们想要的 链式操作 以及 很 明确的 流程控制。
可能有同学会问 流程控制 体现在 哪里。
回过头来,我们再 仔细的看下题目。
为什么会去 执行 两遍这个程序,因为就是为了体现 程序执行过程是 有序的,而不是随便任意执行。 (完)
Javascript 链式操作以及流程控制的更多相关文章
- Javascript、C#、php、asp、python 等语言的链式操作的实现
一.什么是链式操作 把需要的下一步操作的对象通过上一步操作返回回来.使完成某些功能具有持续性. 二.链式操作优点 代码更精简优雅.链式操作能大大精简代码量,多项操作一行代码一气呵成,搞定: 链式操作应 ...
- jQuery链式操作[转]
用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...
- JQUERY链式操作实例分析
本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...
- jQuery链式操作
讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...
- PHP设计模式:类自动载入、PSR-0规范、链式操作、11种面向对象设计模式实现和使用、OOP的基本原则和自动加载配置
一.类自动载入 SPL函数 (standard php librarys) 类自动载入,尽管 __autoload() 函数也能自动加载类和接口,但更建议使用 spl_autoload_registe ...
- js实现链式操作
前言:前不久阿里远程面试时问了我一个问题,如下: function Person(){}; var person = new Person(); //实现person.set(10).get()返回2 ...
- Javascript 链式作用域 function fn(){}和var fn=function(){}区别
其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里. 这句话有点难懂,但 ...
- 用php实现一个简单的链式操作
最近在读<php核心技术与最佳实践>这本书,书中第一章提到用__call()方法可以实现一个简单的字符串链式操作,比如,下面这个过滤字符串然后再求长度的操作,一般要这么写: strlen( ...
- PHP中的__toString方法(实现JS里的链式操作)
_toString方法是在打印对象时自动调用的魔术方法,如果不声明会报以下错 Catchable fatal error: Object of class String could not be co ...
随机推荐
- iOS异常捕获和处理
2013年4月份整理的代码,仅作记录: //先宏定义 //发布和未发布状态的日志切换 #ifdef DEBUG //异常栈开关 #define STACK_KEY YES ...
- Python的使用方法
1 安装turtle Python2安装命令: pip install turtule Python3安装命令: pip3 install turtle 因为turtle库主要是在Python2中使用 ...
- CentOS下SVN服务的启动与关闭
CentOS下SVN服务的启动与关闭 操作系统:CentOS 6.5 SVN版本:1.8.11 启动SVN服务: svnserve -d -r /home/svn /home/svn 为版本库的根 ...
- 什么是布局?Android中的布局是怎样的?
布局管理器(通常被称为是布局)是对ViewGroup类的扩展,是用来控制子控件在UI中的位置. Android SDK包含了许多布局类,在为视图.Fragment和Activity创建UI时,可以使用 ...
- input标签实现小数点后两位保留小数
短短一行代码就可以实现 <input type="number" min="0" max="100" step="0.01& ...
- npm、cnpm、yarn 安装删除异同
背景 一直觉得npm.cnpm.yarn的安装删除基本一样用哪个都行,不过俗话说的好,实践出真知,这里记录一下今天简单测试得到的结果总结. 可能会有错误,希望大家评论指正,十分感谢. 测试电脑系统:M ...
- angular.uppercase()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Spring SpringMVC SpringBoot SpringCloud概念、关系及区别
一.正面解读: Spring主要是基于IOC反转Beans管理Bean类,主要依存于SSH框架(Struts+Spring+Hibernate)这个MVC框架,所以定位很明确,Struts主要负责表示 ...
- vue中计算属性computed方法内传参
vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...
- 数位dp-Bomb
难受啊!!越做题是越感觉菜,这个又被几个坑给卡住了(只有我这个学渣才会卡) 坑点:1.考虑n是否已包含49,有的话还要再+1. 2, 注意从最高开始考虑时,再判断时要考虑它本身为0的情况,.比如n=5 ...