From c5ecf2e9f1efe8d38ff8e5cf8d27984bc8d0d87c Mon Sep 17 00:00:00 2001 From: xxx663xxx Date: Fri, 30 Oct 2015 18:08:01 +0800 Subject: [PATCH] Tier 1 requirements met Tier 1 requirements met , including: * Bind this in Event handlers * Deal with object properties w/ constructor & prototype * Deal with asynchronous flows with Promise * Write my first test case for a pure function (as the last test of |test-list.js| file shows) --- homework/content.js | 73 ++++++++++-------- homework/index.html | 1 + homework/list.js | 152 ++++++++++++++++++++----------------- homework/main.js | 9 +++ homework/test/test-list.js | 5 ++ 5 files changed, 140 insertions(+), 100 deletions(-) create mode 100644 homework/main.js diff --git a/homework/content.js b/homework/content.js index 710be28..aa9dd49 100644 --- a/homework/content.js +++ b/homework/content.js @@ -1,37 +1,50 @@ 'use strict'; -(function() { - var _wrapper = document.querySelector('#note-content-wrapper'); +(function(exports) { - function start() { - window.addEventListener('note-open', function(event) { - var note = event.detail; - resetWrapper(); - drawNote(note); - }); - } +var NoteContentManager = function() { + // Will be an element as the content wrapper. + this._wrapper = null; +}; - function resetWrapper() { - _wrapper.innerHTML = ''; - } +NoteContentManager.prototype = { + + drawNote(note){ + var title = note.title; + var h = document.createElement('h2'); + h.textContent = title; + var passages = note.passages; + var buff = document.createDocumentFragment(); + passages.forEach(function(passage) { + var p = document.createElement('p'); + p.classList.add('note-passage'); + p.textContent = passage; + buff.appendChild(p); + }); + this._wrapper.appendChild(h); + this._wrapper.appendChild(buff); + }, + + resetWrapper(){ + this._wrapper.innerHTML = ''; + }, + + handleEvent(event) { + switch (event.type) { + case 'note-open': + var note = event.detail; + this.resetWrapper(); + this.drawNote(note); + break; + } + }, - function drawNote(note) { - var title = note.title; - var h = document.createElement('h2'); - h.textContent = title; - var passages = note.passages; - var buff = document.createDocumentFragment(); - passages.forEach(function(passage) { - var p = document.createElement('p'); - p.classList.add('note-passage'); - p.textContent = passage; - buff.appendChild(p); - }); - _wrapper.appendChild(h); - _wrapper.appendChild(buff); + start() { + window.addEventListener('note-open', this); + this._wrapper = document.querySelector('#note-content-wrapper'); } +}; + +exports.NoteContentManager = NoteContentManager; +})(window); - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); -})(); diff --git a/homework/index.html b/homework/index.html index e387963..ad28075 100644 --- a/homework/index.html +++ b/homework/index.html @@ -3,6 +3,7 @@ Homework - Note List + diff --git a/homework/list.js b/homework/list.js index 21eddbc..9dfacf3 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,79 +1,91 @@ 'use strict'; -(function() { +(function(exports) { - var _listNoteContent = []; - var _wrapper = document.querySelector('#note-list-wrapper'); +var NoteListManager = function() { + + this._listNoteContent = []; + // Will be an element as the list wrapper. + this._wrapper = null; +}; - function start() { - fetchList(function(data) { - updateList(data); - drawList(); - preloadFirstNote(); - }); - window.addEventListener('click', function(event) { - onNoteOpen(event); - }); - } +NoteListManager.prototype = { - function onNoteOpen(event) { - if (event.target.classList.contains('note-title')) { - var id = event.target.dataset.noteId; - var content = _listNoteContent[id]; - window.dispatchEvent(new CustomEvent('note-open', - { detail: content })); - }; - } + fetchList(){ + return new Promise((function(resolve, reject){ + var xhr = new XMLHttpRequest(); + xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true); + xhr.responseType = 'json'; + xhr.onreadystatechange = function(e) { + // Watch out: we have a mysterious unknown 'this'. + if (this.readyState === 4 && this.status === 200) { + var listData = this.response; + // The flow ends here. + resolve(listData); + } else if (this.status !== 200 ){ + reject('FETCHING FAILED: ' + this.status + ' ' + this.readyState); + } + }; + xhr.send(); + }).bind(this)) + }, - function preloadFirstNote() { - if (_listNoteContent.length !== 0) { - var content = _listNoteContent[0]; - window.dispatchEvent(new CustomEvent('note-open', - { detail: content })); - } - } + drawList() { + var ul = document.createElement('ul'); + ul.id = 'note-title-list'; + var buff = document.createDocumentFragment(); + this._listNoteContent.forEach(function(note, i) { + var li = document.createElement('li'); + li.dataset.noteId = i; + li.classList.add('note-title'); + li.textContent = note.title; + // Note: buff is captured, so we now have a + // little closure naturally. + buff.appendChild(li); + }); + ul.appendChild(buff); + this._wrapper.appendChild(ul); + }, + + preloadFirstNote() { + if (this._listNoteContent.length !== 0) { + var content = this._listNoteContent[0]; + window.dispatchEvent(new CustomEvent('note-open', + { detail: content })); + } + }, + + handleEvent(event) { + switch (event.type) { + case 'click': + this.onNoteOpen(event); + break; + } + }, + + onNoteOpen(event) { + if (event.target.classList.contains('note-title')) { + var id = event.target.dataset.noteId; + var content = this._listNoteContent[id]; + window.dispatchEvent(new CustomEvent('note-open', + { detail: content })); + }; + }, - function updateList(list) { - _listNoteContent = list; - } + start() { + // Register the handler . + window.addEventListener('click', this); + this._wrapper = document.querySelector('#note-list-wrapper'); + this.fetchList() + .then((function(response) { + // First initialization. + this._listNoteContent = response; + this.drawList(response); + this.preloadFirstNote(); + }).bind(this)); + } +}; - function drawList() { - var list = _listNoteContent; - var ul = document.createElement('ul'); - ul.id = 'note-title-list'; - var buff = document.createDocumentFragment(); - list.forEach(function(note, i) { - var li = document.createElement('li'); - li.dataset.noteId = i; - li.classList.add('note-title'); - li.textContent = note.title; - // Note: buff is captured, so we now have a - // little closure naturally. - buff.appendChild(li); - }); - ul.appendChild(buff); - _wrapper.appendChild(ul); - } +exports.NoteListManager = NoteListManager; +})(window); - function fetchList(afterFetch) { - var xhr = new XMLHttpRequest(); - xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true); - xhr.responseType = 'json'; - xhr.onreadystatechange = function(e) { - // Watch out: we have a mysterious unknown 'this'. - if (this.readyState === 4 && this.status === 200) { - var listData = this.response; - // The flow ends here. - afterFetch(listData); - } else if (this.status !== 200 ){ - // Ignore error in this case. - } - }; - xhr.send(); - } - - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); - -})(); diff --git a/homework/main.js b/homework/main.js new file mode 100644 index 0000000..680de05 --- /dev/null +++ b/homework/main.js @@ -0,0 +1,9 @@ +'use strict'; + + // Kick off +document.addEventListener('DOMContentLoaded', function(event) { + var noteContentManager = new NoteContentManager(); + var noteListManager = new NoteListManager(); + noteContentManager.start(); + noteListManager.start(); +}); diff --git a/homework/test/test-list.js b/homework/test/test-list.js index 441fc45..7f31d06 100644 --- a/homework/test/test-list.js +++ b/homework/test/test-list.js @@ -5,4 +5,9 @@ describe('Test > ', function() { it('will test some pure functions', function() { // Write any pure function assertion here. }); + + it('simple test case', function(){ + assert.equal(1+1,2); + }); + });