FilesExpand file tree

master

/

1-callback.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

130 lines (113 loc) · 3.26 KB

master

/

1-callback.js

Copy path

Top

File metadata and controls

• Code
• Blame

130 lines (113 loc) · 3.26 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

/**

* Callback

*

* @Reference:

* http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/

* https://www.quora.com/What-is-callback-hell

* http://stackabuse.com/avoiding-callback-hell-in-node-js/

*/

/**

* CALLBACK EXAMPLES

*/

//Note that the item in the click method's parameter is a function, not a variable.​ The item is a callback function

$("#btn_1").click(function () {

alert("Btn 1 Clicked");

});

// forEach()

var friends = ["Mike", "Stacy", "Andy", "Rick"];

friends.forEach(function (eachName, index) {

// Inside callback function.

console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick​

});

/**

* CALLBACK HELL

*

* A fragile, unreadable sequence of asynchronous operations, represented by nested anonymous functions, idiomatic to node.js applications

*/

getData(function (a) {

getMoreData(a, function (b) {

getMoreData(b, function (c) {

getMoreData(c, function (d) {

getMoreData(d, function (e) {

console.log('Callback Hell');

});

});

});

});

});

/**

* NAME YOUR FUNCTIONS

*

* * Easier to read.

* * When exceptions happen you will get stacktraces that reference actual function names instead of "anonymous".

*/

// Anonymous function

var form = document.querySelector('form');

form.onsubmit = function (submitEvent) {

var name = document.querySelector('input').value;

request({

uri: "http://example.com/upload",

body: name,

method: "POST"

}, function (err, response, body) {

var statusMessage = document.querySelector('.status');

if (err) return statusMessage.value = err;

statusMessage.value = body;

})

};

// Named functions

var form = document.querySelector('form');

form.onsubmit = function formSubmit(submitEvent) {

var name = document.querySelector('input').value;

request({

uri: "http://example.com/upload",

body: name,

method: "POST"

}, function postResponse(err, response, body) {

var statusMessage = document.querySelector('.status');

if (err) return statusMessage.value = err;

statusMessage.value = body;

})

};

/**

* KEEP YOUR CODE SHALLOW

*

* * Easier to edit, refactor and hack on later

*/

// Get rid of triple level nesting which was there earlier.

function formSubmit(submitEvent) {

var name = document.querySelector('input').value;

request({

uri: "http://example.com/upload",

body: name,

method: "POST"

}, postResponse)

}

function postResponse(err, response, body) {

var statusMessage = document.querySelector('.status');

if (err) return statusMessage.value = err;

statusMessage.value = body

}

document.querySelector('form').onsubmit = formSubmit;

/**

* MODULARIZE

*

* * Easier to understand, reuse without duplication.

*/

function formSubmit(submitEvent) {

var name = document.querySelector('input').value;

request({

uri: "http://example.com/upload",

body: name,

method: "POST"

}, postResponse)

}

function postResponse(err, response, body) {

var statusMessage = document.querySelector('.status');

if (err) return statusMessage.value = err;

statusMessage.value = body;

}

exports.submit = formSubmit; // CommonJS module system

// USAGE

var formUploader = require('formuploader');

document.querySelector('form').onsubmit = formUploader.submit;