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

最新推荐文章于 2022-07-31 09:44:12 发布

weixin_30823001

最新推荐文章于 2022-07-31 09:44:12 发布

阅读量170

点赞数

文章标签： javascript 设计模式 ViewUI

原文链接：http://www.cnblogs.com/yanggeng/p/10947971.html

版权

　　回调地狱

什么是回调地狱，回调函数，一个嵌套着一个，到最后，缩略图成了一个三角形，造成了可阅读性差，可阅读性差就代表代码的可维护性和可迭代性差，最后还有一个就是可扩展性差。

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

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

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

接下来看一下什么是回调地狱：

小案例的效果图：

下面的代码虽然能实现这个功能，但是如果按照这种做法，功能一多，回调函数会一个嵌套一个，最后的代码会形成一个三角区。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>Document</title>
  8     <style>
  9         * {
 10             padding: 0px;
 11             margin: 0px;
 12         }
 13 
 14         .tpl {
 15             display: none;
 16         }
 17 
 18         .wrapper {
 19             overflow: hidden;
 20             border: 2px solid black;
 21             width: 600px;
 22             margin: 100px auto 0px;
 23         }
 24         .movieSection {
 25             float: left;
 26             width: 180px;
 27             height: 180px;
 28             padding: 10px;
 29         }
 30         
 31         .movieSection img {
 32             width: 100%;
 33             height: 150px;
 34             cursor: pointer;
 35         }
 36 
 37         .movieSection h3 {
 38             height: 30px;
 39         }
 40     </style>
 41 </head>
 42 <body>
 43     <!-- 基本结构 -->
 44     <div class="wrapper">
 45         <div class='tpl'>
 46             <img src=""></img>
 47             <h3 class='movieName'></h3>            
 48         </div>
 49     </div>     
 50 
 51     <script src='./jquery.js'></script>
 52     <script>
 53         $.ajax({
 54             url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/power',
 55             type: 'POST',
 56             data: {
 57                 username: 'fsfs',
 58                 password: '123123'
 59             },
 60             success: function (res) {   //一个回调函数，解决了全部事情，因为下面的代码 都是在这个回调里面。
 61                 if (res.data.power == 'root') {
 62                     $.ajax({ //如果账号密码正确， 执行 success 回调 请求数据
 63                         url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieList',
 64                         type: 'GET',
 65                         success: function (res) { //如果 请求成功， 执行回调以下拿到数据渲染 页面
 66                             console.log(res)
 67                             var data = res.data;
 68                             var $Wrapper = $('.wrapper');
 69                             $.each(data, function(index, ele) {
 70                                 var $MovieSection = $('.tpl').clone().removeClass('tpl').addClass('movieSection');
 71                                 $MovieSection.data({id: ele.id}).on('click', function (){//添加点击事件 再次请求 详细文字页面
 72                                     
 73                                     $.ajax({
 74                                         url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieInfo',
 75                                         type: 'GET',
 76                                         data: {
 77                                             movieId: $(this).data('id')
 78                                         },
 79                                         success: function (res) { //如果请求数据成功，执行回调再次添加 数据到页面
 80                                             var data = res.data;
 81                                             var direct = data.direct;
 82                                             var gut = data.gut;
 83                                             var mainActor = data.mainActor;
 84                                             var screenWriter = data.screenwriter;
 85 
 86                                             var htmlStr = '<div class="mask">\
 87                                                 <p>导演: ' + direct + '</p>\
 88                                                 <p>剧情: ' + gut + '</p>\
 89                                                 <p>主演: ' + mainActor.reduce(function (prev, curv) {
 90                                                     prev += curv + ' ';
 91                                                     return prev;
 92                                                 }, '') + '</p>\
 93                                                 <p>编剧: ' + screenWriter.reduce(function (prev, curv) {
 94                                                     prev += curv + ' ';
 95                                                     return prev;
 96                                                 }, '') + '</p>\
 97                                             </div>'
 98 
 99                                             $(htmlStr).appendTo('body')
100                                                     
101                                         }
102                                     });
103                                 }).children()
104                                     .eq(0).attr('src', ele.poster)
105                                         .next().text(ele.name);
106 
107                                 $Wrapper.append($MovieSection);
108                             });
109                         }
110                     })
111                 }else {
112               
113                 }
114             }
115         });
116 
117     </script>
118 </body>
119 </html>

下面利用 $.Deferred() 和 .then() 解决回调地狱，并没有形成三角区，而是直线，而且一个回调函数只做一件事。不像上面的第一个回调函数一样，一个回调函数，做了全部事情

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>Document</title>
  8     <style>
  9         * {
 10             padding: 0px;
 11             margin: 0px;
 12         }
 13 
 14         .tpl {
 15             display: none;
 16         }
 17 
 18         .wrapper {
 19             overflow: hidden;
 20             border: 2px solid black;
 21             width: 600px;
 22             margin: 100px auto 0px;
 23         }
 24         .movieSection {
 25             float: left;
 26             width: 180px;
 27             height: 180px;
 28             padding: 10px;
 29         }
 30         
 31         .movieSection img {
 32             width: 100%;
 33             height: 150px;
 34             cursor: pointer;
 35         }
 36 
 37         .movieSection h3 {
 38             height: 30px;
 39         }
 40     </style>
 41 </head>
 42 <body>
 43     <!-- 基本结构 -->
 44     <div class="wrapper">
 45         <div class='tpl'>
 46             <img src=""></img>
 47             <h3 class='movieName'></h3>            
 48         </div>
 49     </div>     
 50 
 51     <script src='./jquery.js'></script>
 52     <script>
 53         
 54         (function () {          //实际上返回ajax ，是返回ajax 里面的 deferred.promise 对象
 55                 return $.ajax({//把ajax 返回出去。外面可以.then 可以拿到 done回调函数
 56                     url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/power',
 57                     type: 'POST',
 58                     data: {
 59                         username: 'fafa',
 60                         password: '123123'
 61                     }
 62                 });
 63             })()
 64             .then(function (res) {
 65                 if (res.data.power == 'root') {
 66                     return $.ajax({
 67                         url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieList',
 68                         type: 'GET',                    
 69                     });
 70                 }
 71             })
 72             .then(function (res) {
 73                 var data = res.data;
 74                 var $Wrapper = $('.wrapper');
 75                 var df = $.Deferred();
 76                 $.each(data, function(index, ele) {
 77                     // ele.name  ele.poster
 78                     var $MovieSection = $('.tpl').clone().removeClass('tpl').addClass('movieSection');
 79                     $MovieSection
 80                         .data({id: ele.id})
 81                             .on('click', function () {
 82                                 df.resolve( $(this) );
 83                             })   
 84                                 .children()
 85                                     .eq(0).attr('src', ele.poster)
 86                                         .next().text(ele.name);
 87                         $Wrapper.append($MovieSection);    
 88                 });  
 89                 return df.promise();                      
 90             })
 91             .then(function (dom) {
 92                 return $.ajax({
 93                     url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieInfo',
 94                     type: 'GET',
 95                     data: {
 96                         movieId: dom.data('id')
 97                     }  
 98                 });    
 99             })
100             .then(function (res) {
101                 var data = res.data;
102                 var direct = data.direct;
103                 var gut = data.gut;
104                 var mainActor = data.mainActor;
105                 var screenWriter = data.screenwriter;
106 
107                 var htmlStr = '<div class="mask">\
108                     <p>导演: ' + direct + '</p>\
109                     <p>剧情: ' + gut + '</p>\
110                     <p>主演: ' + mainActor.reduce(function (prev, curv) {
111                         prev += curv + ' ';
112                         return prev;
113                     }, '') + '</p>\
114                     <p>编剧: ' + screenWriter.reduce(function (prev, curv) {
115                         prev += curv + ' ';
116                         return prev;
117                     }, '') + '</p>\
118                 </div>'
119 
120                 $(htmlStr).appendTo('body')        
121             });
122 
123 
124 
125     </script>
126 </body>
127 </html>