TLS负责安全传输，SSL负责安全签名，Debugger负责调试。

Node.js - TLS & SSL & Debugger


`react` 组件可以通过条件判断显示不同的内容。比如：

```jsx
function App() {
  const isAuthUser = useAuth()

  if (isAuthUser) {
    // if our user is authenticated, let them use the app
    return <AuthApp />
  }

  // if user is not authenticated, show a different screen
  return <UnAuthApp />
}
```

三元运算符简化条件判断

```jsx
function App() {
  const isAuthUser = useAuth()

  return (
    <>
      <h1>My App</h1>
      {isAuthUser ? <AuthApp /> : <UnAuthApp />}
    </>
  )
}
```


React是一个JavaScript库，致力于使UI开发变得简单

React Conditionals


overflow 属性用于控制元素内容的溢出方式。当元素内容超出其指定的尺寸时，可以使用 overflow 属性来指定如何处理溢出内容。

overflow 属性有四个可能的值：

- visible（默认值）：内容超出元素尺寸时不进行剪切，可以继续显示在元素外面。这可能会导致元素之外的内容被覆盖。
- hidden：超出元素尺寸的内容将被剪切，不会被显示出来。这可以用于隐藏不想被用户看到的内容。
- scroll：超出元素尺寸的内容会被剪切，但会显示一个滚动条，用户可以使用滚动条来查看隐藏的内容。
- auto：与 scroll 值相似，超出元素尺寸的内容会被剪切，但只有在需要滚动时才会显示滚动条。

overflow 属性通常与 height 或 width 属性一起使用，以指定元素的尺寸和如何处理溢出内容。例如：

```css
div {
  width: 200px;
  height: 100px;
  overflow: scroll;
}
```

这个样式规则将创建一个宽度为 200 像素、高度为 100 像素的 div 元素，并使用 overflow: scroll 属性将超出这些尺寸的内容剪切并添加滚动条。


css - Overflow


## this 指向

this 总是指向函数的直接调⽤者（⽽⾮间接调⽤者）

如果有 new 关键字， this 指向 new 出来的那个对象

在事件中， this 指向触发这个事件的对象，特殊的是， IE 中的 attachEvent 中的 this 总是指向全局对象 Window

> 创建⼀个空对象，并且 this 变量引⽤该对象，同时还继承了该函数的原型属性和⽅法被加⼊到 this 引⽤的对象中新创建的对象由 this 所引⽤，并且最后隐式的返回 this

```js
var test = {
  prop: 42,
  func: function () {
    return this.prop
  }
}

console.log(test.func()) //42，调用者是test
//42

var fullname = 'David Jones'
var obj = {
  fullname: 'Colin Brown',
  prop: {
    fullname: 'Aurelio Deftch',
    getFullname: function () {
      return this.fullname
    }
  }
}
var test = obj.prop.getFullname
console.log(test()) // David Jones，调用者是window，window.fullname是David Jones
obj.prop.getFullname() // Aurelio Deftch，调用者是obj.prop，obj.prop.fullname是Aurelio Deftch
```

## 扩展（call、bind、apply）

- apply 、 call 、bind 三者都是用来改变函数的 this 对象的指向的；
- apply 、 call 、bind 三者第一个参数都是 this 要指向的对象，也就是想指定的上下文；
- apply 、 call 、bind 三者都可以利用后续参数传参；
- bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

### apply、call

- apply、call 是为了改变某个函数运行时的上下文（context）而存在的，即改变函数体内部的 this 指向
- 作用一样，区别在于接受的参数不一样
- func.call(this,args)
- func.apply(this,[args])
- 用法：当知道参数数量的时候用 call，不确定的时候用 apply

```js
function log() {
  var _args = [...arguments]
  console.log(_args)
  args.unshift('(app)')

  console.log.apply(console, args)
}
log(1, 2, 3) //(app) 1 2 3
```

### bind

> MDN 的解释是：bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

```js
var bar = function () {
  console.log(this.x)
}
var foo = {
  x: 3
}
bar() // undefined
var func = bar.bind(foo)
func() // 3,this指向了foo
```


this的指向


react 使用`.map`遍历并显示列表组件。

```jsx
function SoccerPlayers() {
  const players = ['Messi', 'Ronaldo', 'Laspada']

  return (
    <div>
      {players.map((playerName) => (
        <SoccerPlayer key={playerName} name={playerName} />
      ))}
    </div>
  )
}
```

遍历输出的组件中`key`是必需的，因为它是用来唯一标识组件的。


React Lists


## API 中间件

`Next.js`提供了内置的路由中间件用于解析入参等。

- `req.cookies`：获取客户端的 cookie
- `req.query`：获取客户端的 query
- `req.body`：获取客户端的 body

```jsx
export default (req, res) => {
  res.statusCode = 200
  res.setHeader('Content-Type', 'application/json')
  res.end(JSON.stringify({query: req.query}))
}
```

## 配置跨域

你还可以使用 Connect 兼容的中间件，比如使用 `cors`：

```jsx
import Cors from 'cors'

// Initializing the cors middleware
const cors = Cors({
  methods: ['GET', 'HEAD']
})

// Helper method to wait for a middleware to execute before continuing
// And to throw an error when an error happens in a middleware
function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result)
      }

      return resolve(result)
    })
  })
}

async function handler(req, res) {
  // Run the middleware
  await runMiddleware(req, res, cors)

  // Rest of the API logic
  res.json({message: 'Hello Everyone!'})
}

export default handler
```


Next.js - API MiddleWares


## 为什么要使用 debounce 和 throttle

防抖和节流就是针对响应跟不上触发频率这类问题的两种解决方案。在给 DOM 绑定事件时，有些事件我们是无法控制触发频率的。 如鼠标移动事件 onmousemove, 滚动滚动条事件 onscroll，窗口大小改变事件 onresize，瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。 在实时检查输入时，如果我们绑定 onkeyup 事件发请求去服务端检查，用户输入过程中，事件的触发频率也会很高，会导致大量的请求发出，响应速度会大大跟不上触发。

## 在 watcher 中使用 debounce

1. 在`created`生命周期将`this.debounce`绑定到`this`上，这样`this.debounce`就可以在`created`生命周期中使用。
2. 在`watch`函数中，使用`this.debounce`调用`debounce`函数，并传入`this.debounce`的回调函数。
3. 在事件销毁前，使用`this.debounce`调用`clear`函数，清除定时器。

```html
<template>
  <input v-model="value" type="text" />
  <p>{{ value }}</p>
</template>
<script>
  import debounce from 'lodash.debounce'
  export default {
    data() {
      return {
        value: ''
      }
    },
    watch: {
      value(...args) {
        this.debouncedWatch(...args)
      }
    },
    created() {
      this.debouncedWatch = debounce((newValue, oldValue) => {
        console.log('New value:', newValue)
      }, 500)
    },
    beforeUnmount() {
      this.debouncedWatch.cancel()
    }
  }
</script>
```

## 使用 debounce 处理事件

```html
<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
  import debounce from 'lodash.debounce'
  export default {
    created() {
      this.debouncedHandler = debounce((event) => {
        console.log('New value:', event.target.value)
      }, 500)
    },
    beforeUnmount() {
      this.debouncedHandler.cancel()
    }
  }
</script>
```

为什么不适用`debounce`或`throttle`直接绑定函数呢？比如：

```html
<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
  import debounce from 'lodash.debounce'
  export default {
    methods: {
      // Don't do this!
      debouncedHandler: debounce(function (event) {
        console.log('New value:', event.target.value)
      }, 500)
    }
  }
</script>
```

**使用`export default { ... }`从组件导出的 options 对象，包括方法，将被组件的所有实例重用。如果网页中有 2 个或更多的组件实例，那么所有的组件都将使用相同的`debounce`或`throttle`的函数方法。**

## 总结

在 `vue` 中使用 `debounce` 和 `throttle` 函数，应该在 `created` 和 `beforeUnmount` 生命周期中使用，而不是在 `watch` 中使用。

```html
<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
  export default {
    created() {
      this.debouncedCallback = debounce((...args) => {
        // The debounced
        callback
      }, 500)
    },
    watch: {
      value(...args) {
        this.debouncedCallback(...args)
      }
    }
  }
</script>
```


如input、resize、scroll、intersection observer 等事件可能发生得非常频繁，例如每秒发生几次，因此调用一个动作，比如对每个事件发出读取请求，并不是一个明智的方法。