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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**
 * 为dom元素添加事件
 * @param {} dom
 * @param {*} type
 * @param {*} fn
 */
function addEvent(dom, type, fn) {
  if (dom.addEventListener) {
    dom.addEventListener(type, fn, false)
  } else if (dom.attachEvent) {
    dom.attachEvent("on" + type, fn)
  } else {
    dom["on" + type] = fn
  }
}

/**
 * 装饰已有对象
 * @param {*} id
 * @param {*} fn
 */
function decorator(id, fn) {
  let obj = document.querySelector(id)
  if (typeof id.onclick === "function") {
    let oldFn = id.onclick
    id.onclick = function () {
      oldFn()
      fn()
    }
  } else {
    obj.onclick = fn
  }
}

观察者模式

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 Observer = (() => {
  let _message = {}
  return {
    regist: function (type, fn) {
      if (typeof _message[type] === "undefined") {
        _message[type] = [fn]
      } else {
        _message[type].push(fn)
      }
    },
    fire: function (type, args) {
      if (!_message[type]) {
        return
      }
      let events = {
        type,
        args: args || {},
      }
      for (let i = 0, len = _message[type].length; i < len; i++) {
        _message[type][i].call(this, events)
      }
    },
    remove: function (type, fn) {
      if (_message[type] instanceof Array) {
        for (let i = _message[type].length - 1; i >= 0; i--) {
          _message[type][i] === fn && _message[type].splice(i, 1)
        }
      }
    },
  }
})()

Observer.regist("test", function (e) {
  // register
  console.log(e.type, e.args.msg)
})
Observer.fire("test", { msg: "this is some test message" }) // send

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 [a, b, c] = [1, 2, 3]
let [foo, [[bar], baz]] = [1, [[2], 3]]

let [, , third] = ["foo", "bar", "baz"]
third //'baz'
let [x, , y] = [1, 2, 3]
x, y //1, 3

let [head, ...tail] = [1, 2, 3, 4]
head //1
tail //[2, 3, 4]

let [x, y, ...z] = ["a"]
x //a
y //undefined
z //[]

let [x, y, z] = new Set(["a", "b", "c"])
x //'a'
Read more »

Posted on Edited on In

JavaScript 采用的是词法作用域（lexical scoping）

JavaScript 函数的作用域在函数定义的时候就确定了，所以实际使用的值与函数定义位置有关系。

1
2
3
4
5
6
7
8
9
10
11
12
let value = 1

function foo() {
  console.log(value)
}

function bar() {
  let value = 2
  foo()
}

bar() // 1

上面这个例子中，foo函数中的value向上寻找为在全局定义的1，所以会打印出1。

1
2
3
4
5
6
7
8
9
10
11
value=1

function foo(){
  echo $value
}

function bar() {
    local value=2
    foo
}
bar #2

而在bash中，由于是动态作用域，所以会打印出2。

Read more »

Posted on Edited on In

一个简单的处理 XML 的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function parseXml(xml) {
  //跨浏览器处理 XML
  var xmldom = null

  if (typeof DOMParser != "undefined") {
    xmldom = new DOMParser().parseFromString(xml, "text/xml")
    var errors = xmldom.getElementsByTagName("parsererror")
    if (errors.length) {
      throw new Error("XML parsing error:" + errors[0].textContent)
    }
  } else if (typeof ActiveXObject != "undefined") {
    xmldom = createDocument()
    xmldom.loadXML(xml)
    if (xmldom.parseError != 0) {
      throw new Error("XML parsing error:" + xmldom.parseError.reason)
    }
  } else {
    throw new Error("No XML parser available.")
  }
  return xmldom
}

序列化 XML 文档

1
2
3
4
5
6
7
8
9
10
11
12
13
//序列化 xmldom 文档
function serializeXML(xmldom) {
  if (typeof XMLSerializer != "undefined") {
    //兼容 ie9+ safari Chrome opera
    var serializer = new XMLSerializer()
    return serializer.serializeToString(xmldom)
  } else if (typeof xmldom.xml != undefined) {
    //兼容 ie9.0 以下
    return xmldom.xml
  } else {
    throw new Error("serialize XML Dom failed!")
  }
}

Posted on Edited on In

~运算符

位运算符是三步处理的过程：

  1. 把运算数转换成 32 位数字
  2. 把二进制数转换成它的二进制反码
  3. 把二进制数转换成浮点数
1
2
3
var iNum1 = 25 //25 等于 00000000000000000000000000011001
var iNum2 = ~iNum1 //转换为 11111111111111111111111111100110
alert(iNum2) //输出 "-26"

~~技巧

这是刷题时看见别人的代码里使用的东西，通常用来代替 Math.trunc()的方法。

1
2
3
4
5
6
//单个 ~
console.log(~1337) // -1338
//数字输入
console.log(~~47.11) //47
console.log(~~1.9999) //1
console.log(~~3) //3

当原始输入不确定时，~~可以将任何非数字类型转换成 0：

1
2
3
4
5
6
7
8
console.log(~~[]) //0
console.log(~~NaN) //0
console.log(~~null) //0

// | 0 也是相同的效果
console.log([] | 0) //0
console.log(NaN | 0) //0
console.log(null | 0) //0
Read more »