Skip to content

Instantly share code, notes, and snippets.

@Jae-kwang
Created March 21, 2018 11:31
Show Gist options
  • Save Jae-kwang/af6a58d1ee8385f101d26613d630ba37 to your computer and use it in GitHub Desktop.
Save Jae-kwang/af6a58d1ee8385f101d26613d630ba37 to your computer and use it in GitHub Desktop.
CodeSpitz75-2
const Github = class {
constructor(id, repo) {
this._base = `http://api.github.com/repos/${id}/${repo}/contents/`;
}
load(path) {
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');
return new Promise((resolve) => {
s.src = `${this._base + path}?callback=Github.${id}`;
document.head.appendChild(s);
s.onload = () => resolve();
})
}
setParser(v) { this._parser = v; }
};
Github._id = 0;
const ImageLoader = class extends Loader {
constructor(target) {
super(target);
}
_loaded(v) {
document.querySelector(this._target).src = 'data:text/plain;base64,' + v;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img id="a"></div>
<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');
(async function() {
const img = new ImageLoader('#a');
loader.setParser(img);
await loader.load('einBig.png');
const md = new MdLoader('#b')
loader.setParser(md);
await loader.load('README.md');
})();
</script>
</body>
</html>
const Loader = class {
constructor(target) {
this._target = target;
}
loaded(v) {
this._loaded(v)
}
_loaded(v) {
throw "_loaded must override";
}
}
const MdLoader = class extends Loader {
constructor(target) {
super(target);
}
_loaded(v) {
document.querySelector(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('')
);
@fureweb-com
Copy link

1(8) : 6

  • Github(2) : 0 (load 또는 setParser 시 파서에 대한 instance 체크가 누락됐으며, load 메서드 내 parser가 비동기 문제로 실행 도중 변경이 되는 경우 현재 구현 방식대로면 제대로 작동하지 않는 문제가 있습니다.)
  • Loader(2) : 2
  • ImageLoader(2) : 2
  • MdLoader(2) : 2

2(4) : 0

  • Loader(4) : 0 (해당 요구사항에 대한 구현 코드가 존재하지 않습니다.)

6/12 = 50

수고하셨습니다.

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