O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Your JavaScript Library

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
The jQuery Divide
The jQuery Divide
Carregando em…3
×

Confira estes a seguir

1 de 65 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)

Anúncio

Semelhante a Your JavaScript Library (20)

Anúncio

Mais recentes (20)

Your JavaScript Library

  1. Your JavaScript Library Edge of the Web ’09 Dmitry Baranovskiy
  2. http://www.atlassian.com/
  3. http://raphaeljs.com/ http://g.raphaeljs.com/
  4. Why should I write a library of my own?
  5. function trim(str) { return str.replace(/^s+|s+$/g, ""); } function $(id) { return document.getElementById(id); }
  6. Low Level
  7. High Level
  8. Toolbox
  9. Widgets
  10. Prototype Scriptaculous jQuery UI gRaphaël D o j o R a p h a ë l jQuery Ext
  11. API & Functionality
  12. Library is the answer. So, what is the question?
  13. Library is the answer. So, what is the question?
  14. Who is the target? Java, Ruby, PHP, JavaScript…
  15. Who is the target? Java, Ruby, PHP, JavaScript…
  16. “Everything should be made as simple as possible, but not simpler.” Albert Einstein
  17. JavaScript is your friend
  18. Performance
  19. var a = [1, 2, 3, 4, 5, 6, 7, 8, 9]; for (var i = 0; i < a.length; i++) { a[i] *= 2; } var j = a.length; while (j--) { a[j] *= 2; }
  20. function parseColour(colour) { // #XXXXXX var value = parseInt(colour.substring(1), 16); return { r: (value & 0xff0000) >> 16, g: (value & 0xff00) >> 8, b: value & 0xff, }; }
  21. var parseColour = (function () { var cache = {}; return function (colour) { if (colour in cache) { return cache[colour]; } // calculation cache[colour] = value; return value; }; })();
  22. var parseColour = (function () { var cache = {}, count = []; return function (colour) { if (colour in cache) { return cache[colour]; } // calculation cache[colour] = value; count.push(colour); if (count.length > 1000) { delete cache[count.shift()]; } return value; }; })();
  23. Performance Rocks by Thomas Fuchs & Amy Hoy JavaScript Rocks! presents... find more awesome JavaScript stuff at http://www.jsrocks.com JavaScript
  24. Animation
  25. Bulletproof
  26. Global Scope
  27. Global Scope Treat it as a public toilet
  28. var myLib = { method1: function () {}, method2: function () {}, // ... };
  29. var myLib = {}; (function () { var libVariable = 2; myLib.method1 = function () {}; myLib.method2 = function () {}; })();
  30. Native Prototypes
  31. String.prototype.trim = function () { return this.replace(/^s+|s+$/g, ""); }; Number.prototype.times = function (func) { for (var i = 0; i < this; i++) { func(i); } };
  32. Object.prototype
  33. for (var value in cache) { this.setAttribute(value, cache[value]); } var horizontal = {left: 1, right: 1}; if (direction in horizontal) { this.horizontal(direction); }
  34. Object.prototype.top = 3; // ... for (var value in cache) { this.setAttribute(value, cache[value]); } var horizontal = {left: 1, right: 1}; if (direction in horizontal) { this.horizontal(direction); }
  35. Object.prototype.top = 3; // ... for (var value in cache) { if (cache.hasOwnProperty(value)) { this.setAttribute(value, cache[value]); } } var horizontal = {left: 1, right: 1}; if (horizontal.hasOwnProperty(direction)) { this.horizontal(direction); }
  36. function isArray(object) { return object && (object instanceof Array); }
  37. Beware of <iframe>
  38. function isArray(object) { return Object.prototype.toString.call(object) === "[object Array]"; }
  39. undefined
  40. function setSomething(a) { if (a == undefined) { a = 5; } this.set(a); }
  41. var undefined; function setSomething(a) { if (a == undefined) { a = 5; } this.set(a); }
  42. function setSomething(a) { this.set(a || 5); }
  43. Packaging
  44. Minify / Pack / Obfuscate
  45. JSMin Dojo ShrinkSafe Packer YUI Compressor
  46. jQuery Prototype Raphaël 18 Kb 24 Kb 19 Kb 52 Kb 80 Kb 56 Kb 121 Kb 138 Kb 120 Kb Original Minified GZIP
  47. function calculate(value) { if (typeof value == "number") { return parseFloat(value); } if (isArray(value)) { var i = value.length; while (i--) value[i] = parseFloat(value[i]); return value.join(","); } var values = value.split(","), i = values.length; while (i--) values[i] = parseFloat(values[i]); return values.join(","); } 394 b
  48. function calculate(c){if(typeof c=="number"){return parseFloat(c);}if(isArray(c)){var b=c.length;while(b--){c[b]=parseFloat(c[b]);}return c.join(",");}var a=c.split(","),b=a.length;while(b--) {a[b]=parseFloat(a[b]);}return a.join(",");} 235 b 394 b
  49. function calculate(value) { var parseFloat = parseFloat; if (typeof value == "number") { return parseFloat(value); } if (isArray(value)) { var i = value.length; while (i--) value[i] = parseFloat(value[i]); return value.join(","); } var values = value.split(","), i = values.length; while (i--) values[i] = parseFloat(values[i]); return values.join(","); } 427 b 235 b 394 b
  50. function calculate(value) { var parseFloat = parseFloat; if (typeof value == "number") { return parseFloat(value); } if (isArray(value)) { var i = value.length; while (i--) value[i] = parseFloat(value[i]); return value.join(","); } var values = value.split(","), i = values.length; while (i--) values[i] = parseFloat(values[i]); return values.join(","); } 427 b 235 b 394 b
  51. function calculate(d){var b=b;if(typeof d=="number") {return b(d);}if(isArray(d)){var c=d.length;while(c--){d[c]=b(d[c]);}return d.join(",");}var a=d.split(","),c=a.length;while(c--) {a[c]=b(a[c]);}return a.join(",");} 216 b 427 b 235 b 394 b
  52. element.setAttribute("width", 320);
  53. element.setAttribute("width", 320); var setAttribute = function (element, key, value) { element.setAttribute(key, value); } // ... setAttribute(element, "width", 320);
  54. element.setAttribute("width", 320); var setAttribute = function (element, key, value) { element.setAttribute(key, value); } // ... setAttribute(element, "width", 320); var setAttribute = "setAttribute"; // ... element[setAttribute]("width", 320);
  55. Error Handling
  56. function setWidth(width) { width = parseFloat(width); if (isNaN(width)) { handleErrors("‘width’ is not a number"); } } function handleErrors(message) { throw new Error(message); }
  57. function update(x, y, width, height) { try { this.setX(x); this.setY(y); this.setWidth(width); this.setHeight(height); } catch (err) { throw new Error("Some error happened… Somewhere."); } }
  58. JSLint http://jslint.com/
  59. Share the magic
  60. Thank You Icons used with permission of Iconfactory http://dmitry.baranovskiy.com dmitry@baranovskiy.com

×