- 博客(199)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Jest + Enzyme React 组件测试实践
≈最近把组件测试接入到日常开发，提高了项目代码健壮性，可维护性。本人也从0到1收获了组件测试的经验。本文总结一下最近两周 组件测试 相关的研究，包括：Jest + Enzyme 的基本介绍Jest + Enzyme 的实践Jest 原理浅析Jest 生态 & 未来文章目录为什么选择Jest & Enzyme？1. Jest2. EnzymeJest + Enzym...
2019-05-10 20:34:57
1334
原创 vue template compiler模版解析模块源码解析
文章目录前言vue模版语法定义语法插值指令vue template compiler模版解析器现状定义结构parserHTML解释器optimizercodegen参考文献前言尤雨溪在vue官方文档里对于vue这样定义：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。vue.js拥有自身定义的一套模版语法。相信大家一直对于vue的模版解析模块充满...
2019-01-05 12:04:24
8877
原创 postcss插件开发：全局添加namespace
文章目录postcss开发postcss插件单元测试结语好久不见～话不多说postcss一款css处理的平台，官方文档提供非常全面的api，可以对css的定义，修饰，语句进行定制。常见很多postcss基础的插件，在官方git仓库中都有提到：https://github.com/postcss/postcss开发postcss插件我这边有一个需求，是希望可以全局添加一个namesp...
2018-12-16 13:33:30
4729
原创 【随笔】【工作一年】个人技术随笔
目录我离职了面试关于面试官格局关于非常偏框架细节的问题关于前端面试简单算法题游戏开发 vs 前端开发展望很难找到相同想法的人我心目中的老大我的小目标我离职了犹豫了很久，9月11日，我提出了离职。期间天天晚上哭，哭了一个星期。9月19日，我正式从wy离职。走的时候，偷偷看到敏神哭了，想不到敏神也会哭呀。舍不得敏神，权威，乒乓，骥总，棕熊，包哥，还有曾经的同桌俊总，blabla一大票人，...
2018-09-30 14:27:49
680
2
原创 移动端页面适配方案及原理
最近要接一个移动端的需求。类似歌曲排行榜的H5页。本人未雨绸缪，学习一波移动端适配方案。0. 移动端 vs PC端区别1. 页面的三个视窗和缩放1.1 layout viewport和visual viewport:1.2 ideal viewport:1.3 页面的缩放2. 移动端适配2.1 使用meta标签控制viewport0. ...
2018-09-05 21:26:00
14015
1
原创 从一个warning入手----熟悉React生命周期
之前刚刚接触React的时候，会犯的一个错误。 Warning: setState(…): Cannot update during an existing state transition (such as within render or another component’s constructor). Render methods should be a pure function...
2018-08-19 01:26:26
1708
原创 小丸子学习HTTP2
多路复用一个TCP连接开销有多大http1.1 pipeling的服务端队首阻塞问题同一个源的资源共用同一个TCP连接头部压缩服务器推送权重二进制分帧多路复用在同一个tcp连接上，有多个stream，由各个stream发送和接收http请求，各个steam相互独立，互不阻塞。一个TCP连接开销有多大我们知道计算机网络五层协议。网络层的IP协...
2018-08-13 21:58:19
508
原创 webpack4生猛升级
今天把项目升级了webpack4.0。超级值得的一次升级！不敢相信自己的眼睛啊。dev模式下打包一共用了2s了解一下。（webpack3我dll+happypack齐上阵都要10多s啊）打包速度比之前提升了6，7倍呀。配置区别1. splitChunks替代CommonsChunkPlugin// 旧new webpack.optimize.CommonsCh...
2018-08-09 23:40:32
1475
原创 webpack3终极配置及其优化（react）
本文主要研究webpack3版本的react项目配置。webpack的原理webpack几大概念webpack执行流程webpack如何解析文件与文件之间的联系？为什么要使用loader？为什么要使用plugin？webpack的基础搭建基本配置Scope Hoistingwebpack针对react-route的按需加载环境配置loadersscss...
2018-08-08 23:58:51
2377
7
原创 当你思考选择什么方案的时候
我最近在维护一个非常重要而且非常老的一套代码。比较没有兴致，既接触不到什么前沿的技术，老的代码还那么晦涩难懂，加起需求还要小心翼翼，有点不想上心。今天早上，老大突然说：你把你昨天日报里写的你碰到那个问题，今天过来跟我讲一下，你是怎么想的。惊！老大要跟我讨论我的问题了。然后我屁颠屁颠的过去。把我遇到的问题说了。老大竟然一边就听懂了，然后很耐心地跟我讲了他的思路，不得不说，茅塞...
2018-04-17 16:26:10
329
原创 原型链和继承
1. 原型链2. __proto__ vs prototype2.1 __proto__字面量构造法构造函数构造法Object.create构造法隐式原型2.2 prototype显式原型2.3 prototype和__proto__关系2.4 constructor2.5 画个图吧3. 继承3.1 构造函数继承3.2 原型链继承3.3 组合式继承...
2018-04-17 15:12:08
385
原创 webpack学习--tree-shaking剔除无用代码
tree-shaking，了解一下？ 1. 例子在webpack，在pro模式下，UglifyJSPlugin插件可以为我们适当的压缩代码。具体是怎么压缩的呢？配置UglifyJSPlugin。const path = require('path');+ const UglifyJSPlugin = require('uglifyjs-webpack-plugin');...
2018-03-26 15:31:40
5000
原创 vue实现一个队列自动机
最近比较忙，有时间完善思路。关键代码export function promiseQueue(executors: any[]) { return new Promise((resolve, reject) => { if (!Array.isArray(executors)) { executors = Array.from(executors); } if (...
2018-03-06 10:11:31
1252
原创 vue实现一个组件容器
最近比较忙，有时间完善思路。设计思路设计图代码设计思路依赖render方法，设计无template的虚拟component。设计图代码https://github.com/zhangyugege/abstract-form-demo...
2018-02-27 21:13:14
3681
1
原创 页面卡顿性能优化的两个解决方案
过年回来胖了6斤。目录场景chrome 性能测试解决方案重绘和重排一眨眼，入职半年了。感觉自己进步挺大的，但是都又杂又碎，并不是很清楚自己哪些地方进步了，感觉最近积极的总结挺有帮助的。工作中遇到了两次数据量很大的时候，页面卡顿的现象。当时很吓人。不过最终都得到了完美解决。下面总结一波。场景场景1 页面展...
2018-02-24 16:10:28
34630
原创 ES6 promise时序，本质，常见错误
ES6 promise时序，本质，常见错误过年好！最近在工作中使用promise遇到了这样的问题：promise的时序问题。目录ES6 promise时序本质常见错误目录一个关于时序的问题事件循环ES6 promise的本质区别getA回调getCgetA封装成promise方法then的时候getCmixES6 promise的常见错误...
2018-02-11 11:06:04
1088
1
原创 小丸子函数式编程初探
小丸子函数式编程初探小丸子函数式编程初探question函数式编程命令式编程 vs 函数式编程高阶函数实用小栗子1. question前一个项目，顺利完成的时候感觉特别棒。但是后面需求方迭代加需求的时候，甚至代码重构的时候，感觉特别乏力。当时说不出来问题在哪，但是感觉自己写的代码维护成本很高，加需求的时候需要四处去改。考虑一下，大概有以下几...
2018-01-31 19:05:07
375
原创 Vue 异步事件更新 & 异步Dom更新解决方案
Vue 异步事更新件 & 异步Dom更新解决方案Vue 异步事更新件 异步Dom更新解决方案QuestionAction1 正确姿势2 一个试验3 还有困惑1. Question最近遇到一个有点别扭的需求。进入一个子页面，需要四个接口拿到四份数据【a,b,c,d】。 其中a,b正巧父级拿到过，在父级页面上用v-if指令保证a和b存在，
2018-01-30 15:37:43
12312
1
原创 小丸子看vue如何响应式
小丸子看vue如何响应式几个月跟着大佬们投入在vue项目里，对vue算是从0开始啦。相比较之前使用的regular和angular的响应式的脏检查机制，发现vue的响应式是命中式的。使用angular或regular的时候，发现更新一个值，框架会检查许多无关的值，从中挑出哪个数据脏了，可以更新视图等等。而以vue的computed为例，发现vue只会检查改变的数据的对应的方法，其他无关的数
2018-01-25 20:16:50
723
原创 git err : fatal: remote origin already exists.
解决办法： 这一句可以忽略git remote rm origin 这一句不可忽略git remote add origion git@....
2016-10-18 11:42:52
397
原创 小丸子总结排序算法
一. 排序算法（内部排序）1.直接插入排序（1）思路：每次将一个待排序的记录，根据关键字的大小，插入到排好序的序列里。（2）代码：function sort(arr){ for(var i = 1; i < arr.length; i++ ){ for(var j = 0; j < i; j++ ){ if(arr[j] > a
2016-09-09 16:34:47
461
转载 如何计算时间复杂度
一、概念时间复杂度是总运算次数表达式中受n的变化影响最大的那一项(不含系数)比如：一般总运算次数表达式类似于这样：a*2^n+b*n^3+c*n^2+d*n*lg(n)+e*n+fa ！ =0时，时间复杂度就是O(2^n);a=0,bO(n^3);a,b=0,cO(n^2)依此类推eg:(1) for(i=1;i //循环了n*n次，当然是O(n^2) f
2016-09-06 22:04:18
389
原创 小丸子总结数据库基本知识
复习一波~一. 数据库基本原理1.数据模型数据结构数据操作数据的约束条件2.概念模型现实世界到机器世界的恶一个中间层次。数据库设计人员用来设计数据库的有力工具。数据库设计可以使用：E-R图。 3.层次模型4.数据库系统的三级模式结构外模式（用户模式） -> 视图( view )模式 （逻辑模式） -> 数据库中全体数据的逻辑结
2016-09-06 12:13:25
591
1
原创 git多账户管理
1.切换账户git config --global user.name "B"git config --global user.email "D"2.检测账户连接情况$ ssh -T [email protected].注册密钥#新建SSH key：$ cd ~/.ssh # 切换到C:\Users\Administrator\.sshssh-keygen -t rsa -C "cherr
2016-09-01 14:28:35
934
原创 git merge分支
想要把remode-name分支合并到master分支git fetch remote-namegit checkout mastergit merge branch-name
2016-08-29 15:29:16
628
原创 github删除远程分支&重命名远程分支
1.删除远程分支git push origin –delete 分支名2.重命名远程分支git branch -m <old_name> <new_name> 改名字git checkout -b <new_branch_name> (<from_branch_name>) 本地建立 branch 並立即 checkout 切換過去git push origin –delete <old_nam
2016-08-25 17:05:22
7483
原创 js倒计时时间不准 && css选择器优先级 && promise详解
js倒计时时间不准假设，js倒计时的前台事件不准解决办法：aja获取服务器时间一次，减掉客户端时间，获得客户端的时间误差。 之后的时间显示，即显示：浏览器的时间和误差的和。css选择器优先级http://www.cnblogs.com/iloveyoucc/archive/2012/09/06/2673003.html深入理解promisehttp://www.
2016-08-24 17:33:35
1143
转载 如何防止重复发送 Ajax 请求？
作者：长天之云 链接：http://www.zhihu.com/question/19805411/answer/15465427 来源：知乎 著作权归作者所有，转载请联系作者获得授权。不推荐用外部变量锁定或修改按钮状态的方式，因为那样比较难： 要考虑并理解 success, complete, error, timeout 这些事件的区别，并注册正确的事件，一旦失误，功能将不再可用； 不
2016-08-22 21:30:56
564
原创 闭包的性能优势？
性能问题： 在作用域链和闭包中的性能问题主要表现在数据读写的速度上。 由于作用域链的原因，我们访问全局作用域的数据（这里为什么不说变量呢？因为不仅包括变量，还有函数，对象等其他内容）时，效率是最低的，而访问局部数据时的效率是最高的。 所以一个非常经典的解决数据访问性能问题的方案出现了：将需要访问的数据尽量的以局部数据的方式缓存起来。这样当标识符解析程序在作用域链中寻找数
2016-08-21 16:49:28
1429
原创 【css进阶】从css的position开始
1.css的几种position我们知道css的position有以下几种值 - absolute - relative - fixed - staticabsolute:绝对定位。可以使用left，right，top，bottom定位。对象脱离常规流，偏移参照离自身最近的已定位祖先元素，如果没有定位的父元素，则一直回溯到html。偏移之后，会产生塌陷，并且在文档流中不占有位置。re
2016-08-20 21:39:32
685
1
原创 javascript面试题（9）
1.下面代码的输出值是？alert(1&&2);输出为2 && 如果第一个值为true，返回第二个值。如果第一个值为false，返回false。 || 如果第一个值为false，返回第二个值。如果第一个值为true，返回第一个值。2.正则表达式匹配，开头为11N, 12N或1NNN，后面是-7-8个数字的电话号码。var b = /^((11N)|(12N)|(1NNN))\d{7,8}$/;
2016-08-20 14:33:27
1755
原创 如何提升单页应用的体验
想起公司里的domeos项目，angularjs单页应用。其实还有很多问题，可以优化。1.轮询 vs websocket数据推送举个例子：假设，项目中有一个用户A，他对项目有读写权限。这会儿，当A用户正在修改项目的一些配置时（只有写权限的人才能修改项目配置），master用户把A用户的权限修改成了只读权限。A用户对项目的修改就失败了，弹出模态框“对不起，您没有权限。”。然后页面切换到权限管理页
2016-08-19 16:11:52
325
原创 模块打包剔除冗余代码
我们知道，前端页面越来越多，导致我们的js，css文件越来越多。在请求的时候，就会占有很多带宽。前端er们就发明了打包工具。把所有的js文件打包成一个文件，这样减少了http的请求数。但是，协作开发模式。在我们打包之后，有很多模块导出的代码，我们可能根本没有用到过，这些冗余代码也跟着一起打包，这不是赤裸裸的浪费带宽嘛。还有我们使用的框架，里面所有的模块我们都用到了？不见得吧。现在，又出现了tree-
2016-08-19 13:15:17
694
原创 nginx负载均衡理解（2）
nginx是免费的服务器代理。它有以下特点：反向代理低资源消耗1.低资源消耗nginx使用的是事件驱动架构，消耗资源较小，但是可以承受较大的请求负荷。高性能 小的内存占用2.反向代理反向代理，可以理解为，在web服务器和外部网络之间增加的一个高速web缓冲服务器，以减轻服务器压力。过程：外部网络向nginx服务器发送请求，nginx接收用户请求，向特定的源服务器上获取内容。把资源返回给用户，并
2016-08-19 12:44:06
337
原创 js能力评级编程题
上次面试js的string的方法居然没想起来。怒刷几道小题。1.查找数组元素位置题目描述找出元素 item 在给定数组 arr 中的位置 输出描述: 如果数组中存在 item，则返回元素在数组中的位置，否则返回 -1输入例子: indexOf([ 1, 2, 3, 4 ], 3)输出例子: 2function indexOf(arr, item) { return arr.inde
2016-08-14 20:41:36
742
原创 各种各样的水平垂直居中
1.垂直居中1.高度固定 单行文本思路：使用line-height = height。html：<!--父元素高度确定,单行文本--><div class="wrap"> <div class="num">你好呀</div></div>css： *{ margin: 0; padding: 0; } .wr
2016-08-14 16:30:32
435
原创 深入理解javascript的4种对象创建方式
创建一个对象，都有这么多种方式。有没有感觉，javascript真的很灵活呢。1.工厂模式function person(name,age,tel){ var obj = {}; obj.name = name; obj.age = age; obj.tel = tel; return obj;}var person1 = person('章鱼小丸子','
2016-08-14 12:34:27
397
原创 深入理解javascript的5种继承方式
1.构造函数式 function Super(){ this.colors = ['c','a','b']; this.print = function(){ console.log(this.colors); } } function Sub(){ Super.call(this);
2016-08-14 11:34:30
3435
原创 小丸子baidu前端校招一面总结
前两天在官网上投递了简历。就收到了面试通知。说我被内推成功了。很意外。周三打来电话，本周必须面试。我就说周四吧。（周五可能要外出）然后，我就准备了一个晚上，面试要问的东西，我都一个一个复习了一遍。我很讨厌临时抱佛脚的，所以平时每天都会抽时间一点点学习。各种各样前端的东西。然后复习起来也不会太吃力。这次面试，比我实习生面试的时候，进步很大，很多很多都答上来了。当然，那些都是基础，就应该答上来才对。但是
2016-08-12 21:17:02
527
原创 小丸子总结node.js的一些问题
原谅我的node.js功底还很弱。1.什么是错误优先的回调函数？设计一个回调函数的时候，第一个参数是err，用于优先解决错误，后面再传递参数。fs.readFile(filePath, function(err, data) { if (err) { //handle the error } // use the data object});2.如何避免
2016-08-10 19:06:03
981
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人