domVirtualCreateQueue.mjs

  1. import pmQueue from './pmQueue.mjs'
  2. import domVirtualCreate from './domVirtualCreate.mjs'
  5. /**
  6.  * 前端產生臨時DOM元素為對象並進行客製化處理，並通過佇列管控，限定一次處理一個。初始化後將回傳封裝後的domVirtualCreate，輸入與輸出皆與其相同，詳見domVirtualCreate
  7.  *
  8.  * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/domVirtualCreateQueue.test.mjs Github}
  9.  * @memberOf wsemi
  10.  * @returns {Function} 回傳domVirtualCreate函數
  11.  * @example
  12.  * need test in browser
  13.  *
  14.  * let dpq = domVirtualCreateQueue()
  15.  *
  16.  * //先給予圖片寬高與產製函數, 內部通過佇列逐次運行產圖與回傳base64
  17.  * let fun = async (ele) => {
  18.  *
  19.  *     //chart
  20.  *     let highchartsOpt = {...} //給予highcharts設定物件
  21.  *     window.Highcharts.chart(ele, highchartsOpt)
  22.  *
  23.  *     //html2picDyn, 預設轉出base64
  24.  *     let html2canvasOpt = { scale: 3 } //放大3倍, 提高解析度
  25.  *     b64 = await html2picDyn(ele, html2canvasOpt)
  26.  *
  27.  *     return b64
  28.  * }
  29.  *
  30.  * let b64 = await dpq(fun, { width: 500, height: 350 })
  31.  *
  32.  */
  33. function domVirtualCreateQueue() {
  35.     function Core() {
  37.         //pmq
  38.         let pmq = pmQueue(1) //因處理dom為瀏覽器當前執行緒, 無法使用web worker, 故僅限定同時處理1組
  40.         async function pushQueue(fun, opt = {}) {
  41.             return pmq(domVirtualCreate, fun, opt)
  42.         }
  44.         return pushQueue
  45.     }
  47.     return new Core()
  48. }
  51. export default domVirtualCreateQueue