Live Note

Remain optimistic

Posted on Edited on In

惰性单例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let LazySingle = (() => {
  let instance = null
  function Single() {
    return {
      Method: function () {
        console.log("public method")
      },
      Prototype: "some message",
    }
  }
  return () => {
    if (!instance) instance = Single()
    return instance
  }
})()

// for test
console.log(LazySingle().Prototype)
LazySingle().Method()

Posted on Edited on In

拖拽元素事件：

  • dragstart：拖拽前触发
  • drag：拖拽前到拖拽结束之间，连续触发
  • dragend：拖拽结束触发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>

<script>
  let aLi = document.querySelectorAll("li")
  for (let li of aLi) {
    let count = 0
    li.ondragstart = function () {
      this.style.backgroundColor = "red"
    }
    li.ondrag = function () {
      console.log(count++) //连续触发
    }
    li.ondragend = function () {
      this.style.backgroundColor = ""
    }
  }
</script>
Read more »

Posted on Edited on In

extends Array

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class PowerArray extends Array {
  isEmpty() {
    return this.length === 0;
  }

  // filter/map/... 等函数不再传递PowerArray
  static get [Symbol.species] () {
    return Array;
  }
}

let arr = new PowerArray(1, 2, 3);
alert(arr.isEmpty()); // false

let filter_array = arr.filter(i => i > 1);
alert(filter_array.isEmpty()); //Error

Posted on Edited on In

扩展运算符

1
2
3
4
5
6
7
8
9
10
11
console.log(...[1, 2, 3]) //1 2 3
console.log(1, ...[2, 3], 4) //1 2 3 4
;[...document.querySelectorAll("div")] //[<div>, <div>, ...];

function add(x, y) {
  return x + y
}
add(...[1, 2]) //3

//与表达式一同使用
const arr = [...(x > 0 ? ["a"] : []), "b"]

扩展运算符的应用

  • 替代数组的 apply 方法

    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 f(x, y, z) {}
    var args = [0, 1, 2]

    //ES5 写法
    f.apply(null, args)

    //ES6 写法
    f(...args)

    //用 Math.max 求数组中最大的数
    //ES5 写法
    Math.max.apply(null, [2, 33, 3])

    //ES6 写法
    Math.max(...[2, 33, 3])

    //用 push 将一个数组添加到另一个数组尾部
    var arr1 = [0, 1, 2]
    var arr2 = [3, 4, 5]

    //ES5 写法
    Array.prototype.push.apply(arr1, arr2)

    //ES6 写法
    arr1.push(...arr2)

  • 合并数组

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var arr1 = ["a"]
    var arr2 = ["b", "c"]
    var arr3 = ["d"]

    //ES5 写法
    arr1.concat(arr2, arr3)

    //ES6 写法
    ;[...arr1, ...arr2, ...arr3]

  • 与解构赋值结合

    Read more »

Posted on Edited on In

querySelector()

querySelector 只能选择一组中的第一个元素：

1
2
3
4
5
6
<div class="test">div1</div>
<div class="test">div2</div>

<script>
  document.querySelector(".test").style.color = "red" //只有第一个会变红
</script>

querySelectorAll()

querySelectorAll 获取一组元素：

1
2
3
4
5
6
7
8
9
<div class="test">div1</div>
<div class="test">div2</div>

<script>
  let aDiv = document.querySelectorAll(".test")
  for (let div of aDiv) {
    div.style.color = "red"
  }
</script>
Read more »