From e82af75a29f91f26c533a9bc1d94fb8a3ea1d86d Mon Sep 17 00:00:00 2001
From: kaofushwai <panhsuanjen@gmail.com>
Date: Wed, 28 Oct 2015 23:31:24 +0800
Subject: [PATCH 1/5] Bind this in Event handlers

---
 homework/content.js |  6 +++---
 homework/list.js    | 22 +++++++++++-----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/homework/content.js b/homework/content.js
index 710be28..4e7f423 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) {
+    window.addEventListener('note-open', (function(event) {
       var note = event.detail;
       resetWrapper();
       drawNote(note);
-    });
+    }).bind(this));
   }
 
   function resetWrapper() {
@@ -33,5 +33,5 @@
 
   document.addEventListener('DOMContentLoaded', function(event) {
     start();
-  });
+  }).bind(this));
 })();
diff --git a/homework/list.js b/homework/list.js
index 21eddbc..d6a3b4b 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,21 +59,21 @@
     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;
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        var listData = xhr.response;
         // The flow ends here.
         afterFetch(listData);
-      } else if (this.status !== 200 ){
+      } else if (xhr.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 269bcdc483ae5dd259ad027fcd2a5ac2caf22055 Mon Sep 17 00:00:00 2001
From: kaofushwai <panhsuanjen@gmail.com>
Date: Wed, 28 Oct 2015 23:50:38 +0800
Subject: [PATCH 2/5] 'Deal with object properties w/ constructor & prototype

---
 homework/content.js |  65 +++++++++++-----------
 homework/index.html |   1 +
 homework/list.js    | 132 ++++++++++++++++++++++----------------------
 homework/main.js    |   8 +++
 4 files changed, 110 insertions(+), 96 deletions(-)
 create mode 100644 homework/main.js

diff --git a/homework/content.js b/homework/content.js
index 4e7f423..3108387 100644
--- a/homework/content.js
+++ b/homework/content.js
@@ -1,37 +1,40 @@
 '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);
-    }).bind(this));
-  }
-
-  function resetWrapper() {
-    _wrapper.innerHTML = '';
+(function(exports) {
+	var ContentManager = function () {
+	this/_wrapper = document.querySelector('#note-content-wrapper'}
+  
   }
 
-  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);
+  ContentManager.prototype = {
+	start(){
+		window.addEventListener('note-open', (function(event){
+			var note = event.detail;
+			this.resetWrapper();
+			this.drawNote(note);
+		}).bind(this));
+	},
+	
+	resetWrapper(){
+		this._wrapper.innerHTML = '';
+	},
+	
+	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.appendChid(p);
+	});
+	this._wrapper.appendChid(h);
+	this._wrapper.appendChid(buff);
+   }
   }
 
-  document.addEventListener('DOMContentLoaded', function(event) {
-    start();
-  }).bind(this));
-})();
+	exports.ContentManager = ContentManager;
+	})(window);
\ No newline at end of file
diff --git a/homework/index.html b/homework/index.html
index e387963..ef5ceb9 100644
--- a/homework/index.html
+++ b/homework/index.html
@@ -5,6 +5,7 @@
   <title> Homework - Note List </title>
   <script defer src="list.js"></script>
   <script defer src="content.js"></script>
+  <script defer src="main.js"><.scipt>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>
 <body>
diff --git a/homework/list.js b/homework/list.js
index d6a3b4b..0fafd86 100644
--- a/homework/list.js
+++ b/homework/list.js
@@ -1,79 +1,81 @@
 'use strict';
 
-(function() {
+(function(exports) {
 
-  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));
+  var ListManager = function () {
+  this._listNoteContent = [];
+  this._wrapper = document.querySelector('#note-list-wrapper');
   }
 
-  function onNoteOpen(event) {
-    if (event.target.classList.contains('note-title')) {
+  ListManager.prototype = {
+   start() {
+   this.fetchList((function(data) {
+   this.updateList(data);
+   this.drawList();
+   this.preloadFirstNote();
+   }).bind(this));
+   window.addEventListener('click', (function(event) {
+    this.onNoteOpen(event);
+	}).bind(this));
+ },
+
+  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];
-      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 }));
+     }
+   },
+ 
+  updateList(list) {
+     this._listNoteContent = list;
+    },
+ 
+   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;
 
-  function updateList(list) {
-    _listNoteContent = list;
-  }
+        buff.appendChild(li);
+      });
+      ul.appendChild(buff);
+      this._wrapper.appendChild(ul);
+    },
 
-  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 (xhr.readyState === 4 && xhr.status === 200) {
-        var listData = xhr.response;
-        // The flow ends here.
-        afterFetch(listData);
-      } else if (xhr.status !== 200 ){
-        // Ignore error in this case.
-      }
-    }).bind(this));
-    xhr.send();
+    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 (xhr.readyState === 4 && xhr.status === 200) {
+          var listData = xhr.response;
+          // The flow ends here.
+          afterFetch(listData);
+        } else if (xhr.status !== 200 ){
+          // Ignore error in this case.
+        }
+      }).bind(this);
+      xhr.send();
+    }
+  
   }
+   exports.ListManager = ListManager
+   })(window);
 
-  document.addEventListener('DOMContentLoaded', (function(event) {
-    start();
-  }).bind(this));
 
-})();
diff --git a/homework/main.js b/homework/main.js
new file mode 100644
index 0000000..649c836
--- /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 3e7672289d3dca5ec3ef14bda7e4b31a468b5ffe Mon Sep 17 00:00:00 2001
From: kaofushwai <panhsuanjen@gmail.com>
Date: Wed, 28 Oct 2015 23:52:55 +0800
Subject: [PATCH 3/5] Deal with asynchronous flows with Promise

---
 homework/list.js | 140 ++++++++++++++++++++++++-----------------------
 1 file changed, 71 insertions(+), 69 deletions(-)

diff --git a/homework/list.js b/homework/list.js
index 0fafd86..28ad48e 100644
--- a/homework/list.js
+++ b/homework/list.js
@@ -2,80 +2,82 @@
 
 (function(exports) {
 
-  var ListManager = function () {
-  this._listNoteContent = [];
-  this._wrapper = document.querySelector('#note-list-wrapper');
+	var ListManager = function();
+	 this._listNoteContent = [];
+	 this._wrapper = document.querySelector('#note-list-wrapper');
   }
 
   ListManager.prototype = {
-   start() {
-   this.fetchList((function(data) {
-   this.updateList(data);
-   this.drawList();
-   this.preloadFirstNote();
-   }).bind(this));
-   window.addEventListener('click', (function(event) {
-    this.onNoteOpen(event);
-	}).bind(this));
- },
-
-  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 }));
-         };
-    },
-
-  preloadFirstNote() {
-     if (this._listNoteContent.length !== 0) {
-       var content = this._listNoteContent[0];
-       window.dispatchEvent(new CustomEvent('note-open',
-         { detail: content }));
-     }
-   },
- 
-  updateList(list) {
-     this._listNoteContent = list;
-    },
- 
-   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;
+  start(){
+  this.fetchList()
+  .then((function)(data){
+  this.updateList(data);
+  this.drawList();
+  this.preloadFirstNote();
+  }).bind(this))
+  .catch((function(){
+  
+  }).bind(this) );
+  
+  window.addEventListener('click',(function(event){
+  this.onNote(event);
+  }).bind(this))
+  },
 
-        buff.appendChild(li);
-      });
-      ul.appendChild(buff);
-      this._wrapper.appendChild(ul);
-    },
+  onNoteOpen(event){
+   if(event.target.classList,contains('note-title')){
+   var id = event.target.dataset.noteId;
+   vat content = this._listNoteContent[id];
+   window.dispatchEvent(new CustomEvent('note-open',
+	detail: content}));
+	};
+ },
+  
+  preloadFirstNote(){
+	if(this.listNoteContent.lenght !== 0){
+	var content = this._listNoteContent[0];
+	window.dispatchEvent(new CustomEvent('note-open',
+		{detail: content}));
+	}
+  },
+  
+  updateList(List){
+	this.listNoteContent = List;
+  },
 
-    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 (xhr.readyState === 4 && xhr.status === 200) {
-          var listData = xhr.response;
-          // The flow ends here.
-          afterFetch(listData);
-        } else if (xhr.status !== 200 ){
-          // Ignore error in this case.
-        }
-      }).bind(this);
-      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;
+  buff.appendChild(li);
+  });
+  ul.appendChild(buff);
+  this._wrapper.appendChild(ul);
+  },
   
+  fetchList(){
+	return new Promise(function(resolve, reject){
+		var xhr = new XMLHttpRequest();
+		xhr.open('GET','http://127.0.1:8000/demo-list-notes.json',true);
+		xhr.responseType = 'json';
+		xhr.onreadystatechange=function(e){
+			if(xhr.readyState==&& xhr.status==200){
+			resolve(xhr.response);
+			}else if (xhr.status !=200){
+			reject(xhr);
+			}
+		};
+		xhr.send();
+		});
+	}
   }
-   exports.ListManager = ListManager
-   })(window);
-
+  
 
+  exports.ListManager = ListManager
+})(window);

From 3ecd4cf43c14c52f1409024ecd197d4bb23b7057 Mon Sep 17 00:00:00 2001
From: kaofushwai <panhsuanjen@gmail.com>
Date: Wed, 28 Oct 2015 23:53:50 +0800
Subject: [PATCH 4/5] My Test

---
 homework/test/test-list.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/homework/test/test-list.js b/homework/test/test-list.js
index 441fc45..4be3840 100644
--- a/homework/test/test-list.js
+++ b/homework/test/test-list.js
@@ -1,8 +1,13 @@
-describe('Test > ', function() {
+var assert = require('assert');
+
+describe('Test Math',function(){
   beforeEach(function() {
   });
 
-  it('will test some pure functions', function() {
-    // Write any pure function assertion here.
+  it('Calculate the Maximum num', function() {
+    var small = 1;
+	var big = 10;
+	var maxNumber = Math.max(big,small);
+	assert.equal(maxNumber,big);
   });
 });

From 9cb3fe7508bc5367268c1307e149b1e17bc60559 Mon Sep 17 00:00:00 2001
From: kaofushwai <panhsuanjen@gmail.com>
Date: Fri, 30 Oct 2015 18:19:29 +0800
Subject: [PATCH 5/5] Modify Deal with object porperties constructor&protptype

---
 homework/content.js | 4 ++--
 homework/index.html | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/homework/content.js b/homework/content.js
index 3108387..9f37fec 100644
--- a/homework/content.js
+++ b/homework/content.js
@@ -2,7 +2,7 @@
 
 (function(exports) {
 	var ContentManager = function () {
-	this/_wrapper = document.querySelector('#note-content-wrapper'}
+	this._wrapper = document.querySelector('#note-content-wrapper'}
   
   }
 
@@ -34,7 +34,7 @@
 	this._wrapper.appendChid(h);
 	this._wrapper.appendChid(buff);
    }
-  }
+  };
 
 	exports.ContentManager = ContentManager;
 	})(window);
\ No newline at end of file
diff --git a/homework/index.html b/homework/index.html
index ef5ceb9..108faf4 100644
--- a/homework/index.html
+++ b/homework/index.html
@@ -5,7 +5,7 @@
   <title> Homework - Note List </title>
   <script defer src="list.js"></script>
   <script defer src="content.js"></script>
-  <script defer src="main.js"><.scipt>
+  <script defer src="main.js"></scipt>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>
 <body>