- 博客(34)
- 收藏
- 关注
RSS订阅原创 代码规范-提交时检查
工具：husky：Husky improves your commits and more woof! You can use it to lint your commit messages, run tests, lint code, etc… when you commit or push. Husky supports all Git hooks.husky可以让你方便的使用各种git hookslint-staged:This project contains a script that
2022-03-02 20:36:17
538
原创 对象属性类型及常用遍历方式
是否可枚举自身属性 / 继承属性Symbol属性for…in可枚举自身+继承不可遍历Object.keys()可枚举仅自身属性不可遍历Object.getOwnPropertyNames()可枚举+不可枚举仅自身属性不可遍历Reflect.ownKeys可枚举+不可枚举仅自身属性可遍历MDN参考：属性的可枚举性和所有权...
2020-09-10 19:36:15
240
原创 具名函数表达式--NFE(Named Function Expression)
问题先来看下面一段代码var b = 10;(function b(){ b = 20; console.log(b); // 输出位置1})();console.log(b); // 输出位置2结果位置1:ƒ b(){b = 20;console.log(b); // 输出位置1}位置2: 10解析：位置一： NFE特性1，函数名（b）不能再绑定其它值（不可更改...
2019-11-06 14:30:44
924
原创 千分位分隔
Object.prototype.toLocalString()Number、Date、Array都有继承自Object的toLocalString()方法，可以通过locals设置，实现不同地区数字格式化转换，例如德国使用“,”作为小数分隔符，使用“.”作为千分位分隔符MDNconsole.log(number.toLocaleString('de-DE')); // 123.456,7...
2019-11-05 19:02:24
988
原创 setTimeout in vue methods（this与vue视图更新）
先来看一段代码<template><div @click="fn">test{{obj}}</div> </template><script> export default { data() { return { obj:{} } }, methods: { ...
2019-10-15 17:09:01
514
原创 cherry-pick这是什么神奇的现象
要应用在branch1上的c1提交点的修改在branch2分支上进行cherry-pick c1时，按照c1的修改，标红的代码应该删除，但并没有删除
2019-10-10 19:34:06
904
原创 Chrome： Provisional headers are shown and cookies hidden
现象：携带cookies的请求在chrome devTools–network中被隐藏，如图：相关flags - Enable network service访问chrome://flags/#network-service将Enable network service设置为disablednetwork service disable之后恢复，如图：但根据我翻阅的资料还有一个相...
2019-05-24 18:10:08
720
原创 对象属性初始化的方式
目录ES5ES6 对象属性简写属性初始化器（试验性写法）ES5var obj = { method: function() {}}ES6 对象属性简写var obj = { method() {}}属性初始化器（试验性写法）目前要使用babel编译babel编译var obj = { method = () => {}}...
2019-02-28 14:08:38
702
原创 箭头函数的特点
没有自己的this箭头函数中的this实际是外层函数的thisconst test={pro:'pro',con:()=&amp;gt;console.log(this)}test.con() //windowconst foo={bar:{con:test1.con},pro:'foopro'}foo.bar.con() //window（this与调用层数没有关系this是函数才有的内部...
2019-01-17 17:01:19
2010
原创 vue-router：hash与history
结论实现原理：hash利用hash改变时的onhashchange事件history利用window.history在H5中新增的特性：onpopstate事件以及pushState()、replaceState()方法由实现原理引发的特性url： hsah方式实现的前端路由中有#字符，history实现的就是一个正常的url页面刷新时的额外配置： 页面刷新时，由于http请求不包含h...
2018-12-17 11:51:56
1060
原创 HTTP：浏览器缓存
强缓存（本地缓存）浏览器在第一次请求资源后，再次请求该资源时，会先获取该资源缓存的header信息，如果命中强缓存，则不继续请求服务端数据，直接使用本地缓存数据，不会与服务器通信、相关字段http1.0中使用expirse，用于指定有效期截止时间，如果发送请求的时间在expirse之前就会使用本地缓存http1.1中使用Cache-Control:max-age=num，num是一个相对值...
2018-12-15 12:34:40
373
原创 HTTP：1.0/1.1/2.0版本之间的区别
1.0/1.1更多的请求／响应头Hosthttp1.1在1.0的基础上扩充了请求／响应头，例如可以通过新增的Host字段指定访问服务器上的哪个web站点Connection长连接http1.0需要手动设置connection字段为keep-alive才能建立长连接，http1.1客户端和服务端都默认支持长链接，这样在请求同源资源时就省去了tcp三次握手的时间，减少了建立连接的时间。如果r...
2018-12-14 19:17:04
1336
原创 HTTP请求方法：get和post的区别
语义get方法请求指定的资源post方法发送数据给服务器，可以修改服务器上的资源安全说一个HTTP方法是安全的，是说这是个不会修改服务器的数据的方法。–MDNget方法用于获取数据没有副作用是安全的post方法会引起服务端状态的改变是不安全的幂等一个HTTP方法是幂等的，指的是同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的。–MDNget方法是幂等的，p...
2018-12-13 15:06:35
186
原创 三栏布局：圣杯布局&双飞翼布局
浮动左右浮动，主体使用margin主体结构要在左右的后面<!DOCTYPE html><html> <style type="text/css"> html,body{ height: 100%; } .left,.right{ width: 200p...
2018-12-09 17:00:02
428
原创 BFC
创建一个BFC根元素，即html浮动，float不为none绝对定位，position为absolute或fixedoverflow设置为visible之外的值display设置为flex、inline-block、table-cell、、BFC特性外边距折叠：在同一个BFC内的相邻盒子的垂直外边距会重合，外边距不一样时以最大的为准，可以通过创建新的BFC解决计算BFC的高度...
2018-12-09 10:58:16
144
原创 css元素分类
css中有两种元素分类方式：块级元素与行内元素、替换元素与不可替换元素特性1块级元素： 独占一行行内元素： 并排显示特性2块级元素：width\height\margin\padding均有效行内可替换元素：width\height\margin\padding均有效行内不可替换元素：width\height无效，可以使用line-heihgt设置行高；margin左右有效，...
2018-12-08 22:28:25
668
原创 React+Jest+Enzyme测试
项目介绍：1、antd-pro创建的项目为什么不直接用roadhog test？看了源码roadhog test不支持–watch–coverage之外的Jest命令，我们的项目需要用到–updateSnapshot等import test from 'umi-test';const args = process.argv.slice(2);const watch = args.i...
2018-11-20 15:49:39
1175
原创 setTimeout(fn,0)
零延时setTimeout(fn,0)会将fn添加到当前事件队列（消息队列）的最后，等待事件循环的处理零延迟并不是意味着回调会立即执行。在零延迟调用 setTimeout 时，其并不是过了给定的时间间隔后就马上执行回调函数。其等待的时间基于队列里正在等待的消息数量。延迟是要求运行时处理请求所需的最小时间，但不是有所保证的时间。MDN-零延时const fnTest = () =&gt; ...
2018-10-19 16:24:37
285
原创 React监听窗口变化
React组件监听窗口变化基本思路：改变事件方法中的this指向constructor(props) { this.resizeBind = this.resizeTTY.bind(this)}添加监听componentDidMount() { window.addEventListener('resize', this.resizeBind)}注销事件compone...
2018-10-16 15:18:27
8984
原创 VScode源码分析：查找服务可用的端口
基本信息：分支： master；commitID： 3c4e9323；文件路径： src/vs/base/node/ports.ts基本思路：1、查找方法返回一个Promise（结果为resolve）2、与127.0.0.1逐个端口进行Socket连接：connect：端口已经被占用，继续查找；error：error.code = ECONNREFUSED端口可用，否则端口...
2018-10-15 11:59:09
1697
原创 React组件数据关系
React组件数据关系实例化子组件在getInitState中取不到this.props的值1、this.props的值是在父组件componentDidMount()时获取的 由于以下顺序，导致在子组件getInitState()时父组件还没有执行componentDidMount()也就没有数据 子组件getInitState()–>子组件componentDidMo...
2018-03-20 15:35:43
209
原创 清除Chrome DNS缓存
清除Chrome DNS缓存修改本地host 文件不生效可能是浏览器DNS缓存的原因1、访问chrome://net-internals/#dns 2、点击右上角三角 3、点击Clear cache 和 Flush sockets（两个都要）
2017-12-22 13:37:57
1670
原创 transform的几个知识点
transform 的几个知识点三维坐标系1、w3c中给出了三维空间的坐标系，z轴指向屏幕外 2、 CSS3 transform 变换使用的是元素自身坐标系 位移**translateZ(): 需要给父标签添加透视才能观察到透视透视是通过对元素中靠近观察者的点进行放大，远离观察者的点收缩，使得元素呈现出具有深度的效果 w3c: Perspective causes vertices that
2017-11-24 14:59:08
1333
原创 css3实现3d焦点图
css3实现3d焦点图在之前写的焦点图的基础上添加3d效果 要点：1、perspective添加透视效果 2、计算鼠标位置 <div class="border-3d-wrap"> <div class="wrap" onclick="test()"> <img src="../img/1.png" alt="" id='bannerImg'>
2017-11-22 14:21:41
522
原创 css实现折叠面板
纯css实现折叠面板本例实现了已知高度元素的显示与折叠，但不能应用于高度不固定的元素 <input type="checkbox" class="fold-button"> <section> <div class="fold-content"></div> </section> .fold-button{ appearance: none;
2017-11-22 14:16:20
9310
原创 transition、translate、transform、animation的区别
transition／translate／transform／animation因为自己刚开始接触css3动画时由于没有仔细看过文档，经常将这几个“属性“混淆（如果完全不存在这个问题可以忽略） 1、首先要明确的是transition、transform、animation这三个都是css属性，而translate是2D转换的一种方法是transform的一个属性值 2、transform是2D、
2017-11-22 14:11:14
3266
原创 transition实现焦点图切换
transition实现焦点图切换仅包括焦点图自动切换，不包括点击切换（前一张，后一张，点击焦点切换）HTMLsrc填写第一张图片地址<div class="wrap" > <img src="img/1.jpg" alt="" id='bannerImg'></div>CSS#bannerImg { display: block; width: 730px; he
2017-09-27 17:25:38
660
原创 常用正则
匹配双字节字符（中文是双字节的字符）[^\x00-\xff]匹配中文[\u4E00-\u9FA5]|[\uFE30-\uFFA0]unicode的中文编码表：[\u4E00-\u9FA5]汉字﹐[\uFE30-\uFFA0]全角字符 双引号数据替换为单引号数据^&amp;amp;quot;(.*?)&amp;amp;quot;'$1'常用匹配符\W 元字符用于查找非单词字符。 （单词字符包括：...
2017-04-05 17:08:07
560
原创 Mac下Hexo+GitHub搭建个人博客
Mac下Hexo+GitHub搭建个人博客环境搭建Node和Git安装完成后，在终端下输入下面的命令：sudo npm install -g hexo初始化hexo在用户目录下创建名为hexo的文件夹mkdir hexo然后cd到此目录下cd hexo执行下面的命令：hexo init生成静态页面hexo generate开启本地服务器hexo server打开浏览器，输入网址http://127.
2017-03-28 14:43:15
722
原创 JS块级作用域与函数作用域–ES6 let
JS块级作用域与函数作用域–ES6 let今天在学习ES6时看到新增了块级作用域的概念，于是回顾一下ES5中的函数作用域加深印象ES5没有块级作用域ES5中没有块级作用域，只用函数作用域，来看下面一段代码for (i = 0; i < 1; i++) { var forVar = 'forVar';}console.log(forVar); //'forVar'在for循环中定义的变量f
2017-03-16 13:49:28
1200
转载 AngularJS控制器controller如何通信？
本文转自https://segmentfault.com/a/1190000000639592点击打开链接关于控制器如何通信的问题，是不少刚接触angulr的同学想知道的。总的来说，angular控制器通信的方式有三种：1，利用作用域继承的方式。即子控制器继承父控制器中的内容2，基于事件的方式。即$on,$emit,$boardcast这三种方式3，服务方式。写一个服务的单例然
2016-06-13 13:16:51
632
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人