hashchange 이벤트를 이용해서, hash url 을 관리함.
용도
팝업 이라던지, 사이드메뉴 등의 현재 페이지에서 유일한 URL을 구현할 수 있는 방법중에 하나로 사용- url hash를 이용하면 레이어가 동작한 후에
back 키를 눌렀을 경우, 페이지 리로딩을 하지 않기 때문에, 페이지의 URL을 고유하게 유지할 수 있다.
사용법
const sideNavHandler = {
open() {
console.log('open');
},
close() {
console.log('close');
}
}
// Action : 해당 URL 진입시 동작
// Leave : 해당 URL 이탈시 동작
window['observeHash'].register({string: hashURL},{function: Action}, {function: Leave});
// sample
window['observeHash'].register('#openSideMenu', sideNavHandler.open, sideNavHandler.close);
소스코드
(function( global ) {
function hashChangeAction() {
let route = global['observeHash']['route'];
if (route[location.hash]) {
route[location.hash].action.forEach(function( callback ) {
callback();
});
}
if(global['observeHash'].currentHash != location.hash) {
if(route[global['observeHash'].currentHash]) {
let leave = route[global['observeHash'].currentHash].leave;
if(leave.length) {
leave.forEach(function( callback ) {
callback();
});
}
}
}
global['observeHash'].currentHash = location.hash;
}
if( 'observeHash' in global ) return;
global['observeHash'] = {
route: {},
currentHash: null,
register(url, callback, reset) {
if(this.route[url]) {
this.route[url].action.push(callback);
} else {
this.route[url] = {};
this.route[url].action = [callback];
}
if (reset) {
if(this.route[url].leave) {
this.route[url].leave.push(reset);
} else {
this.route[url].leave = [reset];
}
}
return this;
},
unregister() {
},
notify() {
}
};
global.addEventListener('hashchange', hashChangeAction);
global.addEventListener('load', hashChangeAction);
})(window);