From ff2925fc1d4c889f8c081cf74db95f3f6195d98f Mon Sep 17 00:00:00 2001 From: Peter Date: Thu, 22 Oct 2015 16:30:14 +0800 Subject: [PATCH 1/8] Bind this in Event handlers --- homework/content.js | 16 ++++++++-------- homework/list.js | 16 ++++++++-------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/homework/content.js b/homework/content.js index 710be28..5eb0af8 100644 --- a/homework/content.js +++ b/homework/content.js @@ -4,11 +4,11 @@ var _wrapper = document.querySelector('#note-content-wrapper'); function start() { - window.addEventListener('note-open', function(event) { - var note = event.detail; - resetWrapper(); - drawNote(note); - }); + window.addEventListener('note-open', (function(event) { + var note = event.detail; + resetWrapper(); + drawNote(note); + }).bind(this)); } function resetWrapper() { @@ -31,7 +31,7 @@ _wrapper.appendChild(buff); } - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); + document.addEventListener('DOMContentLoaded', (function(event) { + start(); + }).bind(this)); })(); diff --git a/homework/list.js b/homework/list.js index 21eddbc..024cf33 100644 --- a/homework/list.js +++ b/homework/list.js @@ -6,14 +6,14 @@ var _wrapper = document.querySelector('#note-list-wrapper'); function start() { - fetchList(function(data) { + fetchList((function(data) { updateList(data); drawList(); preloadFirstNote(); - }); - window.addEventListener('click', function(event) { + }).bind(this)); + window.addEventListener('click', (function(event) { onNoteOpen(event); - }); + }).bind(this)); } function onNoteOpen(event) { @@ -59,7 +59,7 @@ 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; @@ -68,12 +68,12 @@ } else if (this.status !== 200 ){ // Ignore error in this case. } - }; + }).bind(this); xhr.send(); } - document.addEventListener('DOMContentLoaded', function(event) { + document.addEventListener('DOMContentLoaded', (function(event) { start(); - }); + }).bind(this)); })(); From f153f5532e4f59664c3e5f8531d4670833f252fb Mon Sep 17 00:00:00 2001 From: Peter Date: Thu, 22 Oct 2015 16:37:43 +0800 Subject: [PATCH 2/8] Deal with object properties constructor & prototype --- homework/content.js | 40 ++++++++++++++------------ homework/index.html | 1 + homework/list.js | 70 +++++++++++++++++++++++---------------------- homework/main.js | 8 ++++++ 4 files changed, 67 insertions(+), 52 deletions(-) create mode 100644 homework/main.js diff --git a/homework/content.js b/homework/content.js index 5eb0af8..a70ed8c 100644 --- a/homework/content.js +++ b/homework/content.js @@ -1,21 +1,26 @@ 'use strict'; -(function() { +(function(exports) { var _wrapper = document.querySelector('#note-content-wrapper'); - function start() { - window.addEventListener('note-open', (function(event) { - var note = event.detail; - resetWrapper(); - drawNote(note); - }).bind(this)); + var ContentManager = function() { + this._wrapper = document.querySelector('#note-content-wrapper'); } - function resetWrapper() { - _wrapper.innerHTML = ''; - } + ContentManager.prototype = { + start() { + window.addEventListener('note-open', (function(event) { + var note = event.detail; + this.resetWrapper(); + this.drawNote(note); + }).bind(this)); + }, + + resetWrapper() { + this._wrapper.innerHTML = ''; + }, - function drawNote(note) { + drawNote(note) { var title = note.title; var h = document.createElement('h2'); h.textContent = title; @@ -27,11 +32,10 @@ p.textContent = passage; buff.appendChild(p); }); - _wrapper.appendChild(h); - _wrapper.appendChild(buff); - } + this._wrapper.appendChild(h); + this._wrapper.appendChild(buff); + }; + + exports.ContentManger = ContentManger; + })(window); - document.addEventListener('DOMContentLoaded', (function(event) { - start(); - }).bind(this)); -})(); diff --git a/homework/index.html b/homework/index.html index e387963..975d252 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 024cf33..b53b99f 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,44 +1,36 @@ 'use strict'; -(function() { +(function(exports) { +var ListManager = function() { var _listNoteContent = []; var _wrapper = document.querySelector('#note-list-wrapper'); +}; - function start() { - fetchList((function(data) { - updateList(data); - drawList(); - preloadFirstNote(); - }).bind(this)); - window.addEventListener('click', (function(event) { - onNoteOpen(event); - }).bind(this)); - } - - function onNoteOpen(event) { +ListManager.prototype = { + 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 })); }; - } - - function preloadFirstNote() { - if (_listNoteContent.length !== 0) { - var content = _listNoteContent[0]; + }, + + preloadFirstNote() { + if (this_listNoteContent.length !== 0) { + var content = this_listNoteContent[0]; window.dispatchEvent(new CustomEvent('note-open', { detail: content })); } + }, + + updateList(list) { + this._listNoteContent = list; } - - function updateList(list) { - _listNoteContent = list; - } - - function drawList() { - var list = _listNoteContent; + + drawList() { + var list = this._listNoteContent; var ul = document.createElement('ul'); ul.id = 'note-title-list'; var buff = document.createDocumentFragment(); @@ -52,10 +44,10 @@ buff.appendChild(li); }); ul.appendChild(buff); - _wrapper.appendChild(ul); - } + this._wrapper.appendChild(ul); + }, - function fetchList(afterFetch) { + fetchList(afterFetch) { var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true); xhr.responseType = 'json'; @@ -70,10 +62,20 @@ } }).bind(this); xhr.send(); + }, + + start() { + fetchList((function(data) { + updateList(data); + drawList(); + preloadFirstNote(); + }).bind(this)); + window.addEventListener('click', (function(event) { + onNoteOpen(event); + }).bind(this)); + window.addEventListener('click', this); } +}; - document.addEventListener('DOMContentLoaded', (function(event) { - start(); - }).bind(this)); - -})(); + exports.ListManager = ListManager; +})(window); diff --git a/homework/main.js b/homework/main.js new file mode 100644 index 0000000..3b317d8 --- /dev/null +++ b/homework/main.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 d7a6eec9284f88555ecf1a1dc6b8d0f5cc2c73cb Mon Sep 17 00:00:00 2001 From: Peter Date: Thu, 22 Oct 2015 16:48:51 +0800 Subject: [PATCH 3/8] Deal with asynchronous flows with Promise --- homework/list.js | 51 +++++++++++++++++++++++++----------------------- 1 file changed, 27 insertions(+), 24 deletions(-) diff --git a/homework/list.js b/homework/list.js index b53b99f..bcf7a7e 100644 --- a/homework/list.js +++ b/homework/list.js @@ -47,34 +47,37 @@ ListManager.prototype = { 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. - } - }).bind(this); + 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. + afterFetch(listData); + } else if (this.status !== 200 ){ + // Ignore error in this case. + } + }; xhr.send(); + }); }, start() { - fetchList((function(data) { - updateList(data); - drawList(); - preloadFirstNote(); - }).bind(this)); - window.addEventListener('click', (function(event) { - onNoteOpen(event); - }).bind(this)); - window.addEventListener('click', this); - } + this.fetchList().then((function(data){ + this.updateList(data); + this.drawList(); + this.preloadFirstNote(); + }).bind(this)).catch((function() { + + }).bind(this)); + window.addEventListener('click', (function(event) { + this.onNoteOpen(event); + }).bind(this)); + } }; exports.ListManager = ListManager; From d428a7c5358b9bfc24d25cbc8393c197d2048541 Mon Sep 17 00:00:00 2001 From: Peter Date: Thu, 22 Oct 2015 16:49:38 +0800 Subject: [PATCH 4/8] first test case for a pure function --- homework/test/test-list.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/homework/test/test-list.js b/homework/test/test-list.js index 441fc45..5b39273 100644 --- a/homework/test/test-list.js +++ b/homework/test/test-list.js @@ -1,8 +1,14 @@ -describe('Test > ', function() { +describe('Test_sin > ', function() { + var subject; + beforeEach(function() { + subject = new TestManager; }); - it('will test some pure functions', function() { + it('will test the sin function', function(done) { // Write any pure function assertion here. + subject.set(0); + assert.Equal(subject.sin(), 0); + done(); }); -}); +}); \ No newline at end of file From f22bdca7ea367f2b564e3a320d30286d0f22a556 Mon Sep 17 00:00:00 2001 From: Peter Date: Thu, 12 Nov 2015 16:32:25 +0800 Subject: [PATCH 5/8] redo test --- homework/test/add.js | 3 +++ homework/test/test-list.js | 17 +++++++---------- 2 files changed, 10 insertions(+), 10 deletions(-) create mode 100644 homework/test/add.js diff --git a/homework/test/add.js b/homework/test/add.js new file mode 100644 index 0000000..6c6220f --- /dev/null +++ b/homework/test/add.js @@ -0,0 +1,3 @@ +function add(num1, num2){ + return num1 + num2; +} \ No newline at end of file diff --git a/homework/test/test-list.js b/homework/test/test-list.js index 5b39273..6a1d5c3 100644 --- a/homework/test/test-list.js +++ b/homework/test/test-list.js @@ -1,14 +1,11 @@ -describe('Test_sin > ', function() { - var subject; +var assert = require('assert'); +var add = require('add.js') - beforeEach(function() { - subject = new TestManager; - }); - - it('will test the sin function', function(done) { +describe('Test_add', function() { + it('will test add function', function(done) { // Write any pure function assertion here. - subject.set(0); - assert.Equal(subject.sin(), 0); - done(); + it('add', function(){ + assert.equal('2', add.add(1, 1)); + }) }); }); \ No newline at end of file From 56e57c05c0430be339ac0b5ede16b92ac12ea01c Mon Sep 17 00:00:00 2001 From: Peter Date: Thu, 12 Nov 2015 18:55:59 +0800 Subject: [PATCH 6/8] Correct the mistake --- homework/content.js | 29 ++++++++++++++++++----------- homework/list.js | 13 ++++++------- 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/homework/content.js b/homework/content.js index a70ed8c..aa1330a 100644 --- a/homework/content.js +++ b/homework/content.js @@ -8,13 +8,6 @@ } ContentManager.prototype = { - start() { - window.addEventListener('note-open', (function(event) { - var note = event.detail; - this.resetWrapper(); - this.drawNote(note); - }).bind(this)); - }, resetWrapper() { this._wrapper.innerHTML = ''; @@ -34,8 +27,22 @@ }); this._wrapper.appendChild(h); this._wrapper.appendChild(buff); - }; + }, - exports.ContentManger = ContentManger; - })(window); - + handleEvent(event) { + switch(event.type) { + case 'note-open': + var note = event.detail; + this.resetWrapper(); + this.drawNote(note); + break; + } + }, + + start() { + window.addEventListener('note-open', this); + } +}; + + exports.ContentManager = ContentManager; + })(window); \ No newline at end of file diff --git a/homework/list.js b/homework/list.js index bcf7a7e..04bf44e 100644 --- a/homework/list.js +++ b/homework/list.js @@ -27,7 +27,7 @@ ListManager.prototype = { updateList(list) { this._listNoteContent = list; - } + }, drawList() { var list = this._listNoteContent; @@ -57,22 +57,21 @@ ListManager.prototype = { if (this.readyState === 4 && this.status === 200) { var listData = this.response; // The flow ends here. - afterFetch(listData); + resolve(listData); } else if (this.status !== 200 ){ // Ignore error in this case. } - }; + }); xhr.send(); }); }, start() { - this.fetchList().then((function(data){ - this.updateList(data); + this.fetchList().then((function(response){ + this.updateList(response); this.drawList(); this.preloadFirstNote(); - }).bind(this)).catch((function() { - + }).bind(this)).catch((function(error) { }).bind(this)); window.addEventListener('click', (function(event) { this.onNoteOpen(event); From a9e992fa2d7d6951c7842f85857ab7bb91ea74d3 Mon Sep 17 00:00:00 2001 From: Peter Date: Thu, 12 Nov 2015 19:23:42 +0800 Subject: [PATCH 7/8] fix --- homework/list.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/homework/list.js b/homework/list.js index 04bf44e..ad35f6b 100644 --- a/homework/list.js +++ b/homework/list.js @@ -8,7 +8,7 @@ var ListManager = function() { }; ListManager.prototype = { - onNoteOpen(event) { + onClick(event) { if (event.target.classList.contains('note-title')) { var id = event.target.dataset.noteId; var content = this._listNoteContent[id]; @@ -18,11 +18,9 @@ ListManager.prototype = { }, preloadFirstNote() { - if (this_listNoteContent.length !== 0) { var content = this_listNoteContent[0]; window.dispatchEvent(new CustomEvent('note-open', { detail: content })); - } }, updateList(list) { @@ -68,13 +66,15 @@ ListManager.prototype = { start() { this.fetchList().then((function(response){ - this.updateList(response); - this.drawList(); + this.updateList(response); + this.drawList(); + if (this_listNoteContent.length !== 0){ this.preloadFirstNote(); + } }).bind(this)).catch((function(error) { }).bind(this)); window.addEventListener('click', (function(event) { - this.onNoteOpen(event); + this.onClick(event); }).bind(this)); } }; From 4b56fdedf17f9cf388493eed246d08bfee4fb8e8 Mon Sep 17 00:00:00 2001 From: Peter654q Date: Sun, 22 Nov 2015 21:55:58 +0800 Subject: [PATCH 8/8] update test --- .DS_Store | Bin 0 -> 6148 bytes homework/test/test-list.js | 3 ++- the-badass-todo-list-part-1/.DS_Store | Bin 0 -> 6148 bytes 3 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 .DS_Store create mode 100644 the-badass-todo-list-part-1/.DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a32e5e09180f745516d86d45dcd0196b2c61e305 GIT binary patch literal 6148 zcmeHK&5qMB5FU5Sk}d~|1kxfdxxt|;^@mb%A}R|K;!>$-_W-CQG@=n9u99>kR8`75 z@c$n07CZn?z-uhu*k0(;<2M;8VeaR%tna6fRV^Bafw2dEJ~^=; zNg4mN{oo)9i&6dZU76&5l!WP0>XXAL8Ox$CXURAl)vpZF@CeZZKM4<_EDEAH%3nJ* zen$1(`MiC*+i=^R_M+j=d%b4Ez1g|7SUAqr>zz9f50m+ux9{G6`1t9w8Yc?;6fQa zgQZ5bb)ZmJ0ALkvC9wIIfpc7gp21QhS|CEF0(Gh|R}7)k;df1(XRy?$(@B`ihcIsz z=7u8F+tI(P!bx}>44h_QOIPcB{@?ra{r_~5tyu;v0~^JFsO}H<`xufrTUQ3h vXRQl;24&&6Qlm;iVUA;E@KL-ARf0B`4WMVR)Cdp6{s<@-?kO(I0uWDimBI3MT-_%~YJJxX?6Jc>v+ z%v8@z^~`p`&I5o0=mCe!cVqD{%z4Gk*Jye%uf3RxoI8t~V8K3777By{p+G1Q3jCk|&uq2o$T8|rAQT7%z7){?A+add1+$}V z9jxpLK-6or8GXGbYfLIw7tD?vp^1kQJygmQLp+@QsqpH8+0nxxQf$Y^#mn=+|#wth=b&)URt%c7>d ptPYKS=Mun%?jt8Q=;KL!^6G-wQD@P93n#`!zyygZ6!--NJ^(ZpLva8A literal 0 HcmV?d00001