Download as PDF, PPTX
![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)
})
}
}](https://image.slidesharecdn.com/evenmorejavascriptbestpractices-160602131945/85/Even-more-java-script-best-practices-29-320.jpg)
![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)
})
}
}](https://image.slidesharecdn.com/evenmorejavascriptbestpractices-160602131945/75/Even-more-java-script-best-practices-29-2048.jpg)
Uploaded byChengHui Weng
Even more java script best practices
The document covers best practices in JavaScript, particularly regarding async operations, event handling, and using promises effectively. It discusses aspects like racing events, abortable promises, and the importance of proper naming conventions in code. Additionally, it highlights the role of ES6/7/8 features and tools like Babel for modern JavaScript development, along with homework assignments for review.
More Related Content
Similar to Even more java script best practices
![[2015/2016] JavaScript](https://cdn.slidesharecdn.com/ss_thumbnails/04javascript-160321110338-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Even more java script best practices
- 1. Even more JavaScript bestpractices @GregWeng NCU 2015/10/23
- 2.
- 3. Comment in JSDocStyle Racing Event queuing & Abortable Promise ES6/7/8 & Babel Homework review
- 4.
- 5. Generate (pretty) APIdocuments for human
- 6. If you followits comment format
- 7. Demo site ofGaia System app http://alivedise.github.io/gaia-system-jsdoc/
- 8. Good first bugsfor adding JSDoc comment https://bugzilla.mozilla.org/show_bug.cgi?id=1170465 It is a good way to learn contribution
- 9. Racing & AbortablePromise
- 10. Racing System Booting passcode.enabled Screen Lock Shows up readingLock with Passcode return value Booting Logo Screen Lock Initializing ~ 3 seconds
- 11. passcode.enabled Screen Lock Shows up readingLock with Passcode return value Screen Lock Initializing ~ 3 seconds Racing System Booting Booting Logo Racing
- 12. Whenever there isa "guessing" about some async operations...
- 13. A racing isheld
- 14. And the solutionis not trivial...
- 15. Bug 1173284 100+ comments& 1 month
- 16. passcode.enabled Screen Lock Shows up readingLock with Passcode return value Screen Lock Initializing ~ 3 seconds Solution System Booting Booting Logo Freeze the slider
- 17. Event queueing &Abortable Promise
- 18. Public interfaces ofJavaScript 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
- 19. Or racing mayoccur 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
- 20. Promise as thequeue
- 21. Every handler willbe 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
- 22. Promise is notenough when events are prioritized
- 23. Must not bequeued: 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
- 24. How to clearthe 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
- 25. Promise/A+ spec doesn'tprovide any method to abort it...
- 26. Need to createa "Process" to wrap the original Promise
- 27. 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
- 28.
- 29. 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) }) } }
- 30.
- 31.
- 32. In the currentfront-end world ES6+ is becoming the mainstream
- 33.
- 34. Please do nottest 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; };
- 35. It is notnecessary 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 }
- 36. The `then` methodwill 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));
- 37. Please give ita 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(); //....
- 38. You are introuble if your PR show some red lines like this and you can't explain that
- 39. And please commenton PR or using commits to indicate what issue you're addressing
- 40. Update: people whoalready 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 : 邱義傑