在上一篇文我们说到了回调地狱不好的地方，今天我们看看怎么来优化它，让它可以运用到实际开发中。

什么是回调地狱？回调地狱就是一个函数里面嵌套了所有功能函数，然后缩略图形成一个三角形。

这样的代码可复用性不强。阅读性差也代表可维护性差。扩展性也差。

也不符合设计模式的六大原则， 其中的  单一职责原则， 和 开闭原则

单一职责原则：尽量让一个函数只做一件事情

开闭原则：函数应该对扩展开放,对修改关闭

---------------------------------------------------------------------

我们先来看一下未优化前的代码，未优化前的代码同样可以实现该功能。

但只适合小公司开发，因为没有人去看你的代码，大公司还是需要优化的

代码如下：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.      <title>Document</title>
  9.      <style>
  10.          * {
  11.              padding: 0px;
  12.              margin: 0px;
  13.          }
  14.  
  15.          .tpl {
  16.              display: none;
  17.          }
  18.  
  19.          .wrapper {
  20.              overflow: hidden;
  21.              border: 2px solid black;
  22.              width: 600px;
  23.              margin: 100px auto 0px;
  24.          }
  25.  
  26.          .movieSection {
  27.              float: left;
  28.              width: 180px;
  29.              height: 180px;
  30.              padding: 10px;
  31.          }
  32.  
  33.          .movieSection img {
  34.              width: 100%;
  35.              height: 150px;
  36.              cursor: pointer;
  37.          }
  38.  
  39.          .movieSection h3 {
  40.              height: 30px;
  41.          }
  42.      </style>
  43.  </head>
  44.  
  45.  <body>
  46.      <div class="wrapper">
  47.          <div class="tpl">
  48.              <img></img>
  49.              <h3 class="movieName"></h3>
  50.          </div>
  51.      </div>
  52.      <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
  53.      <script>
  54.  
  55.          //模拟电影网站，判断用户是否为该网址的vip用户(最高权限为vip)
  56.          //如果vpi就展示出vip电影，点击相应的电影显示出该电影的详细介绍
  57.  
  58.          //发送网络请求
  59.          $.ajax({
  60.              url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/power', //向此服务器请求
  61.              type: 'POST',   //获取数据类型
  62.              data: {   //假设传入了账号密码，已经验证成功了。为了演示我们就不写input框来输入了
  63.                  username: 'ypx',
  64.                  password: '123'
  65.              },
  66.              success: function (res) {  //请求成功后执行的函数
  67.                  if (res.data.power == 'root') {  //判断该用户是否为最高vip,如果是就返回出vip电影资源
  68.                      //vip 网络地址发送请求
  69.                      $.ajax({
  70.                          url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieList',
  71.                          //正常开发中，数据不应该在这拿，
  72.                          //应该在请求返回来的res中获取数据的，我们现在为了演示就在这里获取第二次数据了
  73.  
  74.                          type: 'GET',
  75.                          success: function (res) {
  76.                              var data = res.data; //声明一个变量为获取到的数据
  77.                              var $Wrapper = $('.wrapper'); //获取wrapper准备存放数据
  78.                              $.each(data, function (index, ele) { //循环所有数据里面的东西
  79.                                  //ele.name 数据里面的电影名称  ele.poster  数据里面的海报地址
  80.  
  81.                                  var $MovieSection = $('.tpl').clone().removeClass('tpl').addClass('movieSection');
  82.                                  //把HTML结构的模板给克隆过来存放数据，再把模板的类名换成要放数据结构的类名
  83.  
  84.                                  $MovieSection.data({ id: ele.id }).on('click', function () {//给获取数据加上id，添加点击事件
  85.                                      $.ajax({
  86.                                          url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieInfo',
  87.                                          type: 'GET',
  88.                                          data: {
  89.                                              movieId: $(this).data('id') //点击谁this就指向谁
  90.                                          },
  91.                                          success: function (res) {
  92.                                              var data = res.data;
  93.                                              var direct = data.direct;
  94.                                              var gut = data.gut;
  95.                                              var mainActor = data.mainActor;
  96.                                              var screenWriter = data.screenwriter;
  97.                                              var htmlStr = '<div class="mask">\
  98.                                                    <p>导演: ' + direct + '</p>\
  99.                                                    <p>剧情: ' + gut + '</p>\
  100.                                                    <p>主演: ' + mainActor.reduce(function (prev, curv) {
  101.                                                  prev += curv + ' ';
  102.                                                  return prev;
  103.                                              }, '') + '</p>\
  104.                                                   <p>编剧: ' + screenWriter.reduce(function (prev, curv) {
  105.                                                  prev += curv + ' ';
  106.                                                  return prev;
  107.                                              }, '') + '</p>\
  108.                                                </div>'
  109.                                              $(htmlStr)       //把数据结构加到body里面
  110.                                                  .appendTo('body');
  111.                                          }
  112.                                      });
  113.                                  })
  114.                                      .children()  //获取克隆后的模板结构下面的所有子元素
  115.                                      .eq(0)     //选中元素中的第一个
  116.                                      .attr('src', ele.poster) //给属性加上数据中的海报
  117.                                      .next() //给下一个兄弟元素
  118.                                      .text(ele.name); //给文本加上数据中的电影名称
  119.                                  $Wrapper.append($MovieSection);//把MouseEvent填充到wrapper标签下面
  120.                              });
  121.                          }
  122.                      })
  123.                  } else {
  124.                      //不是vip
  125.                  }
  126.              }
  127.          });
  128.      </script>
  129.  </body>
  130.  
  131.  </html>

接下来我们具体来看是怎么优化的，最后会附上完整代码

第一步

判断该用户是否为VIP用户

第二步

确定为VIP用户，返回VIP资源

第三步

将资源的电影海报，电影名称可视化

第四步

添加点击事件，点击海报后显示出详情介绍

衔接上下图片↑↓

最后我们再来看一下成品图：

最后附上完整代码加注释：

  1.          (function () {
  2.              return $.ajax({
  3.                  url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/power',
  4.                  type: 'POST',
  5.                  data: {       //获取账号密码
  6.                      username: 'ypx',
  7.                      password: '123'
  8.                  },
  9.              });
  10.          })().then(function (res) {
  11.              if (res.data.power == 'root') { //判断该账号密码是否为最高权限(VIP用户)，是的话就发送网络请求获取VIP用户的数据
  12.                  return $.ajax({
  13.                      url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieList',
  14.                      //正常开发中，数据不应该在这拿，
  15.                      //应该在请求返回来的res中获取数据的，我们现在为了演示就在这里获取第二次数据了
  16.  
  17.                      type: 'GET'
  18.                  });
  19.              }
  20.          }).then(function (res) {
  21.              var data = res.data; //声明一个变量为获取到的数据
  22.              var $Wrapper = $('.wrapper'); //获取wrapper准备存放数据
  23.              var df = $.Deferred();
  24.              $.each(data, function (index, ele) { //循环所有数据里面的东西
  25.                  //ele.name 数据里面的电影名称  ele.poster  数据里面的海报地址
  26.  
  27.                  var $MovieSection = $('.tpl').clone().removeClass('tpl').addClass('movieSection');
  28.                  //把HTML结构的模板给克隆过来存放数据，再把模板的类名换成要放数据结构的类名
  29.  
  30.                  $MovieSection.data({ id: ele.id })
  31.                      .on('click', function () {   //在这里添加点击事件，由于在里面返回数据外面会接收不到，所以我们在里面弄一个注册成功可以返回
  32.                          df.resolve(); //注册成功
  33.                      })
  34.                          .children()                         //获取克隆后的模板结构下面的所有子元素
  35.                              .eq(0)                          //选中元素中的第一个
  36.                                  .attr('src', ele.poster)    //给属性加上数据中的海报
  37.                                      .next()                 //给下一个兄弟元素
  38.                                          .text(ele.name);    //给文本加上数据中的电影名称
  39.                  $Wrapper.append($MovieSection);         //把MouseEvent填充到wrapper标签下面
  40.              });
  41.              return df.promise();  //只返回注册方法，不返回出执行方法
  42.          }).then(function (res) {
  43.              return $.ajax({
  44.                  url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieInfo',
  45.                  type: 'GET',
  46.                  data: {
  47.                      movieId: $(this).data('id') //点击谁this就指向谁
  48.                  }
  49.              });
  50.          }).then(function(res){
  51.              var data = res.data;
  52.              var direct = data.direct;
  53.              var gut = data.gut;
  54.              var mainActor = data.mainActor;
  55.              var screenWriter = data.screenwriter;
  56.              var htmlStr = '<div class="mask">\
  57.                    <p>导演: ' + direct + '</p>\
  58.                    <p>剧情: ' + gut + '</p>\
  59.                    <p>主演: ' + mainActor.reduce(function (prev, curv) {
  60.                      prev += curv + ' ';
  61.                      return prev;
  62.                      }, '') + '</p>\
  63.                      <p>编剧: ' + screenWriter.reduce(function (prev, curv) {
  64.                      prev += curv + ' ';
  65.                      return prev;
  66.                      }, '') + '</p>\
  67.                      </div>'
  68.                      $(htmlStr)       //把数据结构加到body里面
  69.                          .appendTo('body');
  70.          });

谢谢观看！！！ 谢谢观看！！！ 谢谢观看！！！

jQuery笔记之工具方法—Ajax 优化回调地狱的更多相关文章

  1. jQuery笔记之工具方法—高级方法Ajax

    $.ajxa() ——基本使用 前提:先了解js的执行机制 $.Callbacks()——回调 $.Deferred()——异步 $.when() 网络服务器链接由<渡一教育>提供 --- ...

  2. jQuery笔记之工具方法extend插件扩展

    jQuery工具方法 $.extend()插件扩展(工具方法) $.fn.extend()插件扩展(实例方法) 浅度克隆.深度克隆 两个方法基本是一样的,唯一不同的就是调用方式不一样 -------- ...

  3. jQuery笔记之工具方法

    jQuery 工具方法 $.type()判断数据类型 $.isArray() $.isFunction() $.isWindow()... $.trim()消除空格 $.proxy()改变this指向 ...

  4. jQuery 第十章 工具方法-高级方法 $.ajax() $.Callbacks() .....

     $.ajax() $.Callbacks() $.Deferred() .then() $.when() ---------------------------------------------- ...

  5. jquery-12 jquery中的工具方法有哪些

    jquery-12 jquery中的工具方法有哪些 一.总结 一句话总结:四个较常用方法.1.isArray();2.isFunction();3.isEmptyObejct();4.trim(); ...

  6. jQuery 第十章 ajax 什么是回调地狱 优化回调地狱

    回调地狱 什么是回调地狱,回调函数,一个嵌套着一个,到最后,缩略图成了 一个三角形, 造成了可阅读性差,可阅读性差就代表代码的可维护性 和 可迭代性差,最后还有一个就是可扩展性差. 也不符合设计模式的 ...

  7. jquery中的工具方法$.isFunction, $.isArray(), $.isWindow()

    本文正式地址:http://www.xiabingbao.com/jquery/2015/07/25/jquery-judge-type 在javascript中对变量类型的判断中,我们讲解了了jqu ...

  8. JQuery extend()与工具方法、实例方法

    使用jQuery的时候会发现,jQuery中有的函数是这样使用的: $.get(); $.post(); $.getJSON(); 有些函数是这样使用的: $('div').css(); $('ul' ...

  9. jQuery 第九章 工具方法之插件扩展 $.extend() 和 $.fn.extend()

    $.extend() $.fn.extend() -------------------------------------------------- $.extend() 插件扩展(工具方法) jq ...

随机推荐

  1. poj3253 Fence Repair【哈夫曼树+优先队列】

    Description Farmer John wants to repair a small length of the fence around the pasture. He measures ...

  2. POJ 2524 Ubiquitous Religions (幷查集)

    Ubiquitous Religions Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 23090   Accepted:  ...

  3. python day- 16 面向对象

    1.类的相关知识 类:是指具有相同属性和技能的一类事物. 比如:人类 ,植物类,动物类,狗类. 对象:是类中的某一个实例,是类的具体表现. 比如:具体到某个人,某一个植物,某一条狗. class 是p ...

  4. React通用后台管理系统

    react-admin 部分采用了antd,相关功能较全,添加了较多的组件模块.star 664 GitHub:https://github.com/yezihaohao/react-admin 在线 ...

  5. HDU2089 不要62 —— 数位DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 不要62 Time Limit: 1000/1000 MS (Java/Others)    M ...

  6. 字典树（Trie树） C++实现

    说明: 以下代码是个人按照自己的理解写的,可能有错误或者不太规范的地方,欢迎指出! 代码如下: //插入.删除.查询.遍历四种操作 //注意:四种操作的函数实现中,T都是指向上一个结点的指针,以此方便 ...

  7. WinDbg设置托管进程断点

    WinDbg的Live模式调试..Net 托管代码 ,使用bp,bu,bm无法设置断点,也许是我不会.研究了下,托管代码有自己的命令,!BPMD 模块名 完全限定的方法名 步骤: 1.查找进程PID, ...

  8. 使用TextView实现跑马灯的效果

    1.定义textView标签的4个属性: android:singleLine="true"//使其只能单行 android:ellipsize="marquee&quo ...

  9. wukong引擎源码分析之索引——part 2 持久化 直接set（key，docID数组）在kv存储里

    前面说过,接收indexerRequest的代码在index_worker.go里: func (engine *Engine) indexerAddDocumentWorker(shard int) ...

  10. [Selenium] Selenium私房菜（新手入门教程）

    http://wenku.baidu.com/link?url=JrHF9o0mKWcpEsE-wijcZaneBWgpmAJPRwGyWXd7RvqzJCLLrsrsv5lf9bPRmgKUa_v- ...