ming_router

v1.9.0

Published

4 years ago

前端路由

0High
0Medium
0Low

minglie

ming_router

ming_router 是一个路由与组件库,目的是在不使用构建工具的情况下开发开发单页应用

cdn

https://unpkg.com/ming_router/src/index.js

访问路径

http://localhost:8888/index.html#/a

http://localhost:8888/index.html#/b

http://localhost:8888/index.html#/c

模板解析规则

"#usercard" : 从dom解析

"./usercard.html": 从html文件

"hello": 从字符串

组件

自定义组件必须中划线分割,tag名从函数名或类名转换而来类组件实例 MingRouter.componentMap.组件类名.组件key 函数组件无实例只能用 dom.setAttibute(k,v) 触发组件更新

组件demo01(组件定义)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./index.js"></script>
    <title>Document</title>
</head>
<body>
<div id="root">
    <user-card1 key="k1" onclick="changeImg()" id="c1Id" src="https://semantic-ui.com/images/avatar2/large/kristy.png"></user-card1>
    <hr/>
    <user-card2 type="1"></user-card2>
    <hr/>
    <user-card3></user-card3>
    <hr/>
    <user-card4/></user-card4>
    <hr/>
    <user-card5></user-card5>
</div>
</body>
</html>


<template id="usercard1Id">
    #usercard1Id ${props.id}
    <img width="100px" src="${props.src}">
</template>


<script>

    //user-card1 用模板创建组件
    MingRouter.registWebComponent(function UserCard1(props) {
        return `#usercard1Id`
    })

    // user-card2 html文件  或字符串做模板
    MingRouter.registWebComponent( function UserCard2(props) {
        if(props.type==1){
            return `<div>用返回做模板</div>`
        }else {
            return `./a.html`
        }
    })

    // user-card3 用html文件做模板
    MingRouter.registWebComponent(function UserCard3(props) {

        return `./a.html`
    })


    // user-card4 类组件
    MingRouter.registWebComponent(
            class UserCard4 extends MingRouter.WebComponent {
                render() {
                    return `<div>我是类组件</div>`;
                }
            });

    // user-card5 类组件
    MingRouter.registWebComponent(
            class UserCard5 extends MingRouter.WebComponent {
                static template= `#usercard1Id`;
            });


    //修改#c1Id的图片
    function changeImg(){
        document.querySelector("#c1Id").setAttribute("src","aa")
    }

</script>

组件demo02(类组件详情)

没有虚拟dom与diff算法,组件只是局部更改,则直接用js改即可 document.querySelector('user-card'). shadowRoot.querySelector('#myImgId'). setAttribute("src","aa") this.setState()会直接替换整个dom,效率不高

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./index.js"></script>
    <title>Document</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>






<!--mingRouter路由的模板-->
<template id="rootTemplateId">
    <h1>ming_router.js demo</h1>
    <hr/>
    <!--如果组件有多个实例则必须有唯一的属性key-->
    <user-card  id="userCardId" key="name11" image="https://semantic-ui.com/images/avatar2/large/kristy.png" onclick1="MingRouter.Page.user.methods.ok">
        <h2 slot="name">name11</h2>
        <span slot="role">Developer</span>
        <div slot="description" >
            I hate Internet Explorer
            <button onclick="alert(33)">插槽的按钮</button>
        </div>
    </user-card>
    <hr/>
    <user-card  id="userCardId" key="name12" image="https://semantic-ui.com/images/avatar2/large/kristy.png" onclick1="MingRouter.Page.user.methods.ok">
        <h2 slot="name">name12</h2>
    </user-card>
</template>


<!--userCard组件的模板 属性用this.props.age  , 方法用${this.selfName}.addAge  -->
<!--状态用this.state.age -->
<template id="userCardTemplateId">
    AAAAAAAAAAAAAAAAAA
    <button onclick="${this.selfName}.addAge()">组件的按钮</button>
    ${this.state.age}
    <img id="myImgId" src="${this.props.image}">

    <div>
        <slot name="name"></slot>
        <slot name="description"></slot>
        <slot name="role"></slot>
    </div>
</template>



<script>
    //#root 的路由映射,mingRouter默认挂载#root
    //通过 mingRouter1 = new MingRouter("#root1"); 创建新的路由
    mingRouter.mapping("/","#rootTemplateId");
    mingRouter.mapping("/a","#rootTemplateId")
    mingRouter.mapping("/b","<h1>BBBBBBBBBBB<h1/>")
</script>



<script>
    //自定他组件,每个UserCard会根据组件的key,生成唯一一个实例名this.selfName
    //MingRouter.componentMap.UserCard[key]
    class UserCard extends MingRouter.WebComponent {
        //https://www.yuque.com/docs/share/a87701d4-bb25-4d0a-b42d-225f834f9b7c?#C4kMr
        static template="#userCardTemplateId";

        constructor(props) {
            super(props);
            this.props = props;
        }
        //组件私有状态, this.setState({}) 会触发组件重新render
        state = {
            age: 1,
            hobby:"111"
        }
        //组件方法,模板中, 通过${this.selfName}.addAge() 使用
        addAge() {
            //console.log(44);
            let age = this.state.age + 1;
            this.setState({ age })
        }
        //发出ajax
        componentDidMount() {
            console.log("....componentDidMount..selfName==>", this.selfName)
        }

        /**
         * 通过
         * document.querySelector("#userCardId").setAttribute("image","https://sem.png")
         * 将触发此方法
         */
        componentWillReceiveProps(props) {
            console.log("....componentWillReceiveProps",props);
            //属性发生变化,重新渲染
            this.setState({})
        }
        /**
         * 返回组件样式,建议用全局样式,否则有样式重复问题
         */
        renderCss(){
            return `
                img{ width:20vw}
             `
        }

        /**
         * render优先级最低
         */
        // render(props) {
        //     return `
        //        <button onclick="${this.selfName}.addAge()"> aa </button>
        //        <div> ${props.image}  </div>
        //        <div>age: ${this.state.age}  </div>
        //        <div>hobby: ${this.state.hobby}  </div>
        //    `;
        // }
    }

    // 将UserCard注册为全局组件
    MingRouter.registWebComponent(UserCard)


</script>

路由demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/ming_router/src/index.js"></script>
    <title>路由demo</title>
</head>
<body>
<button id="renderA">renderA</button>
<div id="root">

</div>
<hr/>
<div id="root1">

</div>

<template id="template1">
    <h2>Flower ${M.a}</h2>
</template>
</body>

</html>

<script>
    M={}
    M.a=3;
    //自带一个#root路由实例mingRouter
    mingRouter.mapping('/a', "#template1",()=>{
        console.log("AAAAA")
    });
    mingRouter.mapping('/b', "/b.html")
    mingRouter.mapping('/c', `<div> AAAAAAAAA  </div>`)

    renderA.onclick=function(){
        M.a++;
        mingRouter.render()
    }
    //////////////////////////////////////////////////////////////////////////////
    //创建新的路由实例mingRouter1
    mingRouter1 = new MingRouter("#root1");
    //会匹配所有 a开头的路由,所以这两种路由不要共存 /a/  /a/b
    mingRouter1.mapping('/a/', `<div> AAAAAAAAA  </div>`)
    mingRouter1.mapping('/b', `<div> BBBBBBBBBBBBBBBB  </div>`)

</script>

路由切换刷新

      //不可返回
      MingRouter.replaceHash("/b")
     //可返回
     location.hash="#/b";
     //只改内容不改路由,类似后端转发,这个render不会执行路由mapping的回调
     mingRouter.render([path])

ming_router语雀文档

https://www.yuque.com/docs/share/a87701d4-bb25-4d0a-b42d-225f834f9b7c

参考demo

https://gitee.com/minglie/ming_node_router

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

ming_router

cdn

访问路径

模板解析规则

组件

组件demo01(组件定义)

组件demo02(类组件详情)

路由demo

路由切换刷新

ming_router语雀文档

参考demo