| /** | |
| * Delegation based mixins for JavaScript. | |
| * | |
| * Non-specific extensions are used: | |
| * __proto__ | |
| * __noSuchMethod__ | |
| * | |
| * Tested in SpiderMonkey. | |
| * | |
| * Opened issues: |
| /* | |
| .scrollbar-measure { | |
| width: 100px; | |
| height: 100px; | |
| overflow: scroll; | |
| position: absolute; | |
| top: -9999px; | |
| } | |
| */ | |
| // Create the measurement node |
| (function(consoleObject) { | |
| var funcNames = [ | |
| 'assert', 'count', 'debug', 'dir', | |
| 'dirxml', 'error', 'exception', 'group', | |
| 'groupCollapsed', 'groupEnd', 'info', 'log', | |
| 'markTimeline', 'profile', 'profileEnd', 'time', | |
| 'timeEnd', 'trace', 'warn' | |
| ], i, funcName; | |
| for (i=0; i<funcNames.length; i+= 1) { |
| var _missing= function(data){ return React.DOM.pre(null, "Route not found: "+ data.route) }, | |
| _router= null, | |
| _started= false, | |
| _nextId= 1; | |
| function handleRouteChange(container, component) { | |
| var routeParams= Array.prototype.slice.call( arguments, 1 ) | |
| React.renderComponent( | |
| component({ routeParams:routeParams }, null), | |
| container |
| /** | |
| * Automatic Reference Counting (ARC) Garbage Collection technique. | |
| * | |
| * This diff describes Reference counting GC technique. | |
| * See also previous lesson on Mark and Sweep GC: | |
| * https://gist.github.com/4391763 | |
| * | |
| * Covered topics: | |
| * | |
| * 1. Reference value in ECMAScript (JS specific) |
| (function() { | |
| // Do not use this library. This is just a fun example to prove a | |
| // point. | |
| var Bloop = window.Bloop = {}; | |
| var mountId = 0; | |
| function newMountId() { | |
| return mountId++; | |
| } |
There was a [great article][1] about how react implements it's virtual DOM. There are some really interesting ideas in there but they are deeply buried in the implementation of the React framework.
However, it's possible to implement just the virtual DOM and diff algorithm on it's own as a set of independent modules.
| // Usage example: | |
| // | |
| // willTransitionTo(transition, params) { | |
| // transition.wait( | |
| // observeStore( | |
| // DraftStore, | |
| // s => s.isLoaded() | |
| // ).then(() => { | |
| // if (DraftStore.isMissingTitle()) { | |
| // transition.redirect('composeDraft', params); |
| 'use strict'; | |
| var React = require('react'), | |
| createStoreMixin = require('../mixins/createStoreMixin'), | |
| ClassNameMixin = require('../mixins/ClassNameMixin'), | |
| PlayerActionCreators = require('../actions/PlayerActionCreators'), | |
| PlayerStore = require('../stores/PlayerStore'), | |
| StampImageMixin = require('../mixins/StampImageMixin'), | |
| PureRenderMixin = require('../mixins/PureRenderMixin'), | |
| BlurredBackground = require('../atoms/BlurredBackground'), |
| 'use strict'; | |
| var React = require('react'), | |
| _ = require('underscore'), | |
| DelayActionMixin = require('../mixins/DelayActionMixin'), | |
| ClassNameMixin = require('../mixins/ClassNameMixin'), | |
| PureRenderMixin = require('../mixins/PureRenderMixin'); | |
| var PALETTE = [ | |
| "FECDD3","FD99A5","FC677A","FB334C","F6001F","C80019","970013","64000C", |