游戏编程开发是前端还是后端 |
游戏开发属于前端 |
前端游戏开发的背景 |
在单页面应用中,前端通常需要一套路由机制,这样当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
前端转游戏开发 |
前端 打地鼠小游戏开发 |
游戏前端开发技能 |
评论前必须登录!
注册