파트별 구현
옵져버
const obj = {};
Observer(obj, 'counter', (newValue, oldValue) => {
console.log('LOG:', newValue, oldValue)
});
obj.counter = 0;
obj.counter = 1;
// LOG: 0 undefined
// LOG: 1 0
const Observer = (obj, property, callback) => {
let value = obj[property];
Object.defineProperty(
obj,
property,
{
configurable: true,
enumerable: true,
set: (newValue) => {
callback(newValue, value);
value = newValue;
},
get: () => value
}
);
};탬플릿 바인딩
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="one-way-bind">
{{language}}
</div>
<script src="./template.js"></script>
<script>
const template = useTemplate('#one-way-bind');
template.bindData({
language: '한국어'
});
</script>
</body>
</html>const useTemplate = (selector) => {
const TEMPLATE_PROPERTY = '$template';
const elem = document.querySelector(selector);
const delimiters = ['{{', '}}'];
const cacheData = {};
const changeTextNode = elem => {
let startPosition = 0;
let endPosition = 0;
let val = '';
let copiedTemplate = '';
//템플릿 캐싱
if (!elem.hasOwnProperty(TEMPLATE_PROPERTY)) {
elem[TEMPLATE_PROPERTY] = elem.textContent;
}
copiedTemplate = elem[TEMPLATE_PROPERTY];
while (startPosition > -1) {
val = '';
//시작 위치를 찾는 다
startPosition = copiedTemplate.indexOf(
delimiters[0],
startPosition
);
//데이터가 모두 변경되어 탬플릿 키워드가 없을 때
if (startPosition === -1) break;
//종료 위치를 찾는 다
endPosition = copiedTemplate.indexOf(
delimiters[1],
startPosition + delimiters[0].length - 1
);
//변수 key값을 찾는 다.
const variableName = copiedTemplate.substring(
startPosition + delimiters[0].length,
endPosition
);
//데이터에 변수값이 있을 경우 반영한다.
if (typeof cacheData[variableName] !== 'undefined') {
val = cacheData[variableName];
}
copiedTemplate = copiedTemplate.replace(
delimiters[0] + variableName + delimiters[1],
val,
);
}
if (elem.textContent !== copiedTemplate) {
elem.textContent = copiedTemplate;
}
};
const cacheObj = data => {
for (const key in data) {
cacheData[key] = data[key];
}
};
const traversal = elem => {
elem.childNodes.forEach(node => {
if (node.childNodes.length > 0) {
traversal(node);
} else {
changeTextNode(node);
}
});
};
const bindData = data => {
cacheObj(data);
traversal(elem);
};
return {bindData}
};디렉티브
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<ul>
<li helloworld></li>
<li helloworld></li>
<li helloworld></li>
</ul>
<button
type="button"
on-click="changeButtonName(event)">
Button
</button>
<script src="./directive.js"></script>
<script>
Directive.define({
name: 'on-click',
bind: (elem, [callbackName, hasEvent]) => {
elem.onclick = (event) => {
window[callbackName].call(elem, hasEvent ? event : undefined);
};
}
});
Directive.define({
name: 'helloworld',
bind: (elem) => {
elem.innerHTML = 'Hello World';
}
});
Directive.render('body');
function changeButtonName(event) {
this.innerHTML = 'Changed Button';
}
</script>
</body>
</html>const Directive = (() => {
const store = new Set();
const define = ({name, bind}) => {
store.add({name, bind});
};
const parseAttr = (_attr) => {
let attr = _attr;
if (attr.indexOf('(') > -1) {
attr = attr
.replace('(', ',')
.replace(')', '');
}
return attr.split(',');
};
const render = (parentSelector) => {
const parent = document.querySelector(parentSelector);
store.forEach((directive) => {
const finedElems = parent.querySelectorAll(`[${directive.name}]`);
finedElems.forEach((elem) => {
const directiveValue = parseAttr(elem.getAttribute(directive.name));
directive.bind(elem, directiveValue);
});
});
};
return {define, parseAttr, render}
})();컴포넌트
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<helloworld></helloworld>
<ul>
<list></list>
<list></list>
<list></list>
<list></list>
<list></list>
</ul>
<script src="./component.js"></script>
<script>
Component.define({
name: 'helloworld',
template: '<div>Hello World</div>'
});
Component.define({
name: 'list',
template: '<li>Item</li>'
});
Component.render('body');
</script>
</body>
</html>const Component = (() => {
const store = new Set();
const parseHTML = (template) => {
const shallowElement = document.createElement('div');
shallowElement.innerHTML = template;
return shallowElement.childNodes
};
const define = ({name, template}) => {
store.add({
name,
template: parseHTML(template)[0]
});
};
const render = (parentSelector) => {
const parent = document.querySelector(parentSelector);
store.forEach((component) => {
const finedElems = parent.querySelectorAll(component.name);
finedElems.forEach((elem) => {
//Element 참조 방지
const clonedTemplate = component.template.cloneNode(true);
elem.parentNode.replaceChild(
clonedTemplate,
elem
);
});
});
};
return {define, render}
})();파트 통합
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<h3>Data Binding</h3>
<p>{{message}}</p>
<input type="text" v-model="message">
<h3>Default Directive(v-onclick)</h3>
<button type="button" v-onclick="reverseMessage">
{{btnName}}
</button>
<h3>Components</h3>
<hello-component></hello-component>
<ul>
<list></list>
<list></list>
<list></list>
<list></list>
</ul>
<h3>Directives</h3>
<div helloworld></div>
</div>
<script src="./component.js"></script>
<script src="./directive.js"></script>
<script src="./observer.js"></script>
<script src="./template.js"></script>
<script src="./vanillajs-vue.js"></script>
<script>
vanillaJsVue({
el: '#app',
data: {
message: 'Hello World',
btnName: 'Reverse Message'
},
watch: {
message: val => {
console.log(val);
}
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('');
}
},
directives: {
'helloworld': {
bind: el => {
el.innerHTML = 'Hello World';
}
}
},
components: {
'hello-component': {
template: '<p>Hello Component!!</p>'
},
'list': {
template: '<li>list</li>'
}
}
});
</script>
</body>
</html>function vanillaJsVue(options){
let template = null;
const watcher = {};
const vModel = {
name: 'v-model',
bind: (elem, variableName) => {
elem.value = options.data[variableName];
elem.oninput = ((variableName => () => {
options.data[variableName] = elem.value;
})(variableName));
}
};
const vOnClick = {
name: 'v-onclick',
bind: (elem, callbackName) => {
elem.onclick = ((callbackName => event => {
options.methods[callbackName].call(options.data, event);
})(callbackName));
}
};
const platformDirectives = [
vOnClick,
vModel
];
const initTemplate = () => {
template = useTemplate(options.el);
template.bindData(options.data);
};
const runWatcher = (keyName, newVal) => {
let callbacks = [];
if(watcher.hasOwnProperty(keyName)){
callbacks = watcher[keyName];
callbacks.forEach(callback => {
callback.call(options.data, newVal);
});
}
};
const initWatch = () => {
let keyName;
for(keyName in options.watch){
watcher[keyName] = watcher[keyName] || [];
watcher[keyName].push(options.watch[keyName]);
}
for(keyName in options.data){
(((dataObj, keyName, template) => {
Observer(
dataObj,
keyName,
(newValue) => {
template.bindData({
[keyName]: newValue
});
runWatcher(keyName, newValue);
}
);
})(options.data, keyName, template));
}
};
const initDirective = () => {
let directiveName = '';
platformDirectives.forEach(directive => {
Directive.define(directive);
});
for(directiveName in options.directives){
Directive.define({
name: directiveName,
bind: ((bindCallback => (elem, args) => {
bindCallback(elem, ...args);
})(options.directives[directiveName].bind))
});
}
Directive.render(options.el);
};
const initComponents = () => {
let componentName = '';
for(componentName in options.components){
Component.define({
name: componentName,
template: options.components[componentName].template
});
}
Component.render(options.el);
};
const init = () => {
initTemplate();
initWatch();
initDirective();
initComponents();
};
init(options);
}공식 사이트 링크
2017.09 Vue2 파트별 구현
파트별 구현 옵져버 code (@/docs/fe-dev/pet-project/vue2-part/observer-example.js) code (@/docs/fe-dev/pet-project/vue2-part/observer.js) 탬플릿 바인딩 code (@/docs/fe-dev/pet-project/vue2-par...
the-next-web-research-lab.github.io
2017.09 Vue2 파트별 구현
파트별 구현 옵져버 탬플릿 바인딩 디렉티브 컴포넌트 파트 통합 공식 사이트 링크
blog.naver.com
728x90