Embed Size (px)
DESCRIPTION
Edge of the Web presentation on building your JavaScript library.
Citation preview
Your JavaScript LibraryEdge of the Web ’09
Dmitry Baranovskiy
http://raphaeljs.com/ http://g.raphaeljs.com/
Why should I write a library of my own?
function trim(str) {
return str.replace(/^\s+|\s+$/g, "");
}
function $(id) {
return document.getElementById(id);
}
Low Level
High Level
Toolbox
Widgets
Prototype
Scriptaculous jQuery UIgRaphaël
Dojo
Raph
aël
jQueryExt
API & Functionality
Library is the answer.
So, what is the question?
Library is the answer.
So, what is the question?
Who is the target?
Java, Ruby, PHP, JavaScript…
Who is the target?
Java, Ruby, PHP, JavaScript…
“Everything should be made as simple as possible,
but not simpler.”
Albert Einstein
JavaScript is your friend
Performance
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;
}
function parseColour(colour) {
// #XXXXXX
var value = parseInt(colour.substring(1), 16);
return {
r: (value & 0xff0000) >> 16,
g: (value & 0xff00) >> 8,
b: value & 0xff,
};
}
var parseColour = (function () {
var cache = {};
return function (colour) {
if (colour in cache) {
return cache[colour];
}
// calculation
cache[colour] = value;
return value;
};
})();
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;
};
})();
Performance
Rocksby Thomas Fuchs & Amy Hoy
JavaScript Rocks! presents...
find more awesome JavaScript stuff at http://www.jsrocks.com
JavaScript
Animation
Bulletproof
Global Scope
Global Scope
Treat it as a public toilet
var myLib = {
method1: function () {},
method2: function () {},
// ...
};
var myLib = {};
(function () {
var libVariable = 2;
myLib.method1 = function () {};
myLib.method2 = function () {};
})();
Native Prototypes
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g, "");
};
Number.prototype.times = function (func) {
for (var i = 0; i < this; i++) {
func(i);
}
};
Object.prototype
for (var value in cache) {
this.setAttribute(value, cache[value]);
}
var horizontal = {left: 1, right: 1};
if (direction in horizontal) {
this.horizontal(direction);
}
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);
}
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);
}
function isArray(object) {
return object && (object instanceof Array);
}
Beware of <iframe>
function isArray(object) {
return Object.prototype.toString.call(object)
=== "[object Array]";
}
undefined
function setSomething(a) {
if (a == undefined) {
a = 5;
}
this.set(a);
}
var undefined;
function setSomething(a) {
if (a == undefined) {
a = 5;
}
this.set(a);
}
function setSomething(a) {
this.set(a || 5);
}
Packaging
Minify / Pack / Obfuscate
JSMinDojo ShrinkSafe
PackerYUI Compressor
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
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
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
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
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
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
element.setAttribute("width", 320);
element.setAttribute("width", 320);
var setAttribute = function (element, key, value) {
element.setAttribute(key, value);
}
// ...
setAttribute(element, "width", 320);
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);
Error Handling
function setWidth(width) {
width = parseFloat(width);
if (isNaN(width)) {
handleErrors("‘width’ is not a number");
}
}
function handleErrors(message) {
throw new Error(message);
}
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.");
}
}
Share the magic
