LY
LY
\1. 写 React/Vue 项目时为什么要在组件中写 key，其作用是什么？ key 的作用是为了在 diff 算法执行时更快的找到对应的节点，提高 diff 速度。 vue 和 react 都是采用 diff 算法来对比新旧虚拟节点，从而更新节点。在 vue 的 diff 函数中。可以先了解一下 diff 算法。 在交叉对比的时候，当新节点跟旧节点`头尾交叉对比`没有结果的时候，会根据新节点的 key 去对比旧节点数组中的 key，从而找到相应旧节点（这里对应的是一个 key => index...
# TypeScript的一些小用法 - 预定义的有条件类型 ### 预先定义的条件类型（Predefined conditional types） TS提供了几种内置的预定义的条件类型： - `Exclude` -- 从 `T` 中剔除可以复制给 `U` 的类型。 - `Extract` -- 提取 `T` 中可以赋值给 `U` 的类型。 - `NonNullable` -- 从 `T`...
-webkit-background-clip:text + -webkit-text-fill-color：仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩 **demo:** ```html .masked-copy *, .masked-copy .inline { display: inline; } .masked-copy h2 { display: block; font: inherit; color: #fff; } .typography-overview-headline-elevated { font-size: 64px; }...
> [css加载会造成阻塞吗](https://segmentfault.com/a/1190000018130499) **总结：** ``` 1. css 加载不会阻塞DOM树的解析 2. css加载会阻塞DOM树的渲染 3. css加载会阻塞后面js语句的执行 ``` ``` 1. 如果页面中同时存在css和js，并且存在js在css后面，则DOMContentLoaded事件会在css加载完成后才执行。 2. 其他情况下，DOMContentLoaded都不会等待css加载，并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。 ``` 可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。 为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度 \1. 打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方  点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项 \2. 点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项  这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题...
> 转自： [vue修饰符--可能是东半球最详细的文档（滑稽）](https://segmentfault.com/a/1190000016786254) ## 表单修饰符 填写表单，最常用的是什么？input！v-model~而我们的修饰符正是为了简化这些东西而存在的 - **.lazy** ``` {{value}} ```  从这里我们可以看到，我们还在输入的时候，光标还在的时候，下面的值就已经出来了，可以说是非常地实时。 但是有时候我们希望，在我们输入完所有东西，光标离开才更新视图。 ``` {{value}} ``` 这样即可~这样只有当我们光标离开输入框的时候，它才会更新视图，相当于在onchange事件触发更新。 - **.trim** 在我们的输入框中，我们经常需要过滤一下一些输入完密码不小心多敲了一下空格的兄弟输入的内容。 ``` ```  为了让你更清楚的看到，我改了一下样式，不过问题不大，相信你已经清楚看到这个大大的hello左右两边没有空格，尽管你在input框里敲烂了空格键。 需要注意的是，它只能**过滤首尾的空格**！首尾，中间的是不会过滤的 - **.number** 看这个名字就知道，应该是限制输入数字或者输入的东西转换成数字，but不是辣么赶单。 ...
```js import XDate from 'xdate' // 时间戳转东八时区的'YYYY-MM' function zhCNTimeFormat (time) { if (time) { // 1. new Date(time).getTimezoneOffset(): 求出格林威治时间和本地时间的时差，分钟为单位(例如，假如当前处于东一区， 此结果为 -1 * 60 = -60) // 2. offset: 求出当前时间(东八区与当前时区(东一区)的差值: 7小时)...
本文的代码都在 可以找到。 1. [一个 Node 应用](https://github.com/riskers/docker-demo/blob/master/0-app/README.md) 2. [docker化一个应用](https://github.com/riskers/docker-demo/blob/master/1-docker-app/README.md) 3. [发布一个镜像](https://github.com/riskers/docker-demo/blob/master/2-push-image/README.md) 4. [docker-compose](https://github.com/riskers/docker-demo/blob/master/3-docker-compose/README.md) 5. [多容器应用](https://github.com/riskers/docker-demo/blob/master/4-multi-container-app/README.md) ## Docker 存在的意义 - 加速本地开发和构建，开发人员可以构建、运行并分享Docker容器，容器可以在开发环境中构建，然后轻松地提交到测试环境中，并最终进入生产环境 - 能够让独立服务或应用程序在不同环境中，得到相同的运行结果。 - 用 Docker 创建隔离环境进行测试 - Docker 可以让开发者先在本机上构建一个复杂的程序测试，而不是一开始就在生产环境进行测试 对于我们前端来说，这样比较好理解：构建好的镜像只要就是 `package.json`，里面只要写好需要的包名和版本号，任何人拿到这份文件都可以获取对应的包，并且能够运行这个程序。但是，我们忘了一个很重要的点，Node...
# Github仓库该如何重命名？ ## 1.在Github上重命名仓库 跑到自己的仓库那,找到 `Setting` 的 `tag` , 点进去后 `Options` 的 `Settings` 就可以设定 `Repository name`. ## 2.修改本地仓库信息 因为远程的仓库名改了, 本地的对应仓库名也要改. ##### 1.检查当前远程仓库的信息 ``` $ git remote -v ``` 列出所有远程仓库信息, 包括网址....
> [vue源码探索的一些疑惑](https://jooger.me/article/5ae895ead41cea10bd51ce6c) ### 1. 父组件create => 子组件create => 子组件mounted => 父组件mounted？ 父组件的初次render会将子组件的vnode存于父组件的vnode的children中，父组件mount之前会做一次初始化patch，patch完会根据vnode创建dom元素，但在创建完，插入dom前会先创建子组件的vue实例和dom元素，并且插入到父组件的dom中去，然后再将父组件插入到浏览器dom中，所以在所有子组件mount之后，父组件才会mount ### 2. 为啥子组件的emit能触发父组件在该子组件上的监听事件？ ```html this.$emit('custom-event', params) ``` 父组件初次render生成vnode时，会将监听在子组件上的事件（event和handler）挂到到子组件vnode的 `componentOptions.listeners` 中，在创建或更新子组件的时候将其挂到自身的 `$options._parentListeners`，然后子组件将这些事件挂在自身的 `_events` 下，每次$emit就会触发 `_events` 里的相应的事件，`_events` 就相当于自身的一个事件池，$on，$off，$emit都会在事件池中触发相应操作 ### 3....
#### 图片来自远端 一般我们都会在动态请求一张远端图片时会遇到这样的需求，请求回来后会需要进行一些计算与定位，实现方式非常简单，基本大家都写过。 ``` const imgEle = document.createElement('img'); imgEle.onload = function(e) { console.log(this.width, this.height) } imgEle.src = 'https://cbu01.alicdn.com/cms/upload/2016/883/878/2878388_1073447813.png'; document.body.appendChild(imgEle) ``` > #### 图片来自本地 那如果我们根本就没有远端的图片地址呢，比如从本地上传一张图片 需要借助一个web API， [URL.createObjectURL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL), 可以通过它来创建一个 `File` 或...