Live Note

Remain optimistic

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

Shader

WebGL 使用两种 Shader：

  • Vertex Shader：用于描述 point 的特性。
  • Fragment Shader：用于逐片处理。

Shader Program 使用的是 GLSL ES 语言，在 JS 中需要使用字符串编写，再通过函数加载进去。

WebGL 的执行流程大致为：

  1. Get canvas.
  2. Get WebGL context.
  3. Initialize vertex shader and fragment shader.
  4. Set clear color.
  5. Clear canvas.
  6. Draw.

vec4

在 GLSL ES 中，vec4类型用四维适量描述一个点的三维空间投影，(x, y, z, w)等价与三维空间的(x / w, y / w, z / w)。
WebGL 坐标系统水平向右为 x 正轴，竖直向上为 y 正轴，垂直屏幕向外为 z 正轴。范围都在[-1, 1]之间。

Read more »

Posted on Edited on In

什么是微前端

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

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

现有解决方案

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

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 »