Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

使用数组的map方法实现成组的方法链

  方法链形式的使用目前非常流行,但并不是所有方法链的封装都是像jQuery那样单复数混淆的。但很多方法链的封装只提供的单数的形式,我们就无法像jQuery那样为一组对象统一执行一系列的操作。但好在数组提供了map方法,可以通过map方法来解决这个问题。
  举个实际点的例子吧。一个普通的jQuery对象,即使里面有很多元素,当调用on方法时可以操作其包含的所有元素,而且返回的也是这个对象集合,之后还可以为这个集合再执行其它统一操作。但在jQuery之外,有很多提供了方法链形式调用的封装本身没有提供这样的成组调用,所以现在我们要用数组自带的map方法来实现它。
  比如现代浏览器自带的Promise对象,它也是以方法链的形式使用的,但只提供的单数形式。假如现在我的需求是发起多个HTTP请求,让这些请求完成后都执行相同的操作,之后再继续执行其它一样的操作。于是有:
<script>
[ //第一步,发起请求
  new Promise(function(resolve,reject){
    request("?1",resolve);
  }),new Promise(function(resolve,reject){
    request("?2",resolve);
  }),new Promise(function(resolve,reject){
    request("?3",resolve);
  })
].map(function(e){ //第二步,请求完成,处理其它操作
  return e.then(function(u){
    console.log("对 "+u+" 请求完成");
    return new Promise(function(resolve){
      setTimeout(function(){
        resolve(u);
      });
    });
  });
}).map(function(e){ //第三步,处理完成
  return e.then(function(u){
    console.log("对 "+u+" 处理完成");
  });
});

function request(u,f){
  var xhr=new XMLHttpRequest;
  xhr.onload=f.bind(xhr,u);
  xhr.open("GET",u,true),xhr.send();
};
</script>

  虽然还是很麻烦,但是感觉上这样的代码逻辑会比较清晰。当然,也许大家并不喜欢这样的代码,这不要紧,我只是把我喜欢的方式表达出来而已,并没有要闹革命的意思。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^