网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 javascript学习指南之回调问题
范文
    回调函数被认为是一种高级函数，一种被作为参数传递给另一个函数(在这称作"otherFunction")的高级函数，回调函数会在otherFunction内被调用(或执行)。回调函数的本质是一种模式(一种解决常见问题的模式)，因此回调函数也被称为回调模式。
    回调地狱
    对 JavaScript 程序员来说，处理回调是家常，但是处理层次过深的回调就没有那么美好了，下面的示例代码片段用了三层回调，再补脑一下更多层的场景，简直是酸爽，这就是传说中的回调地狱。
    getDirectories(function(dirs) {
      getFiles(dirs[0], function(files) {
        getContent(files[0], function(file, content) {
          console.log('filename:', file);
          console.log(content);
        });
      });
    });
    function getDirectories(callback) {
     setTimeout(function() {
      callback(['/home/ben']);
     }, 1000);
    }
    function getFiles(dir, callback) {
      setTimeout(function() {
        callback([dir + '/test1.txt', dir + '/test2.txt']);
      }, 1000)
    }
    function getContent(file, callback) {
      setTimeout(function() {
        callback(file, 'content');
      }, 1000)
    }
    解决方案
    生态圈中有很多异步解决方案可以处理回调地狱的问题，比如 bluebird、Q 等，本文重点介绍 ECMAScript 6/7 规范中对异步编程的支持。
    ES6 Promise
    Promise 是一种异步编程的解决方案，是解决回调地狱问题的利器。
    Promise 在 JavaScript 生态圈被主流接受是在 2007 年 Dojo 框架增加了 dojo.Deferred 的功能。随着 dojo.Deferred 的流行，在 2009 年 Kris Zyp 提出了 CommonJS Promises/A 规范。随后生态圈中出现了大量 Promise 实现包括 Q.js、FuturesJS 等。当然 Promise 之所有这么流行很大程度上是由于 jQuery 的存在，只是 jQuery 并不完全遵守 CommonJS Promises/A 规范。随后正如大家看到的，ES 6 规范包含了 Promise。
    MDN 中对 Promise 是这样描述的：
    Promise 对象是一个返回值的代理，这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。 这使得异步方法可以像同步方法那样返回值：异步方法会返回一个包含了原返回值的
    以下的代码是「回调地狱」一节中的示例通过 Promise 实现，看上去代码也不是很简洁，但是比起传统的层级回调有明显改善，代码可维护性和可读性更强。
    getDirectories().then(function(dirs) {
      return getFiles(dirs[0]);
    }).then(function(files) {
      return getContent(files[0]);
    }).then(function(val) {
      console.log('filename:', val.file);
      console.log(val.content);
    });
    function getDirectories() {
      return new Promise(function (resolve, reject) {
        setTimeout(function() {
        resolve(['/home/ben']);
       }, 1000);
      });
    }
    function getFiles(dir) {
      return new Promise(function (resolve, reject) {
        setTimeout(function() {
          resolve([dir + '/test1.txt', dir + '/test2.txt']);
        }, 1000);
      });
    }
    function getContent(file) {
      return new Promise(function (resolve, reject) {
        setTimeout(function() {
          resolve({file: file, content: 'content'});
        }, 1000);
      });
    }
    ES6 Generator
    Promise 的实现方式还不够简洁，我们还需要更好的选择，co 就是选择之一。co 是基于 Generator（生成器）的异步流控制器，了解 co 之前首先需要理解 Generator。熟悉 C# 的同学应该都有了解，C# 2.0 的版本就引入了 yield 关键字，用于迭代生成器。ES 6 Generator 跟 C# 相似，也使用了 yield 语法糖，内部实现了状态机。具体用法可以参考 MDN 的文档 function* 一节，原理可以参考AlloyTeam 团队 Blog 深入理解 Generator。使用 co 巧妙结合 ES6 Generator 和 ES6 Promise 让异步调用更加和谐。
    co(function* (){
      var dirs = yield getDirectories();
      var files = yield getFiles(dirs[0]);
      var contentVal = yield getContent(files[0]);
      console.log('filename:', contentVal.file);
      console.log(contentVal.content);
    });
    co 非常巧妙，其核心代码可以简化如下的示例，大体思路是采用递归遍历生成器直到状态完成，当然 co 做的跟多。
    runGenerator();
    function* run(){
      var dirs = yield getDirectories();
      var files = yield getFiles(dirs[0]);
      var contentVal = yield getContent(files[0]);
      console.log('filename:', contentVal.file);
      console.log(contentVal.content);
    }
    function runGenerator(){
      var gen = run();
      function go(result){
        if(result.done) return;
        result.value.then(function(r){
          go(gen.next(r));
        });
      }
      go(gen.next());
    }
    ES7 Async/Await
    ES6 Generator 确实很好，只可惜需要第三方库的支持。好消息是 ES 7 会引入 Async/Await 关键字完美解决异步调用的问题。好吧，.net 又领先了一步，.net framework 4.5 已经率先支持了。
    今后的代码写起来是这样：
    run();
    async function run() {
      var dirs = await getDirectories();
      var files = await getFiles(dirs[0]);
      var contentVal = await getContent(files[0]);
      console.log('filename:', contentVal.file);
      console.log(contentVal.content);
    }
    结论
    从经典的回调的异步编程方式，到 ES6 Promise 规范对异步编程的改善，再到 co 结合 ES Generator 优雅处理，最后 ES7 async/await 完美收官，可以让我们了解为什么 ECMAScript 会出现这些特性以及解决了什么问题，更加清晰地看到 JavaScript 异步编程发展的脉络。
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/12 23:25:41