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/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 710be28..c0794e2 100644
--- a/homework/content.js
+++ b/homework/content.js
@@ -1,37 +1,71 @@
'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) {
+ /**
+ * 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() {
+ 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':
+ var note = event.detail;
+ this.resetWrapper();
+ this.drawNote(note);
+ 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');
+ 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.TodoContentManager = TodoContentManager;
+})(window);
diff --git a/homework/index.html b/homework/index.html
index e387963..89ae2d3 100644
--- a/homework/index.html
+++ b/homework/index.html
@@ -1,15 +1,18 @@
-
+
-
- Homework - Note List
-
-
-
+
+ Homework - Note List
+
+
+
+
+
- Homework - Note List
-
-
+ Homework - Note List
+
+
+
diff --git a/homework/list.js b/homework/list.js
index 21eddbc..383826d 100644
--- a/homework/list.js
+++ b/homework/list.js
@@ -1,79 +1,142 @@
'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 (exports) {
+ /**
+ * Declare _listNoteContent.
+ * Declare wrapper.
+ *
+ * @constructor
+ * @this {TodoListManager}
+ */
+ var TodoListManager = function () {
+ // Local data storage; should sync up with the server.
+ this._listNoteContent = [];
+ // 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 }));
- }
- }
-
- 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.
- }
+ 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))
+ },
+ /**
+ * 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;
+ var content = this._listNoteContent[id];
+ window.dispatchEvent(new CustomEvent('note-open',
+ { 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':
+ this.onNoteOpen(event);
+ break;
+ }
+ },
+ /**
+ * Show the Note for start stage.
+ *
+ * @this {TodoListManager}
+ */
+ preloadFirstNote() {
+ if (this._listNoteContent.length !== 0) {
+ var content = this._listNoteContent[0];
+ window.dispatchEvent(new CustomEvent('note-open',
+ { 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');
+ 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);
+ },
+ /**
+ * 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();
+ 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.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.
+ }
+ };
+ xhr.send();
+ }).bind(this));
+ }
};
- xhr.send();
- }
-
- document.addEventListener('DOMContentLoaded', function(event) {
- start();
- });
-
-})();
+ exports.TodoListManager = TodoListManager;
+})(window);
diff --git a/homework/main.js b/homework/main.js
new file mode 100644
index 0000000..3a7f2c0
--- /dev/null
+++ b/homework/main.js
@@ -0,0 +1,10 @@
+'use strict';
+
+// Kick off
+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.
});
});
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