- 博客(54)
- 收藏
- 关注
RSS订阅原创 Npm 常用命令
初始化（生成 package.json）: npm init安装 package.json 中的所有包：npm install全局安装（在安装命令行工具时使用全局安装，如npm install vue-cli -g）: npm install <package> -g本地安装：npm install<package>更新包：npm update ...
2019-04-30 16:19:09
295
原创 MacOS Safari内嵌第三方iframe无法创建cookie
问题由来默认情况下，Safari会允许来自您访问的网站的Cookie，但会阻止可能嵌入在这些网站中的第三方内容在您的计算机上存储Cookie。解决方案由于问题是跨域导致，故可将子页面代理到父页面相同域名下父页面生成token，通过query传递到子页面，子页面请求携带token进行认证进入父页面先redirect到子页面生成cookie，再redirect回到父页面...
2019-04-23 22:25:22
2959
转载 浏览器重绘与回流
当元素的样式发生变化时，浏览器需要触发更新，重新绘制元素。这个过程中，有两种类型的操作，即重绘与回流。重绘(repaint):当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此 损耗较少回流(reflow):当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因...
2019-04-09 21:16:21
381
1
原创 浮动元素详解
为什么需要浮动元素？1. 行内元素（包括文字、input、button等等）环绕浮动元素，这也是float设计之初的目的，可以实现文字环绕图片等效果2. 较早时期用来进行页面布局，现在有了inline-block、flex、grid等等更方便的方法浮动元素布局原理浮动元素会根据属性值向左或向右浮动，浮动元素会脱离标准文档流，进入浮动流，浮动流内的浮动元素可以左右移动，直至外边缘碰到包含块或...
2019-03-24 21:14:45
3452
1
原创 Vue(2.5.22) 数据劫持、发布-订阅 源码梳理
着重于数据劫持、发布-订阅模式，我们只关注相关的代码1. 从代码入口开始（instance/index）function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor...
2019-03-08 16:09:38
493
转载 开启CSS3硬件加速
1. 何为硬件加速就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。2. 如何开启硬件加速Chrome, FireFox, Safari, IE9+ 以及最新的 Opera都支持硬件加速，只要使用特定的CSS语句就可以开启硬件加速:/**使用3d效果来开启硬件加速**/.speed-up { ...
2019-03-06 10:59:18
1324
原创 BFC
块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。下列方式会创建块格式化上下文：根元素或包含根元素的元素 浮动元素（元素的float不是none） 绝对定位元素（元素的position为absolute或fixed） 行内块元素（元素...
2019-01-22 10:36:13
926
原创 vue scoped style
1. scoped的样式只对当前组件内的元素起作用，原理是会为当前组件的根元素添加一个属性，如data-v1232. scoped的样式会对子组件的根元素起作用（子组件的根元素实际就在父组件的dom中）3. 如果希望scoped的样式能够影响到子组件的非根元素，可使用 深度选择器（>>>），sass、less无法解析，使用 /deep/ 替换即可/* css */...
2019-01-21 11:02:41
204
原创 文本溢出处理
1.单行文本溢出el{ width: xxx; /* 溢出省略...三件套 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}2.多行文本溢出处理后端返回合适的文本（固定字数、符号等） 前端进行截断el{ /* 只显示五行 */ height: 100px; ...
2019-01-13 22:20:03
946
原创 js 浅拷贝、深拷贝实现梳理
浅拷贝1. Object.create(Object.getPrototypeOf(prev), Object.getOwnPropertyDescriptors(prev)) （最完美）2. Object.assign({}, prev) （无法拷贝enumerable=false的属性；无法拷贝原型链）3. 使用for in遍历prev，对新对象进行赋值（无法拷贝enumerabl...
2019-01-04 11:51:19
172
原创 vue 组件间通信总结
父-子组件通信1. Props此处不区分是否加引号，若不bind，皆作字符串处理，否则作为表达式处理若传入对象，则子组件上的该对象与父组件中的该对象指向同一个地址，如果希望对传入的对象进行修改且不影响父组件，则需要看情况对其进行深、浅拷贝若传入的属性在父组件中会发生变化，则将其放置在子组件的computed或watch(deep:true)中以检测变化若要根据该属性去修改以此为...
2018-12-20 23:29:26
157
原创 阻止浏览器对html的缓存
问题由来：版本更新后，项目打包上线，打包后的js、css等静态资源的名称已变化（打包工具），不必担心它们的缓存，而html文件未改变（如index.html），浏览器仍会使用缓存的html文件，导致各种错误 1. 后端设置get请求的response请求头response.setDateHeader("Expries", -1);response.setHeader("Cache-...
2018-12-20 23:13:32
4041
1
原创 vue 小知识总结
1. v-if用于切换元素(组件)是否存在在切换时元素(组件)及它的数据绑定被销毁并重建，值为false时关闭数据劫持，值为true时开启数据劫持，依据此特性，我们可以达到重新渲染(将当前state变成初始state)的效果<component v-if="isShow"></component>this.isShow = false;this.$nex...
2018-12-10 15:11:04
170
原创 js 严格模式
除了正常运行模式，ECMAscript 5添加了第二种运行模式：”严格模式”（strict mode)，ES6的模块会自动使用严格模式严格模式主要有以下限制： 1.变量必须声明后再使用 2.函数的参数不能有同名属性，否则报错 3.不能使用with语句 4.不能对只读属性赋值，否则报错 5.不能使用前缀 0 表示八进制数，否则报错 6.不能删除不可删除的属性，否则报错 7.不能删除变...
2018-12-05 14:39:04
367
原创 js 执行环境、作用域链和闭包
执行环境：定义了变量或函数有权访问的其他数据，每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中（如同全局环境下的变量和函数保存在window对象内）执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁（全局执行环境直到应用程序退出，例如关闭网页或浏览器时才会被销毁）只有函数有自己的执行环境，当执行流进入一个函数时，函...
2018-12-04 17:52:00
254
原创 js 元素宽高、位置计算总结
DOM对象只读属性clientWidth、clientHeight：指的是元素的可视部分宽度和高度，即padding+content，如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高（即不包含border及滚动条宽高） html的clientWidth/clientHeight并不等于可视部分的宽度和高度，而是移除...
2018-11-26 14:57:32
598
转载 NodeJS 基于cookie、session的身份验证
cookie 和 session众所周知，HTTP 是一个无状态协议，所以客户端每次发出请求时，下一次请求无法得知上一次请求所包含的状态数据，如何能把一个用户的状态数据关联起来呢？比如在淘宝的某个页面中，你进行了登陆操作。当你跳转到商品页时，服务端如何知道你是已经登陆的状态？cookie首先产生了 cookie 这门技术来解决这个问题，cookie 是 http 协议的一部分，它的...
2018-11-21 11:47:07
1494
原创 js for循环拆解（解析for setTimeout经典案例）
直接上代码// 经典案例for(var i=0;i<3;i++) { setTimeout(function () {console.log(i)}, 0)}// 拆解后var i = 0;{ var t = i; setTimeout(function () {console.log(t)}, 0)}i++;{ var t = i; setTim...
2018-11-19 10:48:17
1107
原创 ts 特殊符号用法
1. 属性或参数中使用 ？：表示该属性或参数为可选项2. 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop3. 变量后使用 ！：表示类型推断排除null、undefined 欢迎关注、点赞...
2018-11-18 22:52:39
25470
原创 Cordova run android报错：You have not accepted the license agreements of the following SDK com
接连安装完 Android Studio、Gradle 、 Android SDK 之后，运行cordova run android报错：You have not accepted the license agreements of the following SDK components: [Android SDK Platform 27]. Before building your pro...
2018-11-18 19:23:32
583
原创 js new运行流程
1. 创建一个新对象2. 将这个新对象的隐式原型指向Class的显式原型3. 将这个新对象作为this指针的指向，用call/apply调用Constructor4. 如果上述Constructor调用返回对象或function就将其指向 赋值号(=) 左侧变量，否则将这个新对象指向左侧变量// Democonst man = new Person();等同于:cons...
2018-11-13 17:07:56
265
原创 position: inherit、static、relative、absolute和fixed
inherit:规定应该从父元素继承 position 属性的值。static:默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明，z-index只对relative、absolute、fixed有效，默认为0）。relative:生成相对定位的元素，相对于其正常位置进行定位。因此，"lef...
2018-11-13 16:12:53
2922
1
原创 history实现页面支持Ajax前进、后退
实现步骤：每次Ajax请求之后都使用history.pushState(replaceState)将携带参数的记录压入历史记录栈（Ajax请求不刷新页面，也不会自动加入到history） 通过监听window的onPopstate事件，在下次用户进行前进、后退操作时根据state中我们放置的参数做相应的处理以达到跳转的目的// DemoService.getData().then(...
2018-11-13 15:33:50
2527
原创 iframe 相关
1. 设置iframe宽高自适应const iframe = document.getElementById('file');iframe.onload = () => { iframe.width= iframe.contentWindow.document.documentElement.scrollWidth; iframe.height = iframe.co...
2018-11-12 16:53:01
95
原创 基于Session、Token的身份验证小结
名词： Cookie 存储在client Session 会话，存储在server，server需要对session进行定期清理 Token 服务端验证成功后根据一定规则签发的一个‘令牌’，server端每次收到请求都用相同的规则再次生成'令牌'与其对比，而无需存储验证流程：login=>发送http请求，账号密码验证成功=> server端通过r...
2018-11-02 16:56:48
667
原创 JavaScript语言精粹-毒瘤、糟粕（应对）
毒瘤不使用全局变量 使用块级作用域，不var return与返回值要位于同一行，否则当自动插入分号后会返回undefined 当对象的属性名与js保留字相同时，无法使用点语法，使用括号表示法 js字符是16位的，Unicode将一对字符视为一个单一的字符，而js将其认为是两个不同的字符 注意typeof对于null和正则返回'object' parseInt在遇到非数字时会停止，注...
2018-10-17 22:17:04
475
转载 VSCode 快捷键
通用Ctrl+Shift+P, F1 显示命令面板Ctrl+P 快速打开（文件）Ctrl+Shift+N 新窗口/实例Ctrl+Shift+W 关闭窗口/实例Ctrl+, 打开用户设置Ctrl+K+S 键盘快捷键基本编辑Ctrl+X 剪切Ctrl+C 复制Alt+ ↑ / ↓ 上下移动Shift+Alt + ↓ / ↑ ...
2018-10-17 14:54:28
154
原创 ts 函数
1. 函数的返回值类型可不定义，编译器可以自动识别类型(即使可能会根据情况返回不同的类型)2. 由于存在类型推断，函数表达式可以省略左右任意一边如下：// 完整函数类型let func: (x: number, y: number) => number = (x: number, y: number) => x + y// 省略左侧let func = (x...
2018-10-16 16:12:35
1933
原创 ts 基础类型
1. boolean2. string3. number4. number[] / Array<number>5. turple(元组，如下) [string, object, number, number[]]6. enum(枚举，如下)enum Type { Component, Wire = 2, Offpage}let type:...
2018-10-16 11:44:47
648
原创 webpack记录
css/sass...中可以使用 '~@' 访问 'assets'中的文件（都可使用 alias 'src', js中使用 '@'，css中使用 '~@'，效果与 require('@/assets/')类似） 欢迎关注、点赞
2018-10-08 09:56:51
89
原创 ElementUI 爬坑记录
1. Form动态item校验，数据绑定：model 只能为对象 prop的书写规则：使用字符串拼接，即 'model + prop' 所取得值要对应v-model中的数据（对象的点语法与数组的index取值都是用 点 代替），举例如下：<el-form v-if="radioVals[index] === '1'" :model="f...
2018-09-30 11:14:48
361
原创 js Array重点注意记录
1. Array.prototype.fill当参数为对象（数组）时，该数组中每一项都将指向同一个对象，而并非每次都创建一个新对象，如下new Array(5).fill({x: 1}) 如果需要初始化一个每项都为对象的数组，可使用如下方式：Array.apply(null, {length: 5}).map(() => {return {x: 5}})2....
2018-09-29 22:50:06
200
原创 js 运算符优先级总结
下面的表将所有运算符按照优先级的不同从高到低排列（来源：MDN）优先级 运算类型 关联性 运算符 20 圆括号 n/a ( … ) 19 成员访问 从左到右 … . … 需计算的成员访问 从左到右 … [ … ] new (带参数列表) n/a new … ( … ) 函数调用 从左到右 ...
2018-09-28 22:51:08
1433
原创 vue 两种Object.assign响应式修改对象方式
两种写法1. this.obj = Object.assign({}, this.obj, {k: v})（推荐写法）推荐原因： this.obj可能是父级组件传过来的prop，而为了遵循 单向数据流 的设计理念，不直接修改该数据对象，而是生成一个新的数据对象表达式右侧会生成一个新的对象，this.obj会指向一个新的引用地址（常用于 浅拷贝 对象） 2. this.obj =...
2018-09-20 23:26:30
11279
原创 vue(2.x) 响应式修改数据（对象、数组）及难点（坑）
背景1. Vue不能检测对象属性的添加、删除（仅此而已，可直接对该对象重新赋值、修改该对象或内层对象的属性）2. Vue不能检测数组的项修改（根据index）、length修改（仅此而已，可直接对数组重新赋值，如使用filter、map、concat、slice等方式生成新数组对其赋值）对象1. $set、set、$delete、delete// $set是Vue.s...
2018-09-20 22:46:19
9614
原创 vue 为什么组件的data要写成返回对象的函数
原因：对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题上面解释完，你可能还是不大清楚，下面我们举个简单的例子： // 1.对象方式（所有重用的实例中的data均为同一个对象） var da...
2018-09-20 21:44:16
4803
转载 可被子元素继承的属性
文本color(颜色，a元素除外) direction(方向) font（字体） font-family（字体系列） font-size（字体大小） font-style（用于设置斜体） font-variant（用于设置小型大写字母） font-weight（用于设置粗体） letter-spacing（字母间距） line-height（行高） text-align（用于...
2018-09-16 22:27:20
1069
原创 浏览器兼容性问题（IE9+;PC）
HTML/CSS1. 默认margin、padding不一致 * {margin: 0;padding: 0;}2. css3的animation IE9不支持3. display: flex IE9不支持；IE10部分支持，使用display: ms-flexbox flexbugs@github IE10下，justify-content对...
2018-09-06 20:30:20
4147
原创 W3C标准
如何符合W3C标准（html5）？确保所有的标签都是用小写字母 确保所有的属性都放在引号里 确保所有成对标签出现的顺序、不成对的标签都用/>结束，“/”和“>”之间不要有空格（input、img、meta等等除外） 图片src不为空，有alt属性 声明编程语言：<meta charset="utf-8"> 添加doctype：<!DOCTYPE html...
2018-09-01 11:08:12
187
原创 常用块级元素与行内元素
常用块级元素：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等 常用行内元素：span、img、a、input、textarea、select、strong、lable、button（默认display：inline-b...
2018-08-18 11:25:13
3586
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人