【前端】JS小技巧


阅读数:   

1_获取 URL 参数并转换成对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 获取URL参数并转换成对象
function getQueryParams(url, name) {
  var result = {}
  var reg = /[?&][^?&#]+=[^?&#]+/g
  // "?name=ionluo&age=25"
  var queryList = url.match(reg) || []
  for (var i = 0; i < queryList.length; i++) {
    var item = queryList[i]
    var temp = item.substring(1).split('=')
    var key = decodeURIComponent(temp[0])
    var value = decodeURIComponent(temp[1])
    result[key] = value
  }
  return name ? result[name] : result
}

// 根据对象转换成URL查询参数
function setQueryParams(url, params) {
  var originParams = getQueryParams(url)
  params = Object.assign(originParams, params)
  url = url.split('?')[0]
  var paramsKeys = Object.keys(params)
  for (var i = 0; i < paramsKeys.length; i++) {
    if (i === 0) url += '?'
    var key = paramsKeys[i]
    url += encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
    if (i !== paramsKeys.length - 1) url += '&'
  }
  return url
}

export { getQueryParams, setQueryParams }

2_封装 storage 的存取

还可以参考下这里实现：https://mp.weixin.qq.com/s/oD3qDWkYSjBkJpsoLARavw

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 // 封装storage的存取(加入命名空间和过期时间控制)
// {
//     created_on: '',  // 创建时间
//     updated_on: '',  // 更新时间（默认等于创建时间）
//     expires: '',   // 过期时间（毫秒）
//     data: '',    // 存储的数据
// }
const obj = {
    namespace: 'manage',
    init(namespace){
        // 初始化命名空间
        this.namespace = namespace || this.namespace;
        // 删除过期变量
        let storage = window.localStorage.getItem(this.namespace);
        storage = storage || '{}';
        storage = JSON.parse(storage);
        for(let k in storage){
            if (storage[k].expires && new Date().getTime() - new Date(storage[k].updated_on).getTime() > storage[k].expires){
                delete storage[k];
            }
        }
        window.localStorage.setItem(this.namespace, JSON.stringify(storage));
    },
    setItem(key, value, expires) {
        let storage = window.localStorage.getItem(this.namespace);
        storage = storage || '{}';
        storage = JSON.parse(storage);
        let date = new Date();
        storage[key] = {
            created_on: date,  // 创建时间
            updated_on: date,  // 更新时间（默认等于创建时间）
            expires: expires,   // 过期时间（毫秒, 空表示永不过期）
            data: value,    // 存储的数据
        };

        // 对于存储大小超出了限制的情况处理
        // https://segmentfault.com/q/1010000014736335/a-1020000014736515
        try {
            window.localStorage.setItem(this.namespace, JSON.stringify(storage));
        } catch (e) {
            // 删除过期数据
            // this.init();
            // 删除最久远的10条数据
            // this.removeOldestTen();
            window.localStorage.setItem(this.namespace, '{}');
            this.setItem(key, value, expires);
        }
    },
    getItem(key) {
        this.init();
        let storage = window.localStorage.getItem(this.namespace);
        storage = storage || '{}';
        storage = JSON.parse(storage);
        return storage[key] && storage[key].data;
    },
    removeItem(key) {
        let storage = window.localStorage.getItem(this.namespace);
        storage = storage || '{}';
        storage = JSON.parse(storage);
        if (storage[key]){
            delete storage[key]
        }
        window.localStorage.setItem(this.namespace, JSON.stringify(storage));
    }
}
export obj;

// obj.init('custom');
// obj.setItem('key1', 'value1', 5 * 1000);
// setTimeout(function(){
//     console.log(obj.getItem('key1'));
// }, 6 * 1000)

3_实现洗牌函数

多提一嘴，该方式可以实现较少数量下的结果尽可能满足正态分布（与之相对的是随机数需要在大数据的情况才能满足正态分布），但是在游戏概率模拟上，要人为干预防止出现欧皇和脸黑的情况，这时候可以通过 RPD 算法实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 获取一个在[min, max]的整数
function getRandomNumber(min, max) {
     // [0, 1) -> [0, max-min+1) -> [min, max+1) -> [min, max]
     return Math.floor(Math.random() * (max - min + 1) + min);
 }

// 实现洗牌函数
function shuffle(arr) {
    // 浅拷贝
    let _arr = arr.slice();

    for(let i = 0; i < _arr.length; i++) {
        const j = getRandomNumber(0, i);
        [_arr[i], _arr[j]] =  [_arr[j], _arr[i]];
    }
    return _arr;
}

export shuffle;

4_格式化 UTC 时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Date.prototype.format = function (fmt) {
  var o = {
    'M+': this.getMonth() + 1, //月份
    'd+': this.getDate(), //日
    'H+': this.getHours(), //小时
    'm+': this.getMinutes(), //分
    's+': this.getSeconds(), //秒
    'q+': Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds(), //毫秒
  }
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      (this.getFullYear() + '').substr(4 - RegExp.$1.length)
    )
  }
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) {
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
      )
    }
  }
  return fmt
}

// 用法
new Date().format('yyyy-MM-dd HH:mm:ss')
// 中间可以插入其他字符，不替换，如
new Date().format('yyyy-MM-ddTHH:mm:ss')

5_移动端拖拽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var block = document.querySelector('#element')
var oW, oH
// 绑定touchstart事件
block.addEventListener(
  'touchstart',
  function (e) {
    console.log(e)
    var touches = e.touches[0]
    oW = touches.clientX - block.offsetLeft
    oH = touches.clientY - block.offsetTop
  },
  false
)

block.addEventListener(
  'touchmove',
  function (e) {
    var touches = e.touches[0]
    var oLeft = touches.clientX - oW
    var oTop = touches.clientY - oH
    if (oLeft < 0) {
      oLeft = 0
    } else if (
      oLeft >
      document.documentElement.clientWidth - block.offsetWidth
    ) {
      oLeft = document.documentElement.clientWidth - block.offsetWidth
    }
    block.style.left = oLeft + 'px'
    block.style.top = oTop + 'px'
    e.preventDefault()
  },
  false
)

参考：https://www.cnblogs.com/lvmingyin/p/5372678.html

touchstart→touchmove→touchend 或者 touchstart→touchend→click。

6_PC 端拖拽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
var running_mouse = document.getElementById('running-mouse')

function loadStatus(element, storage_name) {
  var storage = window.localStorage.getItem(storage_name)
  if (storage) {
    storage = JSON.parse(storage)
    if (
      new Date().getTime() - new Date(storage.created_on).getTime() >
      24 * 60 * 60 * 1000
    ) {
      window.localStorage.removeItem(storage_name)
    } else {
      element.style.left = storage.left
      element.style.top = storage.top
      element.style.display = storage.close ? 'none' : 'block'
    }
  }
}

loadStatus(running_mouse, 'running-mouse')

function dragElement(element, url, storage_name) {
  element.addEventListener(
    'mousedown',
    function (event) {
      var originMouseX, originMouseY, moveX, moveY

      originMouseX = event.clientX
      originMouseY = event.clientY
      document.addEventListener('mousemove', mouseMove, false)
      document.addEventListener('mouseup', mouseUp, false)

      function mouseMove(event) {
        moveX = event.clientX - originMouseX
        moveY = event.clientY - originMouseY
        originMouseX = event.clientX
        originMouseY = event.clientY
        element.style.left = +moveX + element.offsetLeft + 'px'
        element.style.top = +moveY + element.offsetTop + 'px'
        event.preventDefault()
      }

      function mouseUp(event) {
        document.removeEventListener('mousemove', mouseMove, false)
        document.removeEventListener('mouseup', mouseUp, false)
        var is_close = false
        if (url && !moveX && !moveY) {
          if (event.target.tagName === 'SPAN') {
            element.style.display = 'none'
            is_close = true
          } else {
            var a = document.createElement('a')
            a.href = url
            a.style.display = 'none'
            a.click()
          }
        }

        window.localStorage.setItem(
          storage_name,
          JSON.stringify({
            left: element.style.left,
            top: element.style.top,
            close: is_close,
            created_on: new Date(),
          })
        )
      }
    },
    false
  )
}

dragElement(running_mouse, '/cn/zh-cn/public-search.html', 'running-mouse')

7_ 移动到元素上出现滚动条，移出滚动条消失

1
2
3
4
5
<!-- 移动到元素上出现滚动条，移出滚动条消失 -->
<div
  onmouseover="this.style.overflowY='auto'"
  onmouseout="this.style.overflowY='hidden'"
></div>

8_ 全局异常处理

https://juejin.cn/post/6844903751271055374

9_ 同步阻塞法实现 sleep 函数

1
2
3
4
5
6
7
8
9
const sleep = (delay) => {
  const start = new Date().getTime()
  while (new Date().getTime() < start + delay) {
    continue
  }
}
console.log(1)
sleep(3000)
console.log(2)

10_ 利用 new URL 解析 URL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const parseURL = (url = '') => {
  // https://developer.mozilla.org/zh-CN/docs/Web/API/URL/URL
  const res = new URL(url)
  res.queryParams = (key) => {
    if (key) {
      return res.searchParams.get(key)
    }
    const params = {}
    const paramGroup = res.search.replace(/^\?/, '').split('&')
    paramGroup.forEach((param) => {
      const [key, val] = param.split('=')
      params[key] = val
    })
    return params
  }
  return res
}
parseURL('https://www.example.com/a/b?c=1&d=2')

11_ 一行代码实现星级评分

1
2
const getRate = (rate = 0) => '★★★★★☆☆☆☆☆'.slice(5 - rate, 10 - rate)
getRate(3)

12_用位运算提升效率

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// ｜ 取整
let num1 = 1.7;
num1 = num1 | 0;

// >> 取半
let num2 = 6;
num2 = num2 >> 1; // 3

// << 加倍

let num3 = 6;
num3 = num3 << 1; / / 12

// ^ 交换值
let num4 = 10;
let num5 = 20;

num4 ^= num5;
num5 ^= num4;
num4 ^= num5; // num4 === 2, num5 === 1

// & 判断奇数
let num6 = 10;
let num7 = 11;

num6 & 1 === 1; // true
num7 & 1 === 1; // false

// ~ 判断是否存在
const data = '123456';
const key = '3';
const keyIsExist = !!~data.indexOf(key); // true

// 是否 2 的整数幂
const isPowerOf2 = num => (num & (num - 1)) === 0;
isPowerOf2(8) // true
isPowerOf2(7) // false

13_判断是否是千分符字符

1
2
3
const numberIsThousand = (str) => /^-?\d{1,3}(,\d{3})*(\.\d+)?$/.test(str)
numberIsThousand('100,000,000,000') // true
numberIsThousand('100,000,000,00') // false

14_复制文本到剪切板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function copyToClipboard(text) {
  return Promise.resolve()
    .then(() => {
      // 尝试使用 Clipboard API (最新标准)
      if (navigator.clipboard && navigator.clipboard.writeText) {
        return navigator.clipboard.writeText(text)
          .catch(err => {
            // 当前浏览器不支持 Clipboard API。
            // 脚本没有在 HTTPS 环境下运行（某些浏览器对剪贴板访问有安全限制）。
            console.warn('使用 Clipboard API 复制失败:', err);
            return Promise.reject(new Error('Clipboard API failed'))
          });
      } else {
        return Promise.reject(new Error('Clipboard API not supported'))
      }
    }).catch(() => {
      // 尝试使用 clipboardData 对象（IE）
      if (window.clipboardData && window.clipboardData.setData) {
        window.clipboardData.clearData()
        window.clipboardData.setData('Text', text)
      } else {
        return Promise.reject(new Error('clipboardData not supported'))
      }
    }).catch(() => {
      // 尝试使用 document.execCommand（旧方法，不稳定）
      const el = document.createElement('textarea')
      el.value = text
      el.setAttribute('readonly', '')
      el.style.position = 'absolute'
      el.style.left = '-9999px'
      document.body.appendChild(el)
      el.select()
      let successful = false
      try {
        successful = document.execCommand('copy');
        if (!successful) {
          console.warn('使用 execCommand 复制失败');
          // Firefox、Chrome、Edge，只能用户点击有效（https://caniuse.com/?search=execCommand）
          // 这里存在一个优化的空间就是失败后继续弹出提示框让用户再确认一次
          // 但由于这个问题开发自身注意使用的方式就好，没有必要让用户去确认
        }
      } catch (err) {
        successful = false
        console.warn('执行 execCommand 复制时出错:', err);
      } finally {
        document.body.removeChild(el); // 移除临时元素
      }
      return successful || Promise.reject(new Error('execCommand failed'))
    }).then(() => {
      alert('文本已复制到剪贴板！')
    }).catch(err => {
      console.error(err)
      alert('复制失败，请手动复制: ' + text)
    })
}
copyToClipboard('hello!')

下面是以前记录的示例，这里保留下，主要有2个问题没有明白，不感兴趣可以不看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const copyToClipboard = (content) => {
  const clipboardData = window.clipboardData
  if (clipboardData) {
    // IE
    clipboardData.clearData()
    clipboardData.setData('Text', content)
    return true
  } else if (document.execCommand) {
    // Firefox、Chrome、Edge，只能用户点击有效（https://caniuse.com/?search=execCommand）
    const el = document.createElement('textarea')
    el.value = content
    el.setAttribute('readonly', '')
    el.style.position = 'absolute'
    el.style.left = '-9999px'
    document.body.appendChild(el)
    el.select()
    setTimeout((_) => document.body.removeChild(el), 300)
    return document.execCommand('copy') // 复制失败返回false
  }
  return false // 复制失败，需要引导用户手动复制
}
const isCopyed = copyToClipboard('hello world')
// 会失败
// const tryAgain = !isCopyed ? window.confirm('自动复制失败，是否重试') : false
// tryAgain && copyToClipboard('hello world')
!isCopyed &&
  this.$confirm('自动复制失败，是否重试', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      const isCopyed2 = copyToClipboard('hello world')
      return isCopyed2
        ? this.$message.success('复制成功')
        : Promise.reject(new Error('faild'))
    })
    .catch(() => {
      this.$message.error('复制失败，请到手动复制')
    })

这里发现一个奇怪的现象，Chrome 浏览器异步时间不是太久就可以复制成功，如下：

1
2
3
4
setTimeout(_ => {console.log(copyToClipboard('123456'))}, 5000)
VM39945:1 false
setTimeout(_ => {console.log(copyToClipboard('123456'))}, 1000)
VM39959:1 true

这点不应该滥用，因为不同浏览器似乎支持不一样，见https://segmentfault.com/q/1010000005783830?utm_source=sf-similar-question

15_一行代码生成指定长度的数组

1
2
const List = (len) => [...new Array(len).keys()]
const list = List(10) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

16_判断数据类型

1
2
3
4
5
6
7
8
9
10
11
12
13
const type = (data) => {
  let toString = Object.prototype.toString
  const dataType =
    data instanceof Element
      ? 'element' // 为了统一DOM节点类型输出
      : toString
          .call(data)
          .replace(/\[object\s(.+)\]/, '$1')
          .toLowerCase()
  return dataType
}

type({}) // object

17_正则判断字符重复次数不超过两次

1
2
3
4
5
const strIsRepeatThan2 = (str = '') =>
  /^(?!.*(.).*\1{2})[\da-zA-Z].+$/.test(str)
strIsRepeatThan2('123456') // true
strIsRepeatThan2('1234566') // true
strIsRepeatThan2('12345666') // false

18_正则匹配可以只有 0 但开头不能是 0 的数字

1
2
3
4
const getCorrectNumber = (str = '') => /^(\d|[1-9]\d*)$/.test(str)
getCorrectNumber('0') // true
getCorrectNumber('011') // false
getCorrectNumber('101') // true

19_获取显示器分辨率

1
2
3
const radio = window.devicePixelRatio
// screen获取屏幕分辨率，如果是高清显示屏（4K显示器、Retina屏等），一个像素可能包括2,3,4个甚至更多的物理分辨率，所以需要乘以设备像素比(devicePixeRatio)。
screen.width * radio + 'X' + screen.height * radio

关于设备分辨率和物理分辨率可以参考：https://mp.weixin.qq.com/s/Sb4qj4m5WGiWiNEP98RC0A

20_目录树的选中和取消选中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
const { forEach, padStart, filter, every, assign } = require('lodash')

module.exports = {
    init() {
        this.selectedFoldersId = ['1','2','3'] // 选中的文件夹id列表
        this.folders = [] // 所有的文件夹
        this.showAllFolders()
    },
    // 异步获取所有文件夹
    getAllFolders: function() {
        return Promise.resolve([{name: '文件夹1', flags: {system: true}, id: 1}， {name: '文件夹2', flags: {system: false}, id: 2}])
    },
    // 根据返回的所有文件夹数据处理得到用于html显示的数据
    showAllFolders: function() {
        const that = this
        $scope.isLoading = true
        this.getAllFolders().then(resData => {
            // 生成指定的数据结构
            function dataGenerator(originData) {
                const newData = []
                const folders = {
                    id: 0,
                    name: '文件夹',
                    children: [
                        {
                            id: -1,
                            name: '系统文件夹',
                            children: []，
                            disabled: false
                        },
                        {
                            id: -2,
                            name: '自定义文件夹',
                            children: []，
                            disabled: false
                        }
                    ]
                }
                forEach(originData, function(item) {
                    if (item.flags && item.flags.system) {
                        folders.children[0].children.push(item)
                    } else {
                        folders.children[1].children.push(item)
                    }
                })
                folders.children[0].disabled = !folders.children[0].children.length
                folders.children[1].disabled = !folders.children[1].children.length
                // 递归获取所有的子节点，通过level标识层级
                function pushAllTo(item, level, pid) {
                    item.level = level // 层级
                    item.pid = pid // 父级节点id
                    item.selected = false
                    newData.push(item)
                    item.children = item.children || []
                    forEach(item.children, child => {
                        pushAllTo(child, level + 1, item.id)
                    })
                }
                pushAllTo(folders, 0, null)
                return newData
            }
            // 初始化上次的选中状态
            function initStatus(folders) {
                forEach(folders, item => {
                    if (~that.selectedFoldersId.indexOf(item.id + '')) {
                        that.selectFolder(item)
                    }
                })
            }
            that.folders = dataGenerator(resData)
            initStatus(that.folders)
            // console.log('that.folders', that.folders)
        }).finally(function() {
            $scope.isLoading = false
        })
    },
    // 选择文件夹（自动更新其上下级的选中状态）
    selectFolder: function(item) {
        item.selected = !item.selected

        const that = this
        // 更新下级文件夹状态
        function updateLowLevel(item, status) {
            forEach(that.folders, folder => {
                if (folder.pid === item.id) {
                    folder.selected = status
                    updateLowLevel(folder, folder.selected)
                }
            })
        }
        // 更新上级文件夹状态
        function updateHighLevel(item, status) {
            const parent = filter(that.folders, folder => folder.id === item.pid)[0]
            if (!parent) return
            const childrenList = filter(that.folders, folder => (folder.pid === parent.id && !folder.disabled))
            if (status && childrenList.length && every(childrenList, item => item.selected === status)) {
                parent.selected = status
                updateHighLevel(parent, status)
            }

            if (!status) {
                parent.selected = status
                updateHighLevel(parent, status)
            }
        }
        updateLowLevel(item, item.selected)
        updateHighLevel(item, item.selected)
    }
}

21_JS 加载脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 不阻塞加载，不能保证加载完成的顺序，只能保证加载时间的顺序
function loadScript(url, success, fail) {
  const script = document.createElement('script')
  script.type = 'text/javascript'

  script.onload = function () {
    success && success()
  }

  script.onerror = function () {
    console.log('Script loading failed', url)
    fail && fail()
  }

  script.src = url
  document.getElementsByTagName('head')[0].appendChild(script)
}

// 阻塞加载，保证加载完成顺序，但是会有警告
document.write('<script src="./jquery.js"></script>')

22_判断元素在当前窗口是否可见

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * 判断元素是否可见
 */
function checkVisible(elem) {
  // https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
  if (!(elem instanceof Element))
    throw Error('DomUtil: elem is not an element.')
  if (elem.checkVisibility)
    return elem.checkVisibility({
      checkOpacity: true, // Check CSS opacity property too
      checkVisibilityCSS: true, // Check CSS visibility property too
    })
  return !!(
    elem.offsetWidth ||
    elem.offsetHeight ||
    elem.getClientRects().length
  )
  // var rect = elm.getBoundingClientRect();
  // var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  // return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

23_页面显示状态变化

1
2
3
4
5
6
7
document.addEventListener('visibilitychange', function () {
  if (document.visibilityState == 'hidden') {
    document.title = '(つェ⊂)我藏好了哦~ '
  } else {
    document.title = '(*´∇｀*) 被你发现啦~ '
  }
})

24_使用 ES6 删除对象中某些属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const obj = {
  id: '1111',
  name: '测试一',
  description: '测试demo',
}

// 目标: 取到删除description属性的对象, 即下文的data
//方法一:
let data = (({ id, name }) => ({ id, name }))(obj)
console.log(data) // data:{ id: '011', name: '测试一'}
console.log(form) // form:{ id: '011', name: '测试一', description: '测试demo' }

// 方法二:
let { description, ...data } = obj
// data默认接收剩余的属性值, 打印结果同上

ES6 从一个对象取部分属性给另一个对象

1
2
3
4
5
6
7
8
9
var obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: 5,
}
var { a, d, e } = obj
var obj2 = { a, d, e }

25_连续点击多次事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 连续点击多次触发
const multipleClick = function (times) {
  return function (dom, callback) {
    var timer = null
    var waitTime = 500 // 该时间间隔内点击才算连续点击（单位：ms）
    var lastTime = new Date().getTime() // 上次点击时间
    var count = 0 // 连续点击次数
    // 获取对象
    dom.onclick = function (event) {
      var currentTime = new Date().getTime()
      // 计算两次相连的点击时间间隔
      count = currentTime - lastTime < waitTime ? count + 1 : 1
      lastTime = new Date().getTime()
      clearTimeout(timer)
      // console.log('点击' + count + '次了')
      timer = setTimeout(function () {
        clearTimeout(timer)
        count >= times && callback && callback()
      }, waitTime)
    }
  }
}

const fiveClick = multipleClick(5)

26_原生 javasript 实现 ajax 请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
var $xhr = {
  xhr: function () {
    if (window.XMLHttpRequest) {
      return new XMLHttpRequest()
    } else if (window.ActiveXObjcet) {
      return new ActiveXObjcet('Microsoft.XMLHTTP')
    } else {
      throw new Error('浏览器不支持ajax请求，请升级浏览器重试')
    }
  },
  get: function (url, successFn, failFn) {
    var xhr = this.xhr()
    xhr.timeout = 2000 // 超时设置 2s 设置（超过2s请求取消）
    // xhr.responseType = "blob"
    xhr.ontimeout = function () {
      // 超时回调
      alert('网络异常，请稍后重试！！！')
    }
    xhr.onerror = function () {
      // 网络异常回调
      alert('你的网络似乎出了一些问题！！')
    }
    xhr.open('GET', url, true)
    xhr.onreadystatechange = function () {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4) {
        if (xhr.status == 200 || xhr.status == 202 || xhr.status == 304) {
          successFn.call(this, {
            status: xhr.status,
            headers: xhr.getAllResponseHeaders(),
            data: xhr.responseText,
          })
        } else {
          failFn.call(this, {
            status: xhr.status,
            headers: xhr.getAllResponseHeaders(),
            data: xhr.responseText,
          })
        }
      }
    }
    xhr.send()
  },
  // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
  post: function (url, data, successFn, failFn) {
    var xhr = this.xhr()
    xhr.open('POST', url, true)
    // 添加http头，发送信息至服务器时内容编码类型
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status == 200 || xhr.status == 202 || xhr.status == 304) {
          successFn.call(this, {
            status: xhr.status,
            headers: xhr.getAllResponseHeaders(),
            data: xhr.responseText,
          })
        } else {
          failFn.call(this, {
            status: xhr.status,
            headers: xhr.getAllResponseHeaders(),
            data: xhr.responseText,
          })
        }
      }
    }
    xhr.timeout = 60000
    xhr.send(data)
  },
  ajax: function (options) {
    var xhr = this.xhr()
    xhr.timeout = options.timeout || 60000
    xhr.onreadystatechange = function () {
      if (xhr.readyState !== 4) return

      const result = {
        status: xhr.status,
        headers: xhr.getAllResponseHeaders(),
        data: xhr.responseText,
      }
      console.log('-response-', result)
      if (xhr.status === 200 || xhr.status === 304 || xhr.status === 202) {
        try {
          result.data = JSON.parse(result.data) || {}
        } catch (e) {
          console.log(e)
        }
        options.success && options.success(result)
      } else {
        options.error && options.error(result)
      }
      options.complete && options.complete(result)
    }
    options.async = typeof options.async === 'boolean' ? options.async : true
    options.data =
      typeof data === 'object' ? JSON.stringify(options.data) : options.data
    options.type = ['get', 'post', 'put', 'delete', 'update', 'patch'].indexOf(
      options.type.toLowerCase()
    )
      ? options.type
      : 'GET'
    options.type = options.type.toUpperCase()
    options.contentType =
      options.contentType || 'application/x-www-form-urlencoded'
    options.headers = {}
    console.log('-request-', JSON.stringify(options))
    xhr.open(options.type, options.url, options.async)
    xhr.setRequestHeader('Content-Type', options.contentType)
    for (const key in options.headers) {
      xhr.setRequestHeader(key, options.headers[key])
    }
    options.data ? xhr.send() : xhr.send(options.data)
  },
}

202：Accepted 服务器已接受请求，但尚未处理。（202 状态码适合异步任务或者说须要处理时间比较长的请求，避免 HTTP 链接一直占用，超时这些状况。常见的就是使用 MQ 异步处理批任务，客户端定时轮训结果。缓存）

304：Not Modified 缓存可用

0：未定义的错误，可能是在联系服务器之前发生错误的结果（https://www.cnblogs.com/ranyonsue/p/9187799.html）

更多见：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status

27_取消滚动的默认行为

一些参考资料：

https://zh.javascript.info/default-browser-action

https://blog.csdn.net/crystal6918/article/details/77507414

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 通过阻止动作来达到阻止默认行为（即不能通过ui事件去阻止，ui事件触发了的时候，行为已经产生了）
document.body.addEventListener(
  'touchmove',
  function (e) {
    e.preventDefault()
  },
  { passive: false }
)
window.addEventListener(
  'wheel',
  function (e) {
    e.preventDefault()
  },
  { passive: false }
)

UI 事件包括：

  • load、unload
  • abort
  • error
  • select
  • resize
  • scroll

28_创建隔离的 css 样式区域

CSS 一旦生效，就会应用于全局，所以很容易出现冲突。有时候，我们一些内容是用户自己编辑或者公司的运营人员编辑展示到页面上的，如果用户编辑的内容使用了全局 css 类名，就会导致意想不到的混乱。下面讲讲我对这种情况的处理方式：

  1. Web 组件封装（如 vue 中的 scoped，适用于 vue-cli 等编译应用的情况）

    CSS Modules

  2. shadowDOM（兼容性不好）

    1
    2
    3
    4
    5
    6
    const html = `<h1>我是一个标题</h1>`‘’
    const container = document.getElementById('contentContainer')
    const shadow = container.attachShadow({mode: 'closed'})
    const div = document.createElement('div')
    div.innerHTML = mailContent
    shadow.appendChild(div)

    https://developer.mozilla.org/zh-CN/docs/Web/API/Element/attachShadow

  3. iframe

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    const html = `<h1>我是一个标题</h1>`
    const container = document.getElementById('contentContainer')
    const myIframe = document.createElement('iframe')
    const attrDict = {
      frameborder: 0,
      scrolling: 'no',
      seamless: true,
      allowtransparency: true,
      referrerpolicy: 'no-referrer',
      // sandbox: '',  // 安全限制
      src: 'about:blank',
      // srcdoc: html // 填充html
    }
    const keys = Object.keys(attrDict)
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i]
      const value = attrDict[key]
      myIframe.setAttribute(key, value)
    }
    myIframe.onload = function () {
      const body = myIframe.contentDocument.querySelector('body')
      body.innerHTML = mailContent
      setTimeout(function () {
        // 先渲染DOM，再执行样式设置
        myIframe.setAttribute('width', body.scrollWidth)
        myIframe.setAttribute('height', body.scrollHeight)
        body.style.overflow = 'hidden'
      }, 0)
    }
    container.appendChild(myIframe)

    缺点：1. iframe 有许多安全性的问题，允许用户在你的网站嵌入内容，那么最好通过 sandbox 属性进行隔离，同时对用户的内容进行预解析处理，比如阻止用户嵌入 link,script,iframe 等容易导致安全性的标签。更多见：https://www.xf1433.com/7986.html

    1. iframe 里面嵌入的链接打开是在 iframe 里面打开的，这个和正常的页面链接表现不一致，所以需要把所有的链接都改成target="_blank"新页面打开，不能允许当前页面打开

  4. js 仿 CSS Modules

    ① juice 样式行内化

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    // 即通过JavaScript，解析css rule，然后对rule进行作用域限制
    function limitStyleScope(html, scopeStr) {
      const replaceFun = function (matched, item) {
        return matched.replace(
          item,
          item
            .split(',')
            .map((item) => scopeStr + '' + item.trim())
            .join(',')
        )
      }
      return html.replace(
        /<style>([\s\S]*?)<\/style>/gi,
        function (matched, item) {
          item = item
            .replace(/&nbsp;/g, ' ')
            .replace(/\n/g, '')
            .replace(/\s+/g, ' ')
            .replace(/([\s\S]*?){/, replaceFun)
            .replace(/}([\s\S]*?){/g, replaceFun)
          return '<style>' + item + '</style>'
        }
      )
    }

    // 该方式的最佳实践是使用juice（"juice": "^4.2.0"），上面仅仅是简单处理
    const juice = require('juice')
    // 转成行内样式（防止局部样式污染全局样式）
    const htmlContent = ~htmlContent.indexOf('</style>')
      ? juice(htmlContent)
      : htmlContent
    // 去除原来DOM上的类（防止全局样式污染局部样式）
    htmlContent = htmlContent.replace(/class=['"].+?['"]/, '')
    // 解决&nbsp;导致的单词内换行失效问题（word-beak: break-word;）
    htmlContent = htmlContent.replace(
      /(&nbsp;)+/g,
      function (matched, item, index) {
        const preWord = htmlContent[index - 1]
        const nextWord = htmlContent[index + matched.length]

        if (preWord === ' ' && nextWord === ' ') return matched
        if (preWord === ' ') return matched.slice(0, -item.length) + ' '
        if (nextWord === ' ') return ' ' + matched.slice(item.length)

        // 前后都不为空
        if (blankLength > 2)
          return ' ' + matched.slice(item.length, -item.length) + ' '
        if (blankLength === 2) return ' ' + item
        return ' '
      }
    )

    ② 样式表添加父级作用域

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    function addParentScopesToStyles(htmlString, parentScopeName) {
      // Create a new DOMParser
      const parser = new DOMParser()

      // Parse the HTML string
      const doc = parser.parseFromString(htmlString, 'text/html')

      // Get all style elements
      const styleElements = doc.querySelectorAll('style')

      // Loop through each style element
      styleElements.forEach((styleElement) => {
        const styleSheet = styleElement.sheet

        // Loop through each CSS rule in the stylesheet
        for (let i = 0; i < styleSheet.cssRules.length; i++) {
          const rule = styleSheet.cssRules[i]

          // If it's a CSSStyleRule (not @import, @font-face, etc.)
          if (rule instanceof CSSStyleRule) {
            // Add parent scope to the CSSText
            const modifiedCssText = parentScopeName + ' ' + rule.cssText

            // Update the CSSText（`rule.cssText` cannot be overwritten）
            rule.cssNewText = modifiedCssText
          }
        }

        // Reconstruct the style element with modified CSS rules
        styleElement.textContent = Array.from(styleSheet.cssRules)
          .map((rule) => rule.cssNewText)
          .join('\n')
      })

      // Return the modified HTML string
      return doc.documentElement.outerHTML
    }

    // Example usage
    const htmlString =
      '<html><head><style>p {color: red;padding: 0}a{display: block;}</style></head><body><p>Hello, world!</p></body></html>'
    const modifiedHTML = addParentScopesToStyles(
      htmlString,
      '#content-' + new Date().valueOf()
    )
    console.log(modifiedHTML)

综上所述，iframe 和 shadow dom 这两种方式比较符合，但是对于移动端传统应用无法使用上面 2 种方式也可以使用 juice。

  • 对于不太复杂的场景，如文章的发布建议使用 web 组件的 css 作用域隔离的方式。

  • 如果是邮件等高危场景推荐使用 iframe 方便对内容更好做限制

  • 如果是普通文本且不需要支持低版本浏览器，则可以使用 shadowDOM

29_js 对象如何优雅的取出/设置一个深度的值？

取出任意深度的 js 对象的值

我这里是对 lodash 的简单实现，不考虑性能以及过多的安全因素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const data = {
  link: {
    title: 'xxxx',
    goods: [
      { name: '西瓜', price: 200 },
      { name: '桃子', price: 100 },
    ],
  },
}
// path错误不抛出，如果path路径下数据不存在则返回defaultValue
// data必须是普通对象，path必须是字符串
const _get = function (data, path, defaultValue) {
  // 通过正则表达式  查找路径数据
  const regex = /([\w$]+)|\[(:\d)\]/g
  const patten = path.match(regex)
  let result = data
  // 遍历路径  逐级查找 没有遍历完成就返回defaultValue
  for (let i = 0, len = patten.length; i < len; i++) {
    const key = patten[i]
    result = result[key]
    if (
      !~['[object Object]', '[object Array]'].indexOf(
        Object.prototype.toString.call(result)
      ) &&
      i !== len - 1
    ) {
      return defaultValue
    }
  }
  return result
}
console.log(_get(data, 'link.goods[1].name', '苹果'))

还可以使用lodash/get

1
2
# 实现见：https://github.com/lodash/lodash/blob/master/get.js
_.get(obj,'school.class1.student', undefined)

设置任意深度对象的值

类似微信小程序的 setData

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const data = {
  link: {
    title: 'xxxx',
    goods: [
      { name: '西瓜', price: 200 },
      { name: '桃子', price: 100 },
    ],
  },
}
// path错误会抛出
// data必须是普通对象，path必须是字符串
const setData = function (data, path, value) {
  // 通过正则表达式  查找路径数据
  const regex = /([\w$]+)|\[(:\d)\]/g
  const patten = path.match(regex)
  let result = data // 指向调用的数据
  // 遍历路径  逐级查找  最后一级直接赋值
  for (let i = 0, len = patten.length; i < len; i++) {
    const key = patten[i]
    if (i === len - 1) {
      result[key] = value
    } else {
      result = result[key]
    }
  }
}
setData(data, 'link.goods[1].name', '苹果')
console.log(data.link.goods[1].name)

30_自定义事件的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 推荐使用发布订阅者模式去实现，这里还涉及兼容性问题，不太推荐使用，了解即可
window.addEventListener('event_name', function (event) {
  console.log('得到标题为：', event.detail.title)
})
var myEvent = new CustomEvent('event_name', {
  detail: { title: 'This is title!' },
})
window.dispatchEvent ? window.dispatchEvent(myEvent) : window.fireEvent(myEvent)

// 简单的订阅发布模式的实现方式
function Event() {
  this.callbacks = {}
  this.$on = function (name, fn) {
    this.callbacks[name] = this.callbacks[name] || []
    this.callbacks[name].push(fn)
  }
  this.$emit = function (name, value) {
    if (!this.callbacks[name]) return

    this.callbacks[name].forEach((fn) => fn(value))
  }
  this.$off = function (name, fn) {
    if (!name) return

    if (fn) {
      let index = this.callbacks[name].indexOf(fn)
      this.callbacks[name].splice(index, 1)
    } else {
      this.callbacks[name].length = 0
    }
  }
}

//   简单使用
let event = new Event()
event.$on('event1', function (arg) {
  console.log('事件1', arg)
})
event.$on('event2', function (arg) {
  console.log('事件2', arg)
})
event.$emit('event1', { name: '111' })
event.$emit('event2', { age: '222' })

31_冻结对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 1. 使用Object.freeze实现
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

// 2. 通过Object.definedProperty() + Object.seal()模拟实现Object.freeze
function myFreeze(obj) {
  if (typeof obj !== 'object' || obj === null) return

  Object.seal(obj) // 让对象不能被扩展、删除属性等等
  const propNames = Object.getOwnPropertyNames(obj)
  propNames.forEach(function (name) {
    // const propValue = obj[name]
    Object.defineProperty(obj, name, {
      // configurable: false, // 表示能否通过delete删除属性，能否修改属性的特性...
      // enumerable: false, // 表示是否可以枚举。直接在对象上定义的属性，基本默认true
      writable: false, // 表示能否修改属性的值。直接在对象上定义的属性，基本默认true
      // value: propValue// 表示属性的值。访问属性时从这里读取，修改属性时，也保存在这里。
    })
  })
}

实现深度冻结

1
2
3
4
5
6
7
8
9
function deepFreeze(obj) {
  const propNames = Object.getOwnPropertyNames(obj)
  propNames.forEach(function (name) {
    const prop = obj[name]
    // 如果prop是个对象，冻结它(这里复杂对象也是一样的，因为复杂对象的Object.getOwnPropertyNames为[], 调用Object.freeze可以冻结原型上的所有属性)
    if (typeof prop == 'object' && prop !== null) deepFreeze(prop)
  })
  return Object.freeze(obj)
}

32_原生 js 实现移动端的一些常用事件

更多手势事件见：https://www.runoob.com/ionic/ionic-gesture-event.html

这里目前只实现了部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
export default (function () {
  // 支持事件列表
  const eventArr = [
    'swipeleft',
    'swiperight',
    'slideup',
    'slidedown',
    'click',
    'longpress',
  ]
  // 自定义事件的前缀标识
  const prefix = 'event_'

  // touchstart事件，delta记录开始触摸位置
  function touchStart(event) {
    this.delta = {}
    this.delta.startX = event.touches[0].pageX
    this.delta.startY = event.touches[0].pageY
    this.delta.startTime = new Date().getTime()
  }

  /**
   * touchmove事件，手势滑动情况处理
   * 1、如果位移量很小或没有位移，可能是点击事件交由touchEnd处理
   * 2、如果位移量较大，x大于y，可以看做平移，x>0,向右滑，反之向左滑。
   * 3、如果位移量较大，x小于y，看做上下移动，y>0,向下滑，反之向上滑
   * */
  function touchMove(event) {
    const delta = this.delta
    delta.x = delta.startX - event.changedTouches[0].pageX
    delta.y = delta.startY - event.changedTouches[0].pageY

    event.delta = delta
    if (Math.abs(delta.x) < 5 && Math.abs(delta.y) < 5) {
      // 移动距离小于5认为是点击
      // Pass
    } else if (Math.abs(delta.x) > Math.abs(delta.y)) {
      if (delta.x > 0) {
        this[prefix + 'swipeleft'] &&
          this[prefix + 'swipeleft'].map(function (fn) {
            event.ctype = 'swipeleft'
            fn(event)
          })
      } else if (delta.x < 0) {
        this[prefix + 'swiperight'] &&
          this[prefix + 'swiperight'].map(function (fn) {
            event.ctype = 'swiperight'
            fn(event)
          })
      }
    } else {
      if (delta.y > 0) {
        this[prefix + 'slidedown'] &&
          this[prefix + 'slidedown'].map(function (fn) {
            event.ctype = 'slidedown'
            fn(event)
          })
      } else if (delta.y < 0) {
        this[prefix + 'slideup'] &&
          this[prefix + 'slideup'].map(function (fn) {
            event.ctype = 'slideup'
            fn(event)
          })
      }
    }
  }

  // touchend事件，非手势滑动情况处理
  function touchEnd(event) {
    const delta = this.delta
    delta.endX = delta.startX - event.changedTouches[0].pageX
    delta.endY = delta.startY - event.changedTouches[0].pageY
    this.delta.endTime = new Date().getTime()
    const timegap = this.delta.startTime - this.delta.endTime

    event.delta = delta
    if (Math.abs(delta.endX) < 5 && Math.abs(delta.endY) < 5) {
      // 移动距离小于5认为是点击
      if (timegap < 1000) {
        this[prefix + 'click'] &&
          this[prefix + 'click'].map(function (fn) {
            event.ctype = 'click'
            fn(event)
          })
      } else {
        this[prefix + 'longpress'] &&
          this[prefix + 'longpress'].map(function (fn) {
            event.ctype = 'longpress'
            fn(event)
          })
      }
    }
  }

  // 防抖（延迟结束后调用）
  function debounce(fn, delay) {
    let timer = null
    return function () {
      timer && clearTimeout(timer)
      timer = setTimeout((_) => {
        fn.apply(this, arguments)
      }, delay)
    }
  }

  // 节流（延迟结束后调用）
  function throttle(fn, delay) {
    let timer = null
    return function () {
      if (!timer) {
        timer = setTimeout((_) => {
          fn.apply(this, arguments)
          timer = null
        }, delay)
      }
    }
  }
  const throttleTouchMove = throttle(touchMove, 300)

  function bindEvent(dom, type, callback) {
    if (!dom || !/HTML(.+)Element/.test(Object.prototype.toString.call(dom)))
      return console.error('dom is not support!')
    if (!~eventArr.indexOf(type)) return console.error('type is not support!')

    type = prefix + type
    dom[type] = dom[type] || []
    dom[type].push(callback)

    dom.addEventListener('touchstart', touchStart)
    dom.addEventListener('touchmove', throttleTouchMove)
    dom.addEventListener('touchend', touchEnd)
  }

  function removeEvent(dom, type, callback) {
    if (!dom['event' + type]) return console.error('type is not exist!')

    type = prefix + type
    const index = dom[type].indexOf(callback)
    index > -1 && dom[type].splice(index, 1)

    if (dom[type].length === 0) {
      delete dom[type]
      dom.removeEventListener('touchstart', touchStart)
      dom.removeEventListener('touchmove', throttleTouchMove)
      dom.removeEventListener('touchend', touchEnd)
    }
  }
  return {
    bindEvent,
    removeEvent,
  }
})()

import EventUtil from './touch-utils'
EventUtil.bindEvent(document.body, 'swipeleft', function () {
  alert('swipeleft')
})

33_回调 API 改成支持 Promise

如微信小程序现在大多数的 API 还是使用回调的方式，不支持 promise。可以使用该方式进行封装。

PS: nodejs 中有 util.promisify 也是把 异步 API 包装成 promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const promisify = function (func) {
  return function (params = {}) {
    return new Promise((resolve, reject) => {
      const args = Object.assign(params, {
        success: (res) => resolve(res),
        fail: (err) => reject(err),
      })
      func(args)
    })
  }
}

// 微信小程序API使用
promisify(wx.request)({
  url: 'http://127.0.0.1/api/v1/users',
  data: {},
  method: 'POST',
  header: { AUTH: 'xxxxxxxx' },
  // success: res => {},
  // fail: err => {}
})

34_node 传参

在 package.json 里面脚本经常使用 node build.js 的命令打包，可以使用下面的方式传参。

1
2
3
4
5
6
7
8
9
10
11
12
13
const [nodePath, filePath, ...arguments] = process.argv
console.log(arguments)
const result = arguments.reduce((cur, value) => {
	const objKey = value.split('=')[0]
	const objValue = value.split('=')[1]
	cur[objKey] = objValue
	return cur
}, {})
console.log(result)

// 举例
node build.js arg1=1 arg2=2 arg3=3
node build.js arg1 arg2 arg3

也可以使用第三方插件，如 const argv = require('yargs').argv, 注意用法稍有不同（node build.js --arg1 1 --arg2 2 --arg3 3, 即 webpack-dev-server 使用的读取参数模块, webpack-dev-server –config ./webpack.conf.js）

PS: 多扩展一点，在 webpack-dev-server 启动服务器时，仅支持指定的参数，如–config,–inline 等，要传入自定义的一些参数可以通过下面方式

1
2
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --env.platform app
# argv.env.platform 即可拿到自定义参数

35_英文单词自动换行

本来这个是 css 问题，可以通过 css 解决，但是发现在富文本编辑器中存在用户复制粘贴导致的单词内空格通过 HTML 字符实体(&nbsp;)连接，css 失去效用，参考 outlook 和 qq 邮箱，采用加上 js 过滤的方式处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 假设这里contentHTML是富文本编辑的html数据
contentHTML = contentHTML.replace(/ /g, '&nbsp;')
contentHTML = contentHTML.replace(/(&nbsp;)+/g, function (matched, item) {
  const blankLength = matched.length / item.length
  // 2个以上&nbsp;出现情况
  if (blankLength > 2) {
    return ' ' + matched.slice(item.length, -item.length) + ' '
  }
  // 2个&nbsp;出现情况
  if (blankLength === 2) {
    return item + ' '
  }
  // 单个&nbsp;出现情况
  return ' '
})

拓展：这里 css 用下面的代码实现

1
2
3
4
word-wrap: break-word;
overflow-wrap: anywhere; /* overflow-wrap 是 CSS3 里的属性，用来取代 word-wrap，为了兼容2个都写上 */
/* ===== */
word-break: break-word; /* deprecated，目前依旧可用，且兼容性更好，作用相当于上面的2个 */

word-wrap: break-word; 和 overflow-wrap: break-word; 只适合在宽度固定的场景下，如果对于自适应宽度会失效，如 flex 布局右侧自适应。可以用 word-wrap: break-word; + overflow-wrap: anywhere; 处理，或者 word-break: break-word;目前来说，推荐使用 word-break: break-word;，兼容性更好（有点讽刺）。

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

https://caniuse.com/?search=overflow-wrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
var $cookies = {
  set: function (name, value, options = {}) {
    var domain = options.domain || location.host
    var path = options.path || '/'
    var expires = options.expires || 30 * 24 * 60 * 60 * 1000
    var expireTime = new Date()
    expireTime.setTime(expireTime.getTime() + expires)
    expires = expireTime.toGMTString()
    document.cookie =
      name +
      '=' +
      encodeURIComponent(value) +
      ';expires=' +
      expires +
      ';domain=' +
      domain +
      ';path=' +
      path
  },
  get: function (name) {
    var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
    var arr = document.cookie.match(reg)
    return arr && decodeURIComponent(arr[2])
  },
  remove: function (name, options = {}) {
    var domain = options.domain || location.host
    var path = options.path || '/'
    var exp = new Date()
    exp.setTime(exp.getTime() - 1)
    var cval = this.get(name)
    if (cval != null) {
      document.cookie =
        name +
        '=' +
        cval +
        ';expires=' +
        exp.toGMTString() +
        ';domain=' +
        domain +
        ';path=' +
        path
    }
  },
  list: function () {
    var result = {}
    var arrCookie = document.cookie.split('; ')
    for (var i = 0; i < arrCookie.length; i++) {
      var arr = arrCookie[i].split('=')
      result[arr[0]] = arr[1]
    }
    return result
  },
  clear: function () {
    // 这里可能会有点兼容问题，正则断言是ES6才支持的
    var keys = document.cookie.match(/[^ =;]+(?==)/g)
    keys = keys || []
    for (var i = keys.length; i--; ) {
      document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
    }
  },
}

37_微信内置浏览器环境判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var getRunEnv = function () {
  var isMobile = window.navigator.userAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
  ) // 是否手机端
  var isWx = /micromessenger/i.test(navigator.userAgent) // 是否微信(企业微信也带这个ua头)
  var isComWx = /wxwork/i.test(navigator.userAgent) // 是否企业微信

  if (isComWx && isMobile) {
    //手机端企业微信 （下载文件通过wx.preview的JSSDK实现）
    return 'com-wx-mobile'
  } else if (isComWx && !isMobile) {
    //PC端企业微信 （可以直接下载）
    return 'com-wx-pc'
  } else if (isWx && isMobile) {
    // 手机端普通微信 （不可以直接下载，需要引导用户使用浏览器打开）
    return 'wx-mobile'
  } else if (isWx && !isMobile) {
    // PC端普通微信 （不可以直接下载，需要引导用户使用浏览器打开）
    return 'wx-pc'
  } else {
    return 'other'
  }
}

参考：https://www.jianshu.com/p/93ab17a7d8b7

普通微信中，普通文件可以直接下载，apk 会被屏蔽，部分其他文件格式也会被屏蔽（解决：https://blog.csdn.net/weixin_45132005/article/details/90580806，好像最近类似的平台都无法访问了）

apk 要在微信中下载：https://segmentfault.com/q/1010000002553117

企业微信 PC 有接口可以调起浏览器打开：wx.invoke('openDefaultBrowser'， {}）, 如果文件下载只为预览，企业微信移动端可以用 wx.previewFile 接口

38_location.replace 不生效处理方法

在钉钉和微信的内置浏览器存在 location.relace 会产生历史问题，可以用下面方法解决。

1
2
3
4
5
6
7
8
function locationReplace(url) {
  if (history.replaceState) {
    history.replaceState(null, document.title, url)
    history.go(0)
  } else {
    location.replace(url)
  }
}

39_常用的正则表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 匹配URL的Origin
'https://www.baidu.com'.match(/^https?:\/\/[\w-.]+(:\d+)?/i)
// 验证邮件地址(http://stackoverflow.com/questions/46155/validate-email-address-in-javascript)
'mail@test.com'.match(
  /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/
)
// 手机号校验
'18886233487'.match(/^[1][3,4,5,6,7,8,9][0-9]{9}$/)
// 身份证校验
'415106199801012130'.match(
  /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
)
// IPV4校验
'122.12.56.65'.match(
  /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
)
// 是否包含中文
'中文 en_US'.match(/[\u4E00-\u9FA5]/)

40_生成随机数

1
2
3
4
5
6
7
8
9
10
11
function randomString(len) {
  len = len || 32
  /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
  var maxPos = $chars.length
  var pwd = ''
  for (i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
  }
  return pwd
}

41_文件大小格式化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// c 参数：表示要被转化的容量大小，以字节为单
// b 参数：表示如果转换时出小数，四舍五入保留多少位 默认为2位小数
function formatBytes(a, b) {
  if (0 == a) return '0 B'
  var c = 1024,
    d = b || 2,
    e = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
    f = Math.floor(Math.log(a) / Math.log(c))
  return parseFloat((a / Math.pow(c, f)).toFixed(d)) + ' ' + e[f]
}

function sizeTostr(size) {
  var data = ''
  if (size < 0.1 * 1024) {
    //如果小于0.1KB转化成B
    data = size.toFixed(2) + 'B'
  } else if (size < 0.1 * 1024 * 1024) {
    //如果小于0.1MB转化成KB
    data = (size / 1024).toFixed(2) + 'KB'
  } else if (size < 0.1 * 1024 * 1024 * 1024) {
    //如果小于0.1GB转化成MB
    data = (size / (1024 * 1024)).toFixed(2) + 'MB'
  } else {
    //其他转化成GB
    data = (size / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
  }
  var sizestr = data + ''
  var len = sizestr.indexOf('.')
  var dec = sizestr.substr(len + 1, 2)
  if (dec == '00') {
    //当小数点后为00时 去掉小数部分
    return sizestr.substring(0, len) + sizestr.substr(len + 3, 2)
  }
  return sizestr
}

http://4dn.net/jsxx/114.html

42_Promise.allSettled 实现

原生支持情况：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled

因为浏览器支持不好，自己实现一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
const allSettled = function (promiseList) {
  return new Promise((resolve, reject) => {
    const results = []
    let counter = 0
    for (let i = 0; i < promiseList.length; i++) {
      const pInstance = promiseList[i]
      pInstance
        .then((res) => {
          results[i] = {
            status: 'fulfilled',
            value: res,
          }
        })
        .catch((err) => {
          results[i] = {
            status: 'rejected',
            reason: err,
          }
        })
        .finally((_) => {
          counter += 1
          counter === promiseList.length && resolve(results)
        })
    }
  })
}

const p1 = new Promise((resolve, reject) => {
  setTimeout((_) => {
    resolve('fulfilled value')
  }, 2000)
})
const p2 = new Promise((resolve, reject) => {
  setTimeout((_) => {
    reject('rejected reason')
  }, 3000)
})

allSettled([p1, p2]).then((res) => {
  let successResults = results
    .filter((item) => item.status === 'fulfilled')
    .map((item) => item.value)
  let failResults = results
    .filter((item) => item.status === 'rejected')
    .map((item) => item.reason)
  console.log('successResults', successResults)
  console.log('failResults', failResults)
})

43_判断是否为整数类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function isInteger(obj) {
  return typeof obj === 'number' && obj % 1 === 0
}
function isInteger(obj) {
  return Math.floor(obj) === obj // 这里 Math.round、Math.ceil、Math.floor 都一样
}
function isInteger(obj) {
  // ES6
  return Number.isInteger(obj)
}
// 下面2种方式有轻微缺陷（可以作为参考）
function isInteger(obj) {
  return parseInt(obj, 10) === obj
}
// isInteger(1000000000000000000000) // false
function isInteger(obj) {
  return (obj | 0) === obj
}
// isInteger(Math.pow(2, 32)) // 32位以上的数字返回false了

44_防抖节流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 防抖（常见场景：键盘输入关键词联想）
function debounce(fn, delay, options = {}) {
  let timer = null
  return function () {
    // 指定在延迟开始前调用
    if (options.leading) {
      timer ? clearTimeout(timer) : fn.apply(this, arguments)
      timer = setTimeout((_) => {
        timer = null
      }, delay)
    } else {
      timer && clearTimeout(timer)
      timer = setTimeout((_) => {
        fn.apply(this, arguments)
        timer = null
      }, delay)
    }
  }
}

// 节流（常见场景：滚动条监听）
function throttle(fn, delay, options = {}) {
  let timer = null
  return function () {
    if (timer) return

    if (options.leading) {
      fn.apply(this, arguments)
      timer = setTimeout((_) => {
        timer = null
      }, delay)
    } else {
      timer = setTimeout((_) => {
        fn.apply(this, arguments)
        timer = null
      }, delay)
    }
  }
}

45_删除 DOM 上的所有属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function cleanDOM(innerHTMLStr, excludeAttrs = []) {
  const div = document.createElement('div')
  div.innerHTML = innerHTMLStr
  const nodes = div.querySelectorAll('*')
  for (let i = 0; i < nodes.length; i++) {
    const attributes = nodes[i].attributes
    for (let j = 0; j < attributes.length; j++) {
      if (excludeAttrs.includes(attributes[j].name)) continue
      nodes[i].removeAttribute(attributes[j].name)
    }
  }
  return div.innerHTML
}
cleanDOM(document.body.innerHTML, ['colspan', 'rowspan'])

这里只为记录一个疑惑，要完全清除需要执行多遍，不清楚为什么？猜测和浏览器重排优化有关

46_懒加载

对于邮件或者博文，可能存在 html 过长导致的页面显示不了或者等待过长时间，可以使用 DOM 的懒加载处理（特别是 IOS 移动端，低内存下如果来个 10 多 M 的 html 字符串则容易卡死或者自动刷新）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #displayRoom {
        width: 500px;
        height: 800px;
        margin: 50px auto;
        border: 1px solid #ccc;
        overflow: auto;
      }

      #displayRoom img {
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="displayRoom"></div>
    <script>
      function throttle(fn, delay, options = {}) {
        let timer = null
        return function () {
          if (timer) return

          if (options.leading) {
            fn.apply(this, arguments)
            timer = setTimeout((_) => {
              timer = null
            }, delay)
          } else {
            timer = setTimeout((_) => {
              fn.apply(this, arguments)
              timer = null
            }, delay)
          }
        }
      }

      function checkVisible(elem) {
        // https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
        if (!(elem instanceof Element))
          throw Error('DomUtil: elem is not an element.')
        if (elem.checkVisibility)
          return elem.checkVisibility({
            checkOpacity: true, // Check CSS opacity property too
            checkVisibilityCSS: true, // Check CSS visibility property too
          })
        return !!(
          elem.offsetWidth ||
          elem.offsetHeight ||
          elem.getClientRects().length
        )
        // var rect = elm.getBoundingClientRect();
        // var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
        // return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
      }

      function hideDOM(mailHTML) {
        const div = document.createElement('div')
        mailHTML = mailHTML.replace(/src\s*?=/gi, 'tmp-src=') // 防止资源提前加载
        div.innerHTML = mailHTML
        // 博文不好划分，因此对于一些容易占用资源的元素进行隐藏(尽量根据实际情况进行隐藏，这里简单化处理)
        const nodes = div.querySelectorAll('blockquote, img, video, table')
        // 注意为了防止嵌套情况，需要从后往前替换
        for (let i = nodes.length - 1; i >= 0; i--) {
          const lazyNode = document.createElement('lazynode')
          const value = nodes[i].outerHTML.replace(/tmp-src=/g, 'lazy-src=')
          lazyNode.setAttribute('value', value)
          nodes[i].parentNode.replaceChild(lazyNode, nodes[i])
        }
        return div.innerHTML.replace(/tmp-src=/g, 'src=')
      }

      function showDOM(lazyNode) {
        if (!lazyNode.parentNode) return
        if (lazyNode.getAttribute('isloading')) return

        const div = document.createElement('div')
        const value = lazyNode.getAttribute('value')
        div.innerHTML = value.replace(/lazy-src=/gi, 'src=')
        const node = div.childNodes[0] || div
        lazyNode.setAttribute('isloading', true)
        lazyNode.innerText = '加载中...'
        new Promise((resolve, reject) => {
          node.onload = resolve
          setTimeout((_) => {
            console.log('loading timeout(5s), ', node)
            resolve()
          }, 5000) // 防止部分元素不触发onload
        }).then((_) => {
          lazyNode.parentNode.replaceChild(node, lazyNode)
        })
      }

      const displayRoom = document.getElementById('displayRoom')
      displayRoom.innerHTML = hideDOM(`
                <div class="container" style="text-align: center;">
                    <img src="https://blog.cdn.ionluo.cn/wallpaper/1583472341555.jpg">
                    <br><br><br><br><br><br><br><br><br><br><br><br><br>
                    <br><br><br><br><br><br><br><br><br><br><br><br><br>
                    <br><br><br><br><br><br><br><br><br><br><br><br><br>
                    <img src="https://blog.cdn.ionluo.cn/wallpaper/1583472373980.jpg">
                    <br><br><br><br><br><br><br><br><br><br><br><br><br>
                    <br><br><br><br><br><br><br><br><br><br><br><br><br>
                    <br><br><br><br><br><br><br><br><br><br><br><br><br>
                    <img src="https://blog.cdn.ionluo.cn/wallpaper/1583472406696.jpg">
                    <br><br><br><br><br><br><br><br><br><br><br><br><br>
                    <br><br><br><br><br><br><br><br><br><br><br><br><br>
                    <br><br><br><br><br><br><br><br><br><br><br><br><br>
                    <img src="https://blog.cdn.ionluo.cn/wallpaper/1583472471863.jpg">
                </div>
        `)

      // 滚动时候动态监听是否需要更新元素
      var lazyNodes = [].slice.call(document.querySelectorAll('lazynode'))
      if ('IntersectionObserver' in window) {
        const lazyNodeObserver = new IntersectionObserver(function (
          entries,
          observer
        ) {
          entries.forEach(function (entry) {
            if (entry.isIntersecting) {
              const lazyNode = entry.target
              showDOM(lazyNode)
              lazyNodeObserver.unobserve(lazyNode)
            }
          })
        })
        lazyNodes.forEach(function (lazyNode) {
          lazyNodeObserver.observe(lazyNode)
        })
      } else {
        var maxScrollTop = 0
        function lazyLoadNode(e) {
          var scrollTop = displayRoom.scrollTop
          var clientHeight = displayRoom.clientHeight
          var scrollContainerTop = displayRoom
            .querySelector('.container')
            .getBoundingClientRect().top
          if (scrollTop < maxScrollTop) return // 只向下滚动的时候替换一次
          maxScrollTop = scrollTop

          for (var i = 0; i < lazyNodes.length; i++) {
            if (!checkVisible(lazyNodes[i])) continue

            const lazyNodeTop = lazyNodes[i].getBoundingClientRect().top
            // 如果滚动里面元素没有offsetParent直接用offsetTop也可以
            const offsetTop = lazyNodeTop - scrollContainerTop
            // 预留1/2提前加载
            if (offsetTop < scrollTop + clientHeight * 1.5) {
              showDOM(lazyNodes[i])
            }
          }
        }
        // 节流函数throttle可以参考本文节流防抖一节
        displayRoom.onscroll = throttle(lazyLoadNode, 1000)
        // 先渲染第一屏的内容
        lazyLoadNode()
      }
    </script>
  </body>
</html>

上面还存在一个问题就是对于异步加载的元素，直接替换后在内容加载出来前该位置还是保持空白。因此如果场景更小一些，比如单纯只有图片的场景，可以通过类似的方式实现（如下）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function hideDOM(mailHTML) {
  const div = document.createElement('div')
  div.innerHTML = mailHTML
  const nodes = div.querySelectorAll('img')
  for (let i = nodes.length - 1; i >= 0; i--) {
    nodes[i].setAttribute('data-src', nodes[i].getAttribute('src'))
    nodes[i].setAttribute(
      'src',
      'https://blog.cdn.ionluo.cn/blog/loading.gif'
    )
  }
  return div.innerHTML
}

function showDOM(lazyNode) {
  lazyNode[i].setAttribute('src', nodes[i].getAttribute('data-src'))
}

另外图片的懒加载还有一个专门的属性，可惜兼容性不好。https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/loading

47_组合手势的一点思考

移动端开发中，有的时候希望像 PC 端一样可以通过组合键来切换不同功能，但是移动端键盘无法输入组合键，则可以考虑用组合手势来代替（题外话：另外一个考虑就是画一个简单的符号，但是符号涉及轨迹识别，准确性不好验证）

组合手势难点在于要控制手势的时间衔接，想到支付宝的鲤鱼跃龙门的小游戏，通过快速点击让小鲤鱼越冲越高，如果不点击则慢慢下降，设计实现了下面的代码（只实现了简单的点击+长按，如果要改成滑动就判断距离，和长按同理）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// 进入页面 ${limitTime} 秒内，长按 ${longpressTime} 秒后快速点击 ${clickTime} 次，等待 ${waitTime} 秒开启调试模式
;(function (limitTime, longpressTime, clickTime, waitTime) {
  let progress = []
  let timer = null
  let touchStartTime = null
  let touchEndTime = null

  window.ionic.on('touch', handleTouch, document)
  window.ionic.on('release', handleRelease, document)

  setTimeout((_) => {
    window.ionic.off('touch', handleTouch, document)
    window.ionic.off('release', handleRelease, document)
  }, limitTime * 1000)

  function handleTouch() {
    touchStartTime = new Date().getTime()
    if (!progress.length) {
      // 长按
      // pass
    } else if (progress.length) {
      // 点击
      consoleLogMain(`长按后点击${progress.length}次`)
      timer && clearTimeout(timer)
      if (progress.length === clickTime) {
        // 完成点击，等待2s开启调试
        timer = setTimeout((_) => {
          progress = []
          timer = null
          startDebugger().then((_) => consoleLogMain('已打开调试模式'))
        }, waitTime * 1000)
      } else {
        timer = setTimeout((_) => {
          progress = []
          timer = null
        }, 500) // 点击之后500毫秒不操作就中断
      }
      progress[progress.length] = 1
    }
  }

  function handleRelease() {
    touchEndTime = new Date().getTime()
    if (!progress.length) {
      // 长按
      const diffSecond = (touchEndTime - touchStartTime) / 1000
      if (diffSecond >= longpressTime && diffSecond <= clickTime - 1) {
        progress[0] = 1
        timer && clearTimeout(timer)
        timer = setTimeout((_) => {
          progress = []
          timer = null
        }, 1000) // 长按之后1秒不操作就中断
        consoleLogMain('完成长按')
      }
    } else if (progress.length) {
      // 点击
      // pass
    }
  }
})(60, 2, 5, 2)

list = document.querySelector('ng-include > ion-list > div')
item = list.querySelector('ion-item')
var fragment = document.createDocumentFragment()
for (let i = 0; i < 1000; i++) {
  fragment.appendChild(item.cloneNode(true))
}
list.appendChild(fragment)

48_支持解析带注释的 JSON

有的时候应用需要设置一些配置，通常可以使用 JSON 文件来描述，但是直接 JSON.parse 无法解析带注释的 JSON，这时候可以通过自定义解析器来支持注释

1
2
3
4
5
6
const CJSON = {}
CJSON.parse(txt) {
    txt = txt.replace(//g, '')
        .replace(/\\u2028/g, '\\\\u2028').replace(/\\u2029/g, '\\\\u2029') // 处理换行符
    return JSON.parse(txt)
}

当然最直接的方式就是使用开源的库，如comment-json

49_函数拷贝

1
2
3
4
5
6
7
8
function func(a, b, c) {
  return a * b * c
}
// 方式1， 很多函数库都是用这个方法
var closeFunc = new Function('return ' + func.toString())()

// 方式2 // 利用bind 返回函数
var closeFunc = func.prototype.bind({})

50_递归优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 普通递归
function fibonacci(n) {
  if (n <= 1) return 1

  return fibonacci(n - 1) + fibonacci(n - 2)
}
fibonacci(10)
// 尾递归(严格模式下有效)
function tailFibonacci(n, ac1 = 1, ac2 = 1) {
  if (n <= 1) return ac2

  return tailFibonacci1(n - 1, ac2, ac1 + ac2)
}
tailFibonacci(1000)
// 尾递归优化实现（普通模式可用）
function tco(f) {
  let value
  let active = false
  const accumulated = []

  return function accumulator() {
    accumulated.push(arguments)
    if (!active) {
      active = true
      while (accumulated.length) {
        value = f.apply(this, accumulated.shift())
      }
      active = false
      return value
    }
  }
}
tco(tailFibonacci)(1000)

// 蹦床函数实现尾递归优化（了解即可）
function trampoline (f) {
while (f && f instanceof Function) {
f = f()
}
return f
}
function tailFibonacci2 (n, ac1 = 1, ac2 = 1) {
if (n <= 1) return ac2

return tailFibonacci2.bind(null, n - 1, ac2, ac1 + ac2)
}
trampoline(tailFibonacci2(1000))

51_求时间段交集

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 求时间段交集(time1, time2)
function getTimeIntersection(
  [start1 = -Infinity, end1 = Infinity],
  [start2 = -Infinity, end2 = Infinity]
) {
  if (start1 > end1) [start1, end1] = [end1, start1]
  if (start2 > end2) [start2, end2] = [end2, start2]

  // 无交集(time2在time1的左右)
  if (end1 < start2 || start1 > end2) return []

  // 完全相交(time2在time1内部或time1在time2内部)
  if (start1 <= start2 && end1 >= end2) return [start2, end2]
  if (start2 <= start1 && end2 >= end1) return [start1, end1]

  // 部分相交(time2仅开始或者结束点在time1内)
  if (start2 <= end1 && start2 >= start1) return [start2, end1]
  if (end2 <= end1 && end2 >= start1) return [start1, end2]
}
getTimeIntersection(
  [new Date('2023/05/04'), new Date('2023/05/10')],
  [new Date('2023/05/08')]
)

53_等待回调执行

对于一些 sdk 内嵌的时候，需要等待 sdk 接口注入完成执行方法封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function NativeJs(timeout) {
  var that = this
  var timer = null

  that.isReady = false
  that.callbackstack = []
  that.ready = function(callback) {
    if (that.isReady) return callback()

    that.callbackstack.push(callback)
  }

  function nativeJsReady() {
    timer && clearTimeout(timer)
    that.isReady = true
    for (var i = 0; i < that.callbackstack.length; i++) {
        that.callbackstack[i]()
    }
    that.callbackstack = []
  }

  // sdk接口注入完成回调 onJsReady
  window.onJsReady = nativeJsReady
  timeout && (timer = setTimeout(function() {
    console.warn('onJsReady timeout!')
  }, timeout))
}

var nativeJs = new NativeJs()
nativeJs.ready(function() {
  ...
})

54_不定长度的 promise 依次执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function loadScript (url) {
  return new Promise((resolve, reject) => {
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.onload = function () {
      resolve(`脚本[${url}]引入成功！`)
    }
    script.onerror = function () {
      reject(`脚本[${url}]引入失败！`)
    }
    script.src = url
    document.head.appendChild(script)
  })
}

var extraScripts = []
var defer = Promise.resolve()
extraScripts.forEach(url => {
  defer = defer.then(loadScript.bind(null, url))
})
defer.then().catch().finally()

55_虚拟滚动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<template>
  <div class="demo-container">
    <!-- 按最细的条目粒度滚动，每次滚动一个条目立刻渲染对应位置（用冗余节点来保证滚动的连续性） -->
    <div class="list list-1" @scroll="handleListScroll1" ref="itemList">
      <div :style="`height:${containerHeight}px;`">
        <div
          class="item"
          v-for="(item, index) in renderList"
          :key="index"
          :style="`height:${itemHeight}px;line-height:${itemHeight}px;transform:translateY(${top}px)`"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <!-- 按分页思想滚动，一次渲染当前页面的前面2个页面（为了兼容性能较差的机器更新不及时问题，原理和上面类似，只是要区分开始和结束） -->
    <div class="list list-2" @scroll="handleListScroll2" ref="pageList">
      <div :style="`height:${containerHeight}px;`">
        <div
          class="item"
          v-for="(item, index) in renderList2"
          :key="index"
          :style="`height:${itemHeight2}px;line-height:${itemHeight2}px;transform:translateY(${top2}px)`"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <!-- 不定高的虚拟滚动（不设置容器高，滚动的过程中动态撑开即可） -->
    <div class="list list-3" @scroll="handleListScroll3" ref="unHeightList">
      <div
        class="item"
        v-for="(item, index) in renderList3"
        :key="index"
        :data-index="item.index"
        :style="`transform:translateY(${top3}px)`"
      >
        <div v-html="item.value"></div>
      </div>
    </div>
  </div>
</template>
<script>
import throttle from 'lodash/throttle'

// 条目滚动
const itemListMixin = {
  data() {
    return {
      fullList: [], // 完整列表
      renderList: [], // 需要渲染的列表
      containerHeight: 0, // 容器高度
      itemHeight: 60, // 每一项的高度
      start: 0, // 开始渲染的位置
      limit: 0, // 显示条目数量
      top: 0, // 向上偏移量
    }
  },
  mounted() {
    // 初始化列表
    this.fullList = [...new Array(500)].map((_, index) => index)
    // 容器高度
    this.containerHeight = this.fullList.length * this.itemHeight
    // 计算页面能容纳下几个节点并且设置四个节点作为冗余
    this.limit = Math.ceil(window.innerHeight / this.itemHeight) + 4
    // 设置要渲染的列表 设置成能够容纳下的最大元素个数
    this.renderList = this.fullList.slice(0, this.limit)
  },
  methods: {
    handleListScroll1: throttle(function () {
      // scrollTop常量记录当前滚动的高度
      const scrollTop = this.$refs.itemList.scrollTop
      // 卷去了多少个
      const start = Math.floor(scrollTop / this.itemHeight)
      // 对比上一次的开始节点 比较是否发生变化，发生变化后便重新渲染列表
      if (this.start !== start) {
        // 使用slice拿到需要渲染的那一部分
        this.renderList = this.fullList.slice(start, start + this.limit)
        // 事实上这里最好是 this.renderList = this.fullList.slice(Math.max(start -2, 0), start - 2 + this.limit)
        // 即保证上下都有冗余节点
        // 这里的top用于设置translateY
        this.top = start * this.itemHeight
        this.start = start
      }
    }, 50),
  },
}

// 分页滚动（分页思维较好理解，不用纠结选取多少冗余节点好）
const pageListMixin = {
  data() {
    return {
      fullList2: [], // 完整列表
      renderList2: [], // 需要渲染的列表
      containerHeight2: 0, // 容器高度
      itemHeight2: 60, // 每一项的高度
      start2: 0, // 开始渲染的**页数**
      limit2: 0, // **每页**显示条目数量
      top2: 0, // 向上偏移量
    }
  },
  mounted() {
    // 初始化列表
    this.fullList2 = [...new Array(500)].map((_, index) => index)
    // 容器高度
    this.containerHeight2 = this.fullList2.length * this.itemHeight2
    // 计算一个页面能容纳下几个节点
    this.limit2 = Math.ceil(window.innerHeight / this.itemHeight2)
    // 设置要渲染的列表（开头和结尾分别没有上一页和下一页）
    this.renderList2 = this.fullList.slice(0, 2 * this.limit2)
    // console.log('this.limit2', this.limit2)
  },
  methods: {
    handleListScroll2: throttle(function () {
      // scrollTop常量记录当前滚动的高度
      const scrollTop = this.$refs.pageList.scrollTop
      // 当前在第几页
      const start = Math.floor(scrollTop / (this.itemHeight2 * this.limit2))
      // 对比上一次的开始页面 比较是否发生变化，发生变化后便重新渲染列表
      if (this.start2 !== start) {
        // 使用slice拿到需要渲染的那一部分(slice函数的特殊性只需限制begin不小于0即可)
        const begin = Math.max(start * this.limit2, 0)
        this.renderList2 = this.fullList.slice(begin, (start + 2) * this.limit2)
        // 这里的top用于设置translateY
        this.top2 = begin * this.itemHeight2
        this.start2 = start
      }
    }, 50),
  },
}

// 不定高滚动 (根据内容撑开情况：以预估高度先行渲染，然后获取真实高度并缓存index)
// 不能设置高度，因为没有加载过的节点无法知道高度，如果跳转范围大就不能获取到对应位置的节点了（移动端可以忽略这个问题，因为移动端无法一下子跳到底）
const unHeightListMixin = {
  data() {
    return {
      fullList3: [], // 完整列表
      renderList3: [], // 需要渲染的列表
      estimatedItemSize3: 60, // 每一项的*预估*高度
      start3: 0, // 开始渲染的位置
      limit3: 0, // 显示条目数量
      top3: 0, // 向上偏移量
      curMaxIndex3: 0, // 当前渲染到的下标（作为二分查找的end）
    }
  },
  updated() {
    const nodes = this.$refs.unHeightList.querySelectorAll('.item')
    nodes.forEach((node) => {
      const domIndex = parseInt(node.getAttribute('data-index') || -1) // 兼容IOS, 获取节点在fullList中的下标
      if (!this.fullList3[domIndex] || this.fullList3[domIndex].height) return // 已经设置过的就不设置了

      this.fullList3[domIndex].height = node.offsetHeight
      this.fullList3[domIndex].top =
        domIndex === 0
          ? 0
          : this.fullList3[domIndex - 1].top +
            this.fullList3[domIndex - 1].height
      this.curMaxIndex3 = Math.max(this.curMaxIndex3, domIndex)
    })
  },
  mounted() {
    // 初始化列表
    this.fullList3 = [...new Array(500)].map((_, index) => {
      const brNum = this.getRandomNumber(0, 10)
      return { index: index, value: index + '<br/>'.repeat(brNum) }
    })
    // 计算页面能容纳下几个节点并且设置四个节点作为冗余
    this.limit3 = Math.ceil(window.innerHeight / this.estimatedItemSize3) + 4
    // 设置要渲染的列表 设置成能够容纳下的最大元素个数
    this.renderList3 = this.fullList3.slice(0, this.limit3)
  },
  methods: {
    // 获取一个在[min, max]的整数
    getRandomNumber(min, max) {
      // [0, 1) -> [0, max-min+1) -> [min, max+1) -> [min, max]
      return Math.floor(Math.random() * (max - min + 1) + min)
    },
    // 二分法查找最接近scrollTop的位置（需要小于或者等于scrollTop）
    binarySearchStart(value) {
      let [start, end] = [0, this.curMaxIndex3]
      let tmpIndex = -1
      while (start <= end) {
        const mid = Math.floor((start + end) / 2)
        const top = this.fullList3[mid].top
        if (top === value) {
          return mid
        } else if (top < value) {
          start = mid + 1
          tmpIndex = mid
        } else if (top > value) {
          end = mid - 1
        }
      }
      return tmpIndex
    },
    handleListScroll3: throttle(function () {
      // scrollTop常量记录当前滚动的高度
      const scrollTop = this.$refs.unHeightList.scrollTop
      // 卷去了多少个
      const start = this.binarySearchStart(scrollTop)
      // 对比上一次的开始节点 比较是否发生变化，发生变化后便重新渲染列表
      if (start > -1 && this.start3 !== start) {
        // 使用slice拿到需要渲染的那一部分
        this.renderList3 = this.fullList3.slice(start, start + this.limit3)
        // 这里的top用于设置translateY
        this.top3 = this.fullList3[start].top
        this.start3 = start
      }
    }, 50),
  },
}

// 图片等需要异步加载情况在不定高虚拟列表较难实现，如果存在这种情况建议固定图片的高度然后用object-fit去自适应

export default {
  name: 'virtualscroll',
  mixins: [itemListMixin, pageListMixin, unHeightListMixin],
}
</script>

<style scoped lang="scss">
.demo-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  margin-top: 10vh;
}
.list {
  width: 200px;
  height: 600px;
  overflow: scroll;
  border: 1px solid #ccc;
}
.item {
  text-align: center;
  width: 100%;
  border-bottom: 1px solid lightgray;
}
</style>

56_PT2PX

1
2
px = 72pt / 96 = 0.75 * pt
pt = px * 4 / 3

57_公交卡规则更改后花费

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const MONTH_DAY = 22 // 一个月的天数
const DAY_SPEND = [2, 5, 5, 2] // 一天乘车次数以及每次的花费

function oldRule() {
  // 刷够15次6折
  let sum = 0
  for (let i = 0; i < DAY_SPEND.length * MONTH_DAY; i++) {
    if (i < 15) {
      sum += DAY_SPEND[i % DAY_SPEND.length]
    } else {
      sum += DAY_SPEND[i % DAY_SPEND.length] * 0.6
    }
  }
  return sum
}

function newRule() {
  // 大于80 6折， 大于200 5折
  let sum = 0
  for (let i = 0; i < DAY_SPEND.length * MONTH_DAY; i++) {
    if (sum > 200) {
      sum += DAY_SPEND[i % DAY_SPEND.length] * 0.5
    } else if (sum > 80) {
      sum += DAY_SPEND[i % DAY_SPEND.length] * 0.8
    } else {
      sum += DAY_SPEND[i % DAY_SPEND.length]
    }
  }
  return sum
}

console.log(newRule() - oldRule())

58_原型链继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
function __extends(/* 派生类 */ d, /* 基类 */ b) {
  // 将基类的静态成员复制到派生类
  for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]
  // 设置派生类原型指向基类原型，即 d.prototype.__proto__ = b.prototype
  function __() {
    this.constructor = d
  }
  __.prototype = b.prototype
  d.prototype = new __()
  // // 如果支持ES6可以简写为：
  // d.prototype = Object.create(b.prototype)
  // d.prototype.constructor = d
}

var Point = (function () {
  function Point(x, y) {
    this.x = x
    this.y = y
  }

  Point.prototype.add = function (point) {
    return new Point(this.x + point.x, this.y + point.y)
  }

  return Point
})()

var Point3D = (function (_super) {
  __extends(Point3D, _super)

  function Point3D(x, y, z) {
    _super.call(this, x, y)
    this.z = z
  }

  Point3D.prototype.add = function (pointer) {
    var point2D = _super.prototype.add.call(this, pointer)
    return new Point3D(point2D.x, point2D.y, this.z + pointer.z)
  }

  return Point3D
})(Point)

var point1 = new Point3D(3, 4, 5)
var point2 = new Point3D(3, 4, 5)
console.log(point1.add(point2)) // Point3D {x: 6, y: 8, z: 10}

还是 class 方便啊，可惜不支持 ES5

1
2
3
4
5
6
7
8
9
10
class Point3D extends Point {
  constructor(x, y, z) {
    super(x, y)
    this.z = z
  }
  add(point) {
    var point2d = super.add(point)
    return new Point3D(point2d.x, point2d.y, this.z + point.z)
  }
}

59_克隆 DOM 时也复制事件

参考：https://github.com/shulandmimi/blog/issues/5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
;(function () {
  const EventList =
    `oncopy oncut onpaste onabort onblur oncancel oncanplay oncanplaythrough onchange onclick onclose oncontextmenu oncuechange ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop ondurationchange onemptied onended onerror onfocus onformdata oninput oninvalid onkeydown onkeypress onkeyup onload onloadeddata onloadedmetadata onloadstart onmousedown onmouseenter onmouseleave onmousemove onmouseout onmouseover onmouseup onmousewheel onpause onplay onplaying onprogress onratechange onreset onresize onscroll onseeked onseeking onselect onstalled onsubmit onsuspend ontimeupdate ontoggle onvolumechange onwaiting onwheel onauxclick ongotpointercapture onlostpointercapture onpointerdown onpointermove onpointerup onpointercancel onpointerover onpointerout onpointerenter onpointerleave onselectstart onselectionchange onanimationend onanimationiteration onanimationstart ontransitionend onpointerrawupdate onbeforecopy onbeforecut onbeforepaste onsearch onfullscreenchange onfullscreenerror onwebkitfullscreenchange onwebkitfullscreenerror`.split(
      ' '
    )
  const cache = new WeakMap()
  const addEventListener = EventTarget.prototype.addEventListener

  EventTarget.prototype.addEventListener = function (type, handler, options) {
    const target = this
    const event = cache.get(target) || cache.set(target, {}).get(target)
    const data = {
      type,
      handler,
      options,
    }
    if (typeof event === 'object' && event !== null && !Array.isArray(event)) {
      const targetEvent = event[type] || (event[type] = [])
      targetEvent.push(data)
    }
    return addEventListener.call(target, type, handler, options)
  }

  const removeEventListener = EventTarget.prototype.removeEventListener
  EventTarget.prototype.removeEventListener = function (
    type,
    handler,
    options
  ) {
    const target = this
    cache.delete(target)
    return removeEventListener.call(target, type, handler, options)
  }

  const cloneNode = Node.prototype.cloneNode
  Node.prototype.cloneNode = function (copyDeepAndEvent) {
    const node = cloneNode.call(this, copyDeepAndEvent)
    if (copyDeepAndEvent) {
      const event = cache.get(this) || {}
      // addEventListener 绑定的
      for (let prop in event) {
        const targetEvent = event[prop]
        if (Array.isArray(targetEvent)) {
          for (let i = 0; i < targetEvent.length; i++) {
            node.addEventListener(
              targetEvent[i].type,
              targetEvent[i].handler,
              targetEvent[i].options
            )
          }
        }
      }

      // 句柄
      for (let i = 0; i < EventList.length; i++) {
        if (typeof this[EventList[i]] === 'function')
          node[EventList[i]] = this[EventList[i]]
      }
    }
    return node
  }
})

const div1 = document.createElement('div')
const handler = function () {
  console.log('event', this)
}
div1.onclick = () => {
  console.log('123')
}
div1.style.cssText = `
    width: 100px;
    height: 100px;
    background: red;
`
document.body.appendChild(div1)
const div2 = div1.cloneNode(true)
document.body.appendChild(div2)

自实现绑定方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function cache() {
    const map = new Map();
    return {
        add(k, v){
            let arr = map.get(k);

            Array.isArray(arr) ? arr.push(v) : arr = [v];
            return map.set(k, arr);
        },
        del(k){
            return map.delete(k);
        },
        get(k) {
            return map.get(k);
        }
    }
}
const EventCache = cache();
function clone(DeepAndEventClone) {
    const newEl = this.el;
    if(DeepAndEventClone) {
        const allEvent = EventCache.get(this.el);
        if(allEvent && Array.isArray(allEvent)) {
            for(let i = 0; i < allEvent.length; i ++>) {
                const event = allEvent[i];
                on(newEl, event.type, event.handler, event.options);
            }
        }
    }
}

// 绑定事件，绑定事件时，根据DOM缓存元素
function on(target, type, handler, options) {
    target.addEventListener(type, handler, options);
    EventCache.add(target, {
        type,
        handler,
        options
    });
}

60_ html2text and text2html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function encode(str) {
  return (str + '')
    .replace(/&/g, '&amp;')
    .replace(/>/g, '&gt;')
    .replace(/</g, '&lt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
}

function text2html(str) {
  if (!str) return ''

  str = encode(str)

  // 将\n替换为<br>
  str = str.replace(/\n/gi, '<br>')

  // 将空格替换为&nbsp;
  str = str.replace(/ /gi, '&nbsp;')

  // 去掉两边的空白
  return str.trim()
}

function html2text() {
  // https://www.npmjs.com/package/html-to-text
}

61_Promise.abort 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function abortWrapper(p1) {
  let abort
  let p2 = new Promise((resolve, reject) => (abort = reject))
  let p3 = Promise.race([p1, p2])
  p3.abort = abort
  return p3
}

// 使用
const p = abortWrapper(
  new Promise((resolve, reject) => {
    setTimeout((_) => resolve('完成'), 3000)
  })
)
p.then(console.log).catch(console.error)
setTimeout((_) => p.abort('用户取消'), 1000)

62_处理前端竞态请求

分为 2 种情况，取消请求和忽略请求，见：https://mp.weixin.qq.com/s/H1nbIeryxdaPhiOmkI_oRA

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
  <div id="reolsveLastByCancel" style="height: 200px; background-color: aqua; margin: 30px;">连续点我取消中间请求（见控制台打印）</div>
  <div id="reolsveLastByIgnore" style="height: 200px; background-color: brown; margin: 30px;">连续点我忽略中间请求（见控制台打印）</div>
  <script>
    /** 取消竞态请求（可以减轻服务器压力）
     * 缺点：不同的promise取消方式不同，如fetch,axios都有各自的取消方法
     * @param {() => {promise, cancel}} fn
     * @return {*}
    */
    function getResolveLastByCancel(fn) {
      let globalCancel = null;
      return function() {
        let { promise, cancel } = fn.apply(this, arguments);
        globalCancel && globalCancel();
        globalCancel = cancel;
        return promise;
      };
    };

    /** 忽略竞态请求（更加通用）
     * @param {() => promise} fn
     * @return {*}
    */
    function getResolveLastByIgnore(fn) {
      let globalId = 0;
      return function () {
        return new Promise((resolve, reject) => {
          // 锁标记可以用 自增id 或者 时间戳（时间戳不会有越界问题，但是如果是同时发起的请求不能被忽略）
          const id = ++globalId;
          fn.apply(this, arguments)
            .then(res => {
              // 只处理最新请求的返回
              id === globalId && resolve(res);
            }).catch(err => {
              // 只处理最后一次请求的异常
              id === globalId && reject(err);
            })
        })
      }
    }


    /**  给普通promise添加取消请求的能力，参考 awesome-imperative-promise
     * => https://juejin.cn/post/7128205011019890695
    */
    function createImperativePromise(pro) {
      let resolve = null;
      let reject = null;

      const warppedPromise = new Promise((_resolve, _reject) => {
          resolve = _resolve;
          reject = _reject;
      })

      pro.then((res) => {
        resolve && resolve(res);
      })
      .catch((err) => {
        reject && reject(err);
      });

      // 在这里可以封装取消的方法，比如
      const cancel = () => {
        resolve = null;
        reject = null;
      }

      return {
        promise: warppedPromise,
        cancel
      }
    }

    // 取消竞态请求（以fetch为例）
    // const { promise, cancel } = createImperativePromise(pro); // 对于普通的promise
    const getSomeResource2 = getResolveLastByCancel((controller) => ({
      promise: fetch('http://mail.test.com/coremail/s/json/?func=global:options', { signal: controller.signal }),
      cancel: _ => controller.abort()
    }));
    document.getElementById('reolsveLastByCancel').onclick = function() {
      const controller = new AbortController();
      getSomeResource2(controller).then(console.log);
    }

    // 忽略竞态请求
    const getSomeResource1 = getResolveLastByIgnore((delay, logTxt) => {
      return new Promise((resolve, reject) => {
        setTimeout(_ => { resolve(logTxt)}, delay);
      })
    });
    document.getElementById('reolsveLastByIgnore').onclick = function() {
      getSomeResource1(1000, '接收到请求结果！').then(console.log)
    }

    // 还有一种页面上阻止用户触发的方式，比如loading遮罩。该方式较为简单不单独说明
  </script>
</body>
</html>

63_导出 table 数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function exportToCSV(data = [], filename = 'demo.csv') {
  const link = document.createElement('a')
  if (link.download == null)
    return alert('您的浏览器不支持下载，请升级浏览器版本！')
  if (!data || !data.length) return alert('数据不能为空！')

  const keys = Object.keys(data[0])
  let csvContent = `${keys.join(',')}\n`
  data.forEach((item) => {
    const row = keys.map((key) =>
      item[key] != null ? `="${item[key].toString()}"` : ''
    )
    csvContent += row.join(',') + '\n'
  })
  // console.table(data)
  // console.log(csvContent)
  const blob = new Blob([csvContent], { type: 'text/csv' })
  const csvUrl = window.URL.createObjectURL(blob)
  link.href = csvUrl
  link.style.display = 'none'
  link.setAttribute('download', filename)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

这里存在以 0 开始的字符串，用 excel 打开后，我们看到的可能是经过科学计算转换过后的，或者是去掉了前面 0 的数字，为了展现方便，我们可以在生成 csv 文件的时候，用=”01023232”将这样的字段来表示即可。详见：https://www.cnblogs.com/christmasliu/articles/4260039.html

64_千分位分割数字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const num = 1234567890
// 正则方法（$&代表获取当前匹配的数字，正则里面表示匹配每个数字的时候看后面是否可以3个一组）
console.log('正则方法：', `${num}`.replace(/\d{1,3}(?=(\d{3})+$)/g, '$&,'))
// `${num}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') 也可以

// 字符串slice方法
console.log(
  '字符串slice方法：',
  [...new Array(Math.ceil(`${num}`.length / 3)).keys()]
    .map((item) => `${num}`.slice(-(item + 1) * 3, -item * 3 || undefined))
    .reverse()
    .join(',')
)

// 国际化方法（受语言影响）
console.log('国际化方法toLocaleString：', Number(num).toLocaleString())
console.log('国际化方法Intl：', new Intl.NumberFormat().format(num))

65_分时函数封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <button class="btn">插入100000个元素（同步）</button>
    <button class="btn-sync">插入100000个元素（分时）</button>
    <button class="btn-clear">清空</button>
    <div class="element-body"></div>
    <script>
      const btn = document.querySelector('.btn')
      const btnSync = document.querySelector('.btn-sync')
      const btnClear = document.querySelector('.btn-clear')
      const elementBody = document.querySelector('.element-body')
      const datas = [...new Array(100000).keys()]
      btn.onclick = (_) => {
        datas.forEach((item) => {
          const div = document.createElement('div')
          div.innerText = item
          elementBody.appendChild(div)
        })
      }
      btnSync.onclick = (_) => {
        const taskHandler = (item, index) => {
          // 执行的具体任务
          const div = document.createElement('div')
          div.innerText = item
          elementBody.appendChild(div)
        }
        const scheduler = (task) => {
          // 下一次分片在 一个渲染帧的空闲时 执行
          requestIdleCallback((idle) => {
            // 每一次分片都在当前空闲时间内执行
            task(() => idle.timeRemaining())
          })
          // // 下一次分片在 1000ms 之后执行
          // setTimeout(() => {
          // 	const now = performance.now()
          // 	// 每一次分片执行 10 ms
          // 	task(() => performance.now() - now <= 10)
          // }, 1000)
        }
        performChunk(datas, taskHandler, scheduler)
      }
      btnClear.onclick = () => (elementBody.innerHTML = '')

      function performChunk(datas, taskHandler, scheduler) {
        if (!datas || !datas.length) return

        let i = 0
        // 开启下一个分片的执行
        function _run() {
          if (i >= datas.length) return
          scheduler((goOn) => {
            while (goOn && goOn() && i < datas.length) {
              taskHandler(datas[i], i)
              i++
            }
            // 此次分片完成
            _run()
          })
        }
        _run()
      }
    </script>
  </body>
</html>

66_记忆化函数

对于一些高频率访问但是内容并不经常更新的接口，我们通常会缓存其值来减少向服务器通信的开销。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function memorize(f, limit = 50) {
  const cache = new Map()

  function memoizedFn() {
    const key = JSON.stringify([...arguments])

    if (cache.has(key)) {
      const value = cache.get(key)
      cache.delete(key)
      cache.set(key, value)
      return value
    }

    const result = f.apply(this, arguments)
    cache.set(key, result)

    if (cache.size > limit) {
      const oldestKey = cache.keys().next().value
      cache.delete(oldestKey)
    }

    return result
  }

  memoizedFn.clearCache = function () {
    cache.clear()
  }

  return memoizedFunction
}

67_根据目录树结构数据生成表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tree Structure Table</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        border: 1px solid black;
        text-align: center;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <script>
      const treeData = {
        name: 'Node 1',
        children: [
          {
            name: 'Node 2.1',
            children: [
              {
                name: 'Node 3.1',
                children: [{ name: 'Node 4.1' }],
              },
              { name: 'Node 3.2' },
              { name: 'Node 3.3' },
            ],
          },
          {
            name: 'Node 2.2',
            children: [
              { name: 'Node 3.4' },
              {
                name: 'Node 3.5',
                children: [
                  { name: 'Node 4.1' },
                  { name: 'Node 4.2' },
                  { name: 'Node 4.3' },
                ],
              },
              { name: 'Node 3.6' },
            ],
          },
          {
            name: 'Node 2.3',
            children: [
              { name: 'Node 3.7' },
              { name: 'Node 3.8' },
              { name: 'Node 3.9' },
            ],
          },
        ],
      }

      const table = createTable(treeData, { autoFill: false })
      document.body.appendChild(table)
      function createTable(data, options = {}) {
        const table = document.createElement('table')
        const dataArray = [].concat(data)

        // 处理每个节点的函数，计算每个节点的子节点数量和深度
        function processNode(node, depth, maxDepth) {
          if (depth > maxDepth.value) maxDepth.value = depth
          if (node.children && node.children.length) {
            let childCount = 0
            node.children.forEach(
              (child) => (childCount += processNode(child, depth + 1, maxDepth))
            )
            node._childCount = childCount
            return childCount
          } else {
            node._childCount = 1
            return 1
          }
        }

        // 添加表格行的函数
        function addRow(node, depth, rowSpans, rowIndex, maxDepth) {
          let row = rowSpans[rowIndex] || document.createElement('tr')
          if (!rowSpans[rowIndex]) {
            table.appendChild(row)
            rowSpans[rowIndex] = row
          }

          let cell = document.createElement('td')
          cell.textContent = node.name
          if (node._childCount > 1) cell.rowSpan = node._childCount
          row.appendChild(cell)

          if (node.children && node.children.length) {
            let currentRowIndex = rowIndex
            node.children.forEach((child, index) => {
              addRow(child, depth + 1, rowSpans, currentRowIndex, maxDepth)
              currentRowIndex += child._childCount
            })
          } else if (options.autoFill && depth < maxDepth) {
            // 填充空单元格直到达到最大深度
            for (let i = depth; i < maxDepth; i++) {
              let emptyCell = document.createElement('td')
              row.appendChild(emptyCell)
            }
          }
        }

        // 记录最大深度
        const maxDepth = { value: 0 }
        dataArray.forEach((data) => processNode(data, 1, maxDepth))
        dataArray.forEach((data) => addRow(data, 1, {}, 0, maxDepth.value))
        return table
      }
    </script>
  </body>
</html>

68_合并表格最后一列的相同内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Table Cell Merge Example</title>
    <style>
      table {
        border-collapse: collapse;
      }
      td,
      th {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table id="myTable">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>A</td>
          <td>1</td>
          <td>Y</td>
        </tr>
        <tr>
          <td>B</td>
          <td>2</td>
          <td>Y</td>
        </tr>
        <tr>
          <td>C</td>
          <td>3</td>
          <td>Y</td>
        </tr>
        <tr>
          <td>D</td>
          <td>4</td>
          <td>Z</td>
        </tr>
      </tbody>
    </table>

    <script>
      window.onload = function () {
        var table = document.getElementById('myTable')
        mergeLastColumn(Array.from(table.rows))
      }

      function mergeLastColumn(rows) {
        const lastColContent = rows.map((row) =>
          row.cells[row.cells.length - 1].textContent.trim()
        )
        let currentContent = lastColContent[0]
        let rowCount = 1

        for (let i = 1; i < rows.length; i++) {
          const cell = rows[i].cells[rows[i].cells.length - 1]
          if (cell.textContent.trim() === currentContent) {
            rowCount++
            cell.style.display = 'none' // Hide cells that will be merged
          } else {
            if (rowCount > 1) {
              const prevRow = rows[i - rowCount]
              const prevCell = prevRow.cells[prevRow.cells.length - 1]
              prevCell.rowSpan = rowCount
            }
            currentContent = cell.textContent.trim()
            rowCount = 1
          }
        }

        // Handle the last group if it needs to be merged
        if (rowCount > 1) {
          const lastGroupStart = rows.length - rowCount
          const lastGroupFirstCell =
            rows[lastGroupStart].cells[rows[lastGroupStart].cells.length - 1]
          lastGroupFirstCell.rowSpan = rowCount
        }
      }
    </script>
  </body>
</html>

69_精准加法

1
2
3
4
5
6
7
8
9
10
// 精准加法
function preciseAdd(num1, num2) {
  const num1Digits = (num1.toString().split('.')[1] || '').length
  const num2Digits = (num2.toString().split('.')[1] || '').length
  const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits))
  const result = (num1 * baseNum + num2 * baseNum) / baseNum
  // 上面result依旧可能有精度问题，如 16.01 * 100 = 1601.0000000000002， 因此使用 toFixed 方法进行精度控制
  return parseFloat(result.toFixed(Math.max(num1Digits, num2Digits)))
}
console.log(preciseAdd(16.01, 0.92)) // 16.93

还有一个想法就是当做字符串处理，如 +'0.92'.padEnd(5, '0').replace('.', '') 来转换成整数运算就不用担心精度问题了

70_递归高级函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 递归 map
export function recursiveMap(treeList, callback, level = 1) {
    if (!treeList || !treeList.length) return []

    return treeList.map((tree, index) => {
        const node = callback(tree, index, level)
        node.children = recursiveMap(tree.children, callback, ++level)
        return node
    })
}

// 递归 filter
export function recursiveFilter(treeList, callback, level = 1) {
    if (!treeList || !treeList.length) return []
    return treeList.filter(tree => {
        const result = callback(tree, level)
        if (result) tree.children = recursiveFilter(tree.children, callback, ++level)
        return result
    })
}

// 递归 forEach
export function recursiveForEach(treeList, callback, level = 1) {
  if (!treeList || !treeList.length) return
  
  treeList.forEach((tree, index) => {
    callback(tree, index, level)
    recursiveMap(tree.children, callback, level + 1)
  })
}

上面只是简单举例，其他高级函数如 reduce 等类似

71_插值函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/* 插值函数
 * 用于对一维数组进行插值
 * 示例用法:
 * const x = [0.0, 0.1, 0.195, 0.3, 0.401, 0.5];
 * const y = [0.39849, 0.39695, 0.39142, 0.38138, 0.36812, 0.35206];
 * const interpolator = new Interpolator(x, y);
 * console.log("线性插值:", interpolator.interp1(0.25, 'linear'));   // 线性插值
 * console.log("最近邻插值:", interpolator.interp1(0.25, 'nearest')); // 两点插值
 * console.log("三次样条插值:", interpolator.interp1(0.25, 'spline')); // 三次样条插值 
 */
export class Interpolator {
  constructor(x, y) {
      this.x = x;
      this.y = y;
  }

  // 线性插值
  linearInterpolation(xq) {
      const n = this.x.length;

      for (let j = 0; j < n - 1; j++) {
          if (xq >= this.x[j] && xq <= this.x[j + 1]) {
              const slope = (this.y[j + 1] - this.y[j]) / (this.x[j + 1] - this.x[j]);
              return this.y[j] + slope * (xq - this.x[j]);
          }
      }
      throw new Error('插值点超出范围');
  }

  // 最近邻插值（两点插值、拉格朗日插值）
  nearestInterpolation(xq) {
      let nearestIndex = 0;
      let minDiff = Math.abs(xq - this.x[0]);

      for (let j = 1; j < this.x.length; j++) {
          const diff = Math.abs(xq - this.x[j]);
          if (diff < minDiff) {
              minDiff = diff;
              nearestIndex = j;
          }
      }
      return this.y[nearestIndex];
  }

  // 三次样条插值
  cubicSplineInterpolation(xq) {
      const n = this.x.length;
      const a = this.y.slice();
      const h = [];
      const alpha = [];
      const l = Array(n).fill(0);
      const mu = Array(n).fill(0);
      const z = Array(n).fill(0);
      const c = Array(n).fill(0);
      const b = Array(n - 1).fill(0);
      const d = Array(n - 1).fill(0);

      for (let i = 0; i < n - 1; i++) {
          h[i] = this.x[i + 1] - this.x[i];
      }

      for (let i = 1; i < n - 1; i++) {
          alpha[i] = (3 / h[i]) * (a[i + 1] - a[i]) - (3 / h[i - 1]) * (a[i] - a[i - 1]);
      }

      l[0] = 1;
      mu[0] = 0;
      z[0] = 0;

      for (let i = 1; i < n - 1; i++) {
          l[i] = 2 * (this.x[i + 1] - this.x[i - 1]) - h[i - 1] * mu[i - 1];
          mu[i] = h[i] / l[i];
          z[i] = (alpha[i] - h[i - 1] * z[i - 1]) / l[i];
      }

      l[n - 1] = 1;
      z[n - 1] = 0;
      c[n - 1] = 0;

      for (let j = n - 2; j >= 0; j--) {
          c[j] = z[j] - mu[j] * c[j + 1];
          b[j] = (a[j + 1] - a[j]) / h[j] - h[j] * (c[j + 1] + 2 * c[j]) / 3;
          d[j] = (c[j + 1] - c[j]) / (3 * h[j]);
      }

      for (let j = 0; j < n - 1; j++) {
          if (xq >= this.x[j] && xq <= this.x[j + 1]) {
              const dx = xq - this.x[j];
              return a[j] + b[j] * dx + c[j] * dx * dx + d[j] * dx * dx * dx;
          }
      }
      throw new Error('插值点超出范围');
  }

  // 主函数，模拟MATLAB中的interp1
  interp1(xq, method) {
      switch (method) {
          case 'linear':
              return this.linearInterpolation(xq);
          case 'nearest':
              return this.nearestInterpolation(xq);
          case 'spline':
              return this.cubicSplineInterpolation(xq);
          default:
              throw new Error('不支持的插值方法');
      }
  }
}

72_树操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 根据查询条件获取指定节点
export function findNodeByQuerySet(tree, querySet) {
  if (!tree || !querySet) return null
  for (let i = 0; i < tree.length; i++) {
    let match = Object.keys(querySet).every(k => querySet[k] == get(tree[i], k))
    if (match) return tree[i]
    match = findNodeByQuerySet(tree[i].children, querySet)
    if (match) return match
  }
  return null
}

// 根据查询条件获取指定节点列表
export function findNodesByQuerySet(tree, querySets, relation = 'and') {
  if (!tree || !querySets) return []
  if (getDataType(querySets) !== 'array') querySets = [].concat(querySets)
  let result = []
  for (let i = 0; i < tree.length; i++) {
    let matches = querySets[{and: 'every', or: 'some'}[relation]](q => Object.keys(q).every(k => q[k] == get(tree[i], k)))
    if (matches) result.push(tree[i])
    matches = findNodesByQuerySet(tree[i].children, querySets, relation)
    if (matches.length) result = result.concat(matches)
  }
  return result
}

// 获取节点的访问路径
export function findNodeVisitedPaths(tree, nodeId, paths = []) {
  if (!tree) return paths.pop() && null
  for (let i = 0; i < tree.length; i++) {
    let res = tree[i].id === nodeId
    if (res) return paths.concat(tree[i])
    paths.push(tree[i])
    res = findNodeVisitedPaths(tree[i].children, nodeId, paths)
    if (res) return res
  }
  return paths.pop() && null
}

推荐阅读

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/229e087d.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
知识共享许可协议
置顶

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true