关于HTML5 history API

参考资料:http://diveintohtml5.info/history.html
参考资料为英文,内容较为简单,周末会做简单翻译,方便英语吃力的童鞋。

H5之前,一个URL对应一个页面,无论以何种方式修改地址栏地址,都会导致页面完全刷新,无论跳转页面之间是否有关联。简单来说,H5的history API提供接口,可以使用javascript修改地址栏路径,而不刷新页面。

使用场景

简化说明:未设置静态缓存。

假设后端数据输出模式为:获取数据---读取模板---渲染模板。不同页面之间共享模板,只是数据内容不同。在没有H5的新接口之前,不同页面之间的跳转,则相同的脚本,CSS文件会重新加载,不仅加剧服务器压力,在慢速网络下,用户体验也会变差。在有H5接口之后,不同路径跳转,可以拦截超链接默认行为,通过脚本控制地址栏,通过Ajax加载数据,在前端完成数据呈现,就能避免不必要的资源加载时间。

Demo浅析

  • 数据源
    /static/articles/index.json;
    /static/articles/node.json;
    /static/articles/javascript.json
json// index.json
{
  "title": "Frontend develop language",
  "content": "FE encounter lots of trouble"
}
// node.json
{
  "title": "Node theme develop",
  "content": "whether believe or not, node changes frontend develop way"
}
// javascript.json
{
  "title": "Javascript theme develop",
  "content": "maybe javascript just tools, it enhance programmer skill"
}
  • 模板
    /views/article.jade
    (临时看的jade,所以简单为上)
jadedoctype html
html
  head
     title Shuffle History
     script(src="/libs/superagent.js")
     script(src="/js/initialize.js") 
  body
     h3#title
       | #{title}
     p#content
       | #{content}
     p
       a(href="/") Index entrance
     p
       a(href="/node/" id="node") Node entrance
     p
       a(href="/javascript/" id="javascript") Javascript entrance

总计三个页面,共享同一个jade模板。数据源对应关系为
/ ---------- index.json
/node/ --- node.json
/javascript --- javascript.json

若直接访问/,/node/, javascript页面,express读取对应数据源,渲染模板,然后直接输出html,代码如下:

javascript/**
 * Created by jasonborn on 14/11/19.
 */
var jade = require('jade');
var path = require('path');
var express = require('express');
var app = express();
app.set('env', 'development');
app.engine('jade', jade.__express);

app.get('/', function(req, res) {
  res.render('article.jade', require('./static/articles/index.json'), function(err, html) {
    res.type('html');
    res.send(html);
  })
});

app.get('/node/', function(req, res) {
  res.render('article.jade', require('./static/articles/node.json'), function(err, html) {
    res.type('html');
    res.send(html);
  })
});

app.get('/javascript/', function(req, res) {
  res.render('article.jade', require('./static/articles/javascript.json'), function(err, html) {
    res.type('html');
    res.send(html);
  })
});

app.use(express.static(path.join(__dirname, 'static')));

app.listen(1336);

自此实现所谓的MVC模式,然后使用H5 history API,所有的页面都会加载initilize.js脚本文件:

javascript/**
 * Created by jasonborn on 14/11/20.
 */

window.onload = function() {
  var title = document.querySelector('#title');
  var content = document.querySelector('#content');
  var node = document.querySelector('#node');
  var javascript = document.querySelector('#javascript');
  var resolveContent = function(target) {
    switch (true) {
      case target === '/':
            target = '/articles/index.json';
            break;
      case /node/.test(target):
            target = '/articles/node.json';
            break;
      case /javascript/.test(target):
            target = '/articles/javascript.json';
            break;
    }

    superagent
        .get(target)
        .end(function(err, res) {
          title.textContent = res.body.title;
          content.textContent = res.body.content;
        })
  };

  window.history.replaceState({
    "target": window.location.pathname
  }, null, './');

  window.onpopstate = function(event) {
    resolveContent(event.state.target);
  };

  node.addEventListener('click', function(event) {
    event.preventDefault();

    window.history.pushState({
      "target": "/node/"
    }, null, '/node/');

    resolveContent('/node/');

    window.onpopstate = function(event) {
      resolveContent(event.state.target);
    };
  });

  javascript.addEventListener('click', function(event) {
    event.preventDefault();

    window.history.pushState({
      "target": "/javascript/"
    }, null, '/javascript/');

    resolveContent('/javascript/');

    window.onpopstate = function(event) {
      resolveContent(event.state.target);
    };
  });
};

pushState修改地址记录,onpopstate表示通过后退方式退回pushState后的路径时,执行何种操作。这里是通过Ajax请求拉取数据,然后呈现数据(较大型项目可能会使用前后端模板引擎来渲染,例如x-template)。

Angularjs $location html5mode

开启html5mode,通过config来配置即可。

javascriptangular.module('shuffleApp', ['ngRoute', 'ngSanitize'])
    .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider
            .when('/love', {
                template:'<a href="/hate">To hate</a><p ng-bind="love"></p>',
                controller: 'LoveCtrl'
            })
            .when('/hate', {
                template: '<a href="/love">To love</a><p ng-bind="hate"></p>',
                controller: 'HateCtrl'
            })
            .otherwise('/love');
        $locationProvider.html5Mode(true);
    }]);

上述配置,在加载入口文件之后,地址栏会变为http://hostname/love,而不是http://hostname/#/love。但是存在一个问题,后者可以直接访问,前者也许能访问,也许不能,但不会出现预期的结果,典型结果就是NG中文API站,每次向在新页面打开某个链接,结果就是华丽丽的报错,例如:http://docs.angularjs.cn/api,所以需要做重定向:

javascriptapp.get('/love', function(req, res) {
    res.sendFile(path.join(__dirname, 'static/index.html'));
});

具体的重定向上会导致路径设计上的一些问题,所以需要注意。

联系方式

QQ: 491229492
github: https://github.com/bornkiller


怀疑真爱的流浪者jason
923 声望62 粉丝

For every single second in life, I want to fight with the monster deep within my heart , and I want to win.........


引用和评论

1 篇内容引用
0 条评论