LEARNING FROM LIBRARIES | Trevor Landau @trevor_landau

ABOUT

WHAT LIBS?

WHAT DID I MAKE?function Collection() {}

JQUERY

NOCONFLICTwindow.Collection = 'foo';var oldC = window.Collection;Collection.noConflict = function () { window.Collection = oldC; return Collection;};

var C = Collection.noConflict();log(typeof C, typeof Collection); // object, string

LENGTHCollection.prototype = { length: 0};var c = new Collection;Array.prototype.push.call(c, 1, 2);log(c.length); // 2

CONSTRUCTOR FACADEfunction Collection(args) { if (args && !Array.isArray(args) && arguments.length >= 0) { if (typeof args.toArray === 'function') { args = args.toArray(); } else { args = __slice.apply(arguments); } } else { args = []; } if (args.length) Array.prototype.push.apply(this, args);}

var c = new Collection([1,2,3]);var c2 = new Collection(1,2,3);var c3 = new Collection({ toArray: function () { return [1,2,3]; } });log(c.length, c2.length, c3.length); // 3, 3, 3

BACKBONE

ALL ARRAY BELONG TO USfunction Collection(args) { this.push.apply(this, args);}var omit = ['length', 'constructor', 'toString', 'toLocalString'];Object.getOwnPropertyNames(arrProto).forEach(function (fn) { if (omit.indexOf(fn) > -1) return; Collection.prototype[fn] = function () { var args = __slice.call(arguments); return arrProto[fn].apply(this, args); };});var c = new Collection([1,2,3]);log(c.length); // 3log(c.unshift(0)); // [0, 1, 2, 3]

ON && TRIGGERc.on('push', function () { log('push event', arguments); // 4, 5, 6});c.push(4, 5, 6);

ONon: function (name, fn, ctx) { this._events = this._events || {}; var events = this._events[name] || (this._events[name] = []); events.push({ fn: fn, ctx: ctx || this }); return this;}

TRIGGERtrigger: function (name) { if (!this._events) return this; var args = __slice.call(arguments, 1); var events = this._events[name]; if (events) { events.forEach(function (ev) { ev.fn.apply(ev.ctx, args); }); } return this;}

LETS SEE IN OUR APIObject.getOwnPropertyNames(arrProto).forEach(function (fn) { if (omit.indexOf(fn) > -1) return; Collection.prototype[fn] = function () { var args = __slice.call(arguments); var ret = arrProto[fn].apply(this, args); this.trigger(fn, ret); return ret; };});

TOJSONCollection.prototype.toJSON = function () { return this.map(function (val) { return val; });};var c = new Collection(1,2,3);// Without methodJSON.stringify(c); // '{"0":1,"1":2,"2":3}' - will also contain other props...// With methodJSON.stringify(c); // '[1,2,3]'

UNDERSCORECollection.zip = function () { var args = __slice.call(arguments); var lengths = args.map(function (c) { return c.length; }); var length = Math.max.apply(Math, lengths); var results = new Array(length); var map = function (c) { return c[i]; }; for (var i = 0; i < length; i += 1) { results[i] = args.map(map); } return results;}var c = new Collection([1,2]);var c2 = new Collection([3,4]);console.log(Collection.zip(c, c2)); // [[1,3],[2,4]];

ANGULARhttp://jsperf.com/apply-vs-call-vs-invoke

// performant applyvar pApply = function (args, fn, ctx) { switch (args.length) { case 0: return ctx[fn](); case 1: return ctx[fn](args[0]); case 2: return ctx[fn](args[0], args[1]); case 3: return ctx[fn](args[0], args[1], args[2]); case 4: return ctx[fn](args[0], args[1], args[2], args[3]); case 5: return ctx[fn](args[0], args[1], args[2], args[3], args[4]); ... case 10: return ctx[fn](args[0], args[1], args[2], args[3], args[4], args[5 default: return ctx[fn].apply(ctx, args); }};

LET'S SEE IT IN THE APIfunction Collection(args) { // Accept different types args = this._toArray(args) || []; pApply(args, 'push', this);}

MOCHACollection.prototype.repr = function () { var self = this; // override toJSON for repr purposes this.toJSON = null;

var repr = JSON.stringify(this, function (key, val) { if (self === val || !isNaN(parseInt(key, 10))) { return val; } return void 0; });

// reset delete this.toJSON; return repr;}

SHOULD.JS

GETCollection.prototype = { get size() { return this.length; }, get json() { return JSON.stringify(this); }};

DEFINEPROPERTYvar omit = ['length', 'constructor', 'toString', 'toLocalString'];Object.getOwnPropertyNames(arrProto).forEach(function (fn) { if (omit.indexOf(fn) > -1) return; Object.defineProperty(Collection.prototype, fn, { value: function () { var args = __slice.call(arguments); var ret = arrProto[fn].apply(this, args); var evArgs = [fn, ret]; pApply(evArgs, 'trigger', this); return ret; } });});

THE ENDhttps://github.com/landau/learningfromlibraries