How to create personal JavaScript library and framework? -
as developer, create own javascript library , framework. in terms of architecture , features, kinds of aspects should take consideration?
first off, need know want library do. on, need able know how trying build. example if trying make gaming library, better know equations , things such canvas , webgl. i've created library before methods strings, array, objects etc. got done, sadly never finished documentation.
anyways, started out creating "javascript class". (doing jquery 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 different interval timers can cancelled calls = 0, // numbers of times call have been called nprops = 0; // number of properties (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]]; (var step = 0, len = customstep.length; step < len; step++) { var = parseint(laststeppercent), = parseint(customstep[step]), small = < from, numofsteps = small ? - : - from, // current number of frames multi = 30 * math.round(parseint(time) / 1000), = numofsteps / (25 + multi) * len; // stepper number if (from == to) { break; } (var = from; small ? >= : <= to; += 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); } }; (var = 0; < el.length; i++) { animate(el[i], prop, times, callbacks); }; return new dom(selector); // re-initiate "javascript class" chaining } this.click = function (fun) { var el = selector; (var = 0, len = el.length; < len; i++) { el[i].onclick = fun.bind(el); } } }; setup variable library:
var $ = function (selector) { return new dom(selector); }; note used separate function "class" because think $ should kept basic , init function.
you use setup like:
$("#click-me").click(function(){ $(this).animate({ "opacity": 0 }, 1000); }); }); this should give little idea how jquery's syntax work. of course, libraries don't have complex. library collection of functions make life developer easier. setup following in end considered library once have 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 different interval timers can cancelled calls = 0, // numbers of times call have been called nprops = 0; // number of properties (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]]; (var step = 0, len = customstep.length; step < len; step++) { var = parseint(laststeppercent), = parseint(customstep[step]), small = < from, numofsteps = small ? - : - from, // current number of frames multi = 30 * math.round(parseint(time) / 1000), = numofsteps / (25 + multi) * len; // stepper number if (from == to) { break; } (var = from; small ? >= : <= to; += 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); } }; (var = 0; < el.length; i++) { animate(el[i], prop, times, callbacks) }; } $.animate("#id", { width: 0 }, 1000); i used relatively complex function note library can lot of work if attempting on developing difficult. anyways, need able experienced pretty advanced programming in javascript. in end, it's not hard, long know trying , have logical experience in javascript. of course i'm not expert @ javascript , there might better architecture library, hope helped.
Comments
Post a Comment