From 99e3f8967b7e0cd121f8316c653a0250c3327c5c Mon Sep 17 00:00:00 2001 From: Anchorboy Date: Fri, 16 Oct 2015 14:49:54 +0800 Subject: [PATCH 1/7] test --- a.txt | 1 + 1 file changed, 1 insertion(+) create mode 100644 a.txt diff --git a/a.txt b/a.txt new file mode 100644 index 0000000..d00491f --- /dev/null +++ b/a.txt @@ -0,0 +1 @@ +1 From 67eea329353b1bb78c60a405a97c22b8929d4a1f Mon Sep 17 00:00:00 2001 From: Anchorboy Date: Fri, 16 Oct 2015 14:51:16 +0800 Subject: [PATCH 2/7] test done --- a.txt | 1 - 1 file changed, 1 deletion(-) delete mode 100644 a.txt diff --git a/a.txt b/a.txt deleted file mode 100644 index d00491f..0000000 --- a/a.txt +++ /dev/null @@ -1 +0,0 @@ -1 From 2efc14989acba18de06da286f01ce082ca0b9953 Mon Sep 17 00:00:00 2001 From: Anchorboy Date: Wed, 28 Oct 2015 19:27:55 +0800 Subject: [PATCH 3/7] Deal with object properties w/ constructor & prototype --- homework/content.js | 63 ++++++++++--------- homework/list.js | 143 +++++++++++++++++++++++--------------------- 2 files changed, 111 insertions(+), 95 deletions(-) diff --git a/homework/content.js b/homework/content.js index 710be28..68a6ebc 100644 --- a/homework/content.js +++ b/homework/content.js @@ -1,37 +1,44 @@ '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); - }); + var ContentManager = function () { + var _wrapper = document.querySelector('#note-content-wrapper'); } + + ContentManager.prototype = { - function resetWrapper() { - _wrapper.innerHTML = ''; - } + start() { + window.addEventListener('note-open', function(event) { + var note = event.detail; + resetWrapper(); + drawNote(note); + }); + }, + + 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); + 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(); }); - _wrapper.appendChild(h); - _wrapper.appendChild(buff); - } - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); -})(); + } +})(window); \ No newline at end of file diff --git a/homework/list.js b/homework/list.js index 21eddbc..06f080c 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,79 +1,88 @@ '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); - }); + + var ListManager = function() { + var _listNoteContent = []; + var _wrapper = document.querySelector('#note-list-wrapper'); } + + ListManager.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 })); - }; - } + start() { + console.log("start"); + fetchList(function(data) { + console.log("updateList"); + updateList(data); + console.log("drawList"); + drawList(); + console.log("preloadFirstNote"); + preloadFirstNote(); + }); + window.addEventListener('click', function(event) { + onNoteOpen(event); + }); + }, - function preloadFirstNote() { - if (_listNoteContent.length !== 0) { - var content = _listNoteContent[0]; - window.dispatchEvent(new CustomEvent('note-open', - { detail: content })); - } - } + 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 updateList(list) { - _listNoteContent = list; - } + preloadFirstNote() { + if (_listNoteContent.length !== 0) { + var content = _listNoteContent[0]; + window.dispatchEvent(new CustomEvent('note-open', + { detail: content })); + } + }, - 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); - } + 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); + }, - 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. + 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(); - } + xhr.send(); + } - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); + document.addEventListener('DOMContentLoaded', function(event) { + start(); + }); + } -})(); +})(window); \ No newline at end of file From cf478147967024c5d388cafd41a155dbe5430ef7 Mon Sep 17 00:00:00 2001 From: Anchorboy Date: Fri, 30 Oct 2015 11:51:19 +0800 Subject: [PATCH 4/7] Modify constructor and prototype & set bind --- homework/content.js | 36 +++++++++++++------------- homework/index.html | 1 + homework/list.js | 63 +++++++++++++++++++++++---------------------- 3 files changed, 51 insertions(+), 49 deletions(-) diff --git a/homework/content.js b/homework/content.js index 68a6ebc..b0ae524 100644 --- a/homework/content.js +++ b/homework/content.js @@ -1,23 +1,26 @@ 'use strict'; -(function() { +var ContentManager =(function() { - var ContentManager = function () { - var _wrapper = document.querySelector('#note-content-wrapper'); - } + // constructor + var self = function () { + this._wrapper = null; + }; - ContentManager.prototype = { + // prototype + self.prototype = { start() { - window.addEventListener('note-open', function(event) { + this._wrapper = document.querySelector('#note-content-wrapper'); + window.addEventListener('note-open', (function(event) { var note = event.detail; - resetWrapper(); - drawNote(note); - }); + this.resetWrapper(); + this.drawNote(note); + }).bind(this)); }, resetWrapper() { - _wrapper.innerHTML = ''; + this._wrapper.innerHTML = ''; }, drawNote(note) { @@ -32,13 +35,10 @@ p.textContent = passage; buff.appendChild(p); }); - _wrapper.appendChild(h); - _wrapper.appendChild(buff); - }, - - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); + this._wrapper.appendChild(h); + this._wrapper.appendChild(buff); + } - } + }; + return self; })(window); \ No newline at end of file diff --git a/homework/index.html b/homework/index.html index e387963..8f89b6f 100644 --- a/homework/index.html +++ b/homework/index.html @@ -5,6 +5,7 @@ Homework - Note List + diff --git a/homework/list.js b/homework/list.js index 06f080c..8565aed 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,52 +1,55 @@ 'use strict'; -(function() { +var ListManager = (function() { - var ListManager = function() { - var _listNoteContent = []; - var _wrapper = document.querySelector('#note-list-wrapper'); - } - - ListManager.prototype = { + // constructor + var self = function() { + this._listNoteContent = []; + this._wrapper = null; + }; + + // prototype + self.prototype = { start() { - console.log("start"); - fetchList(function(data) { - console.log("updateList"); - updateList(data); - console.log("drawList"); - drawList(); - console.log("preloadFirstNote"); - preloadFirstNote(); - }); - window.addEventListener('click', function(event) { - onNoteOpen(event); - }); + + this._wrapper = document.querySelector('#note-list-wrapper'); + this.fetchList(this.handler.bind(this)); + + window.addEventListener('click', (function(event) { + this.onNoteOpen(event); + }).bind(this)); + }, + + handler(data){ + this.updateList(data); + this.drawList(); + this.preloadFirstNote(); }, 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 })); } }, preloadFirstNote() { - if (_listNoteContent.length !== 0) { - var content = _listNoteContent[0]; + if (this._listNoteContent.length !== 0) { + var content = this._listNoteContent[0]; window.dispatchEvent(new CustomEvent('note-open', { detail: content })); } }, updateList(list) { - _listNoteContent = list; + 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(); @@ -60,14 +63,14 @@ buff.appendChild(li); }); ul.appendChild(buff); - _wrapper.appendChild(ul); + 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) { + xhr.onreadystatechange = (function(e) { // Watch out: we have a mysterious unknown 'this'. if (this.readyState === 4 && this.status === 200) { var listData = this.response; @@ -76,13 +79,11 @@ } else if (this.status !== 200 ){ // Ignore error in this case. } - } + }).bind(xhr); xhr.send(); } - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); - } + }; + return self ; })(window); \ No newline at end of file From 197337e7a57270c05e39db13bb100486cc081bcb Mon Sep 17 00:00:00 2001 From: Anchorboy Date: Fri, 30 Oct 2015 11:51:54 +0800 Subject: [PATCH 5/7] add Main manager --- homework/main-manager.js | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 homework/main-manager.js diff --git a/homework/main-manager.js b/homework/main-manager.js new file mode 100644 index 0000000..bad250b --- /dev/null +++ b/homework/main-manager.js @@ -0,0 +1,8 @@ +'use strict'; + +document.addEventListener('DOMContentLoaded', function(event) { + var contentManager = new ContentManager(); + var listManager = new ListManager(); + contentManager.start(); + listManager.start(); +}); \ No newline at end of file From 82daf8e3c1e2cce569c6108bbcfd6719be659e11 Mon Sep 17 00:00:00 2001 From: Anchorboy Date: Fri, 30 Oct 2015 12:34:04 +0800 Subject: [PATCH 6/7] Deal asynchronous flows with Promise --- homework/list.js | 37 +++++++++++++++++++++---------------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/homework/list.js b/homework/list.js index 8565aed..952c58e 100644 --- a/homework/list.js +++ b/homework/list.js @@ -14,7 +14,8 @@ var ListManager = (function() { start() { this._wrapper = document.querySelector('#note-list-wrapper'); - this.fetchList(this.handler.bind(this)); + this.fetchList() + .then(this.handler.bind(this)); window.addEventListener('click', (function(event) { this.onNoteOpen(event); @@ -67,22 +68,26 @@ var ListManager = (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. - } - }).bind(xhr); - xhr.send(); + return new Promise(function(resolve, reject) { + var xhr = new XMLHttpRequest(); + var url = 'http://127.0.0.1:8000/demo-list-notes.json'; + xhr.open('GET', url, true); + xhr.responseType = 'json'; + xhr.onreadystatechange = ((function(e) { + // Watch out: we have a mysterious unknown 'this'. + // here "this" is a xmlhttprequest = xhr -> so bind xhr + if (this.readyState === 4 && this.status === 200) { + var listData = this.response; + // The flow ends here. + resolve(listData); + } else if (this.status !== 200 ){ + // Ignore error in this case. + reject("Error"); + } + }).bind(xhr)); + xhr.send(); + }); } - }; return self ; From 7fa547342d28e2b0511b252dd3584217965a6622 Mon Sep 17 00:00:00 2001 From: Anchorboy Date: Fri, 30 Oct 2015 13:30:53 +0800 Subject: [PATCH 7/7] add test case for a pure function --- homework/list.js | 6 ++++++ homework/test/test-list.js | 10 ++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/homework/list.js b/homework/list.js index 952c58e..b97845a 100644 --- a/homework/list.js +++ b/homework/list.js @@ -87,6 +87,12 @@ var ListManager = (function() { }).bind(xhr)); xhr.send(); }); + }, + + // test function here + // test num1 add num2 + testFunction(num1, num2) { + return num1 + num2; } }; return self ; diff --git a/homework/test/test-list.js b/homework/test/test-list.js index 441fc45..f193488 100644 --- a/homework/test/test-list.js +++ b/homework/test/test-list.js @@ -1,8 +1,14 @@ -describe('Test > ', function() { +describe('Test ListManager ', function() { + var listManager; beforeEach(function() { + listManager = new ListManager() }); - it('will test some pure functions', function() { + it('will test add function', function() { // Write any pure function assertion here. + var num1 = 2; + var num2 = 10; + var sum = listManager.testFunction(num1, num2); + assert.equal(sum, 12, "Equal to 12"); }); });