js中路由通常是一種基于監(jiān)聽url中hash值變化完成頁(yè)面內(nèi)容更新的技術(shù)手段。

傳統(tǒng)事件處理方式

? ? ? ? ?$("ul").on("click", "li", function(){

? ? ? ? ? ? ?var index = $(this).index();

? ? ? ? ? ? ?$("#content div").eq(index).show().siblings("div").hide();

? ? ? ? ?});

????????//監(jiān)聽hash的變化

1、使用window的onhashchange

? ? ? ? ?window.onhashchange = function(e){

? ? ? ? ? ? var hash = location.hash.substr(1);

? ? ? ? ? ? ?router[hash]();

? ? ? ? ?};

2、window.onpopstate

? ? ? ? ?window.onpopstate = function(e){

? ? ? ? ? ? ?var hash = location.hash.substr(1);

? ? ? ? ? ? ?router[hash]();

? ? ? ? ?};

3、使用計(jì)時(shí)器不間斷監(jiān)聽hash值變化

????????var lastHash = location.hash.substr(1);

????????var hashInterval = setInterval(function(){

????????????var hash = location.hash.substr(1);

????????????if(hash != lastHash){

????????????????//執(zhí)行新hash對(duì)應(yīng)的回調(diào)

????????????????router[hash]();

????????????????//更新上一次hash

????????????????lastHash = hash;

????????????}

????????}, 50);

//創(chuàng)建路由表

? ?var router = {

? ? ? ? ? ?"home": function(){

? ? ? ? ? ? ? var script = document.createElement("script");

????????????????script.src = "home.js";

????????????????document.head.appendChild(script);

? ? ? ? ? ?},

????????????"hot": function(){

????????????????$("#hot").show().siblings().hide();

????????????},

????????????"mine": function(){

????????????????$("#mine").show().siblings().hide();

????????????}

????????};

????????// $(window).trigger("popstate");

????????var hash = location.hash.substr(1);

????????router[hash]();