JavaScript Beyond jQuery

WordCamp Milwaukee

Transcript

1. JavaScript Beyond $(document).ready()
2. speakerdeck.com/ evansolomon/ javascript-beyond-jquery
3. var name = 'Evan Solomon', twitter = name .replace(/ /g, '') .replace(/^/, '@') .toLowerCase();
4. JavaScript != jQuery
5. 1.Scope 2.Functions 3.Context 4.Inheritance 5.Control Flow
6. 1. Scope
7. Always use the var keyword in declarations
8. var place = 'Milwaukee'; console.log(place); // 'Milwaukee'
9. Variables are implicitly global
10. var place = 'Milwaukee'; place === window.place; // true place === this.place; // true
11. Variable access flows down
12. var place = 'Milwaukee'; function where() { return place; } where(); // 'Milwaukee'
13. 2. Functions
14. Functions are closures
15. function quiet() { var whisper = 'Boom!'; } console.log(whisper); // Undefined
16. But don’t forget var
17. function noisy() { oops = 'Boom!'; } console.log(oops); // 'Boom!'
18. Functions can be anonymous
19. jQuery(function() { return 'Ready!'; });
20. jQuery(function($) { $('.header').hide(); }); // We can use the $ to access jQuery in WordPress
21. Functions can execute themselves
22. (function() { return 'See?'; })(); // 'See?'
23. 3. Context
24. Everything is an object Well, almost everything
25. var talk = function() { console.log('Hello!'); }; talk instanceof Object // true
26. 'Evan'.length // 4
27. var people = [ 'Evan', 'Alison' ]; people.join(', '); // 'Evan, Alison'
28. The this keyword gives context
29. this === window; // true
30. var context = 'global'; (function() { return this.context; })(); // 'global'
31. var context = 'global', stuff = { context: 'object', show: function() { return this.context; } }; stuff.show(); // object
32. var Thing = function() { this.context = 'instance'; this.show = function() { return this.context; }; }; thing = new Thing; thing.show(); // instance
33. Context is tricky
34. var context = 'global', stuff = { context: 'object', show: function() { return this.context; } }, ohnoes = stuff.show; ohnoes(); // global
35. Context is controllable
36. var context = 'the window', show = function() { return this.context; }; show.call(); // 'the window' show.call({context:'anything'}); // 'anything'
37. Context can be bound
38. var that = {context: 'safe'}, show = function() { return this.context; }, bound = function() { return show.apply(that); }; show(); // undefined bound(); // 'safe'
39. 4. Inheritance
40. Inheritance comes from prototypes
41. var nums = [1, 2]; nums.slice === Array.prototype.slice // true nums.slice === nums.constructor.prototype.slice // true nums.constructor === Array // true
42. String.prototype.canadianize = function() { return this + ', eh!'; }; 'Hello'.canadianize(); // 'Hello, eh!'
43. var evan = new Person('Evan'), john = new Person('Alison'); Person.prototype.sayHi = function() { return 'I am ' + this.name; }; evan.sayHi(); // 'I am Evan' john.sayHi(); // 'I am Alison'
44. 5. Control Flow
45. JavaScript is often asynchronous
46. $content = wp_remote_get($url); // $content is ready to use
47. var content = $.get(url); // content is *not* the body of the remote response
48. $.get(url, { success: function(content) { // Now you can use content } });
49. $(document).ready(function() { // Now the DOM is loaded });
50. $(function() { // Now the DOM is loaded }); https://github.com/jquery/ jquery/blob/2.0.2/src/ core.js#L162-L166
51. $('.thing').on('click', function() { // Now the element has been clicked });
52. var request = $.get(url); request.done(function(content) { // Now the content is available });
53. Thanks
54. Underscore is a utility library
55. var wordcamps = [ {place: 'Milwauke', when: 'today'}, {place: 'San Francisco', when: 'later'}, ]; _.pluck(wordcamps, 'when'); // ['today', 'later']
56. var people = [ 'Evan', 'John', 'Alison', 'John' ]; _.uniq(people); // ['Evan', 'John', 'Alison']
57. var go = function() { return 'Be patient'; }, notYet = _.after(2, go); notYet(); // Undefined notYet(); // 'Be patient'
58. Underscore has great docs underscorejs.org
59. CoffeeScript compiles to JavaScript
60. var notYet = _.after(2, function() { return 'Be patient'; } ); notYet(); // Undefined notYet(); // 'Be patient'
61. notYet = _.after 2, -> 'Be patient' notYet() // Undefined notYet() // 'Be patient'
62. easyObject = key: 'val' more: 'No problem' var easyObject; easyObject = { key: 'val', more: 'No problem' };
63. implicitReturns = -> 'This is fun' implicitReturns() // 'This is fun'
64. coffeescript.org & codeschool.com
65. Node.js is JavaScript on the server
66. var fs = require('fs'); fs.readFile('./stuff.txt', function(err, data) { console.log(data.toString()); });
67. var http = require('http'), server = function (req, res) { res.end('Hello World!\n'); }; http.createServer(server) .listen(8080);