Just for recording some points casually.

Items:

  • links
  • Animation/Transition optimize with animationend/transitionend event.
  • 特殊字符串转义、编解码
  • Ajax XMLHttpRequest
  • 保存网页中对象
  • a 标签下载文件
  • 模拟按键

links

When target="_blank", remember to add rel="noopener"

特殊字符串转义、编解码

  1. HTMLDecode: function (text) {
  2.   var temp = document.createElement("div");
  3.   temp.innerHTML = text;
  4.   var output = temp.innerText || temp.textContent;
  5.   temp = null;
  6.   return output;
  7. }

Ajax XMLHttpRequest

包括简单封装、请求头等参数

  1. function httpRequest(config) {
  2.   var xhr = new XMLHttpRequest();
  3.   xhr.onload = function() {
  4.     if (xhr.readyState === 4 && xhr.status === 200) {
  5.       config.callback(xhr.response);
  6.     }
  7.   };
  8.   xhr.open(config.type, config.url, true);
  9.   xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
  10.   xhr.send(config.body);
  11. }

改进

  1. const sendXMLHttpRequest = config => {
  2.   const xhr = new XMLHttpRequest();
  3.   xhr.open(config.method, config.url);
  4.   xhr.setRequestHeader('content-type', 'application/json');
  5.   xhr.onload = function() {
  6.     if (xhr.status >= 200 && xhr.status < 300) {
  7.       config.onSuccess(xhr.response);
  8.     } else {
  9.       config.onError(xhr.response);
  10.     }
  11.   };
  12.   xhr.send(JSON.stringify(config.body));
  13. };
  15. // 用例
  16. sendXMLHttpRequest({
  17.   method: 'POST',
  18.   url: '/api/admin/guard',
  19.   body: {
  20.     url: url,
  21.   },
  22.   onSuccess: response => {
  23.     console.log('sendToUser success: ', response);
  24.     message.success('名额发放成功');
  25.   },
  26.   onError: response => {
  27.     try {
  28.       const res = JSON.parse(response);
  29.       console.log('sendToUser failed: ', res);
  30.       message.error(`名额发放失败：${res.message || res.err}`);
  31.     } catch (e) {
  32.       console.log(e);
  33.     }
  34.   },
  35. });

奇怪的 header

X-Request: JSON

X-Requested-With: XMLHttpRequest

保存网页中对象

参考 Snippets 中 SaveObjInPage

  1. fileName = 'c.json';
  3. x = app.page.pins;
  5. x = JSON.stringify(x, null, 2);
  7. var blob = new Blob([x], {type: 'text/json'}),
  9. e = document.createEvent('MouseEvents'),
  11. a = document.createElement('a');
  13. a.download = fileName;
  15. a.href = window.URL.createObjectURL(blob);
  17. a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
  19. e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  21. a.dispatchEvent(e);

a 标签下载文件

  1. function download(href, filename = '') {
  2.   const a = document.createElement('a');
  3.   a.download = filename;
  4.   a.href = href;
  5.   document.body.appendChild(a);
  6.   a.click();
  7.   a.remove();
  8. }
  10. // 考虑跨域, 兼容性升级版
  11. function downloadFile(url, fileName) {
  12.   var x = new XMLHttpRequest();
  13.   x.open('GET', url, true);
  14.   x.responseType = 'blob';
  15.   x.onload = function (e) {
  16.     var blobUrl = window.URL.createObjectURL(x.response);
  17.     download(blobUrl, fileName)
  18.     window.URL.revokeObjectURL(blobUrl);
  19.   };
  20.   x.send();
  21. }

参考 浅析 HTML5 中的 download 属性

模拟按键

  1. let mockKeyboardEvent = new KeyboardEvent('keydown', { ctrlKey: true });
  2. if (darkMode) {
  3.   document.dispatchEvent(mockKeyboardEvent);
  4.   document.dispatchEvent(mockKeyboardEvent);
  5.   document.dispatchEvent(mockKeyboardEvent);
  6. }