From 84e29eae43f91a58fad713611764d1d2c92f0cc9 Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Fri, 23 Oct 2015 21:29:31 +0800 Subject: [PATCH 01/17] step1 prototype --- homework/content.js | 69 +++++++++++---------- homework/list.js | 145 +++++++++++++++++++++----------------------- 2 files changed, 104 insertions(+), 110 deletions(-) diff --git a/homework/content.js b/homework/content.js index 710be28..20e7e63 100644 --- a/homework/content.js +++ b/homework/content.js @@ -1,37 +1,36 @@ 'use strict'; -(function() { - var _wrapper = document.querySelector('#note-content-wrapper'); - - function start() { - window.addEventListener('note-open', function(event) { - var note = event.detail; - resetWrapper(); - drawNote(note); - }); - } - - function resetWrapper() { - _wrapper.innerHTML = ''; - } - - 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); - } - - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); -})(); +(function (exports) { + var TodoContentManager = function () { + this._wrapper = null; + } + TodoContentManager.prototype = { + start() { + window.addEventListener('note-open', function (event) { + var note = event.detail; + resetWrapper(); + drawNote(note); + }); + this._wrapper = document.querySelector('#note-content-wrapper'); + }, + resetWrapper() { + _wrapper.innerHTML = ''; + }, + 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); + }, + } + exports.TodoListManager = TodoListManager; +})(window); diff --git a/homework/list.js b/homework/list.js index 21eddbc..e307339 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,79 +1,74 @@ 'use strict'; -(function() { - - var _listNoteContent = []; - var _wrapper = document.querySelector('#note-list-wrapper'); - - function start() { - fetchList(function(data) { - updateList(data); - drawList(); - preloadFirstNote(); - }); - window.addEventListener('click', function(event) { - onNoteOpen(event); - }); - } - - 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 })); +(function(export) { + var TodoListManager = function () { + // Local data storage; should sync up with the server. + this._listTodoItem = []; + // Will be an element as the list wrapper. + this._wrapper = null; }; - } - - function preloadFirstNote() { - if (_listNoteContent.length !== 0) { - var content = _listNoteContent[0]; - window.dispatchEvent(new CustomEvent('note-open', - { detail: content })); + TodoListManager.prototype = { + start() { + fetchList(function(data) { + updateList(data); + drawList(); + preloadFirstNote(); + }); + window.addEventListener('click', function(event) { + onNoteOpen(event); + }); + this._wrapper = document.querySelector('#note-list-wrapper'); + }, + 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 })); + }; + }, + preloadFirstNote() { + if (_listNoteContent.length !== 0) { + var content = _listNoteContent[0]; + window.dispatchEvent(new CustomEvent('note-open', + { detail: content })); + } + }, + updateList(list) { + _listNoteContent = list; + }, + 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); + }, + 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(); + } } - } - - function updateList(list) { - _listNoteContent = list; - } - - 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); - } - - 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(); - }); - -})(); +})(Window); From 0e8082fa44f52dbd2fedbcfeabe53fd2114e6b5f Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Fri, 23 Oct 2015 21:30:27 +0800 Subject: [PATCH 02/17] step1 ... --- homework/main.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 homework/main.js diff --git a/homework/main.js b/homework/main.js new file mode 100644 index 0000000..ed08a16 --- /dev/null +++ b/homework/main.js @@ -0,0 +1,9 @@ +'use strict'; + +// Kick off +document.addEventListener('DOMContentLoaded', function (event) { + var todoListManager = new TodoListManager(); + var todoInputManager = new TodoContentManager(); + todoListManager.start(); + TodoContentManager.start(); +}); \ No newline at end of file From 6743a00d45a2003beaba006149810cd5152e53f3 Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Fri, 23 Oct 2015 21:42:54 +0800 Subject: [PATCH 03/17] step1 html ... --- homework/index.html | 19 ++++++++++--------- homework/main.js | 4 ++-- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/homework/index.html b/homework/index.html index e387963..b4e3863 100644 --- a/homework/index.html +++ b/homework/index.html @@ -1,15 +1,16 @@ - + - - Homework - Note List - - - + + Homework - Note List + + + + -

Homework - Note List

-
-
+

Homework - Note List

+
+
diff --git a/homework/main.js b/homework/main.js index ed08a16..235ea29 100644 --- a/homework/main.js +++ b/homework/main.js @@ -3,7 +3,7 @@ // Kick off document.addEventListener('DOMContentLoaded', function (event) { var todoListManager = new TodoListManager(); - var todoInputManager = new TodoContentManager(); + var todoContentManager = new TodoContentManager(); todoListManager.start(); - TodoContentManager.start(); + todoContentManager.start(); }); \ No newline at end of file From 3f1e896f1ddc79e725aeb80ff70fc3be62a39e47 Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Fri, 23 Oct 2015 21:46:48 +0800 Subject: [PATCH 04/17] step1 ... --- homework/list.js | 1 + 1 file changed, 1 insertion(+) diff --git a/homework/list.js b/homework/list.js index e307339..2f5ce2d 100644 --- a/homework/list.js +++ b/homework/list.js @@ -71,4 +71,5 @@ xhr.send(); } } + exports.TodoListManager = TodoListManager; })(Window); From 7ab85d31fd77788f17a19920133b309ad9eb2116 Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Fri, 23 Oct 2015 21:50:31 +0800 Subject: [PATCH 05/17] step1 ... --- homework/content.js | 4 ++-- homework/list.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/homework/content.js b/homework/content.js index 20e7e63..fdf2901 100644 --- a/homework/content.js +++ b/homework/content.js @@ -30,7 +30,7 @@ }); _wrapper.appendChild(h); _wrapper.appendChild(buff); - }, - } + } + }; exports.TodoListManager = TodoListManager; })(window); diff --git a/homework/list.js b/homework/list.js index 2f5ce2d..1f92c11 100644 --- a/homework/list.js +++ b/homework/list.js @@ -70,6 +70,6 @@ }; xhr.send(); } - } + }; exports.TodoListManager = TodoListManager; })(Window); From 2bfe4e11e41fb98eb17b6390c5c889d0e5d296c9 Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Fri, 23 Oct 2015 21:56:13 +0800 Subject: [PATCH 06/17] step1 ... --- homework/content.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/homework/content.js b/homework/content.js index fdf2901..c1a5953 100644 --- a/homework/content.js +++ b/homework/content.js @@ -32,5 +32,5 @@ _wrapper.appendChild(buff); } }; - exports.TodoListManager = TodoListManager; + exports.TodoContentManager = TodoContentManager; })(window); From 57adacf7c234bdad30764e844d5ac628fdfa1164 Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Fri, 23 Oct 2015 22:00:08 +0800 Subject: [PATCH 07/17] step1 ... --- homework/list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/homework/list.js b/homework/list.js index 1f92c11..7adcf6c 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,6 +1,6 @@ 'use strict'; -(function(export) { +(function(exports) { var TodoListManager = function () { // Local data storage; should sync up with the server. this._listTodoItem = []; From 526ac0d2d75db54fdcd8935716b57f14703dd928 Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Fri, 23 Oct 2015 22:02:26 +0800 Subject: [PATCH 08/17] step1 ... --- homework/list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/homework/list.js b/homework/list.js index 7adcf6c..312d873 100644 --- a/homework/list.js +++ b/homework/list.js @@ -72,4 +72,4 @@ } }; exports.TodoListManager = TodoListManager; -})(Window); +})(window); From 34d93cc6fca4c3cded817699a4102b7398fd1f37 Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Fri, 23 Oct 2015 22:06:12 +0800 Subject: [PATCH 09/17] step1 ... --- homework/content.js | 4 ++-- homework/list.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/homework/content.js b/homework/content.js index c1a5953..42646c8 100644 --- a/homework/content.js +++ b/homework/content.js @@ -8,8 +8,8 @@ start() { window.addEventListener('note-open', function (event) { var note = event.detail; - resetWrapper(); - drawNote(note); + this.resetWrapper(); + this.drawNote(note); }); this._wrapper = document.querySelector('#note-content-wrapper'); }, diff --git a/homework/list.js b/homework/list.js index 312d873..11ca34c 100644 --- a/homework/list.js +++ b/homework/list.js @@ -9,7 +9,7 @@ }; TodoListManager.prototype = { start() { - fetchList(function(data) { + this.fetchList(function(data) { updateList(data); drawList(); preloadFirstNote(); From 7a6a2e18efd5d498fdbae4b7643fc03adf73adaa Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Fri, 23 Oct 2015 22:08:35 +0800 Subject: [PATCH 10/17] step1 ... --- homework/list.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/homework/list.js b/homework/list.js index 11ca34c..44a8a14 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,6 +1,6 @@ 'use strict'; -(function(exports) { +(function (exports) { var TodoListManager = function () { // Local data storage; should sync up with the server. this._listTodoItem = []; @@ -9,12 +9,12 @@ }; TodoListManager.prototype = { start() { - this.fetchList(function(data) { - updateList(data); - drawList(); - preloadFirstNote(); + this.fetchList(function (data) { + this.updateList(data); + this.drawList(); + this.preloadFirstNote(); }); - window.addEventListener('click', function(event) { + window.addEventListener('click', function (event) { onNoteOpen(event); }); this._wrapper = document.querySelector('#note-list-wrapper'); @@ -42,7 +42,7 @@ var ul = document.createElement('ul'); ul.id = 'note-title-list'; var buff = document.createDocumentFragment(); - list.forEach(function(note, i) { + list.forEach(function (note, i) { var li = document.createElement('li'); li.dataset.noteId = i; li.classList.add('note-title'); @@ -58,13 +58,13 @@ 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) { + 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 ){ + } else if (this.status !== 200) { // Ignore error in this case. } }; From 10854cd66a96ffdfcf03ffd293f98c02e8e049e5 Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Fri, 23 Oct 2015 22:13:04 +0800 Subject: [PATCH 11/17] step1 ........ --- homework/list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/homework/list.js b/homework/list.js index 44a8a14..5853473 100644 --- a/homework/list.js +++ b/homework/list.js @@ -13,7 +13,7 @@ this.updateList(data); this.drawList(); this.preloadFirstNote(); - }); + }.bind(this)); window.addEventListener('click', function (event) { onNoteOpen(event); }); From 8c26d5b889c9a587af0abf85eba4c513bb93bd61 Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Fri, 23 Oct 2015 22:18:13 +0800 Subject: [PATCH 12/17] step1 .... --- homework/list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/homework/list.js b/homework/list.js index 5853473..5aa9da8 100644 --- a/homework/list.js +++ b/homework/list.js @@ -35,7 +35,7 @@ } }, updateList(list) { - _listNoteContent = list; + this._listNoteContent = list; }, drawList() { var list = _listNoteContent; From e9213e5a080b89ef58fac2069b1d2a4e3d0bcad2 Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Fri, 23 Oct 2015 22:25:19 +0800 Subject: [PATCH 13/17] step1 ... --- Web.config | 6 ++++++ homework/content.js | 6 +++--- homework/list.js | 8 ++++---- 3 files changed, 13 insertions(+), 7 deletions(-) create mode 100644 Web.config diff --git a/Web.config b/Web.config new file mode 100644 index 0000000..3efb09f --- /dev/null +++ b/Web.config @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/homework/content.js b/homework/content.js index 42646c8..e6528ff 100644 --- a/homework/content.js +++ b/homework/content.js @@ -14,7 +14,7 @@ this._wrapper = document.querySelector('#note-content-wrapper'); }, resetWrapper() { - _wrapper.innerHTML = ''; + this._wrapper.innerHTML = ''; }, drawNote(note) { var title = note.title; @@ -28,8 +28,8 @@ p.textContent = passage; buff.appendChild(p); }); - _wrapper.appendChild(h); - _wrapper.appendChild(buff); + this._wrapper.appendChild(h); + this._wrapper.appendChild(buff); } }; exports.TodoContentManager = TodoContentManager; diff --git a/homework/list.js b/homework/list.js index 5aa9da8..51ef01f 100644 --- a/homework/list.js +++ b/homework/list.js @@ -15,7 +15,7 @@ this.preloadFirstNote(); }.bind(this)); window.addEventListener('click', function (event) { - onNoteOpen(event); + this.onNoteOpen(event); }); this._wrapper = document.querySelector('#note-list-wrapper'); }, @@ -28,7 +28,7 @@ }; }, preloadFirstNote() { - if (_listNoteContent.length !== 0) { + if (this._listNoteContent.length !== 0) { var content = _listNoteContent[0]; window.dispatchEvent(new CustomEvent('note-open', { detail: content })); @@ -38,7 +38,7 @@ this._listNoteContent = list; }, drawList() { - var list = _listNoteContent; + var list = this._listNoteContent; var ul = document.createElement('ul'); ul.id = 'note-title-list'; var buff = document.createDocumentFragment(); @@ -52,7 +52,7 @@ buff.appendChild(li); }); ul.appendChild(buff); - _wrapper.appendChild(ul); + this._wrapper.appendChild(ul); }, fetchList(afterFetch) { var xhr = new XMLHttpRequest(); From f75814496d826b1bda0f03bbd6b6ecd2c58a7290 Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Fri, 23 Oct 2015 22:28:07 +0800 Subject: [PATCH 14/17] step1 ... --- homework/list.js | 4 ++-- website.publishproj | 48 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+), 2 deletions(-) create mode 100644 website.publishproj diff --git a/homework/list.js b/homework/list.js index 51ef01f..b8cebdc 100644 --- a/homework/list.js +++ b/homework/list.js @@ -16,7 +16,7 @@ }.bind(this)); window.addEventListener('click', function (event) { this.onNoteOpen(event); - }); + }.bind(this)); this._wrapper = document.querySelector('#note-list-wrapper'); }, onNoteOpen(event) { @@ -29,7 +29,7 @@ }, preloadFirstNote() { if (this._listNoteContent.length !== 0) { - var content = _listNoteContent[0]; + var content = this._listNoteContent[0]; window.dispatchEvent(new CustomEvent('note-open', { detail: content })); } diff --git a/website.publishproj b/website.publishproj new file mode 100644 index 0000000..88afb8a --- /dev/null +++ b/website.publishproj @@ -0,0 +1,48 @@ + + + + + + + Debug + AnyCPU + 10.0.30319 + 2.0 + {2947b597-6347-4e4d-8d6d-479147a4d3ff} + $(MSBuildThisFileDirectory) + /Lesson-03-JavaScriptBestPratice-HW + v4.0 + + + + + 10.0 + + 10.5 + $(VisualStudioVersion) + + $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(WebPublishTargetsVersion) + <_WebPublishTargetsPath Condition=" '$(_WebPublishTargetsPath)'=='' ">$(VSToolsPath) + 1.0.0.0 + 1.0.0.0 + + + + $(AssemblyFileVersion) + + + $(AssemblyVersion) + + + + \ No newline at end of file From c09f9568c71ade91bdbdb43b2cf6e955150e0cac Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Fri, 23 Oct 2015 22:31:47 +0800 Subject: [PATCH 15/17] step1 ... --- homework/list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/homework/list.js b/homework/list.js index b8cebdc..80258b9 100644 --- a/homework/list.js +++ b/homework/list.js @@ -3,7 +3,7 @@ (function (exports) { var TodoListManager = function () { // Local data storage; should sync up with the server. - this._listTodoItem = []; + this._listNoteContent = []; // Will be an element as the list wrapper. this._wrapper = null; }; From 549bbe289fd7b61a21992083388483a976ba874d Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Sat, 24 Oct 2015 19:57:10 +0800 Subject: [PATCH 16/17] step4 all4 --- homework/Web.config | 6 +++++ homework/content.js | 15 +++++++---- homework/index.html | 4 ++- homework/list.js | 55 +++++++++++++++++++++++--------------- homework/main.js | 1 + homework/test.js | 14 ++++++++++ homework/test/test-list.js | 3 ++- 7 files changed, 70 insertions(+), 28 deletions(-) create mode 100644 homework/Web.config create mode 100644 homework/test.js diff --git a/homework/Web.config b/homework/Web.config new file mode 100644 index 0000000..3efb09f --- /dev/null +++ b/homework/Web.config @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/homework/content.js b/homework/content.js index e6528ff..83bbbc2 100644 --- a/homework/content.js +++ b/homework/content.js @@ -6,13 +6,18 @@ } TodoContentManager.prototype = { start() { - window.addEventListener('note-open', function (event) { - var note = event.detail; - this.resetWrapper(); - this.drawNote(note); - }); + window.addEventListener('note-open', this); this._wrapper = document.querySelector('#note-content-wrapper'); }, + handleEvent(event) { + switch (event.type) { + case 'note-open': + var note = event.detail; + this.resetWrapper(); + this.drawNote(note); + break; + } + }, resetWrapper() { this._wrapper.innerHTML = ''; }, diff --git a/homework/index.html b/homework/index.html index b4e3863..89ae2d3 100644 --- a/homework/index.html +++ b/homework/index.html @@ -6,11 +6,13 @@ +

Homework - Note List

-
+
+
diff --git a/homework/list.js b/homework/list.js index 80258b9..3dbdce4 100644 --- a/homework/list.js +++ b/homework/list.js @@ -9,24 +9,29 @@ }; TodoListManager.prototype = { start() { - this.fetchList(function (data) { + this._wrapper = document.querySelector('#note-list-wrapper'); + this.fetchList().then((function (data) { this.updateList(data); this.drawList(); this.preloadFirstNote(); - }.bind(this)); - window.addEventListener('click', function (event) { - this.onNoteOpen(event); - }.bind(this)); - this._wrapper = document.querySelector('#note-list-wrapper'); + }).bind(this)) + window.addEventListener('click', this); }, onNoteOpen(event) { if (event.target.classList.contains('note-title')) { var id = event.target.dataset.noteId; - var content = _listNoteContent[id]; + var content = this._listNoteContent[id]; window.dispatchEvent(new CustomEvent('note-open', { detail: content })); }; }, + handleEvent(event) { + switch (event.type) { + case 'click': + this.onNoteOpen(event); + break; + } + }, preloadFirstNote() { if (this._listNoteContent.length !== 0) { var content = this._listNoteContent[0]; @@ -54,21 +59,29 @@ ul.appendChild(buff); this._wrapper.appendChild(ul); }, - 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. + fetchList() { + return new Promise((function (yes, no) { + var xhr = new XMLHttpRequest(); + try { + xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true); + } catch (exception) { + console.log(exception); + xhr.open('GET', 'demo-list-notes.json', true); } - }; - xhr.send(); + 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. + yes(listData); + } else if (this.status !== 200) { + // Ignore error in this case. + no(); + } + }; + xhr.send(); + }).bind(this)); } }; exports.TodoListManager = TodoListManager; diff --git a/homework/main.js b/homework/main.js index 235ea29..3a7f2c0 100644 --- a/homework/main.js +++ b/homework/main.js @@ -4,6 +4,7 @@ document.addEventListener('DOMContentLoaded', function (event) { var todoListManager = new TodoListManager(); var todoContentManager = new TodoContentManager(); + var test = new Test(); todoListManager.start(); todoContentManager.start(); }); \ No newline at end of file diff --git a/homework/test.js b/homework/test.js new file mode 100644 index 0000000..28c1640 --- /dev/null +++ b/homework/test.js @@ -0,0 +1,14 @@ +'use strict'; +'use strict'; + +(function (exports) { + var Test = function () { + + }; + Test.prototype = { + test(a, b) { + return a + b; + } + }; + exports.Test = Test; +})(window); diff --git a/homework/test/test-list.js b/homework/test/test-list.js index 441fc45..77ce8c9 100644 --- a/homework/test/test-list.js +++ b/homework/test/test-list.js @@ -2,7 +2,8 @@ describe('Test > ', function() { beforeEach(function() { }); - it('will test some pure functions', function() { + it('will test some pure functions', function () { + assert.deepEqual(test.test(1,1), 2); // Write any pure function assertion here. }); }); From 0eefe7100e8558941f30c07faa837b30d31b3307 Mon Sep 17 00:00:00 2001 From: lihungte96 Date: Wed, 28 Oct 2015 21:09:40 +0800 Subject: [PATCH 17/17] complete tier 1 all 4 point --- homework/content.js | 32 ++++++++++++++++++++++++- homework/list.js | 58 +++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 87 insertions(+), 3 deletions(-) diff --git a/homework/content.js b/homework/content.js index 83bbbc2..c0794e2 100644 --- a/homework/content.js +++ b/homework/content.js @@ -1,14 +1,33 @@ 'use strict'; (function (exports) { + /** + * Declare wrapper. + * + * @constructor + * @this {TodoContentManager} + */ var TodoContentManager = function () { this._wrapper = null; } TodoContentManager.prototype = { + /** + * Initiate wrapper. + * Add a event listener to listen to note-open event + * + * @this {TodoContentManager} + */ start() { - window.addEventListener('note-open', this); this._wrapper = document.querySelector('#note-content-wrapper'); + window.addEventListener('note-open', this); }, + /** + * Handle event + * + * @param{object} event - custom event :'note-open' + * , fire when note is opened. + * @this{TodoContentManager} + */ handleEvent(event) { switch (event.type) { case 'note-open': @@ -18,9 +37,20 @@ break; } }, + /** + * Reset the wrapper. + * + * @this {TodoContentManager} + */ resetWrapper() { this._wrapper.innerHTML = ''; }, + /** + * Draw and add the note on wrapper. + * + * @param{object} note- note to be drawed + * @this{TodoContentManager} + */ drawNote(note) { var title = note.title; var h = document.createElement('h2'); diff --git a/homework/list.js b/homework/list.js index 3dbdce4..383826d 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,6 +1,13 @@ 'use strict'; (function (exports) { + /** + * Declare _listNoteContent. + * Declare wrapper. + * + * @constructor + * @this {TodoListManager} + */ var TodoListManager = function () { // Local data storage; should sync up with the server. this._listNoteContent = []; @@ -8,15 +15,30 @@ this._wrapper = null; }; TodoListManager.prototype = { + /** + * Initial wrapper + * Add a eventlistener to listen click event + * Call fetchList to fetech data, + * after fetch , draw the list + * + * @this {TodoListManager} + */ start() { this._wrapper = document.querySelector('#note-list-wrapper'); + window.addEventListener('click', this); this.fetchList().then((function (data) { this.updateList(data); this.drawList(); this.preloadFirstNote(); }).bind(this)) - window.addEventListener('click', this); }, + /** + * Dispatch a custom event when mouse click at the note-title. + * Also determine the content to be showed. + * + * @param {Object} event- mouse click event. + * @this {TodoListManager} + */ onNoteOpen(event) { if (event.target.classList.contains('note-title')) { var id = event.target.dataset.noteId; @@ -25,6 +47,13 @@ { detail: content })); }; }, + /** + * Handle click event. + * If users click on note-title, call onNoteOpen to handle. + * + * @param {Object} event - mouse click event + * @this {TodoListManager} + */ handleEvent(event) { switch (event.type) { case 'click': @@ -32,6 +61,11 @@ break; } }, + /** + * Show the Note for start stage. + * + * @this {TodoListManager} + */ preloadFirstNote() { if (this._listNoteContent.length !== 0) { var content = this._listNoteContent[0]; @@ -39,9 +73,20 @@ { detail: content })); } }, + /** + * Update List. + * + * @param {array} - list to be updated to _listNoteContent + * @this {TodoListManager} + */ updateList(list) { this._listNoteContent = list; }, + /** + * Draw the list. + * + * @this {TodoListManager} + */ drawList() { var list = this._listNoteContent; var ul = document.createElement('ul'); @@ -59,6 +104,16 @@ ul.appendChild(buff); this._wrapper.appendChild(ul); }, + /** + * Try fetch Data(note-list) from .json,where is localhost. + * If there is any problem fetch the file direct from same http server as .html file + * (Because I got some problem to get the file from my system) + * If success,then continue the following flow + * Else it will reject + * + * @return {Promise} + * @this {TodoListManager} + */ fetchList() { return new Promise((function (yes, no) { var xhr = new XMLHttpRequest(); @@ -77,7 +132,6 @@ yes(listData); } else if (this.status !== 200) { // Ignore error in this case. - no(); } }; xhr.send();