Even more java script best practices

Even more JavaScript best practices @GregWeng NCU 2015/10/23

Comment in JSDoc Style Racing Event queuing & Abortable Promise ES6/7/8 & Babel Homework review

JSDoc https://github.com/gitgrimbo/jsdoc3-examples http://usejsdoc.org/

Generate (pretty) API documents for human

If you follow its comment format

Demo site of Gaia System app http://alivedise.github.io/gaia-system-jsdoc/

Good first bugs for adding JSDoc comment https://bugzilla.mozilla.org/show_bug.cgi?id=1170465 It is a good way to learn contribution

Racing System Booting passcode.enabled Screen Lock Shows up reading Lock with Passcode return value Booting Logo Screen Lock Initializing ~ 3 seconds

passcode.enabled Screen Lock Shows up reading Lock with Passcode return value Screen Lock Initializing ~ 3 seconds Racing System Booting Booting Logo Racing

Whenever there is a "guessing" about some async operations...

And the solution is not trivial...

Bug 1173284 100+ comments & 1 month

passcode.enabled Screen Lock Shows up reading Lock with Passcode return value Screen Lock Initializing ~ 3 seconds Solution System Booting Booting Logo Freeze the slider

Event queueing & Abortable Promise

Public interfaces of JavaScript program components JavaScript components usually use handlers as public interfaces among the user, server and other components like to draw or to fire new events private helper methods... event handlers server gateway local data keeper component usernative events server sync componentscustom events

Or racing may occur when two events and their async operations are performing handler bar handler foo "handleEvent" component Async event handlers need a queue async helper sync helper handling foo waiting to handle bar waiting to handle foo waiting to handle foo waiting to handle bar event comes when there is one being handled

Every handler will be queued by concating them with the 'then' method handler bar handler foo "handleEvent" component Promise as the queue async helper sync helper event comes when there is one being handled this.mainPromise = this. mainPromise.then( this.handlerBar.bind(this) ); handling foo waiting to handle bar waiting to handle foo

Promise is not enough when events are prioritized

Must not be queued: handle it immediately and clear all queued steps handler bar handler foo "handleEvent" component Prioritized events async helper sync helper handling bar waiting to handle bar waiting to handle foo waiting to handle bar waiting to handle bar

How to clear the queued steps? handler bar handler foo "handleEvent" component Prioritized events async helper sync helper waiting to handle bar handling foo waiting to handle bar waiting to handle bar waiting to handle bar

Promise/A+ spec doesn't provide any method to abort it...

Need to create a "Process" to wrap the original Promise

Throw an "Interrupt" customized error when prioritized event comes, and capture it later to silent the error console handler bar handler foo "handleEvent" component Prioritized events with "Process" async helper sync helper waiting to handle bar handling foo waiting to handle bar waiting to handle bar waiting to handle bar Error: Interrupt

import Utils from 'js/utils' export default class { constructor(id) { this.id = id this.queue = Promise.resolve() } handleEvent(event) { this.queue = this.queue.then(() => { return this.onEvent[event.type].bind(this) }).catch((err) => { this.onErrorOrInterrupt(err) }) } }

In the current front-end world ES6+ is becoming the mainstream

Please do not test expression only: About the test it('will test some pure functions', function() { assert(2 === (1 + 1)); }); it('will test some pure functions', function() { var manager = new Manager() assert(2 === manager.pureAdd(1, 1)); }); //.... Manager.prototype.pureAdd = function(a, b) { return a + b; };

It is not necessary to bind then call it immediately About the 'bind' handleEvent(event) { .... case 'foo': this.onEventFoo.bind(this)() } window.addEventListener('foo', this); // Bind `this` to the handleEvent //.... handleEvent(event) { .... case 'foo': this.onEventFoo() // `this` of 'handleEvent' is already bound }

The `then` method will pass the argument, and bound function can still be called as normal function, so: About the Promise + 'bind' .then(function(data) { this.foo(data); }.bind(this)); .then(this.foo.bind(this));

Please give it a clear naming convention to distinguish constructor and instance Naming convention is important var foo = function() {}; var f = new foo(); //.... var Foo = function() {}; var foo = new Foo(); //....

You are in trouble if your PR show some red lines like this and you can't explain that

And please comment on PR or using commits to indicate what issue you're addressing

Update: people who already commented on PRs Quiz#1 rockwyc992 : 吳易璋 CaeserNieh : 聶順成 rockwyc992 : 吳易璋 Quiz#2 jason1122g : 邱義傑 bdsword : 蔣彥亭 c910335 : 陳達仁 Davisanity : 林唐正 amm040341 : 蘇聖雅 rueian : 黃瑞安 w181496 : 黃詩凱 Peter654q :莊侑穎 bdsword : 蔣彥亭 Quiz#3 rueian : 黃瑞安 c910335 : 陳達仁 CrashedBboy : 吳承霖 Sharknevercries : 李政遠 jason1122g : 邱義傑

Even more java script best practices

More Related Content

What's hot

Viewers also liked

Similar to Even more java script best practices

More from ChengHui Weng

Recently uploaded

Even more java script best practices