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 [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 »

Posted on Edited on In

什么是微前端

微前端架构具备以下几个核心价值

  • 技术栈无关：主框架不限制接入应用的技术栈，子应用具备完全自主权
  • 独立开发、独立部署：子应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
  • 独立运行时：每个子应用之间状态隔离，运行时状态不共享

现有解决方案

  • 路由分发（nginx）
  • npm 子包：基座负责打包构建发布，打包时集成；
  • iframe：应用之间完全独立；需要基座提供通信方案；
  • 通用中心路由基座式：完全独立；需要基座提供通信方案；使用 DOM 实现；（阿里乾坤）
  • 特定中心路由基座式：相同技术栈；复用基座公共基建内容；（美团广告业务）
Read more »