Vuex

开始

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import Vue from "vue";
import Vuex from "vuex"

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutation: {
        increment: {
            state.count++
        }
    }
})

• 通过操作mutation 来改变state:
  • 通过 store.state获取状态，store.commit('increment')触发状态变更

VUE Router 入门

起步

this.$router

• 利用this.$router在任何组件内都可以随时访问路由器

动态路由匹配

• 动态路径参数：'/user/:id'可以匹配 /user/foo、/user/bar等
• this.$route.params可以访问到参数值： $route.params.id
  • 多段路径参数也都存在$route.params中
• 通配符：path: '*' 放在最后，一般匹配404页面
  • $route.params 内会自动添加一个名为 pathMatch 参数: $route.params.pathMatch == /non-existing

git pull 拉取所有分支失败

解决方案

1. 同步所有远程分支

   1	git branch -r | grep -v '\->' | while read remote; do git branch --track "${remote#origin/}" "$remote"; done

2. 将本地所有分支与远程保持同步

   1	git fetch --all

3. 最后拉取所有分支代码

   1	git pull --all

基础类型

数组

1. let list: number[] = [1, 2, 3]
2. 使用数组泛型，Array<元素类型>：let list: Array<number> = [1, 2, 3]

元组 Tuple

• 表示一个已知元素数量和类型的数组: let tuple: [number, string] = [1, "2"]
• 访问越界的元素，会使用联合类型替代：tuple[1].toString()

枚举 enum

AJAX简介

• 异步的JS和XML
• 通过AJAX可以在浏览器中向服务器发送异步请求：
• 优点：
  • 无刷新的获取数据
  • 根据用户事件更新页面内容
• 缺点：
  • 没有浏览历史，不能回退
  • 存在跨域问题：a.com不能向b.com发送请求 / 同源可以，既协议、主机、端口一致
  • SEO(搜索引擎优化)不友好：源代码里没有响应体

HTTP

数据类型

null, undefined

• null 是空值，即初始时表示值为空，之后再赋值
• undefined 是 未定义

1
2
3
4
5

null + 4 // 4
{} + 4 // 4
undefined + 4 // NaN
[] + 4 // "4"
"" + 4 // "4"

Job(L1)

High salaries with high risks of losing a job or low salary and secure job. Which would you prefer?

思路

钱多的工作：个人+家人生活 & 效率(减少出错)+人际关系 （+ 提升自己水平

范文

Currying

Translates a function from callable as f(a, b, c) into callable as f(a)(b)(c).

Example

1
2
3
4
5
6

log(new Date(), "DEBUG", "some debug"); // log(a, b, c)

// can make a convenience function
let logNow = log(new Date()); // [HH:mm]

logNow("INFO", "message"); // [HH:mm] INFO message 

• logNow is log with fixed first argument, in other words “partially applied function” or “partial” for short.

Proxy

let proxy = new Proxy(target, handler)

1. target: is an object to wrap, can be anything, including functions.
2. handler: proxy configuration, an object with “traps”, methods that intercept operations. – e.g. get trap for reading a property of target, set trap for writing a property into target…

empty handler

• As there are no traps, all operations on proxy are forwarded to target.
  1. writing operation proxy.test= sets the value on target
  2. reading operation proxy.test returns the value from target
  3. for(key in proxy) returns values from target

Basic

syntax

• In index.html, we must tell the browser that a script should be treated as a module, by using the attribute <script type="module">
• Always use strict and Each module has its own module-level scope. Only export what they want to be accessible from outside and import what they need.
• Modules work only via HTTP(s), not in local files.

A module code is evaluated only the first time when imported

• All importers get exactly the one and only that export, so it’s shared between importers

import.meta

• import.meta: contains the information about the current module.