溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

微信小程序前端開發(fā)架構(gòu)

發(fā)布時(shí)間：2020-06-23 12:34:51 來(lái)源：網(wǎng)絡(luò) 閱讀：2073 作者：沙耶博士 欄目：web開發(fā)

一、目標(biāo)

1、提升開發(fā)速度
2、更好的響應(yīng)需求變化

二、面臨的問(wèn)題

業(yè)務(wù)需求的變化是永恒的，而變化勢(shì)必會(huì)引發(fā)代碼的變化，新增代碼或修改代碼。

改動(dòng)的地方越多，引入新的錯(cuò)誤幾率就越大。

微信小程序前端開發(fā)架構(gòu)

三、應(yīng)對(duì)思路

最小化原則，確保每次業(yè)務(wù)需求變化可以用最小的代價(jià)來(lái)完成。

1、視圖模板化，組件化

2、邏輯代碼對(duì)象化、版本化

3、事件傳遞參數(shù)化、代理化

四、架構(gòu)模型

1、視圖

微信小程序前端開發(fā)架構(gòu)

2、邏輯與事件通信

視圖層需要傳遞一組參數(shù)（對(duì)象名、方法名、方法需要的參數(shù)）

微信小程序前端開發(fā)架構(gòu)

五、代碼示例

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

//js代碼，page頁(yè)里只有一個(gè)事件路由業(yè)務(wù)函數(shù)
bindViewEvent:function(e){
    app.excute(this,e);
 }

 //app.js 
  /*
  * 事件路由函數(shù)
  */
  excute:function(that,e){
    new umitech(that,this.config).extend(e);//動(dòng)態(tài)加載對(duì)象，并調(diào)用相關(guān)方法
  }

github示例代碼

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手