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

資訊專欄INFORMATION COLUMN

web Notification接口的簡(jiǎn)單的封裝--nf.js

learn_shifeng / 915人閱讀

摘要：花了兩個(gè)小時(shí)重溫了一下的接口，雖然簡(jiǎn)單，但我覺(jué)得還應(yīng)該有更方便的使用方式，所以就對(duì)這個(gè)的接口進(jìn)行了簡(jiǎn)單的封裝。加上注釋也就行，想看源碼的同學(xué)請(qǐng)移步。以下就是對(duì)這個(gè)小庫(kù)的功能的一個(gè)簡(jiǎn)單的介紹。默認(rèn)是我的名稱字符串，彈窗的提示信息。

花了兩個(gè)小時(shí)重溫了一下html5的Web Notification接口，雖然簡(jiǎn)單，但我覺(jué)得還應(yīng)該有更方便的使用方式，所以就對(duì)這個(gè)API的接口進(jìn)行了簡(jiǎn)單的封裝。源碼放在了我的github上。加上注釋也就90行，想看源碼的同學(xué)請(qǐng)移步seeyou404--nf.js。以下就是對(duì)這個(gè)小庫(kù)的功能的一個(gè)簡(jiǎn)單的介紹。

基本使用 
  import NF from "./nf";
  
  //創(chuàng)建一個(gè)實(shí)例對(duì)象
  const nf = new NF()
 ?//或者傳入一個(gè)配置選項(xiàng)信息：options應(yīng)該是一個(gè)對(duì)象
  const nf = new NF(options);
利用上面的方法就能創(chuàng)建了一個(gè)Notification通知窗口
options選項(xiàng) 
options選項(xiàng)是Notification的基本配置選項(xiàng)，除了我們常規(guī)使用的一些選項(xiàng)外，我們還可以在這里面指定事件處理程序函數(shù)
  {
 ? ?"title": "字符串， 彈窗的標(biāo)題。默認(rèn)是我的github名稱："seeyou404"",
    
 ? ?"body": "字符串，彈窗的提示信息。默認(rèn)是我的github地址："https://github.com/seeyou404"",
    
 ? ?"icon": "字符串，彈窗顯示的圖片的路徑。默認(rèn)是我的github頭像："https://avatars2.githubusercontent.com/u/12776545?v=3&s=466"",
    
 ? ?"tag": "字符串，當(dāng)前彈窗的標(biāo)識(shí)符。避免顯示多個(gè)彈窗",
    
 ? ?"silent": "布爾值，彈窗出現(xiàn)的時(shí)候是否需要聲音，不能和vibrate共存",
    
    "sound": "指定彈窗出現(xiàn)的時(shí)候的音頻地址",
    
    "vibrate": "設(shè)置振動(dòng)模式",
    
 ? ?"renotify": "布爾值，新彈窗出現(xiàn)的時(shí)候是否需要覆蓋之前的，必須和tag參數(shù)共存",
    
    "click": "function 彈窗點(diǎn)擊時(shí)候的事件監(jiān)聽器",
    
 ? ?"close": "function 彈窗關(guān)閉時(shí)候的事件監(jiān)聽器",
    
    "show": "function 彈窗出現(xiàn)時(shí)候的事件監(jiān)聽器",
    
    "error": "function 彈窗出現(xiàn)錯(cuò)誤時(shí)候的事件監(jiān)聽器"
  }
methods

NF的實(shí)例主要有五個(gè)基本的方法:

click([callback])

添加點(diǎn)擊事件，callback的默認(rèn)值是options.click方法

const nf = new NF();
nf.click();
或者
nf.click(() => {
  alert("clicked");
})
show([callback])

添加show事件，callback的默認(rèn)值是options.show方法

const nf = new NF();
nf.show();
或者
nf.show(() => {
  alert("showed");
})
close([callback])

添加點(diǎn)擊事件，callback的默認(rèn)值是options.close方法

const nf = new NF();
nf.close();
或者
nf.close(() => {
  alert("closed");
})
error([callback])

添加點(diǎn)擊事件，callback的默認(rèn)值是options.error方法

const nf = new NF();
nf.error();
或者
nf.error(() => {
  alert("errored");
})
shut()

關(guān)閉彈窗

const nf = new NF();
nf.shut();
綜述

上面的四個(gè)事件處理程序支持鏈?zhǔn)秸{(diào)用，同時(shí)，我們也應(yīng)該知道，為添加事件處理程序有兩種基本形式：在options中聲明事件處理函數(shù)和顯示調(diào)用事件處理方法。所以我們可以像下面這樣使用。

const nf = new NF({
  title: "你的標(biāo)題",
  body: "你的內(nèi)容",
  icon: "你的icon圖片",
  click(){
    alert("clicked");
  },
  show(){
    alert("showd")
  },
  close(){
    alert("closeed");
  },
  error(){
    alert("errored");
  }
})
//聲明的時(shí)候就指定了事件處理程序

//也可以這樣使用
nf.show().click(function(){alert("你怎么又彈出來(lái)了")}).close();

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

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

相關(guān)文章

  • 【PWA學(xué)習(xí)與實(shí)踐】(5)在Web中進(jìn)行服務(wù)端消息推送

    摘要：本文是學(xué)習(xí)與實(shí)踐系列的第五篇文章。實(shí)際上，消息推送與提醒是兩個(gè)功能和。在這一篇里，我們先來(lái)學(xué)習(xí)如何使用進(jìn)行消息推送。而當(dāng)服務(wù)端要推送消息時(shí)，會(huì)使用私鑰對(duì)發(fā)送的數(shù)據(jù)進(jìn)行數(shù)字簽名，并根據(jù)數(shù)字簽名生成一個(gè)叫請(qǐng)求頭。 《PWA學(xué)習(xí)與實(shí)踐》系列文章已整理至gitbook - PWA學(xué)習(xí)手冊(cè)，文字內(nèi)容已同步至learning-pwa-ebook。轉(zhuǎn)載請(qǐng)注明作者與出處。 本文是《PWA學(xué)習(xí)與實(shí)踐》系...

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

  • Ant design的Notification源碼分析

    摘要：通過(guò)將實(shí)例傳入回調(diào)函數(shù)。添加再回過(guò)頭來(lái)看回調(diào)函數(shù)的內(nèi)容。其中的作用是一次調(diào)用傳入的各函數(shù)，其中方法是移除中相應(yīng)的節(jié)點(diǎn)，是傳入的關(guān)閉標(biāo)簽后的回調(diào)函數(shù)。 notification簡(jiǎn)介 showImg(https://segmentfault.com/img/remote/1460000014117558?w=483&h=135); notification就是通知提醒框，在系統(tǒng)四個(gè)角顯示通...

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

  • 基于Web Notification的前端桌面彈窗

    摘要：只有用戶允許的權(quán)限下，才能起到作用，避免某些網(wǎng)站的廣告濫用或其它給用戶造成影響。對(duì)象提供了方法請(qǐng)求用戶當(dāng)前來(lái)源的權(quán)限以顯示通知。代表通知的一個(gè)識(shí)別標(biāo)簽，相同時(shí)只會(huì)打開同一個(gè)通知窗口。要在通知中顯示的圖像的。通知保持有效不自動(dòng)關(guān)閉，默認(rèn)為。 最近在和阿里云客服進(jìn)行備案溝通的過(guò)程中，時(shí)?？吹桨⒗镌颇軌蛟谧烂嫔蠈?shí)現(xiàn)消息推送，感覺(jué)很是神奇，因此就進(jìn)行了下搜索學(xué)習(xí)；發(fā)現(xiàn)主要用到了Web Not...

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

  • 基于Web Notification的前端桌面彈窗

    摘要：只有用戶允許的權(quán)限下，才能起到作用，避免某些網(wǎng)站的廣告濫用或其它給用戶造成影響。對(duì)象提供了方法請(qǐng)求用戶當(dāng)前來(lái)源的權(quán)限以顯示通知。代表通知的一個(gè)識(shí)別標(biāo)簽，相同時(shí)只會(huì)打開同一個(gè)通知窗口。要在通知中顯示的圖像的。通知保持有效不自動(dòng)關(guān)閉，默認(rèn)為。 最近在和阿里云客服進(jìn)行備案溝通的過(guò)程中，時(shí)?？吹桨⒗镌颇軌蛟谧烂嫔蠈?shí)現(xiàn)消息推送，感覺(jué)很是神奇，因此就進(jìn)行了下搜索學(xué)習(xí)；發(fā)現(xiàn)主要用到了Web Not...

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

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

0條評(píng)論

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