From c5be47f6e7e0bdd449ae568222015a011bf13966 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=B5=E5=8B=9D=E9=9F=8B?= Date: Fri, 30 Oct 2015 19:58:35 +0800 Subject: [PATCH] tier1 complete --- homework/content.js | 66 +++++++++-------- homework/list.js | 145 ++++++++++++++++++------------------- homework/test/test-list.js | 2 +- 3 files changed, 106 insertions(+), 107 deletions(-) diff --git a/homework/content.js b/homework/content.js index 710be28..683357e 100644 --- a/homework/content.js +++ b/homework/content.js @@ -1,37 +1,39 @@ 'use strict'; -(function() { - var _wrapper = document.querySelector('#note-content-wrapper'); +function ContentManager() { + this._wrapper = document.querySelector('#note-content-wrapper'); +} - function start() { - window.addEventListener('note-open', function(event) { - var note = event.detail; - resetWrapper(); - drawNote(note); - }); - } +ContentManager.prototype = { + start: function () { + window.addEventListener('note-open', (function (event) { + var note = event.detail; + this.resetWrapper(); + this.drawNote(note); + }).bind(this)); + }, + resetWrapper: function () { + this._wrapper.innerHTML = ''; + }, + drawNote: function (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); + } +}; - function resetWrapper() { - _wrapper.innerHTML = ''; - } +var contentManager = new ContentManager(); - 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(); - }); -})(); +document.addEventListener('DOMContentLoaded', function (event) { + contentManager.start(); +}); diff --git a/homework/list.js b/homework/list.js index 21eddbc..91e1ff2 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,79 +1,76 @@ 'use strict'; -(function() { +function ListManager() { + this._listNoteContent = []; + this._wrapper = document.querySelector('#note-list-wrapper'); +} - 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 preloadFirstNote() { - if (_listNoteContent.length !== 0) { - var content = _listNoteContent[0]; - window.dispatchEvent(new CustomEvent('note-open', - { detail: content })); +ListManager.prototype = { + start: function () { + this.fetchList().then(function (data) { + this.updateList(data); + }.bind(this)).then(this.drawList.bind(this)).then(this.preloadFirstNote.bind(this)); + window.addEventListener('click', function (event) { + this.onNoteOpen(event); + }.bind(this)); + }, + onNoteOpen: function (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})); + } + }, + preloadFirstNote: function () { + if (this._listNoteContent.length !== 0) { + var content = this._listNoteContent[0]; + window.dispatchEvent(new CustomEvent('note-open', + {detail: content})); + } + }, + updateList: function (list) { + this._listNoteContent = list; + }, + drawList: function () { + 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); + }, + fetchList: function () { + return new Promise(function (onFulfilled, onRejected) { + 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. + onFulfilled(listData); + } else if (this.status !== 200) { + // Ignore error in this case. + //onRejected() + } + }; + 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(); - }); +}; -})(); +var listManager = new ListManager(); +document.addEventListener('DOMContentLoaded', function (event) { + listManager.start(); +}); diff --git a/homework/test/test-list.js b/homework/test/test-list.js index 441fc45..08c87b8 100644 --- a/homework/test/test-list.js +++ b/homework/test/test-list.js @@ -3,6 +3,6 @@ describe('Test > ', function() { }); it('will test some pure functions', function() { - // Write any pure function assertion here. + assert.equal('3',Math.abs(-3)); }); });