Skip to content

Instantly share code, notes, and snippets.

@closer27

closer27/Github.js

Created March 21, 2018 13:55
Show Gist options
  • Save closer27/bf535be05d0a88d80156a6090b675b31 to your computer and use it in GitHub Desktop.
Save closer27/bf535be05d0a88d80156a6090b675b31 to your computer and use it in GitHub Desktop.
Download ZIP
CodeSpitz75_w2_practice1
Raw
Github.js
const Github = class {
constructor(id, repo) {
this._base = `https://api.github.com/repos/${id}/${repo}/contents/`;
}
load(path) {
if (!this._parser) return;
const id = 'callback' + Github._id++;
const f = Github[id] = ({data:{content}})=>{
delete Github[id];
document.head.removeChild(s);
this._parser.loaded(content);
};
const s = document.createElement('script');
s.src = `${this._base + path}?callback=Github.${id}`;
document.head.appendChild(s);
}
setParser(v) {
this._parser = v;
}
};
Github._id = 0;
Raw
ImageLoader.js
const ImageLoader = class extends Loader {
constructor(target) {
super(target);
}
async _loaded(v){
this._target.src = 'data:text/plain;base64,' + v;
}
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<body>
<img id="a">
<div id="b"></div>
<script src="Github.js"></script>
<script src="Loader.js"></script>
<script src="ImageLoader.js"></script>
<script src="MdLoader.js"></script>
<script>
const loader = new Github('hikaMaeng', 'codespitz75');
//img
const img = new ImageLoader('#a');
loader.setParser(img);
loader.load('einBig.png');
//md
const md = new MdLoader('#b');
loader.setParser(md);
loader.load('README.md');
</script>
</body>
</html>
Raw
Loader.js
const Loader = class {
constructor(target) {
this._target = document.querySelector(target);
console.log(this._target);
}
loaded(v) {
this._loaded(v);
}
_loaded(v) {
throw 'must be overriden';
}
};
Raw
MdLoader.js
const MdLoader = class extends Loader {
constructor(target) {
super(target);
}
async _loaded(v) {
this._target.innerHTML = this._parseMD(v);
}
_parseMD(v) {
return d64(v).split('\n').map(v=>{
let i = 3;
while(i--){
if(v.startsWith('#'.repeat(i + 1))) return `<h${i + 1}>${v.substr(i + 1)}</h${i + 1}>`;
}
return v;
}).join('<br>');
}
};
const d64 =v=>decodeURIComponent(
atob(v).split('').map(c=>'%' + ('00' +c.charCodeAt(0).toString(16)).slice(-2)).join('')
);
@closer27
Copy link
Author

practice2 이동

Copy link

ghost commented Apr 8, 2018

1(8) : 7

  • Github(2) : 1 (this._parser에 대해서 스코프로 잡아주는 처리를 하지 않습니다. 비동기로 this._parser가 바꿔어버립니다.)
  • Loader(2) : 2
  • ImageLoader(2) : 2
  • MdLoader(2) : 2

2(4) : 3

  • Loader(4) : 3 (addRepo, addRouter에서 repo가 존재해야 router가 제대로 동작을 하는데, addRouter에서 해당 repo를 확인하는 로직이 없습니다. 물론 load 메서드에서 확인해서 빠져나오기는 하지만 에러가 발생하지는 않기 때문에 확인하기가 어려울 수 있습니다.)

ps. 전체적으로 인자에 대한 유효성 검사가 추가 되었으면 좋겠고, ImageLoader에서 해당 target이 이미지 엘리먼트인지 확인 가능하면 더욱 좋을거 같습니다.

10/12 = 83

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment