hash를 이용한 URL 페이지 제어

• 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);