手写前端路由

最新推荐文章于 2023-02-23 10:41:57 发布

取个昵称要人命

最新推荐文章于 2023-02-23 10:41:57 发布

阅读量256

点赞数

分类专栏：自我学习文章标签： amd es6 前端 jquery

本文链接：https://blog.csdn.net/weixin_42564514/article/details/104773723

版权

自我学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

手写前端路由

思路：通过监听location的hash值实现

1.简单结构

2.base中的jquery和require是从cdn上下载的

3.cart.js与user.js

define(['jquery'], ($)=>{
    return ()=>{
        $("body").html('<div>这是购物车模块</div>')
    }
});

///分隔//

define(['jquery'], ($)=>{
    return ()=>{
        $("body").html('<div>这是用户模块</div>')
    }
});

4.router.js

define(['jquery'], function($) {
    //let that
    function Router(option)
    {
        this.routes = option.routes
        this.init()
        //that = this
    }
    
    Router.prototype={
        constructor: Router,
        init(){
            //console.log(this)
            window.addEventListener('hashchange',()=>{
                //console.log(this)
                let hash = location.hash.substring(1)
                let rt = this.routes.find(item=>item.path===hash)
                if(rt) rt.component()
                else $('body').html('404')
            })
        }
    }

    // Router.prototype.init=()=>{
    //     console.log('this is',this)
    //     window.addEventListener('hashchange',()=>{
    //         let hash = location.hash.substring(1)
    //         console.log('变了',that,this)
    //         let rou = that.routes.find(item=>{
    //             console.log('ppp',item)
    //             console.log('1',hash)
    //             console.log('2',item.path)
    //             console.log(item.path==hash)
    //             console.log(item.path===hash)
    //             return item.path === hash
    //         })
    //         console.log('ppptttt',rou)
    //         if(rou)
    //         {
    //             rou.component()
    //         }
    //         else
    //         {
    //             $('body').html('404')
    //         }
    //     })
    // }
    return Router
});

5.routes.js

define(['tool/router','service/user','service/cart'],(router,user,cart)=>{
    
    var rt = new router({
        routes:[
            {path:'/user',component:user},
            {path:'/cart',component:cart},
        ]
    })
    
});

6.app.js

require.config({
    baseUrl:'js',
    paths:{
        jquery:'base/jquery1'
    }
})

require(['jquery','tool/routes'],($,routes)=>{
    console.log('入口js')
})

7.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script data-main="app" src="js/base/require.js"></script>
</head>
<body>
    
</body>
</html>

8.运行结果

------------------------------------------------------------------结合编程式路由-------------------------------------------------------------------

1.cart.js和user.js

define(['jquery'], ($)=>{
    return ()=>{
        $("body").append('<div>这是购物车模块</div>')
    }
});


 /


define(['jquery'], ($)=>{
    return ()=>{
        $("body").append('<div>这是用户模块</div>')
    }
});

2.router.js

define(['jquery'], function($) {
    //let that
    function Router(option)
    {
        this.routes = option.routes
        this.init()
        //that = this
    }
    
    Router.prototype={
        constructor: Router,
        init(){
            //console.log(this)
            window.addEventListener('hashchange',()=>{
                //console.log(this)
                let hash = location.hash.substring(1)
                let rt = this.routes.find(item=>item.path===hash)
                if(rt) rt.component()
                else $('body').append('404')
            })
        },

        push(obj){
            if(obj&&obj.path)
            {
                location.hash = "#"+obj.path
            }
        }


    }

    // Router.prototype.init=()=>{
    //     console.log('this is',this)
    //     window.addEventListener('hashchange',()=>{
    //         let hash = location.hash.substring(1)
    //         console.log('变了',that,this)
    //         let rou = that.routes.find(item=>{
    //             console.log('ppp',item)
    //             console.log('1',hash)
    //             console.log('2',item.path)
    //             console.log(item.path==hash)
    //             console.log(item.path===hash)
    //             return item.path === hash
    //         })
    //         console.log('ppptttt',rou)
    //         if(rou)
    //         {
    //             rou.component()
    //         }
    //         else
    //         {
    //             $('body').html('404')
    //         }
    //     })
    // }
    return Router
});

3.routes.js

define(['tool/router','service/user','service/cart'],(router,user,cart)=>{
    
    var rt = new router({
        routes:[
            {path:'/user',component:user},
            {path:'/cart',component:cart},
        ]
    })
    
    return rt
});

4.app.js

require.config({
    baseUrl:'js',
    paths:{
        jquery:'base/jquery1'
    }
})

require(['jquery','tool/routes'],($,routes)=>{
    console.log('入口js')
    $("#btn").click(()=>{
        let path = $("#path").val()
        routes.push({path})
    })
    
})

5.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script data-main="app" src="js/base/require.js"></script>
</head>
<body>
    <input type="text" id="path"><button id="btn">跳转</button>
</body>
</html>

6.运行结果

取个昵称要人命

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手写前端路由

手写前端路由思路：通过监听location的hash值实现1.简单结构2.base中的jquery和require是从cdn上下载的3.cart.js与user.jsdefine(['jquery'], ($)=>{ return ()=>{ $("bo...
复制链接

扫一扫