• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Learning from libraries
 

Learning from libraries

on

  • 414 views

My Talk from http://www.meetup.com/html5-app-developers/events/135970912/

My Talk from http://www.meetup.com/html5-app-developers/events/135970912/

Statistics

Views

Total Views
414
Views on SlideShare
414
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Learning from libraries Learning from libraries Presentation Transcript

    • LEARNING FROM LIBRARIES |Trevor Landau @trevor_landau
    • ABOUT
    • WHAT LIBS?
    • WHAT DID I MAKE? function Collection() {}
    • JQUERY
    • NOCONFLICT window.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
    • LENGTH Collection.prototype = { length: 0 }; var c = new Collection; Array.prototype.push.call(c, 1, 2); log(c.length); // 2
    • CONSTRUCTOR FACADE function 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 US function 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); // 3 log(c.unshift(0)); // [0, 1, 2, 3]
    • ON && TRIGGER c.on('push', function () { log('push event', arguments); // 4, 5, 6 }); c.push(4, 5, 6);
    • ON on: 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; }
    • TRIGGER trigger: 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 API Object.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; }; });
    • TOJSON Collection.prototype.toJSON = function () { return this.map(function (val) { return val; }); }; var c = new Collection(1,2,3); // Without method JSON.stringify(c); // '{"0":1,"1":2,"2":3}' - will also contain other props... // With method JSON.stringify(c); // '[1,2,3]'
    • UNDERSCORE Collection.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]];
    • ANGULAR http://jsperf.com/apply-vs-call-vs-invoke // performant apply var 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 API function Collection(args) { // Accept different types args = this._toArray(args) || []; pApply(args, 'push', this); }
    • MOCHA Collection.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
    • GET Collection.prototype = { get size() { return this.length; }, get json() { return JSON.stringify(this); } };
    • DEFINEPROPERTY var 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 END https://github.com/landau/learningfromlibraries