曾经,我非常羡慕那些人见人爱的人,我也想要变成那样,可是后来我才明白人见人爱也是需要天赋的,后来我开始默默努力,我想,就算我不能让每个人都喜欢我,至少因为我做的努力能得到别人的尊重。

单页面应用路由的两种实现方式

什么是 SPA?

  SPA就是单页面应用,即single page application,通过看代码就可以发现,整个网站就只有一个Html文件。

       github地址

 

 

WHY SPA?

  • 减小服务器压力。 如果不用SPA,那么我们每次切换页面的时候,就会向服务器发送一个请求,服务器返回一个html文件;但是如果使用了SPA,在切换时,不需要请求服务器,只要通过本地的js来切换即可。并且服务器端就不需要配置路由,完全做到了前后端分离,这对于分工合作的意义可想而知。
  • 增强用户体验,增加app的使用流畅性。 做过spa的同学都知道,使用spa之后,页面在切换的时候非常流畅,完全没有那种不断刷新的感觉,而是非常快的就有了响应,因为js运行速度很快,所以js在做本地路由的时候,就会非常快。

 

SPA路由的实现方式有哪些?

  目前来说,无论是vue,还是react,spa的路由实现方式无非就是以下两者:

  • hash方式。 使用location.hash和hashchange事件实现路由。 
  • history api。使用html5的history api实现,主要就是popState事件等。

  hash用的还是比较多的,但是这种方式的url会比较丑陋,会出现 #; 而history api就可以很好的解决这个问题,但是需要后端配置,并且由于是html5中的api,所以兼容性还不是很好,用的时候需要确定你的用户,再做决定。

  

 

SPA路由实现之hash

       自己动手,丰衣足食! 我们自己来写一个router,也许对齐理解就会更加明白了。一般,我们在使用vue和react的router的时候,不难发现他们都是构造函数,然后生成一个实例,即面向对象的方式。

  这里当然也需要使用面向对象的方式来实现,这种方式的可扩展性、可维护性都会比较好一些。

  github地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        div.router-wrap {
            width: 100%;
            height: 100%;
            background: #fefefe;
        }
        a {
            padding: 10px;  
            color: pink;
            font-size: 25px;
            font-weight: bold;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="router-wrap">
        <a href="#/black">黑色</a><br>
        <a href="#/green">绿色</a><br>
        <a href="#/red">红色</a>
    </div>
    <script>
        // 创建Router构造函数
        // currentHash为当前hash值,routes为路径对象
        function Router() {
            this.currentHash = '/';
            this.routes = {};
        }

        // 注册路径,每个路径对应一个回调函数。 
        Router.prototype.route = function (path, callback) {
            this.routes[path] = callback || function () {
                alert('未定义回调函数!');
            }
        }

        // 更新页面函数
        Router.prototype.refresh = function () {
            this.currentHash = location.hash.slice(1) || '/';
            this.routes[this.currentHash]();
        }

        // 初始化
        Router.prototype.init = function () {
            var self = this;
            window.addEventListener('load', function () {
                self.refresh();
            }, false);  

            window.addEventListener('hashchange', function () {
                self.refresh();
            });
        }
    </script>

    <script>
        var wrap = document.querySelector('.router-wrap');

        window.Router = new Router();
        Router.route('/', function () {
            wrap.style.backgroundColor = '#fefefe';
        });

        Router.route('/black', function () {
            wrap.style.backgroundColor = 'black';
        });

        Router.route('/green', function () {
            wrap.style.backgroundColor = 'green';
        });

        Router.route('/red', function () {
            wrap.style.backgroundColor = 'red';
        });

        Router.init();

    </script>
</body>
</html>

 

  上面这段代码的思路并不难理解。

  首先创建一个Router构造函数,初始化当前的url和一个routes对象。

  接着定义了三个方法:

  • route方法 --- 该方法用于在实例化router对象之后,注册路由,对于不同的路由,执行不同的回调函数 。
  • refresh方法 --- 在路由切换时,执行该方法刷新页面。
  • init方法 --- 在注册完路由之后,执行该方法,该方法主要注册了两个事件,尤其是hashchange事件,非常重要。 

  效果如下:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

SPA路由实现之history API

  github地址

  上面使用的hash方法实现路由固然不错,但是也是存在一定的问题的,就是太丑~ 如果在微信中使用,看不到url倒也无所谓,但是如果在一般的浏览器中使用就会遇到问题了。所以这里使用 history api来实现。 

  在html5中的history api包括两个方法history.pushState()和history.replaceState(),包含一个事件history.onpopstate,我们先进行简单的介绍:

history.pushState(stateObj, title, url)

  • stateObj为一个状态对象,这个对象可以被popstate事件读取到,也可以在history对象中获取。
  • title为标题,但是浏览器目前还没能实现,由于其本身是一个字符串,所以我们使用‘’来代替即可。
  • url为路径。一般设定为相对的url,绝对路径需要保证同源。 

  pushState向浏览器的历史记录栈中压入一个历史记录,所以这里的push和pop就比较好理解了。

 

history.replaceState()

  这个就比较好理解了,接受的参数都是一样的,作用就是替换当前历史记录栈中的记录。

  

onpopstate事件  

  在浏览器前进、后退时触发,一般就是历史记录栈中的指针改变的时候就会触发这个事件了。

 

 

 在测试之前呢,需要知道这样一个事情: 测试必须使用本地服务器上进行测试,如果使用file://的方式打开页面,就会出现下面的情况:

Uncaught SecurityError: A history state object with URL 'file:///C:/xxx/xxx/xxx/xxx.html' cannot be created in a document with origin 'null'.

 

因为pushState的url和当前的Url必须是同源的,而file://的形式是不存在同源的说法的,所以我们必须用http://localhost的方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        div.router-wrap {
            width: 100%;
            height: 100%;
            background: #efefef;
        }
        a {
            display: inline-block;
            padding: 10px;  
            color: pink;
            font-size: 25px;
            font-weight: bold;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="router-wrap">
        <a href="/black" class="history-link">黑色</a><br>
        <a href="/green" class="history-link">绿色</a><br>
        <a href="/red" class="history-link">红色</a>
    </div>

    <script>
        // 创建Router构造函数
        function Router() {
            this.currentRoute = '';
            this.routes = {};
            this.init();
        }

        // 注册路由函数
        Router.prototype.route = function (path, callback) {

            // 根据type类型,选择相应的history api。  
            this.routes[path] = function (type) {
                if (type == 1) {
                    history.pushState({path: path}, '', path);
                } else if (type == 2) {
                    history.replaceState({path: path}, '', path);
                }
                callback();
            }
        }

        // 更新页面
        Router.prototype.refresh = function (path, type) {
            this.routes[path](type);
        }

        // 初始化
        Router.prototype.init = function () {

            var self = this;

            // 重新加载函数,这里使用的主机是http://localhost:8088/
            window.addEventListener('load', function () {
                self.currentRoute = location.href.slice(location.href.indexOf('/', 8));
                console.log(self.currentRoute);
                self.refresh(self.currentRoute);
            });

            // 当用户点击前进后退按钮时触发函数
            window.addEventListener('popstate', function () {
                console.log('history.state.path:', history.state.path);
                self.currentRoute = history.state.path;
                self.refresh(self.currentRoute, 2);
            }, false);

            // 对所有的link标签进行绑定事件
            var historyLinks = document.querySelectorAll('.history-link');
            for (var i = 0, len = historyLinks.length; i < len; i++) {
                historyLinks[i].onclick = function(e) {
                    // 阻止默认
                    e.preventDefault();
                    self.currentRoute = e.target.getAttribute('href');
                    self.refresh(self.currentRoute, 1);
                }
            }
        }
    </script>

    <script>
        var wrap = document.querySelector('.router-wrap');

        // 实例化Router
        window.Router = new Router();


        // 注册路由,实现相应功能
            
        Router.route('/', function () {
            wrap.style.backgroundColor = '#efefef'
        });

        Router.route('/black', function () {
            wrap.style.backgroundColor = 'black';
        });

        Router.route('/green', function () {
            wrap.style.backgroundColor = 'green';
        });

        Router.route('/red', function () {
            wrap.style.backgroundColor = 'red';
        });
    </script>
</body>
</html>

 

 

node部分的代码如下:

var express = require('express');
var path = require('path')
var app = express();
 
app.get('/', function (req, res) {
   res.sendFile(path.resolve(__dirname,  './www/history.html'));
})

app.get('*', function (req, res) {
   res.sendFile(path.resolve(__dirname,  './www/history.html'));
});

const port = 8088;

var server = app.listen(port, function () {
  console.log("访问地址为 http://localhost:" + port)
});

 

 

最终效果如下:

 

并且可以实现基本的前进后退功能。 

 

 

 

 

 

原创文章,未经允许,不得转载!

posted @ 2017-08-24 09:32  Wayne-Zhu  阅读(...)  评论(...编辑  收藏

一分耕耘,一分收获。