前端代码的三种设计模式

)}}})consthead=createCompose({state:{text:'page'},view:{renderHead(){return(

{text}

)}}})constPage=createComponent(compose({name:'page',state:{data:[]},view:{render(){<>{this.view.renderHead()}{this.view.renderTable()}}}},[table,head]))复制代码现在head和table都变成了一个组合，通过组合成为页面的一部分，所以它们可以共享彼此的context，而不需要通过props或Context额外传递或共享范围。除了组合模式，我们还总结了第三种模式，膜模式，我在前面的文章中提到过，今天我们将其简化。与组合模式相比，膜模式有一些共性，比如没有独立的上下文，不需要命名标识符，但两者也有很大的区别。膜是一种抽象模式。与复合模式相比，每张膜只能有一个模板。Compose和membrane可以结合使用。constpageTemplate=()=>{return{state:{name:'',},service:{init(){}},controller:{onMount(){this.service.init()}},view:{render(){return()}}}constPage1Membrane=createMembrane(pageTemplate(),{name:'page-1-membrane',service:{初始化(){this.setter.name('page-1-membrane')}}})constPage1Membrane=createMembrane(pageTemplate(),{name:'page-1-membrane',service:{init(){this.setter.name('page-2-membrane')}}})constPage1=createComponent(Page1Membrane)//renderPage1name===page-1-membraneconstPage2=createComponent(Page2Membrane)//renderPage2name===page-2-膜拷贝代码如果熟悉面向对象设计，你可能很快会想到膜和抽象类的特性有些相似，但是相对于抽象类，膜可以包含具体的实现，所以两者并不完全等效，但在设计上有一定的共性。在实际实践中，我们结合以上三种模式，像美人鱼一样使用UML图形库，在日常迭代中添加前端设计相关的内容。从实际结果可以看出，Think这些模式有助于改善前端设计的粗糙和不专业，同时可以提高前端代码的标准化，使用UML图更好的替代注释和文本文档来描述业务代码的组成关系