web Notification接口的簡單的封裝--nf.js

花了兩個小時重溫了一下html5的Web Notification接口，雖然簡單，但我以爲還應該有更方便的使用方式，因此就對這個API的接口進行了簡單的封裝。源碼放在了個人github上。加上註釋也就90行，想看源碼的同窗請移步seeyou404--nf.js。如下就是對這個小庫的功能的一個簡單的介紹。

基本使用

import NF from './nf';
  
  //建立一個實例對象
  const nf = new NF()
  //或者傳入一個配置選項信息：options應該是一個對象
  const nf = new NF(options);

利用上面的方法就能建立了一個Notification通知窗口

options選項

options選項是Notification的基本配置選項，除了咱們常規使用的一些選項外，咱們還能夠在這裏面指定事件處理程序函數

{
    'title': "字符串， 彈窗的標題。默認是個人github名稱：'seeyou404'",
    
    'body': "字符串，彈窗的提示信息。默認是個人github地址：'https://github.com/seeyou404'",
    
    'icon': "字符串，彈窗顯示的圖片的路徑。默認是個人github頭像：'https://avatars2.githubusercontent.com/u/12776545?v=3&s=466'",
    
    'tag': "字符串，當前彈窗的標識符。避免顯示多個彈窗",
    
    'silent': "布爾值，彈窗出現的時候是否須要聲音，不能和vibrate共存",
    
    'sound': "指定彈窗出現的時候的音頻地址",
    
    'vibrate': "設置振動模式",
    
    'renotify': "布爾值，新彈窗出現的時候是否須要覆蓋以前的，必須和tag參數共存",
    
    'click': "function 彈窗點擊時候的事件監聽器",
    
    'close': "function 彈窗關閉時候的事件監聽器",
    
    'show': "function 彈窗出現時候的事件監聽器",
    
    'error': "function 彈窗出現錯誤時候的事件監聽器"
  }

methods

NF的實例主要有五個基本的方法:

click([callback])

添加點擊事件，callback的默認值是options.click方法

const nf = new NF();
nf.click();
或者
nf.click(() => {
  alert('clicked');
})

show([callback])

添加show事件，callback的默認值是options.show方法

const nf = new NF();
nf.show();
或者
nf.show(() => {
  alert('showed');
})

close([callback])

添加點擊事件，callback的默認值是options.close方法

const nf = new NF();
nf.close();
或者
nf.close(() => {
  alert('closed');
})

error([callback])

添加點擊事件，callback的默認值是options.error方法

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

shut()

關閉彈窗

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

綜述

上面的四個事件處理程序支持鏈式調用，同時，咱們也應該知道，爲添加事件處理程序有兩種基本形式：在options中聲明事件處理函數和顯示調用事件處理方法。因此咱們能夠像下面這樣使用。

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

//也能夠這樣使用
nf.show().click(function(){alert('你怎麼又彈出來了')}).close();