Live Note

Remain optimistic

Posted on Edited on In

:class 绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
    <h1 :class="['italic', 'red', {'active': flag}]">Test H1 Message</h1>
    <h1 :class="classObj">Test H1 Message</h1>
</div>
<script>
var vm = new Vue({
  el: "#app",
  data: {
    flag: true,
    classObj: { red: true, thin: true, italic: true, active: false },
  },
})
</script>
Read more »

Posted on Edited on In

原理

通过改写[].__proto__上的方法，实现对Array原生方法的拦截。

源码位置为 /core/instance/observer/array.js

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
// cache the original Array.prototype
const originalPrototype = Array.prototype

// create an object from original Array.prototype
const arrayMethods = Object.create(originalPrototype)

const methodsToPatch = [
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "sort",
  "reverse",
]

methodsToPatch.forEach((method) => {
  arrayMethods[method] = function (...args) {
    // use original Array methods to get the result
    const result = originalPrototype[method].apply(this, args)

    // proxy here
    console.log(`catch ${method}`)

    return result
  }
})

const a = [1, 2, 3]
a.__proto__ = arrayMethods

a.push(1)
a.reverse()
a.pop()

console.log(a)

Posted on Edited on In

computed

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
    <input type="text" v-model="firstName">+
    <input type="text" v-model="lastName">=
    <input type="text" v-model="fullName">
</div>
<script>
var vm = new Vue({
  el: "#app",
  data: {
    firstName: "",
    lastName: "",
  },
  computed: {
    // 使用计算属性不需要()
    // 只要此function中使用的任何数据发生变化，就会重新计算值
    fullName: function () {
      return this.firstName + "-" + this.lastName
    },
  },
})
</script>
Read more »

Posted on Edited on In

filter

1
2
3
4
5
6
7
8
9
10
Vue.filter("msgFormat", function (msg, arg) {
  return msg.replace(/test/g, arg)
})
Vue.filter("test", function (msg) {
  return msg + "===="
})
var vm = new Vue({
  el: "#app",
  data: { msg: "test1 test2 test3" },
})
Read more »

Posted on Edited on In

WebGL 中的矩阵是列主序的。

平移变换

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
const vShaderSource = `
    attribute vec4 a_Position;
    uniform mat4 u_xFormMatrix;
    void main() {
        gl_Position = u_xFormMatrix * a_Position;
    }
`

const fShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`

const Tx = 0.5,
  Ty = 0.2,
  Tz = 0

function main() {
  const gl = document.querySelector("#canvas").getContext("webgl")
  if (!initShaders(gl, vShaderSource, fShaderSource)) reutrn

  let n = initVertexBuffers(gl)
  if (n < 0) return

  let xFormMatrix = new Float32Array([
    1.0,
    0,
    0,
    0,
    0,
    1.0,
    0,
    0,
    0,
    0,
    1.0,
    0,
    Tx,
    Ty,
    Tz,
    1.0,
  ])
  let u_xFormMatrix = gl.getUniformLocation(gl.program, "u_xFormMatrix")
  gl.uniformMatrix4fv(u_xFormMatrix, false, xFormMatrix)

  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.drawArrays(gl.TRIANGLES, 0, n)
}
Read more »