your javascript library
DESCRIPTION
Edge of the Web presentation on building your JavaScript library.TRANSCRIPT
![Page 1: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/1.jpg)
Your JavaScript LibraryEdge of the Web ’09
Dmitry Baranovskiy
![Page 3: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/3.jpg)
http://raphaeljs.com/ http://g.raphaeljs.com/
![Page 4: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/4.jpg)
Why should I write a library of my own?
![Page 5: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/5.jpg)
function trim(str) {
return str.replace(/^\s+|\s+$/g, "");
}
function $(id) {
return document.getElementById(id);
}
![Page 6: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/6.jpg)
![Page 7: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/7.jpg)
![Page 8: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/8.jpg)
![Page 9: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/9.jpg)
![Page 10: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/10.jpg)
Low Level
![Page 11: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/11.jpg)
High Level
![Page 12: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/12.jpg)
Toolbox
![Page 13: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/13.jpg)
Widgets
![Page 14: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/14.jpg)
![Page 15: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/15.jpg)
Prototype
Scriptaculous jQuery UIgRaphaël
Dojo
Raph
aël
jQueryExt
![Page 16: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/16.jpg)
API & Functionality
![Page 17: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/17.jpg)
Library is the answer.
So, what is the question?
![Page 18: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/18.jpg)
Library is the answer.
So, what is the question?
![Page 19: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/19.jpg)
Who is the target?
Java, Ruby, PHP, JavaScript…
![Page 20: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/20.jpg)
Who is the target?
Java, Ruby, PHP, JavaScript…
![Page 21: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/21.jpg)
“Everything should be made as simple as possible,
but not simpler.”
Albert Einstein
![Page 22: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/22.jpg)
JavaScript is your friend
![Page 23: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/23.jpg)
Performance
![Page 24: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/24.jpg)
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;
}
![Page 25: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/25.jpg)
function parseColour(colour) {
// #XXXXXX
var value = parseInt(colour.substring(1), 16);
return {
r: (value & 0xff0000) >> 16,
g: (value & 0xff00) >> 8,
b: value & 0xff,
};
}
![Page 26: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/26.jpg)
var parseColour = (function () {
var cache = {};
return function (colour) {
if (colour in cache) {
return cache[colour];
}
// calculation
cache[colour] = value;
return value;
};
})();
![Page 27: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/27.jpg)
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;
};
})();
![Page 28: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/28.jpg)
Performance
Rocksby Thomas Fuchs & Amy Hoy
JavaScript Rocks! presents...
find more awesome JavaScript stuff at http://www.jsrocks.com
JavaScript
![Page 29: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/29.jpg)
Animation
![Page 30: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/30.jpg)
Bulletproof
![Page 31: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/31.jpg)
Global Scope
![Page 32: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/32.jpg)
Global Scope
Treat it as a public toilet
![Page 33: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/33.jpg)
var myLib = {
method1: function () {},
method2: function () {},
// ...
};
![Page 34: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/34.jpg)
var myLib = {};
(function () {
var libVariable = 2;
myLib.method1 = function () {};
myLib.method2 = function () {};
})();
![Page 35: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/35.jpg)
Native Prototypes
![Page 36: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/36.jpg)
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g, "");
};
Number.prototype.times = function (func) {
for (var i = 0; i < this; i++) {
func(i);
}
};
![Page 37: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/37.jpg)
Object.prototype
![Page 38: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/38.jpg)
for (var value in cache) {
this.setAttribute(value, cache[value]);
}
var horizontal = {left: 1, right: 1};
if (direction in horizontal) {
this.horizontal(direction);
}
![Page 39: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/39.jpg)
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);
}
![Page 40: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/40.jpg)
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);
}
![Page 41: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/41.jpg)
function isArray(object) {
return object && (object instanceof Array);
}
![Page 42: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/42.jpg)
Beware of <iframe>
![Page 43: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/43.jpg)
function isArray(object) {
return Object.prototype.toString.call(object)
=== "[object Array]";
}
![Page 44: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/44.jpg)
undefined
![Page 45: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/45.jpg)
function setSomething(a) {
if (a == undefined) {
a = 5;
}
this.set(a);
}
![Page 46: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/46.jpg)
var undefined;
function setSomething(a) {
if (a == undefined) {
a = 5;
}
this.set(a);
}
![Page 47: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/47.jpg)
function setSomething(a) {
this.set(a || 5);
}
![Page 48: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/48.jpg)
Packaging
![Page 49: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/49.jpg)
Minify / Pack / Obfuscate
![Page 50: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/50.jpg)
JSMinDojo ShrinkSafe
PackerYUI Compressor
![Page 51: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/51.jpg)
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
![Page 52: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/52.jpg)
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
![Page 53: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/53.jpg)
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 b394 b
![Page 54: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/54.jpg)
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 b235 b394 b
![Page 55: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/55.jpg)
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 b235 b394 b
![Page 56: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/56.jpg)
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 b427 b235 b394 b
![Page 57: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/57.jpg)
element.setAttribute("width", 320);
![Page 58: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/58.jpg)
element.setAttribute("width", 320);
var setAttribute = function (element, key, value) {
element.setAttribute(key, value);
}
// ...
setAttribute(element, "width", 320);
![Page 59: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/59.jpg)
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);
![Page 60: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/60.jpg)
Error Handling
![Page 61: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/61.jpg)
function setWidth(width) {
width = parseFloat(width);
if (isNaN(width)) {
handleErrors("‘width’ is not a number");
}
}
function handleErrors(message) {
throw new Error(message);
}
![Page 62: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/62.jpg)
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.");
}
}
![Page 64: Your JavaScript Library](https://reader030.vdocument.in/reader030/viewer/2022012916/55561b26d8b42a3f168b547a/html5/thumbnails/64.jpg)
Share the magic