First off, you need to know what you want your library to do. From their on, you need to be able to know how to do what you are trying to build. For example if you are trying to make a gaming library, you better know your equations and be good with things such as Canvas and WebGL. I've created a library before for methods for Strings, Array, Objects etc. I got it done, but sadly I never finished the documentation.
Anyways, I basically started out with creating a "JavaScript class". Which would look something like (doing a jQuery like library example):
var DOM = function (selector) {
if (typeof selector == "string") {
selector = document.querySelectorAll(selector);
}
this.animate = function (prop, times, callbacks) {
var el = selector;
var animate = function (element, props, time, callback) {
callback = callback || function () {};
time = time || 1000;
var timers = {}, // store the different interval timers so that they can be cancelled
calls = 0, // numbers of times the call would have been called
nprops = 0; // number of properties
for (var prop in props) {
(function (prop) {
var edit = prop == "scrollTop" ? element : element.style;
var stepCounter = [],
customStep = props[prop],
curr = edit[prop],
lastStepPercent = curr == "" ? (prop == "opacity" ? 1 : 0) : curr,
measure = prop == "scrollTop" || prop == "opacity" ? "" : "px",
stepper = function () {
edit[prop] = stepCounter[0] + measure;
stepCounter.shift();
};
if (props[prop].constructor == Number) customStep = [props[prop]];
for (var step = 0, len = customStep.length; step < len; step++) {
var from = parseInt(lastStepPercent),
to = parseInt(customStep[step]),
small = to < from,
numOfSteps = small ? from - to : to - from, // get current number of frames
multi = 30 * Math.round(parseInt(time) / 1000),
by = numOfSteps / (25 + multi) * len; // the stepper number
if (from == to) {
break;
}
for (var i = from; small ? i >= to : i <= to; i += small ? -by : by) {
stepCounter.push(i);
}
stepCounter.push(to);
lastStepPercent = customStep[step];
}
stepper();
timers[element + prop] = setInterval(function () {
stepper();
if (stepCounter.length == 0) {
clearInterval(timers[element + prop]);
calls++;
if (calls == nprops) {
callback.call(element);
}
}
}, time / stepCounter.length);
nprops++;
})(prop);
}
};
for (var i = 0; i < el.length; i++) {
animate(el[i], prop, times, callbacks);
};
return new DOM(selector); // re-initiate "JavaScript class" for chaining
}
this.click = function (fun) {
var el = selector;
for (var i = 0, len = el.length; i < len; i++) {
el[i].onclick = fun.bind(el);
}
}
};
Setup the variable for your library:
var $ = function (selector) {
return new DOM(selector);
};
NOTE I used a separate function to do the "class" just because I think $ should be kept basic and just an init function.
You could use this setup like:
$("#click-me").click(function(){
$(this).animate({
"opacity": 0
}, 1000);
});
});
This should give a little idea about how jQuery's syntax work. Of course, libraries don't necessarily have to be that complex. A library is just a collection of functions that make your life as a developer easier. Even a setup like the following could in the end be considered a library once you have a full collection of functions:
$ = {};
$.animate = function (selector, prop, times, callbacks) {
var el = document.querySelectorAll(selector);
var animate = function (element, props, time, callback) {
callback = callback || function () {};
time = time || 1000;
var timers = {}, // store the different interval timers so that they can be cancelled
calls = 0, // numbers of times the call would have been called
nprops = 0; // number of properties
for (var prop in props) {
(function (prop) {
var edit = prop == "scrollTop" ? element : element.style;
var stepCounter = [],
customStep = props[prop],
curr = edit[prop],
lastStepPercent = curr == "" ? (prop == "opacity" ? 1 : 0) : curr,
measure = prop == "scrollTop" || prop == "opacity" ? "" : "px",
stepper = function () {
edit[prop] = stepCounter[0] + measure;
stepCounter.shift();
};
if (props[prop].constructor == Number) customStep = [props[prop]];
for (var step = 0, len = customStep.length; step < len; step++) {
var from = parseInt(lastStepPercent),
to = parseInt(customStep[step]),
small = to < from,
numOfSteps = small ? from - to : to - from, // get current number of frames
multi = 30 * Math.round(parseInt(time) / 1000),
by = numOfSteps / (25 + multi) * len; // the stepper number
if (from == to) {
break;
}
for (var i = from; small ? i >= to : i <= to; i += small ? -by : by) {
stepCounter.push(i);
}
stepCounter.push(to);
lastStepPercent = customStep[step];
}
stepper();
timers[element + prop] = setInterval(function () {
stepper();
if (stepCounter.length == 0) {
clearInterval(timers[element + prop]);
calls++;
if (calls == nprops) {
callback.call(element);
}
}
}, time / stepCounter.length);
nprops++;
})(prop);
}
};
for (var i = 0; i < el.length; i++) {
animate(el[i], prop, times, callbacks)
};
}
$.animate("#id", {
width: 0
}, 1000);
I used this relatively complex function just to note that a library can be a lot of work if you are attempting on developing something difficult. Anyways, You need to be able to be experienced with pretty advanced programming in JavaScript. In the end, it's not hard, as long as you know what you are trying to do and you have some logical experience in JavaScript. Of course i'm not an expert at JavaScript and there might be better architecture for a library, but I hope this helped.
