原生JS实现单页面路由跳转

最近公司的一个小项目，需求只有几个页面；但是要做成单页面应用；用框架有点浪费资源，只能自己做一个简单的单页面功能；

原生JS实现路由跳转

 function getEle(){
        let S = document.getElementById("app").querySelectorAll("*"), res = [];
        S.forEach(e =>{
            e.dataset.path ? res.push(e) : null
        });
        return res
    }
window.Vue = {
        //监听路由变化
        tabPath(){
            let routers = getEle();
            let path = window.location.href.split("#")[1]?window.location.href.split("#")[1].split("?")[0]:"/"
            routers.forEach(e =>{
                e.innerHTML = "";
                e.dataset.path === path ? e.style.display = "block" : e.style.display = "none"
            })
        },
        //路由跳转
        Router(options){
            let type = typeof options, path = "";
            if(type === "string"){
                path = options
            } else if(type === "object"){
                path = options.path
            }
            window.location.hash = path
        },
        //初始化
        init(fn){ //此处的fn相当于生命周期，传入对应path所需要执行的回调
            window.onload = () =>{
                this.tabPath();
                typeof fn==="function"?fn():null;
            };
            window.onhashchange = () =>{
                this.tabPath();
                typeof fn==="function"?fn():null;
            }
        }
    };

html 部分需要先把需要的组件现在页面中

<div id="app">
    <div data-path="/" id="index"></div>
    <div data-path="/product" id="product">

    </div>
    <div data-path="/customItem" id="custom">

    </div>
</div>

虽然缺点很多，但是简单的路由跳转功能还是能实现；
总结了一下缺点；

没有使用webpack所以应用外部资源要用到绝对路径“http://host/path”这样的；不然路径会报错；所以我把css、html、js都放到了index.html文件中；开发过程中要分区并且明确注释；一个文件的代码实在太多，一两千行；图片资源和ajax的路径都要使用“http://host/path”这样的格式；
组件的所有内容都要动态去创建；html代码中写的不管用，因为在切换路由的时候需要把组件里面的内容全部清空；不然等这个组件下一次出现的时候动态创建的内容就会重复；
数据双向绑定还没有完成；应该项目中数据交互不是很平凡；所以都是通过事件驱动数据；
毕竟是原生实现；所以细节比较多；也比较麻烦；不过接触的基础点多，也学习了不少之前没有注意到的东西；比如在事件中使用forEach处理数据，满足条件时结束代码运行，这时候return不管用了，这就是forEach的特性：break、return都无法阻止遍历；
优点：
没有使用任何插件和框架还有UI等等，所以项目上线时打包的代码会很少，大概也就几十K的样子；
开发的时候比较自由；所有的效果都能通过自己封装的东西来实现；不收框架限制；也不用怕代码太多影响性能
比较适合只有几个页面的微型服务；

原生JS实现单页面路由跳转

原生JS实现路由跳转

猜你喜欢