欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)前端路由功能示例【原生路由】

 更新時(shí)間：2020年05月29日 10:06:03   作者：TANKING  
這篇文章主要介紹了JS實(shí)現(xiàn)前端路由功能,結(jié)合實(shí)例形式分析了js實(shí)現(xiàn)原生路由的相關(guān)原理與操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)前端路由功能。分享給大家供大家參考，具體如下：

路由就是根據(jù)不同的 url 地址展示不同的內(nèi)容或頁(yè)面，早期路由的概念是在后端出現(xiàn)的，通過(guò)服務(wù)器端渲染后返回頁(yè)面，隨著頁(yè)面越來(lái)越復(fù)雜，服務(wù)器端壓力越來(lái)越大。后來(lái)ajax異步刷新的出現(xiàn)使得前端也可以對(duì)url進(jìn)行管理，此時(shí)，前端路由就出現(xiàn)了。

單頁(yè)面就是有前端路由來(lái)實(shí)現(xiàn)的，也就是說(shuō)網(wǎng)站只有一個(gè)頁(yè)面，點(diǎn)擊導(dǎo)航會(huì)顯示不同的內(nèi)容，對(duì)應(yīng)的url也在發(fā)生改變。在這個(gè)過(guò)程中，js會(huì)實(shí)時(shí)檢測(cè)url的變化，從而改變顯示的內(nèi)容。

路由實(shí)現(xiàn)的原理：window綁定了監(jiān)聽(tīng)函數(shù)，當(dāng)url的hash值發(fā)生變化的時(shí)候會(huì)觸發(fā)hashchange回調(diào)，在回調(diào)中進(jìn)行不同的操作，馬上刷新頁(yè)面，從而顯示不同的頁(yè)面。

下面是一個(gè)前端路由的簡(jiǎn)單實(shí)現(xiàn)：通過(guò)路由實(shí)現(xiàn)url的切換、頁(yè)面內(nèi)容的改變。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>前端路由測(cè)試</title>
  <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
 
  <style>
      *{
        margin:0;
        padding: 0;
      }

      .content{
        width: 500px;
        height: 300px;
        margin-top: 30px;
        margin:20px auto 0;
      }

      #click_btn{
        width: 500px;
        height: 50px;
        margin:100px auto 0;
      }

      #click_btn a{
        display: block;
        background: #333;
        color: #fff;
        text-decoration: none;
        line-height: 50px;
        text-align: center;
        float: left;
        margin-right: 15px;
        padding: 0px 15px;
      }

      #click_btn a:hover{
        background: #666;
      }
  </style>
 
</head>
<body>
<div id="click_btn">
  <a href="#/one" rel="external nofollow" >第一個(gè)頁(yè)面</a>
  <a href="#/two" rel="external nofollow" >第二個(gè)頁(yè)面</a>
  <a href="#/three" rel="external nofollow" >第三個(gè)頁(yè)面</a>
</div>

<div class="content"></div>
 
<script src="router.js"></script>
<script src="test.js"></script>
 
</body>
</html>

router.js

//構(gòu)造函數(shù)
function Router() {
  this.routes = {};
  this.currentUrl = '';
}
Router.prototype.route = function(path, callback) {
  this.routes[path] = callback || function(){};//給不同的hash設(shè)置不同的回調(diào)函數(shù)
};
Router.prototype.refresh = function() {
  console.log(location.hash.slice(1));//獲取到相應(yīng)的hash值
  this.currentUrl = location.hash.slice(1) || '/';//如果存在hash值則獲取到，否則設(shè)置hash值為/
  // console.log(this.currentUrl);
  if(this.currentUrl&&this.currentUrl!='/'){
    this.routes[this.currentUrl]();//根據(jù)當(dāng)前的hash值來(lái)調(diào)用相對(duì)應(yīng)的回調(diào)函數(shù)
  }
 
};
Router.prototype.init = function() {
  window.addEventListener('load', this.refresh.bind(this), false);
  window.addEventListener('hashchange', this.refresh.bind(this), false);
}
//給window對(duì)象掛載屬性
window.Router = new Router();
window.Router.init();

test.js

Router.route('/one', function () {
  $(".content").html("<p>路由就是根據(jù)不同的 url 地址展示不同的內(nèi)容或頁(yè)面，早期路由的概念是在后端出現(xiàn)的，通過(guò)服務(wù)器端渲染后返回頁(yè)面，隨著頁(yè)面越來(lái)越復(fù)雜，服務(wù)器端壓力越來(lái)越大。后來(lái)ajax異步刷新的出現(xiàn)使得前端也可以對(duì)url進(jìn)行管理，此時(shí)，前端路由就出現(xiàn)了。</p>");
});
Router.route('/two', function () {
  $(".content").html("<h3>單頁(yè)面就是有前端路由來(lái)實(shí)現(xiàn)的，也就是說(shuō)網(wǎng)站只有一個(gè)頁(yè)面，點(diǎn)擊導(dǎo)航會(huì)顯示不同的內(nèi)容，對(duì)應(yīng)的url也在發(fā)生改變。在這個(gè)過(guò)程中，js會(huì)實(shí)時(shí)檢測(cè)url的變化，從而改變顯示的內(nèi)容。</h3>");
});
Router.route('/three', function () {
  $(".content").html("<img src='https://upload-images.jianshu.io/upload_images/12890819-f8665293cc8d0dcf.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp' width='500'/>");
});

注意：router.js要在test.js之前進(jìn)行調(diào)用，不然會(huì)先加載test.js從而找不到，出現(xiàn)router.js未被定義。

上面router對(duì)象實(shí)現(xiàn)主要提供了三個(gè)方法

1.init監(jiān)聽(tīng)瀏覽器url的hash值更新事件。

2.route存儲(chǔ)路由更新時(shí)的回調(diào)到回調(diào)數(shù)組routes中，回掉函數(shù)將負(fù)責(zé)對(duì)頁(yè)面進(jìn)行更新。

3.refresh執(zhí)行當(dāng)前url的回調(diào)函數(shù)，更新頁(yè)面。

感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具：http://tools.jb51.net/code/WebCodeRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論