js map 只输出key_原生js实现简单路由切换

最新推荐文章于 2024-02-07 19:52:31 发布

weixin_39940182

最新推荐文章于 2024-02-07 19:52:31 发布

阅读量174

点赞数 1

文章标签： js map 只输出key js去掉前后空格的函数用js实现导航栏shoufang效果

前言：现在前端技术火热，各种前端框架更是层出不穷。在过去，路由切换只出现在后台里，前台想要切换到某个页面，需要向后端请求，随后后端完成路由切换。但是随着SPA单页面应用程序的发展，前端路由也逐渐火热。单页面应用顾名思义就是网页只有一个HTML，但是当我们点击导航的时候，页面url会改变，网页也会显示不同的内容，这就是前端路由所做的事。其实总的来说就是一句话：js监测url的变化，从而改变显示内容。

欢迎关注微信公众号：前端切图仔

其他文章参考：

天之蓝源：三分钟在GitHub上搭建个人博客zhuanlan.zhihu.com

天之蓝源：零基础Hexo+Github搭建静态个人博客zhuanlan.zhihu.com

天之蓝源：原生js实现点击按钮复制文本内容zhuanlan.zhihu.com

天之蓝源：九种跨域方式实现原理zhuanlan.zhihu.com

天之蓝源：前端面试考点多？看这些文章就够了（转载）zhuanlan.zhihu.com

天之蓝源：干货！值得收藏的前端学习网站zhuanlan.zhihu.com

天之蓝源：原生JS实现一个日期选择器（DatePicker）组件zhuanlan.zhihu.com

天之蓝源：原生js一步一步实现《别踩白块儿》小游戏zhuanlan.zhihu.com

天之蓝源：原生js利用localstorage实现简易TODO list应用zhuanlan.zhihu.com

天之蓝源：原生js实现瀑布流效果zhuanlan.zhihu.com

天之蓝源：原生js实现图片懒加载（lazyLoad）zhuanlan.zhihu.com

天之蓝源：原生js实现简单路由切换zhuanlan.zhihu.com

一.本篇文章要实现的效果

js实现的简单前端路由https://www.zhihu.com/video/1067148067286851584

二.实现思路

利用<a>标签进行url的切换，然后js代码监测url的变化，从而改变特定区域的显示内容。

注意：<a>标签的href必须以“#”开头，如：<a href="#/....">。因为有“#”，页面则不会向服务器请求资源，则不会刷新页面。这也就是单页面应用程序路由切换的原理。

三.页面结构---->HTML

这个页面结构是很常见的一种网站布局方式：采用头部和底部固定，中间左侧为菜单栏，右侧为内容显示区。

四.来点样式---->CSS

页面结构是出来了，但是没有样式就如同行尸走肉一般，我们来为它添加一点样式：

此时的页面大致如此：

页面结构

五.js路由切换函数封装---->JavaScript

现在是最重要的js代码了，我们最开始提到实现前端路由的这种方式就是监测浏览器url的变化，其实就是监测“#”后面的变化值。在浏览器中，每个url就是hash值，所以实际上我们监测的是url的hash值变化，所以这种路由方式也被称作hash路由。

这里的js实现代码我们把它分为几大部分：

设置一个自执行函数，保证代码不被污染。
在自执行函数里面添加一个构造函数。
在构造函数的原型对象上添加一些函数。
利用window.object = function() 将函数暴露出去。

大致步骤说了，下面我们就来实现我们的代码，在代码里面我们再来慢慢体会。

先来实现我们的自执行函数：

接下来就是编写对应url应该对应什么内容的js代码了

(function(){
    var Router = function () {
        this.routes = {};//保存路由
        this.curUrl = '';//获取当前的hash值
    }
    Router.prototype.init = function () {
        //hashchange事件，当hash变化时，调用reloadPage方法
        //第一个this指向window，bind里面的this指向调用这个函数的对象，具体使用方法可以百度
        window.addEventListener('hashchange', this.reloadPage.bind(this));
    }

    Router.prototype.reloadPage = function () {
        this.curUrl = location.hash.substring(1) || '/';//获取当前hash的值（去掉#）
        this.routes[this.curUrl]();      //运行当前hsah值对应的函数
    }

    Router.prototype.map = function( key, callback ){ //保存路由对应的函数：
        this.routes[key] = callback;  //key表示hash的值（去掉#），callback表示当前hash对应的函数
    } 
    window.oRou = Router;
})()


var oRouter2 = new oRou();
oRouter2.init();
oRouter2.map('/',function () {
    var oSidebar = document.querySelector("sidebar");
    oSidebar.innerHTML = '我是主页';
})

oRouter2.map('/html',function () {
    var oSidebar = document.querySelector("sidebar");
    oSidebar.innerHTML = '我是html页面';
})

oRouter2.map('/css',function () {
    var oSidebar = document.querySelector("sidebar");
    oSidebar.innerHTML = '我是css页面';
})

oRouter2.map('/javascript',function () {
    var oSidebar = document.querySelector("sidebar");
    oSidebar.innerHTML = '我是javascript页面';
})