Skip to content

102502524 #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
esxleader wants to merge 1 commit into
base: homework
Choose a base branch
from
Open

102502524 #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 25 additions & 21 deletions homework/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
'use strict';

(function() {
var _wrapper = document.querySelector('#note-content-wrapper');
(function(exports) {
var ContentManager = function(){
this._wrapper = null;
};

function start() {
window.addEventListener('note-open', function(event) {
var note = event.detail;
resetWrapper();
drawNote(note);
});
}
ContentManager.prototype = {

function resetWrapper() {
_wrapper.innerHTML = '';
start() {
this._wrapper = document.querySelector('#note-content-wrapper');
window.addEventListener('note-open', (function(event){
Copy link
Contributor

@snowmantw snowmantw Nov 7, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of using an anonymous function, setting the listener as this and handle events with handleEvent method is better.

var note = event.detail;
this.resetWrapper();
this.drawNote(note);
}).bind(this));
}

function drawNote(note) {

resetWrapper() {
this._wrapper.innerHTML = '';
},

drawNote(note) {
var title = note.title;
var h = document.createElement('h2');
h.textContent = title;
Expand All @@ -27,11 +32,10 @@
p.textContent = passage;
buff.appendChild(p);
});
_wrapper.appendChild(h);
_wrapper.appendChild(buff);
}

document.addEventListener('DOMContentLoaded', function(event) {
start();
});
})();
this._wrapper.appendChild(h);
this._wrapper.appendChild(buff);
},
};

exports.ContentManager = ContentManager;
})(window);
1 change: 1 addition & 0 deletions homework/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title> Homework - Note List </title>
<script defer src="main.js"></script>
<script defer src="list.js"></script>
<script defer src="content.js"></script>
<link rel="stylesheet" type="text/css" href="main.css" />
Expand Down
80 changes: 43 additions & 37 deletions homework/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,49 @@
'use strict';

(function() {
(function(exports) {
var ListManager = function(){
this._listNoteContent = [];
this._wrapper = null;
};

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) {
ListManager.prototype = {

start() {
this._wrapper = document.querySelector('#note-list-wrapper');
this.fetchList()
.then((function(data) {
Copy link
Contributor

@snowmantw snowmantw Nov 7, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, good. You have successfully "Promisified" it and use it with another chain.

Copy link
Contributor

@snowmantw snowmantw Nov 7, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

However, I suggest Arrow function is better than using the bind API. See this:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

this.updateList(data);
this.drawList();
this.preloadFirstNote();
}).bind(this));
window.addEventListener('click', (function(event) {
Copy link
Contributor

@snowmantw snowmantw Nov 7, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a convention to prefix method with on for the corresponding function, so it should be renamed as 'onClick'. And, to set this as the listener is better than an anonymous function.

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];
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;
drawList() {
var list = this._listNoteContent;
var ul = document.createElement('ul');
ul.id = 'note-title-list';
var buff = document.createDocumentFragment();
Expand All @@ -52,10 +57,11 @@
buff.appendChild(li);
});
ul.appendChild(buff);
_wrapper.appendChild(ul);
}
this._wrapper.appendChild(ul);
},

function fetchList(afterFetch) {
fetchList(afterFetch) {
Copy link
Contributor

@snowmantw snowmantw Nov 7, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since you have "Promisified" it, to keep this callback argument is unnecessary.

return new Promise((function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true);
xhr.responseType = 'json';
Expand All @@ -64,16 +70,16 @@
if (this.readyState === 4 && this.status === 200) {
var listData = this.response;
// The flow ends here.
afterFetch(listData);
resolve(listData);
} else if (this.status !== 200 ){
// Ignore error in this case.
reject('FETCHING FAILED: ' + this.status + ' ' + this.readyState);
}
};
xhr.send();
}

document.addEventListener('DOMContentLoaded', function(event) {
start();
});
}).bind(this));
},
};

})();
exports.ListManager = ListManager;
})(window);
7 changes: 7 additions & 0 deletions homework/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use strict';
document.addEventListener('DOMContentLoaded', function(event){
var listmanager = new ListManager();
var contentmanager = new ContentManager();
listmanager.start();
contentmanager.start();
});
19 changes: 12 additions & 7 deletions homework/test/test-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
describe('Test > ', function() {
beforeEach(function() {
});
var assert = require('assert');
var Test = function(){};

it('will test some pure functions', function() {
// Write any pure function assertion here.
});
});
Test.prototype.add = function (n1,n2){
Copy link
Contributor

@snowmantw snowmantw Nov 7, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's better to define it in one of the managers, rather than to write it in the test file.

return n1+n2;
}

describe('add', function(){
it('add', function(){
var test = new Test();
assert.equal('10', test.add(7, 3));
})
})