jQuery 第十章 ajax 什么是回调地狱 优化回调地狱
回调地狱
什么是回调地狱，回调函数，一个嵌套着一个，到最后，缩略图成了 一个三角形， 造成了可阅读性差，可阅读性差就代表代码的可维护性 和 可迭代性差，最后还有一个就是可扩展性差。
也不符合设计模式的六大原则， 其中的 单一职责原则， 和 开闭原则
单一职责原则： 尽量让一个函数只做一件事情
开闭原则：函数应该对扩展开放,对修改关闭
接下来看一下什么是回调地狱：
小案例的效果图：
下面的代码虽然能实现这个功能，但是如果按照这种做法，功能一多，回调函数会一个嵌套一个， 最后的代码会形成一个三角区。
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>
jQuery 第十章 ajax 什么是回调地狱 优化回调地狱的更多相关文章
- 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题
前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...
- jQuery笔记之 Ajax回调地狱
本次演示回调地狱: 模拟电影网站,判断用户是否为该网址的vip用户(最高权限为vip) 如果vpi就展示出vip电影,点击相应的电影显示出该电影的详细介绍 ---------------------- ...
- jQuery笔记之工具方法—Ajax 优化回调地狱
在上一篇文我们说到了回调地狱不好的地方,今天我们看看怎么来优化它,让它可以运用到实际开发中. 什么是回调地狱?回调地狱就是一个函数里面嵌套了所有功能函数,然后缩略图形成一个三角形. 这样的代码可复用性 ...
- jQuery 第十章 工具方法-高级方法 $.ajax() $.Callbacks() .....
$.ajax() $.Callbacks() $.Deferred() .then() $.when() ---------------------------------------------- ...
- jquery ajax 总是还未等到success回调就刷掉了，就进入了onError函数的错误案例分析
jquery ajax 总是还未等到success回调就刷掉了,就进入了onError函数的错误案例分析: 同样的请求同时请求了2次,然后第二次的请求把第一次的给刷掉了! (比如:<div on ...
- JSP／Servlet开发——第十章 Ajax与JQuery
1. 认识Ajax: ◆在传统的 Web 应用中,每次请求服务器都会生成新的页面,用户在提交请求后,总是要等待服务器的响应,如果前一个请求没有得到响应,则后一个请求就不能发送. ◆由于这是一种独占式的 ...
- Jquery中的Ajax
AJAX: * jQuery中的Ajax * 封装第一层 - 类似于原生Ajax的用法 * $.ajax() - 最复杂 * 选项 * url - 请求地址 * type - 请求类型,默认为GET ...
- jQuery入门（4）jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
随机推荐
- Python合集之Python开发环境在Windows系统里面搭建
在上一个合集里面我们了解到了Python的基础信息及学习了Python对我们有什么用处,那么今天我们来了解一下,Python的开发环境该如何搭建.(注:Python的开发环境可以在Windows.MA ...
- while语句的一个使用技巧
作用类似于可以输入一个不定量长度的数组,但是严格来说 不可能出现任意长度. 内存是有限的 超出一定长度后,不可能存的下,虽然这个值可能是超级大的,但总有限度. 这里我们利用while(cin>& ...
- C#+Arduino Uno 实现声控系统完全实施手册
话不多说先上视频,一看就懂 另外可参考这里:https://www.cnblogs.com/dehai/p/4285749.html ,这个近6年前的帖子 程序结构 程序分成上位机(PC端)与下位机( ...
- 【Java GC系列】垃圾收集简介（1）
说明: 在本文中, Garbage Collection 翻译为 "垃圾收集", garbage collector 翻译为 "垃圾收集器"; 一般认为, 垃圾 ...
- 【漏洞复现】Shiro<=1.2.4反序列化漏洞
0x01 概述 Shiro简介 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码和会话管理.使用Shiro的易于理解的API,您可以快速.轻松地获得任何应用程序,从 ...
- 记录电子竞技游戏jesp中的传输过程公式
1.json数据转换成字典 dict1 = json.load(load_f1) dict2 = json.load(load_f2) 2.将两个字典按key排好序,然后使用zip()函数将两个字典对 ...
- rabbitmq（一）-基础入门
原文地址:https://www.jianshu.com/p/e186a7fce8cc 在学东西之前,我们先有一个方法论,知道如何学习.学习一个东西一般都遵循以下几个环节: xxx是什么,诞生的原因, ...
- malloc,calloc,realloc三者的区别
malloc,calloc,realloc三者都可以运用与动态分配数组. malloc:用malloc必须要自己初始化,可以用memset(arr,0,cnt*sizeof(int)) calloc: ...
- Git Push大文件报错后如何撤回
昨晚在提交一个项目代码时,不小心把数据库备份文件也一起Commit了:到最后Push的时候报错了.最后弄了半天解决了,在此记录下. 如下图,文件有108M. 项目放在第三方托管平台上,根据提示查看了原 ...
- C++ 数据结构 3：树和二叉树
1 树 1.1 定义 由一个或多个(n ≥ 0)结点组成的有限集合 T,有且仅有一个结点称为根(root),当 n > 1 时,其余的结点分为 m (m ≥ 0)个互不相交的有限集合T1,T2, ...