From a8200018202b703a2ebd00cafe02e9f6bbe726fe Mon Sep 17 00:00:00 2001 From: Davisanity Date: Fri, 23 Oct 2015 16:48:09 +0800 Subject: [PATCH 1/6] Update content.js change a anonymous function --- homework/content.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/homework/content.js b/homework/content.js index 710be28..e8b2fea 100644 --- a/homework/content.js +++ b/homework/content.js @@ -1,8 +1,10 @@ 'use strict'; -(function() { - var _wrapper = document.querySelector('#note-content-wrapper'); - +(function(exports) { //exports是自己命名的 其實就是window + var ListContentManager = function(){ + this._wrapper = null + }); + function start() { window.addEventListener('note-open', function(event) { var note = event.detail; @@ -31,7 +33,5 @@ _wrapper.appendChild(buff); } - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); -})(); + exports.ListContentManager = ListContentManager; +})(window);//這裡的window就是exports要引入的東西 From 08d925684c1a1ca73f1372b517f8c24f5504aed8 Mon Sep 17 00:00:00 2001 From: Davisanity Date: Thu, 29 Oct 2015 02:29:25 +0800 Subject: [PATCH 2/6] Create main.js --- homework/main.js | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 homework/main.js diff --git a/homework/main.js b/homework/main.js new file mode 100644 index 0000000..0879967 --- /dev/null +++ b/homework/main.js @@ -0,0 +1,8 @@ +'use strict'; +// Kick off +document.addEventListener('DOMContentLoaded', function(event) { + var listNoteManager = new ListNoteManager(); + var listNoteContentManager = new ListNoteContentManager(); + listNoteContentManager.start(); + listNoteManager.start(); +}); From 280bdbf283ea1992d1083f4be568fe39cafc367a Mon Sep 17 00:00:00 2001 From: Davisanity Date: Thu, 29 Oct 2015 17:21:13 +0800 Subject: [PATCH 3/6] Complete update content.js --- homework/content.js | 52 +++++++++++++++++++++++---------------------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/homework/content.js b/homework/content.js index e8b2fea..183e5d5 100644 --- a/homework/content.js +++ b/homework/content.js @@ -5,33 +5,35 @@ this._wrapper = null }); - function start() { - window.addEventListener('note-open', function(event) { - var note = event.detail; - resetWrapper(); - drawNote(note); - }); - } + ListNoteContentManager.prototype = { + start() { + this._wrapper = document.querySelector('#note-content-wrapper'); + window.addEventListener('note-open', (function(event) { + var note = event.detail; + this.resetWrapper(); + this.drawNote(note); + }).bind(this)); + }, - function resetWrapper() { - _wrapper.innerHTML = ''; - } + resetWrapper() { + this._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); - } + 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); + } exports.ListContentManager = ListContentManager; })(window);//這裡的window就是exports要引入的東西 From 604e53c72eee2df26f9e210d957edaba4377ac78 Mon Sep 17 00:00:00 2001 From: Davisanity Date: Thu, 29 Oct 2015 17:23:28 +0800 Subject: [PATCH 4/6] Update index.html --- homework/index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/homework/index.html b/homework/index.html index e387963..c0f3954 100644 --- a/homework/index.html +++ b/homework/index.html @@ -3,8 +3,9 @@ Homework - Note List - - + + + From aecd639f3692c47265da73eaaf019fdfeb7cf830 Mon Sep 17 00:00:00 2001 From: Davisanity Date: Thu, 29 Oct 2015 17:32:43 +0800 Subject: [PATCH 5/6] Update list.js --- homework/list.js | 144 +++++++++++++++++++++++++---------------------- 1 file changed, 76 insertions(+), 68 deletions(-) diff --git a/homework/list.js b/homework/list.js index 21eddbc..6a37a0b 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,79 +1,87 @@ 'use strict'; -(function() { +(function(exports) { + var ListNoteManager = function() { + var _listNoteContent = []; + var _wrapper = null; + }; - var _listNoteContent = []; - var _wrapper = document.querySelector('#note-list-wrapper'); + ListNoteManager.prototype = { + start() { + 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)); + }, - function start() { - fetchList(function(data) { - updateList(data); - drawList(); - preloadFirstNote(); - }); - window.addEventListener('click', function(event) { - onNoteOpen(event); - }); - } + 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 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 preloadFirstNote() { - if (_listNoteContent.length !== 0) { - var content = _listNoteContent[0]; - window.dispatchEvent(new CustomEvent('note-open', - { detail: content })); - } - } + preloadFirstNote() { + if (this._listNoteContent.length !== 0) { + var content = this._listNoteContent[0]; + window.dispatchEvent(new CustomEvent('note-open', { + detail: content + })); + } + }, - function updateList(list) { - _listNoteContent = list; - } + updateList(list) { + this._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(); - } + drawList() { + var list = this._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); + this._wrapper.appendChild(ul); + }, - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); + fetchList() { + return new Promise((function(resolve, reject) { + var xhr = new XMLHttpRequest(); + xhr.open('GET', '/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) { + // Ignore error in this case. + reject('FETCHING FAILED:' + this.status + ' ' + this.readyState); + } + }.bind(xhr); + xhr.send(); + })); + } + }; -})(); + exports.ListNoteManager = ListNoteManager; + })(window); From 909482f17ed1ce4242317d2c22ae82bbd9da7722 Mon Sep 17 00:00:00 2001 From: Davisanity Date: Thu, 29 Oct 2015 17:33:37 +0800 Subject: [PATCH 6/6] Update test-list.js --- homework/test/test-list.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/homework/test/test-list.js b/homework/test/test-list.js index 441fc45..81287ec 100644 --- a/homework/test/test-list.js +++ b/homework/test/test-list.js @@ -1,8 +1,13 @@ -describe('Test > ', function() { - beforeEach(function() { - }); - - it('will test some pure functions', function() { - // Write any pure function assertion here. - }); +describe('Test ListNoteContentManager', function() { + var subject; + beforeEach(function() { + subject = new ListNoteContentManager(); + }); +it('Test resetWrapper function', function() { + // Write any pure function assertion here. + subject._wrapper = document.createElement('div'); + subject._wrapper.innerHTML = 'Test'; + subject.resetWrapper(); + assert.equal(subject._wrapper.innerHTML, '', "Reset Failed!"); + }); });