tan-ln的博客

稳住，我们能赢

0%

发表于

ES6 Symbol

表示一个独一无二的值

  1. const sym = Symbol() 不需要 new
  2. unique
    1
    2
    3
    const s1 = Symbol('tan')
    const s2 = Symbol('tan')
    console.log(s1 === s2);           // error
  3. 不能使用运算符
    1
    2
    3
    const s3 = Symbol(100)
    console.log(s3 + 200);        // TS2365: Operator '+' cannot be applied to types 'unique symbol' and 'number'.
    // 不能使用运算符 或 + 拼接
  4. toString()
    1
    console.log(s3.toString() + 200);      // toString() + 拼接   "Symbol(100)200"

作为对象的属性

1
2
3
4
5
6
7
8
let s4 = Symbol('name')
const obj = {
  [s4]: 's4'
}
console.log(obj);       // {Symbol(name): 'volvo s4'}
console.log(obj.s4);       // error
obj[s4] = 'volvo s60'
console.log(obj);       // {Symbol(name): 's60'}
阅读全文 »

发表于

Typescript 是 Javascript 的一个超集，且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程

Typescript 基于 Javascript 扩展了类型系统 + ECMAScript6+ 特性的支持 ===> 编译回原始的 JavaScript

功能更强大，生态更加健全、完善（微软自身的开发环境）

Angular | Vue.js3.0

语言类型

阅读全文 »

发表于
  1. yarn init -y
  2. 安装 flow-bin 模块: yarn add flow-bin -D
  3. 创建配置项 yarn flow init ==> .flowconfig

类型检查

类型注解

1
2
3
4
5
6
// @flow
function sum (a: number, b: number) {
  return a + b
}
sum(1, 2)
sum('12', '34')   // Cannot call sum with '12' bound to a because string [1] is incompatible with number [2]. [incompatible-call]

yarn flow 进行检查

阅读全文 »

发表于

vertical-align 是用来设置行内元素对齐方式的。或者说 display 属性值为 inline、inline-block、inline-table 另加一个 table-cell 的元素

基线

baseline

基线的位置并不是固定的：

  • 在文本之类内联元素中，基线是字符的下边缘位置

  • 在像 img 元素中基线就是下边缘。

  • 在 inline-block 元素中，也分两种情况

    • inline-block 元素盒子里，没有内容(流内内容)，是一个空的盒子时，baseline 位置就是该盒子 margin-bottom 的边界（没有 margin-bottom 值，就是盒子的边界值）。如下图左侧div
    • inline-block 元素盒子里，有内容元素，并且 overflow 属性值为 visible 时(默认值)，那么该盒子的 baseline 位置就是里面最后一个内容元素的baseline。如下图中间div
    • inline-block 元素盒子里，有内容元素，并且 overflow 属性值为非 visible 时 (比如 overflow: hidden; )，那么该盒子的baseline位置就是该盒子margin-bottom 的边界。如下图右侧 div

    box.jpg

阅读全文 »

发表于

event

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

兼容性处理

在 W3C 规范中，event 对象是随事件处理函数传入的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式；但是对于 IE8.0 及其以下版本，event 对象必须作为 window 对象的一个属性

IE、Chrome：event是一个内置的全局对象

阅读全文 »

发表于

若要拖放某个元素，则必须将其的 draggable 属性设置为 true
img 和 a 元素默认为 true

拖放事件

拖放的过程中被拖放的对象被称为源对象，过拖放过程中间经过的其他对象被称为过程对象，最终到达的对象称作目标对象。

  • 源对象:
    • dragstart: 源对象开始拖放，开始移动时事件触发
    • drag: 源对象拖放过程中，移动被拖拽对象时触发
    • dragend: 源对象拖放结束，整个拖放操作结束时触发
  • 过程对象:
    • dragenter: 源对象进入过程对象范围内，被拖拽对象进入过程对象时被触发
    • dragover: 源对象在过程对象范围内移动，被拖拽对象在过程对象内移动时触发
    • dragleave: 源对象离开过程对象的范围，被拖拽对象离开目标对象时触发
  • 目标对象:
    • drop: 源对象拖放到目标对象中，目标对象完全接受被拖拽对象时触发，可理解为在目标对象内松手时触发

dataTransfer 对象

阅读全文 »

发表于

全局 API

Vue.set

Vue.set(target, key, value)

由于 VUe 无法探测普通的新增 property(比如 this.myObj.newProp = 111)，所以通过 Vue.set() 为响应式对象中添加一个 property，可以确保这个 property 是响应式的，并且触发视图更新

  1. 用于在运行时添加根级别属性，使该属性必须具有响应式能力
  2. 不能是 Vue 实例，或者 Vue 实例的根数据对象( 即 return {} )
阅读全文 »

发表于 更新于

防抖节流

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
/**
 *  防抖：
 *      频繁触发事件，设定一个时间间隔，当 相邻两次事件 的触发时间间隔 小于设定的时间，则重新设定，大于则触发
 * 
 *  节流
 *      频繁触发事件，每隔一段时间触发一次
 */

const debounce = function (fn, wait = 1000) {
  let timer = null
  return function () {
    if (timer) clearTimeout(timer)
    const _this = this
    const _args = [...arguments]
    timer = setTimeout(() => {
      fn.apply(_this, _args)
    }, wait);
  }
}

const throttle = function (fn, wait) {
  let timer = null
  return function (...args) {
    if (timer) return
    timer = setTimeout(() => {
      fn.apply(this, args)
      clearTimeout(timer)
      timer = null
    }, wait);
  }
}

防抖 - 鼠标移动位置捕捉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const debounce = function (fun, delay) {
  let timer = null
  return function (...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fun.apply(this, args)
    }, delay);
  }
}
const handle = debounce(e => 
  console.log('x: ' + e.pageX, ' , y: ' + e.pageY)
, 500)

window.addEventListener('mousemove', debounce(e => console.log(e.pageX), 500))

发表于 更新于

call

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
/**
 *  call 能让一个对象使用另一个对象上的方法
 */

const person = {
  show: function (age) {
    console.log(this.name + ', age: ' + age)
  }
}

const obj = { name: 'tan' }

person.show.call(obj, 200)

Function.prototype._call = function (ctx) {
  // ctx 为 undefined || null
  ctx = ctx || Window
  // 调用的方法 like show
  ctx.fn = this
  const _args = [...arguments].slice(1)
  const res = ctx.fn(..._args)
  delete ctx.fn
  return res
}

person.show._call(obj, 500)       // tan, age: 500

apply

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
/**
 *  apply 能让一个对象使用另一个对象上的方法
 *        与 call 的区别在于传参
 */

 const person = {
  show: function (age, weapon) {
    console.log(this.name + ', age: ' + age + ', weapon: ' + weapon)
  }
}

const obj = { name: 'tan' }

person.show.apply(obj, [200])

Function.prototype._apply = function (ctx) {
  // ctx 为 undefined || null
  ctx = ctx || Window
  // 调用的方法 like show
  ctx.fn = this
  const _args = arguments[1] || []
  const res = ctx.fn(..._args)
  // 防止 ctx 属性越来越多
  delete ctx.fn
  return res
}

person.show._apply(obj, [500, 'AK'])       // tan, age: 500, weapon: AK

bind

阅读全文 »

发表于

reduce

1
2
3
4
5
6
7
const arr = [1, [1, 2], 3, [[1, 2, 3], 4], 5]
const foo = function (arr) {
  return arr.reduce((total, curVal) => {
    total = total.concat(curVal instanceof Array ? foo(curVal) : curVal)
  }, [])
}
console.log(foo(arr))

flat

flat ES6 新增的数组拍平方法

1
2
const arr = [1, [1, 2], 3, [[1, 2, 3], 4], 5]
console.log(arr.flat(Infinity))
阅读全文 »