#result {
height: 100px;
line-height: 100px;
font-size: 2rem;
text-align: center;
color: #fff;
}

Single Page Routing

单页应用有那些优缺点

我觉得只要够酷，就值得一试。

Page.js

Page.js Tiny ~1200 byte Express-inspired client-side router.

Director.js

Director.js is a tiny and isomorphic URL router for JavaScript.

Example

第一页
第二页

function Router(){
    this.routes = {};
    this.curUrl = '';
    
    this.route = function(path, callback){
        this.routes[path] = callback || function(){};
    };
    
    this.refresh = function(){
        this.curUrl = location.hash.slice(1) || '/';
        this.routes[this.curUrl]();
    };
    
    this.init = function(){
        window.addEventListener('load', this.refresh.bind(this), false);
        window.addEventListener('hashchange', this.refresh.bind(this), false);
    }
}

var R = new Router();
R.init();
var res = document.getElementById('result');

R.route('/first', function() {
   res.style.background = 'orange';
	res.innerHTML = '这是第一页';
});
R.route('/second', function() {
   res.style.background = 'black';
	res.innerHTML = '这是第二页';
});