BUI 發(fā)布訂閱

訂閱發(fā)布模式定義了一種一對多的依賴關(guān)系，讓多個訂閱者對象同時監(jiān)聽某一個主題對象。這個主題對象在自身狀態(tài)變化時，會通知所有訂閱者對象，使它們能夠自動更新自己的狀態(tài)。

全局訂閱

  // dom初始化完畢就可以執(zhí)行
  bui.on("pagereadybefore",function(){


  })
  // 頁面準(zhǔn)備完畢后觸發(fā)
  bui.on("pageready",function(){
    // 不管是web,還是native 最終都會觸發(fā) pageready 事件.
  })

路由訂閱

全局事件

具體查看 bui.router API
js
// 監(jiān)聽后退事件,只要觸發(fā)了后退, 不管通過按鈕觸發(fā),還是通過物理后退
router.on("back",function(e){
// 執(zhí)行
// e.target 跳轉(zhuǎn)后的頁面
// e.prevTarget 跳轉(zhuǎn)前的頁面
})
// 每次跳轉(zhuǎn)完成以后執(zhí)行
router.on("complete", function(e) {
// 執(zhí)行
// e.target 跳轉(zhuǎn)后的頁面
// e.prevTarget 跳轉(zhuǎn)前的頁面
})


控件訂閱

例子1: 用得最多的Tab選項卡.

  // 初始化一個控件
  var tab = bui.tab({
    id: "#id"
  })


  // tab有多種切換選項卡的方式, 所以只能在這里監(jiān)聽, 比方點擊可以切換, 滑動可以切換, 直接調(diào)用to也可以觸發(fā).
  tab.on("to",function(){
    var index = this.index();
    console.log(index);
  })


  // 執(zhí)行就會觸發(fā)一次
  tab.to(0)

例子2:

  // 初始化一個控件
  var dialog = bui.dialog({
    id: "#id"
  })


  // 監(jiān)聽打開事件, 對話框默認(rèn)是隱藏的, 隱藏的dom,在zepto.js 里面是拿不到寬高的,
  // 如果對話框里面有一些用到計算的地方, 應(yīng)該監(jiān)聽該實例打開以后才做控件初始化或計算.
  dialog.on("open",function(){
    // 對話框打開后才執(zhí)行
  })


  // 監(jiān)聽關(guān)閉事件
  dialog.on("close",function(){
    // 對話框關(guān)閉后執(zhí)行
  })

組件發(fā)布訂閱

單頁面上的組件通訊, 可以通過全局的 loader.on loader.trigger 等方法.

初始化

頁面組件加載了搜索組件跟列表組件

<component name="page/search/index"></component>
<component name="page/list/index"></component>

搜索組件: page/search/index.js

loader.define(["page/list/index"], function(list,require,export,module){
    // 組件從上到下執(zhí)行, on的監(jiān)聽必須在前面, 搜索組件監(jiān)聽了列表組件的點擊事件,
    loader.on("clickid",function(e){
        // 傳過來的參數(shù)
        console.log(e);
    })
})

列表組件: page/list/index.js

loader.define(function(require,export,module){




    $("#id").click(function(e){
      // 觸發(fā)了click事件, 搜索組件那邊會拿到對應(yīng)的參數(shù)做相應(yīng)處理.
      loader.trigger("clickid",e);
    })


})

自定義全局訂閱

自定義的命名應(yīng)該避免跟默認(rèn)已有的沖突, 必須在trigger觸發(fā)前先進(jìn)行注冊
js
// 在頁面監(jiān)聽
bui.on("page-list-refresh",function(e){
console.log(e)
// 傳過去的參數(shù)
})

js
// 在頁面監(jiān)聽
bui.trigger("page-list-refresh","傳過去的參數(shù)")


例子: 假如進(jìn)入列表需要權(quán)限, 進(jìn)入列表就通過 bui.page 插入了一個登錄頁, 登錄頁點擊校驗通過就要觸發(fā)關(guān)閉, 我們知道可以通過 bui.history.getPageDialog(module.id) 來獲取到對話框進(jìn)行關(guān)閉操作, 這種是在登錄頁的處理. 還有一些業(yè)務(wù)類, 之間交互比較復(fù)雜, 登錄頁需要不斷的require之前的模塊進(jìn)行操作, 我們可以嘗試另外一種方式. 登錄只做登錄該做的事.

列表頁: pages/list/index.js

var uipage = bui.page({
  url:"pages/login/index.html"
})


// 如果登錄成功,
bui.on("loginsuccess",function(user){
  // 關(guān)閉掉對話框
  uipage.close();


  // 并且在這個模塊可以方便的拿到當(dāng)前模塊相關(guān)信息處理.
})

登錄頁: pages/login/index.js

$("#login").click(function(){
  // 校驗帳號密碼
  var user = {
    name: "",
    password: ""
  };
  // 請求去校驗帳號密碼, 正確就返回true
  if( check(user) ){
    bui.ajax({
      url: "http://api/login",
      success: function(){
        // 告訴那些訂閱過 loginsuccess 的操作, 可以執(zhí)行了, 并把用戶信息傳了過去.
        bui.trigger("loginsuccess",user)
      }
    })
  }
})