一个响应式组件化单页面框架

无任何依赖

虚拟 dom

数据驱动视图更新

声明式组件化

HTML 语法声明组件

使用方法:

npm i yrv.js

"%# #%"                    数据占位符。html模板中的数据占位符最终会渲染成data中对应的真实数据"<%%template%%><%%/template%%>" 用于标记html模板,以便yrv-extension插件高亮html标签"<%%style%%><%%/style%%>" 用于标记css模板,以便yrv-extension插件高亮css"{   }"                    函数运行符。html模板中的函数运行符最终会将JavaScript函数返回的真实数据渲染到dom中。("{}"中可以使用"%##%"数据占位符,"{}"最终会将JavaScript函数返回值和数据占位符在data中的对应真实数据拼接成字符串后渲染到dom,比如"{%#id#%+'_icon'}",假如id对应在data中为1，那么渲染到dom中为"1_icon"。假如"{}"中不包含%##%,那么直接将JavaScript函数运行结果渲染到dom)"for="value _in_ values"   for _in_ 循环指令。html模板中遍历数据渲染页面."childDomData"                将当前dom中data传到子dom中("适用于当前dom为父dom通过for指令渲染，但当前dom不通过for指令渲染子dom,仅仅将当前dom中data传递到子dom中。 childDomData="$this" 当前dom为非for指令渲染的子dom时候使用,因为当前dom子dom无法访问for指令对应的Array data,所以将当前dom data直接传递给子dom.childDomData="$this"传递的data,子dom中使用对应数据，不需要使用.访问对应数据")"domData"                     将父dom中data传递到当前dom中("适用于当前dom为父dom通过for指令渲染，当前dom通过for指令渲染子dom,需要将父dom中对应当前dom的Array data传递到当前dom,以便当前dom可以通过for指令渲染子dom")rv-event="eventName"    用于监听事件(包括Window 事件属性,Form 事件,Keyboard 事件,Mouse 事件等等)。eventName为在当前RV对象methods中声明的函数。事件参数会通过参数传递到eventName函数中。rv-watch="value"         用于观察input标签value值，value值变化会自动更新data中对应value

letmyData={parent:"parent",child:"child",pcolor:"red",c1color:"blue",c2color:"green",child2:"child2",time:10000,pkey:"dddd",componentColor:"red",//用于自定义组件的数据componentCotent:"componentCotent 888",//用于自定义组件的数据componentValue:"componentValue 888",//用于自定义组件的数据组件week:[{id:11,content:"111",},{id:22,content:"222",},{id:33,content:"333",},],};window.data=myData;//控制台修改data数据，视图自动刷新内容varrv=newRV({//创建对象el:"#app",//el对象挂载的节点style:`  <%%style%%>  <%%/style%%>  `,//css样式data:myData,//数据对象，用于驱动视图更新，数据变化，视图自动更新template:`  <%%template%%>  <div key="1"          >                         "%#parent#%"                         <p key="2">                             "%#child#%"                         </p>                         <p key="3">                            "%#child2#%"                         </p>                         <div key="4">                            <p key="{%#v.id#%+'_content'}" childDomData="v" for="v _in_ week"  domData="week">"%#v.content#%"</p>                         </div>                         <MyComponent content="%#componentCotent#%"  time="{Math.floor(new Date()/1000)+'_ttt'}" value="%#componentValue#%" key="888"></MyComponent>                       </div>  <%%/template%%>  `,methods:{test1(){this.methods.test2()//调用test2()函数}test2(){this.data// 访问data数据}},watch:{parent(){alert("parent,change");}child(){alert("child,change");}child2(){alert("child2,change");}}});rv.run(callback(this)=>{});//callback 运行时候执行的函数functionclickDiv(){rv.data.parent=`click Div time:${newDate()/1000}`;//点击更新data，视图自动更新}functionclickP1(){rv.data.child=`click p1 time:${newDate()/1000}`;//点击更新data变化,视图自动更新}functionclickP2(){rv.data.child2=`click p2 time:${newDate()/1000}`;//点击更新data变化,视图自动更新}

<tbodycellspacing="0"cellpadding="0"id="calendar"style="text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border: 0px dotted #1C6FA5;"align="center"border="1"key="tbody"><trstyle="cursor:hand"key="%#week.id#%"for="week _in_ weeks"domData="week"><tdkey="%#v.id#%"onclick="clickDay(this)"style="%#v.style#%"lable="%#v.lable#%"onMouseover="mouseOver(this)"onMouseOut="mouseOut(this)"childDomData="v"for="v _in_ week"><pkey="{%#v.id#%+'_content'}"style="margin-block-start: 0em;margin-block-end: 0em">        "%#v.content#%"</p><pkey="{%#v.id#%+'_lunarInfo'}"style="margin-block-start: 0em;margin-block-end: 0em"time="{new Date()}">        "%#v.lunarInfo#%"</p></td></tr></tbody>

varrouterConfig=[{path:"login",//path对应组件路径component:login,//component对应组件param:"",ismain:true},{path:"index",component:manager,param:"",ismain:false},]exportdefaultrouterConfig

letrv=newRV("#app",{template:`            <%%template%%>            <div key="main">                <routerview/>            </div>            <%%/template%%>        `,style:commonStyle,data:{key:1,},//数据对象，用于驱动视图更新，数据变化，视图自动更新methods:{},watch:{}})rv.run(()=>{console.log("rv.run")})

RV.component用于声明组件的方法,RV组件构造函数形参componentParam对象属性name 为RV组件名字RV组件构造函数形参componentParam对象属性template 为RV组件html声明模板 （::属性绑定方法到组件）RV组件构造函数形参componentParam对象属性style 为RV组件声明css样式RV组件构造函数形参componentParam对象属性props 为RV组件属性,目的为暴漏给父控件用于设置组件相应参数RV组件构造函数形参componentParam对象属性data 为RV组件dataRV组件构造函数形参componentParam对象属性methods，为RV组件method对象，在对象中创建方法以及回调。其中方法中的this指向此组件RV组件构造函数形参componentParam对象属性onRun 为RV组件生命周期，组件运行时候触发，只执行一次RV组件构造函数形参componentParam对象属性onDomChange为RV组件生命周期，虚拟dom应用真实数据之前调用RV组件构造函数形参componentParam对象属性onInit为RV组件生命周期，第一次虚拟dom应用真实数据之前调用RV组件构造函数形参componentParam对象属性onMount为RV组件生命周期，组件挂载时触发RV组件构造函数形参componentParam对象属性onUnMount为RV组件生命周期，组件卸载时触发RV组件构造函数形参componentParam对象属性watch为RV组件对象，用于观察组件data数据变化RV组件对象函数内调用this.$emit({name,value},toParent?) 发送事件到其他组件 ,name为事件名称,value为事件值.toParent是否将此事件发送到父组件 默认trueRV组件对象函数内调用this.$on(event,(value)=>{},fromParent?) 组件监听其他组件发送的事件，event为事件名,value为事件传过的值,from是否为从父组件注册监听事件 默认falseRV组件对象函数内调用this.$ref(componentName,componentKey?)访问组件,可以访问子组件的方法。componentName已用use方法注册过组件名，componentKey已用use方法注册过组件key.默认trueRV组件对象函数内调用this.$routeChange({path,paramObj},parentRouteChange?) 发送路由改变事件，更新页面组件。（仅用于组件为页面）需要在路由配置文件中注册组件.parentRouteChange为true时发送路由改变到父页面组件，否则发送到当前页面组件RV组件对象函数内调用this.$getRouteInfo() 获取组件路由信息，返回{prevPath,path,param}信息RV组件对象函数内调用this.getComponentUniqueTag() 获取组件唯一标记RV组件对象函数内调用this.getParentComponentName()  获取当前组件父组件名字RV组件模板插槽标签slot，slot标签name属性用于区分插槽，如果组件内只有一个插槽这不需要name属性

varcon=RV.component({//定义自定义RV组件name:"MyComponent",//定义RV组件名字template:`        <%%template%%>            <div key="aaa">             <p key="bbb" time="%#time#%" componentValue="%#pvalue#%">"%#pcontent#%"</p>                <slot name="foot" key="slot"></slot>   <!--slot标签为组件添加插槽-->             <div>        <%%/template%%>        `,//定义RV组件,HTML语法声明组件模板style:`        <%%style%%>        .aaa {            background-color: red        }        .bbb {            width: 500px;            height:200px;        }        <%%/style%%>        `,//定义RV组件样式表,css语法声明组件样式props:{//定义RV组件属性,用于外部设值组件属性time:"1000",content:"a custom component",value:"componentValue"},data:{//定义RV组件data,data数据变化，自动更新模板内容pcontent:"a custom component",pcolor:"yellow",time:10000,pvalue:"cvalue"},methods:{test1(){//其中this指向此组件this.methods.test2()}test2(){this.method.clickMyCon()//此方法通过::属性绑定到此组件}}onRun(){//定义自定义RV组件运行代码,用于运行RV组件相关JS代码,RV组件启动时启动此方法let colors=['red','green','blue','yellow','gray','white','black']setInterval(()=>{this.data.pcontent=this.props.contentthis.data.time=this.props.timethis.data.pvalue=this.props.valuethis.data.pcolor=colors[getRandomInt(6)]/*将此组件的color值变化发送到其他组件                其他组件在method中声明组件名+事件值+'event'方法接收此变化                $on("Color",(color)=>{                    此事件在组件调用this.$emit({name:"Color",value:this.data.pcolor})时触发                })                */this.$emit({name:"Color",value:this.data.pcolor})},1000)functiongetRandomInt(max){returnMath.floor(Math.random()*Math.floor(max));}},onDomChange(){//dom 变化时触发，用于运行dom相关代码},watch:{pcolor(){console.log(`pcolorChange,change:`)}},onMount(){//组件挂载时候调用}onUnMount(){//组件卸载时调用}onInit(){//用于初始化组件属性}})

rv=newRV({//创建对象el:"#app",//el对象挂载的节点sdata:myData,template:`  <%%template%%>  <div key="1">                         "%#parent#%"                         <p key="2">                             "%#child#%"                         </p>                         <p key="3">                            "%#child2#%"                         </p>                         <div key="4">                            <p key="{%#v.id#%+'_content'}" childDomData="v" for="v _in_ week"  domData="week">"%#v.content#%"</p>                         </div>                         <MyComponent ::clickMyCon="fun2" content="%#componentCotent#%"  time="{Math.floor(new Date()/1000)+'_ttt'}" value="%#componentValue#%" key="888">                             <div slot="foot">"插槽demo"</div>                         </MyComponent>                       </div>  <%%/template%%>  `,// MyComponent为自定义RV组件名字，定义组件时name值.content,value,time为定义组件时属性,定义组件时props值methods:{$on("Color",(color)=>{//组件MyComponent调用this.$emit({name:"Color",value:this.data.pcolor}) 会触发此函数，color为新值//this指向本组件,通过this可以访问本组件      this.methods.fun1()})fun1(){},fun2(){//此方法绑定到MyComponent组件clickMyCon方法上}}});rv.use(con);//调用rv对象的use方法注册自定义组件

DEMO