路由

js中路由通常是一种基于监听url中hash值变化完成页面内容更新的技术手段。

传统事件处理方式

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

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

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

         });

        //监听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、使用计时器不间断监听hash值变化

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

        var hashInterval = setInterval(function(){

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

            if(hash != lastHash){

                //执行新hash对应的回调

                router[hash]();

                //更新上一次hash

                lastHash = hash;

            }

        }, 50);

//创建路由表

   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]();