1.9.0 • Published 3 years ago
ming_router v1.9.0
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