javascript 链式写法,如何实现js方法的链式调用

时间: 2017-11-10阅读: 995标签: js知识

熟悉Jquery的同学都知道,它对dom的操作基本都链式调用的写法,这种给人感觉就是很简洁,易懂,而且最大的好处就是避免多次重复使用一个对象变量。  

链式的实现方式:

链式操作是在对象的方法中通过最后返回自身对象(return this),返回的对象就可以继续调用它里面的方法。那么,简单实现一下:

var Obj={
    num: 1,
    fn_a: function(){
        this.num++;
        return this;
    },
    fn_b:function(pram){
    	this.num=this.num*pram;
    	return this;
    },
}
Obj.fn_a().fn_b(5);
console.log(Obj.num);//输出10

上面代码Obj.fn_a().fn_b(5);可以分解为:

//Obj.fn_a().fn_b(5);
var a=Obj.fn_a();
a=a.fn_b(5);
console.log(a.num);//输出10

由于所有对象都会继承其原型对象的属性和方法,所以我们可以让定义在原型对象中的那些方法都返回用以调用方法的实例对象的引用,这样就可以对那些方法进行链式调用了。   那么jq是如何实现链式写法的呢?介绍下jq是如何实现链式写法的,例如:

jQuery = function (selector, context) {
    return new jQuery.fn.init(selector, context, rootjQuery);
 },
jQuery.fn = jQuery.prototype = {}
jQuery.fn.init.prototype = jQuery.fn;

可以看出jquery中return了一个实例,init函数里进行了处理初始化操作,比如选择器,拼接字符串等等,最后再将jq的prototype 赋值给init方法的prototype。

改造为工厂模式

通过一个函数,利用它来创建了一个对象,然后返回这个对象。代码如下:

function Obj() {}
Obj.prototype ={//扩展它的prototype
	setNum:function (num) {
		this.num = num;
		return this;
	},
	fn_a:function(){
        this.num++;
        return this;
    },
    fn_b:function(pram){
    	this.num=this.num*pram;
    	return this;
    },
    getNum:function (){
       return this.num;
    },
};
function I() {//工厂函数
	return new Obj();
}
var num=I().setNum(1).fn_a().fn_b(5).getNum();
console.log(num);


Promise异步链式  

Promise的出现其实是作为异步编程的一种解决方案。比传统的解决方案-回调函数和事件-更加合理、强大。 下面就简单讲解一下它的异步链式的写法,例如:

function fn_a(num) {
    return new Promise(function (resolve, reject) {
        if(num!= undefined){
            num=num+1;
            setTimeout(resolve(num), 500);
        }else{//错误
            reject("num未定义");
        }
    });
}
function fn_b(num,parm) {
    return new Promise(function (resolve, reject) {
            num=num*parm;
            setTimeout(resolve(num), 1000);
        
    });
}
fn_a(1).then(num=>{
    return fn_b(num,5);
},error=>{
    console.log(error);
}).then(num=>{
    console.log(num);//在1.5秒回返回10
})

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。  

 

Web Worker 详细介绍_Web Workers的使用

web worker 是运行在后台的 JavaScript,独立于其他脚本,也就是说在Javascript单线程执行的基础上,开启一个子线程,进行程序处理,而不影响主线程的执行。Service Worker 是一个由事件驱动的 worker,它由源和路径组成,以加载 .js 文件的方式实现的。

数字在JavaScript中是如何编译的

JavaScript中的所有数字都是浮点数。这篇博客文章解释了这些浮点数如何在64位二进制内部表示。浮点数并不一定等于小数,定点数也并不一定就是整数。所谓浮点数就是小数点在逻辑上是不固定的,而定点数只能表示小数点固定的数值

window.location.href的用法(动态输出跳转)

javascript中的location.href有很多种用法,window.location.href 语句可以实现一个框架的页面在执行服务器端代码后刷新另一个框架的页面

js的解析的两个阶段_预解析阶段、执行阶段

js不像C语言那样只要编译一次之后成.exe文件之后就不用在编译可以直接使用了,js是一种解释型语言,js同理是边解析边执行。js的解析分为两个阶段 1.预解析阶段 2.执行阶段。

js秒数转换成时分秒_js如何将秒拼接为时分秒显示?

接口返回的是int类型的秒数,在前端显示要求拼接为时分秒显示,这篇文章主要讲解实现js秒数转换成时分秒的方法。

JavaScript中变量提升和函数提升的意义理解

在ES6之前,Js中是没有块级作用域的,只存在全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分;函数提升只有函数声明中才发生。

JavaScript中公有、私有、静态、受保护的属性和方法

在开发中,我们需要限制某些属性和方法的暴露程度,使得它们不能通过对象实例本身被访问、修改或调用。要了解js面向对象,就必需先了解js中什么是公有、私有、静态、受保护。

基于规则评分的密码强度检测算法分析及实现(JavaScript)

用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差。那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法

js设备判断_判断移动端还是PC端?判断android还是ios?判断移动端浏览器类型?

js判断用户的浏览设备是移动设备还是PC?判断详细浏览器设备信息。判断微信、新浪、QQ打开。判断是android系统还是ios系统...

javascript中关键词in用法介绍【js 关键字 in 的使用方法】

js中关键词...in... 从字面上理解就是什么在什么中,在js中差不多也是表达这个意思,主要作用:1用于数组和对象的判断、2 遍历数组或者对象