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

时间: 2017-11-10阅读: 1352标签: 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
})

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

 

js中减少使用不必要的if-else或switch_利用数组/对象代替if-else,switch

无论使用if-else,还是switch。当条件多的时候代码显得非常冗长,而且每次添加条件时需要修改主流程的代码,这样就破坏了类的开闭原则。为解决日后的维护可能存在问题,我们可以采用另一种比较优雅的实现方式来替换if-else,switch吗?

JavaScript深入之参数按值传递

ECMAscript中所有函数的参数都是按值传递,也就是,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。js始终是按值传递,在这里称他为共享传递。

为什么尽量别用setInterval

在开发一个在线聊天工具时,经常会有过多少毫秒就重复执行一次某操作的需求。“没问题”,大家都说,“用setInterval好了。”我觉得这个点子很糟糕。

avaScript与WebAssembly进行比较+在哪些情况下会优于JavaScript

这是专门探索JavaScript及其构建组件的系列,在识别和描述核心元素的过程中,我们还分享了构建SessionStack时使用的一些经验法则,这是一个轻量级但健壮且高性能的JavaScript应用程序,以帮助用户实时查看和重现其Web应用程序的缺陷。

js判断是否为IE浏览器的多种方法总汇

这篇文章主要整理通过js来判断浏览器是否为IE的多种方法。使用js脚本判断浏览器是否为ie,这里分享六种判断是否为ie的方法,有需要的朋友参考学习下。

js中return关键词的作用_return的用法详解

return从字面意思来看就是返回,官方定义return语句将终止当前函数并可以返回当前函数的值; 也就是说return后面可以跟一个value,也就是说可以跟javascript中的任何数据类型

js记录用户行为浏览记录和停留时间

原来是想使用 cookie 来记录,但是考虑到 cookie 所能记录的数据最大为 4k ,可能不够用。于是使用了 HTML5 的 localStorage (最大数据 5M )来存储( IE8 以上浏览器支持)。这里使用到了 jquery.cookie 的插件,所以页面要引入 jquery 和 jquery.cookie 。

Web Worker 详细介绍_Web Workers的使用

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

数字在JavaScript中是如何编译的

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

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

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