成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

broadcast.js

dreamans / 2190人閱讀

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

機(jī)制：

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

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

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

步驟如下：

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

// 引入 broadcast
const {
  broadcast
} = require("utils/util")
// 注冊(cè)一個(gè)監(jiān)聽(tīng)登錄成功的事件
// 在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)聽(tīng)報(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()
})

原因：如上代碼可見(jiàn)，在 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://m.hztianpu.com/yun/96525.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<