成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

broadcast.js

dreamans / 2148人閱讀

摘要：機(jī)制跨小程序頁(yè)面的事件注冊(cè)，派發(fā)，廣播機(jī)制。代碼實(shí)現(xiàn)通過調(diào)用注冊(cè)事件。通常我們需要特意綁定然后才能使用綁定方式推薦使用

機(jī)制：

跨小程序頁(yè)面的事件注冊(cè)，派發(fā)，廣播機(jī)制。

代碼實(shí)現(xiàn)

var broadcast = {
  // 通過調(diào)用 broadcast.on 注冊(cè)事件。其他頁(yè)面都可以通過調(diào)用 broadcast.fire 觸發(fā)該事件
  // 參數(shù)說(shuō)明：如果 isUniq 為 true，該注冊(cè)事件將唯一存在；如果值為 false或者沒有傳值，每注冊(cè)一個(gè)事件都將會(huì)被存儲(chǔ)下來(lái)
  on: function (name, fn, isUniq) {
    this._on(name, fn, isUniq, false)
  },
  // 通過調(diào)用 broadcast.once 注冊(cè)的事件，在觸發(fā)一次之后就會(huì)被銷毀
  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
  },
  // 觸發(fā)事件
  // 參數(shù)說(shuō)明：name 表示事件名，data 表示傳遞給事件的參數(shù)
  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
業(yè)務(wù)上的應(yīng)用舉例

1 app.js 里面注冊(cè)一個(gè)監(jiān)聽登陸頁(yè)面登錄成功的事件

步驟如下：

注冊(cè)一個(gè)監(jiān)聽登錄成功的事件

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

在 login 頁(yè)面登錄成功后，觸發(fā)該事件

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

2 在商品報(bào)損頁(yè)注冊(cè)一個(gè)監(jiān)聽報(bào)損商品 code 的事件

這個(gè)例子主要體現(xiàn)了使用 broadcast.fire 進(jìn)行傳參的功能

// 引入 broadcast
var {
  broadcast
} = require("../../utils/util")
// 觸發(fā)事件 setBrokenBikeCode
// "bikeid": "0100010010"
broadcast.fire("setBrokenBikeCode", "0100010010")
// 引入 broadcast
var {
  broadcast
} = require("../../utils/util")
...
function next (bikecode) {
   that.setData({
      bikecode
   })
}
...
// 注冊(cè)事件 setBrokenBikeCode
broadcast.on("setBrokenBikeCode", (bikecode) => {
   next(bikecode)
})

3 適當(dāng)?shù)臅r(shí)候使用 broadcast.on 的時(shí)候需要綁定 this 值

綁定方式1：

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

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

綁定方式2：

推薦使用

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96525.html

相關(guān)文章

  • 原生js寫一個(gè)無(wú)縫輪播圖插件(支持vue)

    摘要：輪播圖插件前言寫這個(gè)插件的原因前段時(shí)間準(zhǔn)備用加上網(wǎng)易云的接口，模擬網(wǎng)易云音樂移動(dòng)端。目前主要實(shí)現(xiàn)了無(wú)縫輪播，自動(dòng)播放，端左右按鈕點(diǎn)擊切換，移動(dòng)端手勢(shì)滑動(dòng)切換。 輪播圖插件(Broadcast.js) 前言：寫這個(gè)插件的原因 前段時(shí)間準(zhǔn)備用vue加上網(wǎng)易云的nodejs接口，模擬網(wǎng)易云音樂移動(dòng)端。因?yàn)橄胱约簩懸槐樗械拇a以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

    MSchumi 評(píng)論0 收藏0

  • 原生js寫一個(gè)無(wú)縫輪播圖插件(支持vue)

    摘要：輪播圖插件前言寫這個(gè)插件的原因前段時(shí)間準(zhǔn)備用加上網(wǎng)易云的接口，模擬網(wǎng)易云音樂移動(dòng)端。目前主要實(shí)現(xiàn)了無(wú)縫輪播，自動(dòng)播放，端左右按鈕點(diǎn)擊切換，移動(dòng)端手勢(shì)滑動(dòng)切換。 輪播圖插件(Broadcast.js) 前言：寫這個(gè)插件的原因 前段時(shí)間準(zhǔn)備用vue加上網(wǎng)易云的nodejs接口，模擬網(wǎng)易云音樂移動(dòng)端。因?yàn)橄胱约簩懸槐樗械拇a以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

    hatlonely 評(píng)論0 收藏0

  • 原生js寫一個(gè)無(wú)縫輪播圖插件(支持vue)

    摘要：輪播圖插件前言寫這個(gè)插件的原因前段時(shí)間準(zhǔn)備用加上網(wǎng)易云的接口，模擬網(wǎng)易云音樂移動(dòng)端。目前主要實(shí)現(xiàn)了無(wú)縫輪播，自動(dòng)播放，端左右按鈕點(diǎn)擊切換，移動(dòng)端手勢(shì)滑動(dòng)切換。 輪播圖插件(Broadcast.js) 前言：寫這個(gè)插件的原因 前段時(shí)間準(zhǔn)備用vue加上網(wǎng)易云的nodejs接口，模擬網(wǎng)易云音樂移動(dòng)端。因?yàn)橄胱约簩懸槐樗械拇a以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

    褰辯話 評(píng)論0 收藏0

  • 我推薦的一些前端開發(fā)工具

    摘要：性能卓越的模板引擎簡(jiǎn)潔的模版語(yǔ)法，簡(jiǎn)單的，關(guān)鍵還能前后端共用模板，簡(jiǎn)直就是前端開發(fā)利器。是由阿里巴巴部門推出的矢量圖標(biāo)管理網(wǎng)站。是一個(gè)簡(jiǎn)單的設(shè)備檢測(cè)工具。 artTemplate 性能卓越的 js 模板引擎 簡(jiǎn)潔的模版語(yǔ)法，簡(jiǎn)單的API，關(guān)鍵還能前后端（Nodejs）共用模板，簡(jiǎn)直就是前端開發(fā)利器。今天有個(gè)想法，把a(bǔ)rtTemplate封裝下，模版render后給input等注冊(cè)幾個(gè)事...

    nodejh 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<