flex-grow 第一步：计算剩余空间 flex-grow的和大于1时：剩余空间 = 父容器宽度 - 子元素总宽度 flex-grow的和小于1时：剩余空间 = ( 父容器宽度 - 子元素总宽度 ) * ( flex-grow的和 / 1) 第二步：计算各子元素分配到的空间 总权重：flex-grow的和 各个权重：格子flex-grow的值 分配的空间：剩余空间 * ( 各个权重 / 总权重) 第三步：计算扩张后的总空间 项目宽度 + 分配空间 举例说明 基本结构 <div class="parent"> <div class="child one"></div> <div class="child two"></div> <div class="child three"></div> </div> flex-group和大于1的情况 .parent{ display: flex; width: 500px; height: 100px; background-color: #000;.....
有更新！

CSS Flex布局中flex-grow和flex-shrink计算规则

类型转换只有三种情况，分别是 转换为布尔值 转换为数字 转换为字符串 转换规则 原始值转换规则 （null, undefined, number, string, boolean, symbool） 转为布尔值 转换为false: undefined， null， false， NaN， ''， 0， -0 其他全部为true 转为数字 null -> 0 undefined -> NaN symbol -> 报错 boolean true -> 1 false -> 0 string '1' -> 1 '01' -> 1 '0x10' -> 16 '1e1' -> 10 'a' -> NaN '\n' -> 0 转为字符串 null -> 'null' undefined -> 'undefined' symbol -> 'Symbol(<>)' boolean true -> 'true' false -> 'false' number 1 -> '1' 010....

类型转换

官方介绍 key的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用： 完整地触发组件的生命周期钩子 触发过渡 如何理解呢 假设有三个子组件，每个子组件里面有一个有状态的孙子组件。 <Child v-for="item in array" :text="item" @delete="remove(i)"/> // array: [1, 2, 3] 进行删除操作时（删除2） 当不设置 key 时，vue遍历2个数组，对比发现1没变，并且因为是相同类型的元素于是复用1，然后对比发现2变成了3，于是将2改成3，但子元素没变，就地复用，于是就会出现问题，最后3被删除了，于是删除3对应的子元素 当设置了 key时，会基于 key 的变化重新.....

Vue系列-key的作用

前端路由实现的本质就是监听URL的变化，然后匹配路由规则显示相应的页面，实现方式有2种 Hash模式 History模式 Hash模式 可以通过 hashchange 事件来监听URL的变化 window.addEventListener('hashchange', e => { console.log(e.newURL, e.oldURL) // 新旧URL }) History模式 History 模式主要使用 history.pushState 和 history.replaceState 改变 URL。 通过 History 模式改变 URL 同样不会引起页面的刷新，只会更新浏览器的历史记录。 // 新增历史记录 history.pushState(stateObject, title, URL) // 替换当前历史记录 history.replaceState(stateObject, title, URL) // 监听路由变化 window.addEventListener('popstate', e => { // e.state 就是 pushState(.....

前端路由原理

首先得有一个让用户选择图片的机会 <input type="file" accept="image/png,image/jpeg,image/jpg,image/svg,image/gif"> <!--这里不使用image/*是因为其在部分浏览器中响应缓慢--> <!--多张图片--> <input type="file" accept="image/png,image/jpeg,image/jpg,image/svg,image/gif" multiple> 然后要知道用户是否已经选择了图片 // 假定input元素id为inputFile document.getElementById('inputFile').addEventListener('change', changeHandler, false); function changeHandler (e) { const files = e.target.files // 这就是用户上传的图片了，是个类数组对象 } 接下来就是要展示图片了 2种方式任你选择，最终是拿到图片的......

图片本地预览

服务器端和浏览器端的天然区别 服务器端所有的模块都存放在本地硬盘中，可以同步加载完成，等待时间就是硬盘的读取时间。 浏览器，所有的模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于”假死”状态。 说说JS的模块化 原始模拟模块的一些写法 一个函数就是一个模块 一个对象就是一个模块 立即执行函数为一个模块 CommonJS规范 暴露模块 module.exports = {} exports.xxx = 'xxx' 引用模块 使用全局方法require() 模块标识符 核心模块(Node.js自带的模块)：直接跳过路径分析和文件定位 路径模块(相对或绝对定位开始的模块)：直接得出相对路径就好了 自定义模块(node_modules里的模块)：先在当前目录的node_modules里找这个模块，如果没有，它会往上一级目录查找，查找上一级的node_modules，依次往上，直到根目录下都没有, 就抛出错误。 CommonJS规范的特点 所有代码都运行在模块作用域，不会污染全局作用域； 模块是同步加载的，即只有加载完成，才能执行后面的操作； 模块在首次执行后就会缓存，....

模块化小讲

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。 所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 基础生命周期 beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 created 在实例创建完成后被立即调用。 在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。 然而，挂载阶段还没开始，$el property 目前尚不可用。 beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。 该钩子在服务器端渲染期间不被调用。 mounted 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mo....

Vue系列-生命周期

页面生存周期 加载阶段：是指从发出请求到渲染出完整页面的过程，影响到这个阶段的主要因素有网络和 JavaScript 脚本。 交互阶段：主要是从页面加载完成到用户交互的整合过程，影响到这个阶段的主要因素是 JavaScript 脚本。 关闭阶段：主要是用户发出关闭指令后页面所做的一些清理操作。 加载阶段影响渲染的因素 能阻塞网页首次渲染的资源称为关键资源 关键资源个数 关键资源大小 请求关键资源需要多少个RTT（Round Trip Time） RTT 就是这里的往返时延。它是网络中一个重要的性能指标，表示从发送端发送数据开始，到发送端收到来自接收端的确认，总共经历的时延。通常 1 个 HTTP 的数据包在 14KB 左右 如何减少关键资源的个数 将 JavaScript 和 CSS 改成内联的形式 如果 JavaScript 代码没有 DOM 或者 CSSOM 的操作，则可以改成 async 或者 defer 属性 对于 CSS，如果不是在构建页面之前加载的，则可以添加媒体取消阻止显现的标志 如何减少关键资源的大小 压缩 CSS 和 JavaScript 资源，移除 HTML、C......

页面优化

如果JS某段代码执行时间过久，会影响定时器任务的执行 function bar() { console.log('bar') // bar并不会被立即打印，而是等到for循环结束之后才被打印 } function foo() { setTimeout(bar, 0); for (let i = 0; i < 5000; i++) { console.log(i) } } foo() 如果setTimeout存在嵌套，那么系统会设置最短时间间隔为4毫秒 在Chrome中嵌套调用大于等于5次，系统会判断该函数方法被阻塞了，如果定时器的调用时间间隔小于 4 毫秒，那么浏览器会将每次调用的时间间隔设置为 4 毫秒 function testSetTimeoutFor4MS () { let index = 0 let timer = null function cb () { console.timeEnd(index) if (index >= 10) { clearTimeout(timer) timer = null return false } console.time(.....

关于setTimeout的小“秘密”

BFC 什么是BFC BFC是个简称，英文名是Block Formatting Content，中文名是 暴风城 块级格式上下文，他还有3个兄弟姐妹分别是IFC，FFC，GFC BFC是个概念，一个特定的环境，决定了元素如何定位，如何布局，规定了内部元素的行为和对外部元素的表现 哪里有/如何触发 根元素 <html> 浮动元素：float: left; / float: right; 绝对定位元素：position: absolute; / position: fixed; 行内块元素：display: inline-block; 弹性元素：display: flex; / display: inline-flex; 网格元素：display: grid; / display: inline-grid; 表格 表格单元格：display: table-cell; 表格标题：display: table-caption; 匿名表格单元格元素： display: table; html table的默认值 display: table-row; html row的默认值 d......

BFC小讲

三次握手 客户端主动提出握手：SYN=1 seq=x；之后客户端进入 SYN_SENT 状态 服务器处于 LISTEN 状态，接收后表示好感，回应：SYN=1 ACK=1 ack=x+1 seq=y；之后进入 SYN_RCVD 状态 客户端收到回应后再次确认：ACK=1 ack=y+1 seq=x+1；之后进入 ESTABLISED 状态 服务器接收到后从 SYN_RCVD 状态进入 ESTABLISED 状态 四次挥手 客户端主动提出分别：FIN=1 seq=u；之后进入 FIN_WAIT_1 状态 服务端得知要分别，回应：ACK=1 ack=u+1 seq=v；进入 CLOSE_WATI 状态，准备挥手 客户端收到回应后，无言，默默进入 FIN_WAIT_2 状态 服务端发起挥手：FIN=1 ACK=1 ack=u+1 seq=w；进入 LAST_ACK 状态 客户端挥手分别：ACK=1 ack=w+1 seq=u+1；进入 TIME_WAIT 状态，2s后进入 CLOSED 状态 服务端接到确认分别后，进入 CLOSED 状态

图解TCP的三次握手四次挥手

随时更新的知识点 2019-07-31 弹窗可以通过 open(url, name, params) 调用。它返回新窗口的引用 name相同将替换窗口链接，这可以实现webpack总是打开一个窗口调试，同时可以通过返回的窗口引用关闭窗口。 2019-07-16 mouseover/out和mouseenter/leave的区别和共同点 共同点：mouseover/out、mouseenter/leave事件有一个额外的目标：relatedTarget，作为起点/终点的元素，是对target的补充 不同点： mouseover/out即使从父元素转到子元素时也会被触发，假设鼠标一次只会移入一个元素，能冒泡 mouseenter/leave鼠标进入子元素也不会被触发，只关注鼠标在整个元素的内部还是外部，不会冒泡 性能优化 长图文中，可将真实图片放入data-src中，src使用加载图，然后监听滚动事件，检查图片元素是否出现在可视范围内(elem.getBoundingClientRect())，出现则用data-src替换src async和defer属性的异同 相同点 不会阻塞页面的......

随时更新的知识点

原理 CSS transition只适用于明确的值，auto这种无法实现过度 CSS var()函数可以代替元素中任何属性中的值的任何部分 答案 HTML部分 <div class="trigger"> Hover me to see a height transition. <div class="el">content</div> </div> CSS部分 .el { transition: max-height 0.5s; overflow: hidden; max-height: 0; } .trigger:hover > .el { max-height: var(--max-height); } JavaScript部分 var el = document.querySelector('.el') var height = el.scrollHeight el.style.setProperty('--max-height', height + 'px')

元素高度不确定时实现height从0到auto动画

VS Code进阶技能 [TOC] 滚动到文件中某个特定的行和列 code -g <file:line[:character]> 比较两个文件的内容 code -d a.txt b.txt 光标移动一个单词 option + 方向键 光标移动到行首或行尾 cmd + 方向键 代码块的光标移动 cmd + shift + \ 光标移动到文档的第一行或者最后一行 cmd + 上下键 文本选择 在以上光标移动的基础上按住shift（代码块除外） 删除选中的整行 cmd + shift + k 剪切光标所在行 cmd + x 在光标所在行 下面 开始 cmd + enter 在光标所在行 上面 开始 cmd + shift + enter 移动代码 option + 上下方向键 复制光标所在行到 上/下面 option + shift + 上下方向键 注释一行代码 cmd + / 注释整段代码 option + shift + a 调整光标前后的字符位置 Ctrl + t 合并代码行 Ctrl + j 撤销光标的移动和选择 cmd + u 创建多光....

VS Code 进阶技能

SSH免密登录 [TOC] 第一步：生成秘钥对 参考ssh-keygen 第二步：将公钥上传到目标服务器 公钥生效需满足至少下面两个条件： 1 .ssh目录的权限必须是700 2 .ssh/authorized_keys文件权限必须是600 ssh-copy-id 方式（推荐） ssh-copy-id -i ~/.ssh/<公钥> <user>@<romte_ip> scp方式 scp -p ~/.ssh/<公钥> <user>@<remote_ip>:/root/.ssh/authorized_keys 或者 scp ~/.ssh/<公钥> root@<remote_ip>:<path>/<公钥> cat <path>/<公钥> >>~/.ssh/authorized_keys // 需登录服务器 第三步：简化登录（可选） 添加一个别名 alias hi='ssh <user>@<remote_ip....

SSH免密登录

ssh-kengen [TOC] ssh-keygen 可用来生成ssh公钥认证所需的公钥和私钥文件。 使用 ssh-keygen 时，请先进入到 ~/.ssh 目录，不存在的话，请先创建。并且保证 ~/.ssh 以及所有父目录的权限不能大于 711 语法 ssh-keygen [-q] [-b bits] -t type [-N new_passphrase] [-C comment] [-f output_keyfile] ssh-keygen -p [-P old_passphrase] [-N new_passphrase] [-f keyfile] ssh-keygen -i [-f input_keyfile] ssh-keygen -e [-f input_keyfile] ssh-keygen -y [-f input_keyfile] ssh-keygen -c [-P passphrase] [-C comment] [-f keyfile] ssh-keygen -l [-f input_keyfile] ssh-keygen -B [-f input_keyf.....

ssh-kengen

Semantic Versioning（语义版本控制） [TOC] 先看看几种写法 { "dependencies": { "package-1": ">=2.0.0 <3.1.4", "package-2": "^0.4.2", "package-3": "~2.7.1" "package-4": "2.3.x" } } Comparators comparatordescription <2.0.0Any version that is less than 2.0.0 <=3.1.4Any version that is less than or equal to 3.1.4 >0.4.2Any version that is greater than 0.4.2 >=2.7.1Any version that is greater than or equal to 2.7.1 =4.6.6Any version that is equal to 4.6.6 >=2.0.0 <3.1.4Greater than or equal ......

Semantic Versioning（语义版本控制）

JavaScript语言原理 [TOC] 自动插入分号规则   有换行符，且下一个符号是不符合语法的，就尝试插入分号 有换行符，且语法中规定此处不能有换行符，就自动插入分号 源代码结束处，不能形成完整的脚本或者模块结构，就自动插入分号 no LineTermiator here规则：表示它所在的结构中的这一位置不能插入换行符，和规则2强相关 带标签的continue语句，不能在continue后插入换行 带标签的break语句，不能在break后插入换行 return后不能插入换行 后自增、后自减运算符前不能插入换行 凡是async关键字，后面都不能插入换行 箭头函数的剪头前，不能插入换行 yield之后，不能插入换行 throw和Exception之间不能插入换行 以下情况要注意添加分号 以括号开头，即token为( 以数组开头，即token为[ 以正则表达式开头，即token为/ 以Template开头的语句，即token为`

JavaScript语言原理

状态码 [TOC] 请求成功 200 OK : 请求执行成功并返回相应数据,如 GET 成功 201 Created : 对象创建成功并返回相应资源数据,如 POST 成功;创建完成后响应头 中应该携带头标 Location ,指向新建资源的地址 202 Accepted : 接受请求,但无法立即完成创建行为,比如其中涉及到一个需要花费 若干小时才能完成的任务。返回的实体中应该包含当前状态的信息,以及指向处理状态 监视器或状态预测的指针,以便客户端能够获取最新状态。 204 No Content : 请求执行成功,不返回相应资源数据,如 PATCH , DELETE 成功 重定向 重定向的新地址都需要在响应头Location中返回 301 Moved Permanently:被请求的资源已永久移到新位置 302 Found:请求的资源现在临时从不同的URI响应请求 303 See Other:对应当前请求的响应可以在另一个URI上被找到，客户端应该使用GET方法进行请求 304 Not Modified:资源自从上次请求后没有发生变化，主要使用场景在于实现数据缓存 307 Tempor....

HTTP状态码

SASS基础入门 [TOC] 本文所有语法格式是基于SCSS格式的 scss 和 sass语法的相互转换 # Convert Sass to SCSS $ sass-convert style.sass style.scss # Convert SCSS to Sass $ sass-convert style.scss style.sass 编译 命令行编译 #单文件 sass --watch input.scss:output.css #多文件 sass --watch app/sass:public/stylesheets # --wacth 自动编译 GUI 界面工具编译 Koala Compass.app Scout CodeKit Prepros 自动化编译 Grunt 配置 Sass 编译的示例代码 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { dist: { files: { 'style/style.cs......

SASS基础入门