☰

ipcjs.lib.js

copy by ipcjs

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/373283/647820/ipcjslibjs.js 

  1. ; (function () {
  2.     const log = console.log.bind(console)
  3.     /**
  4.      * 创建元素的快捷方法: 
  5.      * 1. type, props, children
  6.      * 2. type, props, innerHTML
  7.      * 3. 'text', text
  8.      * @param type string, 标签名; 特殊的, 若为text, 则表示创建文字, 对应的t为文字的内容
  9.      * @param props object, 属性; 特殊的属性名有: className, 类名; style, 样式, 值为(样式名, 值)形式的object; event, 值为(事件名, 监听函数)形式的object;
  10.      * @param children array, 子元素; 也可以直接是html文本;
  11.      */
  12.     const util_ui_element_creator = (type, props, children) => {
  13.         let elem = null;
  14.         if (type === "text") {
  15.             return document.createTextNode(props);
  16.         } else {
  17.             elem = document.createElement(type);
  18.         }
  19.         for (let n in props) {
  20.             if (n === "style") {
  21.                 for (let x in props.style) {
  22.                     elem.style[x] = props.style[x];
  23.                 }
  24.             } else if (n === "className") {
  25.                 elem.className = props[n];
  26.             } else if (n === "event") {
  27.                 for (let x in props.event) {
  28.                     elem.addEventListener(x, props.event[x]);
  29.                 }
  30.             } else {
  31.                 elem.setAttribute(n, props[n]);
  32.             }
  33.         }
  34.         if (children) {
  35.             if (typeof children === 'string') {
  36.                 elem.innerHTML = children;
  37.             } else {
  38.                 for (let i = 0; i < children.length; i++) {
  39.                     if (children[i] != null)
  40.                         elem.appendChild(children[i]);
  41.                 }
  42.             }
  43.         }
  44.         return elem;
  45.     }
  46.     const util_html = function (html) {
  47.         let template = util_ui_element_creator('template')
  48.         template.innerHTML = html.trim()
  49.         return Array.from(template.content.childNodes)
  50.     }
  51.  
  52.     class ElePlus {
  53.         constructor(ele) {
  54.             this.ele = ele;
  55.         }
  56.         hasClass(name) {
  57.             return this.ele.className.includes(name);
  58.         }
  59.         removeClass(name) {
  60.             let list = this.ele.className.split(/ +/);
  61.             let index = list.indexOf(name);
  62.             if (index != -1) {
  63.                 list.splice(index, 1);
  64.                 this.ele.className = list.join(' ');
  65.             }
  66.             return this;
  67.         }
  68.         addClass(name) {
  69.             this.ele.className = `${this.ele.className} ${name}`;
  70.             return this;
  71.         }
  72.         toggleClass(name) {
  73.             this.hasClass(name) ? this.removeClass(name) : this.addClass(name);
  74.             return this;
  75.         }
  76.         on(eventName, listener) {
  77.             this.ele.addEventListener(eventName, (...args) => {
  78.                 listener.apply(this.ele, args);
  79.             });
  80.             return this;
  81.         }
  82.         text(value) {
  83.             if (value === undefined) {
  84.                 return this.ele.innerText;
  85.             } else {
  86.                 this.ele.innerText = value;
  87.                 return this;
  88.             }
  89.         }
  90.         html(value) {
  91.             if (value === undefined) {
  92.                 return this.ele.innerHTML;
  93.             } else {
  94.                 this.ele.innerHTML = value;
  95.                 return this;
  96.             }
  97.         }
  98.     }
  99.  
  100.     if (window.ipcjs) {
  101.         log('已经存在window.ipcjs', window.ipcjs)
  102.     } else {
  103.         window.ipcjs = {
  104.             _: util_ui_element_creator,
  105.             html: util_html,
  106.             log: log,
  107.             $: (ele) => new ElePlus(ele),
  108.             installInto: function (target) {
  109.                 if (typeof target === 'function') {
  110.                     target.call(null, this)
  111.                 } else {
  112.                     Object.assign(target, this)
  113.                 }
  114.             }
  115.         }
  116.     }
  117. })()