broadcast.js

dreamans 發布于2019-08-23 10:37 / 2141人閱讀

摘要：機制跨小程序頁面的事件注冊，派發，廣播機制。代碼實現通過調用注冊事件。通常我們需要特意綁定然后才能使用綁定方式推薦使用

機制：

跨小程序頁面的事件注冊，派發，廣播機制。

代碼實現

var broadcast = {
  // 通過調用 broadcast.on 注冊事件。其他頁面都可以通過調用 broadcast.fire 觸發該事件
  // 參數說明：如果 isUniq 為 true，該注冊事件將唯一存在；如果值為 false或者沒有傳值，每注冊一個事件都將會被存儲下來
  on: function (name, fn, isUniq) {
    this._on(name, fn, isUniq, false)
  },
  // 通過調用 broadcast.once 注冊的事件，在觸發一次之后就會被銷毀
  once: function (name, fn, isUniq) {
    this._on(name, fn, isUniq, true)
  },
  _on: function (name, fn, isUniq, once) {
    var eventData
    eventData = broadcast.data
    var fnObj = {
      fn: fn,
      once: once
    }
    if (!isUniq && eventData.hasOwnProperty(name)) {
      eventData[name].push(fnObj)
    } else {
      eventData[name] = [fnObj]
    }
    return this
  },
  // 觸發事件
  // 參數說明：name 表示事件名，data 表示傳遞給事件的參數
  fire: function (name, data, thisArg) {
    console.log("[broadcast fire]: " + name, data)
    var fn, fnList, i, len
    thisArg = thisArg || null
    fnList = broadcast.data[name] || []
    if (fnList.length) {
      for (i = 0, len = fnList.length; i < len; i++) {
        fn = fnList[i].fn
        fn.apply(thisArg, [data, name])
        if (fnList[i].once) {
          fnList.splice(i, 1)
          i--
          len--
        }
      }
    }
    return this
  },
  data: {}
}
 
module.exports = broadcast

業務上的應用舉例

1 app.js 里面注冊一個監聽登陸頁面登錄成功的事件

步驟如下：

注冊一個監聽登錄成功的事件

// 引入 broadcast
const {
  broadcast
} = require("utils/util")
// 注冊一個監聽登錄成功的事件
// 在login頁面執行
broadcast.on("login_success", function () {
  wx.redirectTo({
    url: `/pages/${name}/index`
  })
})

在 login 頁面登錄成功后，觸發該事件

// 引入 broadcast
var {
  broadcast
} = require("../../utils/util")
// 觸發事件 login_success
broadcast.fire("login_success")

2 在商品報損頁注冊一個監聽報損商品 code 的事件

這個例子主要體現了使用 broadcast.fire 進行傳參的功能

// 引入 broadcast
var {
  broadcast
} = require("../../utils/util")
// 觸發事件 setBrokenBikeCode
// "bikeid": "0100010010"
broadcast.fire("setBrokenBikeCode", "0100010010")

// 引入 broadcast
var {
  broadcast
} = require("../../utils/util")
...
function next (bikecode) {
   that.setData({
      bikecode
   })
}
...
// 注冊事件 setBrokenBikeCode
broadcast.on("setBrokenBikeCode", (bikecode) => {
   next(bikecode)
})

3 適當的時候使用 broadcast.on 的時候需要綁定 this 值

綁定方式1：

var that = this
broadcast.on("showRiding", function() {
 console.log(this) // 值為null
 that.showRiding()
})

原因：如上代碼可見，在 broadcast.on 里面打印出的 this 值為 null，在這個函數體內 this 指向不明確所以值為 null。通常我們需要特意綁定 this, 然后才能使用

綁定方式2：

推薦使用

broadcast.on("showRiding", function() {
 this.showRiding()
}.bind(this))

GPU云服務器云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96525.html

原生js寫一個無縫輪播圖插件(支持vue)

摘要：輪播圖插件前言寫這個插件的原因前段時間準備用加上網易云的接口，模擬網易云音樂移動端。目前主要實現了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。輪播圖插件(Broadcast.js) 前言：寫這個插件的原因前段時間準備用vue加上網易云的nodejs接口，模擬網易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

MSchumi 2019-08-02 16:03 評論0 收藏0
原生js寫一個無縫輪播圖插件(支持vue)

摘要：輪播圖插件前言寫這個插件的原因前段時間準備用加上網易云的接口，模擬網易云音樂移動端。目前主要實現了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。輪播圖插件(Broadcast.js) 前言：寫這個插件的原因前段時間準備用vue加上網易云的nodejs接口，模擬網易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

hatlonely 2019-08-22 18:09 評論0 收藏0
原生js寫一個無縫輪播圖插件(支持vue)

摘要：輪播圖插件前言寫這個插件的原因前段時間準備用加上網易云的接口，模擬網易云音樂移動端。目前主要實現了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。輪播圖插件(Broadcast.js) 前言：寫這個插件的原因前段時間準備用vue加上網易云的nodejs接口，模擬網易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

褰辯話 2019-08-30 15:53 評論0 收藏0
我推薦的一些前端開發工具

摘要：性能卓越的模板引擎簡潔的模版語法，簡單的，關鍵還能前后端共用模板，簡直就是前端開發利器。是由阿里巴巴部門推出的矢量圖標管理網站。是一個簡單的設備檢測工具。 artTemplate 性能卓越的 js 模板引擎簡潔的模版語法，簡單的API，關鍵還能前后端（Nodejs）共用模板，簡直就是前端開發利器。今天有個想法，把artTemplate封裝下，模版render后給input等注冊幾個事...

nodejh 2019-08-21 10:32 評論0 收藏0