前端开发js实现前端路由

游戏编程开发是前端还是后端
游戏开发属于前端
前端游戏开发的背景

在单页面应用中,前端通常需要一套路由机制,这样当url发生变化时就可以做出一些处理,从而让页面显示不同的内容。Backbone及angular里面内置的都有一套路由实现,但有时候可能并不想使用整个框架,只需要路由处理的部分,那么下面就来看一下如何用JavaScript实现前端路由。

html部分:<div class=”container”>
<nav class=”mainMenu”>
<ul>
<li><a href=”#/”>首页</a></li>
<li><a href=”#/page1″>页面1</a></li>
<li><a href=”#/page2″>页面2</a></li>
<li><a href=”#/page3″>页面3</a></li>
<li><a href=”#/page4″>页面4</a></li>
</ul>
</nav>
<div class=”content”></div>
</div>

这里有几个带#号的锚链接,点击不同的锚链接url里会产生不同的hash,如#/page1、#/page2等,这个值可以通过location.hash获取。

同时,每次hash的变化我们还可以通过onhashchange事件来监听,然后做出相应的处理,下面就来看一下具体的实现:

Router处理的核心代码:[code];(function () {
function Router () {}

Router.prototype.route = function ( path, callback ) {
    var url = location.hash.slice(1) || '/';

    // 刷新时的处理
    window.addEventListener('load', function () {
        if ( url == path ) {
            callback&&callback();
        }
    }, false);

    // hash变化时的处理
    window.addEventListener('hashchange', function () {
        url = location.hash.slice(1) || '/';
        if ( url == path ) {
            callback&&callback();
        }
    }, false);
};

window.Router = new Router(); 

})();

Router注册,注册方式就是Router.route(path, callback)的格式:[code]var content = document.querySelectorAll(‘.content’);
// 测试函数,这里可以放一些ajax处理之类的
function loadContent ( text ) {
content[0].innerHTML = text;
}

// 注意:这里的path要和html里面锚链接对应
// 如:‘#/’对应‘/’, ‘#/page2’对应’/page2’
Router.route(‘/’, function () {
loadContent(‘这是首页’);
});

Router.route(‘/page1’, function () {
loadContent(‘这是页面1’);
});

Router.route(‘/page2’, function () {
loadContent(‘这是页面2’);
});

Router.route(‘/page3’, function () {
loadContent(‘这是页面3’);
});

Router.route(‘/page4’, function () {
loadContent(‘这是页面4’);
});

Ok,以上就是前端路由的简单实现,另外也可以使用History API来处理。

代码片段 1

<div class=”container”>
    <nav class=”mainMenu”>
        <ul>
            <li><a href=”#/”>首页</a></li>
            <li><a href=”#/page1″>页面1</a></li>
            <li><a href=”#/page2″>页面2</a></li>
            <li><a href=”#/page3″>页面3</a></li>
            <li><a href=”#/page4″>页面4</a></li>
        </ul>
    </nav>
    <div class=”content”></div>
</div>
<script>
    ;(function() {
        function Router() {}
        Router.prototype.route = function(path, callback) {
            var url = location.hash.slice(1) || ‘/’
            // 刷新时的处理
            window.addEventListener(
                ‘load’,
                function() {
                    if (url == path) {
                        callback && callback()
                    }
                },
                false,
            )
            // hash变化时的处理
            window.addEventListener(
                ‘hashchange’,
                function() {
                    url = location.hash.slice(1) || ‘/’
                    if (url == path) {
                        callback && callback()
                    }
                },
                false,
            )
        }
        window.Router = new Router()
    })()
    var content = document.querySelectorAll(‘.content’)
    // 测试函数,这里可以放一些ajax处理之类的
    function loadContent(text) {
        content[0].innerHTML = text
    }
    // 注意:这里的path要和html里面锚链接对应
    // 如:‘#/’对应‘/’, ‘#/page2’对应’/page2’
    Router.route(‘/’, function() {
        loadContent(‘这是首页’)
    })
    Router.route(‘/page1’, function() {
        loadContent(‘这是页面1’)
    })
    Router.route(‘/page2’, function() {
        loadContent(‘这是页面2’)
    })
    Router.route(‘/page3’, function() {
        loadContent(‘这是页面3’)
    })
    Router.route(‘/page4’, function() {
        loadContent(‘这是页面4’)
    })
</script>
前端转游戏开发
前端 打地鼠小游戏开发
游戏前端开发技能
» 本文来自:前端开发者 » 《前端开发js实现前端路由》
» 本文链接地址:https://www.rokub.com/7540.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!