微信小程序前端开发架构

一、目标

1、提升开发速度
2、更好的响应需求变化

二、面临的问题

业务需求的变化是永恒的,而变化势必会引发代码的变化,新增代码或修改代码。

改动的地方越多,引入新的错误几率就越大。

微信小程序前端开发架构

三、应对思路

最小化原则,确保每次业务需求变化可以用最小的代价来完成。

1、视图模板化,组件化

2、逻辑代码对象化、版本化

3、事件传递参数化、代理化

四、架构模型

1、视图

微信小程序前端开发架构

2、逻辑与事件通信

视图层需要传递一组参数(对象名、方法名、方法需要的参数)

微信小程序前端开发架构

五、代码示例

//wxml代码
<view 
bindtap='bindViewEvent' 
data-model="user" 
data-method="sayhello" 
data-text="hi,nihao">sayhello</view>

//js代码,page页里只有一个事件路由业务函数
bindViewEvent:function(e){
    app.excute(this,e);
 }

 //app.js 
  /*
  * 事件路由函数
  */
  excute:function(that,e){
    new umitech(that,this.config).extend(e);//动态加载对象,并调用相关方法
  }

github示例代码

转载于:https://blog.51cto.com/12008764/2142095

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值