MAP-NCU2015 · Davisanity · Oct 23, 2015 · Oct 28, 2015 · Oct 29, 2015 · Oct 29, 2015
diff --git a/homework/content.js b/homework/content.js
@@ -1,37 +1,39 @@
 '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(exports) {                                 //exports是自己命名的 其實就是window
+  var ListContentManager = function(){
+    this._wrapper = null
+  });
+
+  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);
+    }
 
-  document.addEventListener('DOMContentLoaded', function(event) {
-    start();
-  });
-})();
+    exports.ListContentManager = ListContentManager;
+})(window);//這裡的window就是exports要引入的東西
diff --git a/homework/index.html b/homework/index.html
@@ -3,8 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <title> Homework - Note List </title>
-  <script defer src="list.js"></script>
-  <script defer src="content.js"></script>
+  <script src="list.js"></script>
+  <script src="content.js"></script>
+  <script src="main.js"></script>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>
 <body>

diff --git 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);
diff --git a/homework/main.js 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();
+});
diff --git 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!");
+    });
 });