- 博客(95)
- 收藏
- 关注
RSS订阅
原创 CSS的padding实现百分比布局
在我以前的文章中，我讲过CSS中的一系列的百分比单位，其中margin和padding是相对于容器的宽度的，最近看到了一个文章，讲的是用padding来实现图片等比例布局。大概的需求如下，我们需要将图片按照我们希望的比列进行显示，图片的宽度是按照百分比响应式。你可能觉得这没啥，因为img标签在没有设定固定的高度时，其高度会按照图片本身的比列进行计算。但是我们的图片本身可能不是按照我们希望的比列。这...
2019-03-14 15:05:26
1319
原创 行内元素设置padding和margin
先说结论1、margin在水平方向有效，垂直方向无效。2、padding在水平方向有效，垂直方向可以有视觉效果，但是不影响布局3、高度height和宽度width的设置是无效的，高度可用line-height设置举个列子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...
2019-02-18 10:58:42
1895
原创 reduce方法详解
reduce方法详解reduce(callback,init); 这个init为初始项，如果没有默认为数组的第一项，这个项是可选的 reduce方法会遍历数组，使用回调函数遍历处理数组中的每一项，回调函数每次会返回一个处理后的值，作为下一次回调的第一个参数。function(prev,cur,index,arr);prev:上一次回调的处理结果cur:本次遍历的数组项...
2018-08-01 09:23:24
2039
原创 JS中数组方法详解
JS中数组的方法有很多，但是自己一直没有抽时间进行整理分类，故单独写一篇博文，对目前我所掌握的JS中数组相关的方法进行整理，夯实一下自己的基础。我将数组相关的方法分为两类1.方法会改变原数组相应的方法有：shift、unshift、pop、push、reverse、sort、splice shift：将第一个元素删除并且返回删除元素，空即为undefinedunshi...
2018-07-30 09:20:34
479
原创 VSCode如何调试TS + node项目
在VsCode的项目.vscode目录下新建文件launch.json内容如下：{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch",
2022-04-08 17:01:05
1502
原创 ESLINT错误提示 no-unused-vars
ESLINT错误提示 no-unused-vars使用ESLINT时遇到如下错误的提示查阅资料得知，是需要使用插件 https://github.com/typescript-eslint/typescript-eslint/issues/941全局按照 eslint-plugin-reactnpm install eslint-plugin-react -g修改eslint的配置项...
2019-12-17 17:54:04
7743
1
原创 Functional-Light-JS ---- Recursion
递归递归的定义递归的好处互递归递归的弊端尾调用递归的优化递归的定义 递归就是一个函数在其内部调用它自己，同时有一个条件来终止这个递归的循环调用。递归的好处 递归可以使我们的代码更加的接近声明式的代码，可读性会更加好一些。 The most commonly cited reason that recursion fits the spirit of FP is be...
2019-09-05 13:36:22
304
原创 JS中创建任意长度的填充数组
JS中创建任意长度的填充数组常见的创建数组的方式就是使用Array(length);这种方式来创建数组，但这样创建的数组会存在两个问题，一是所生成的数组实际上是一个稀疏数组。而由此所带来的直接问题是，你无法使用map或者forEach方法来对其进行遍历。举个列子var a = new Array(5);//[,,,,]a = a.map((item, index)=>index)...
2019-07-17 11:34:30
4712
原创 rgba转16进制
今天工作中遇到如下需求，需要将rgba的颜色值，转换为16进制的颜色值将rgb转换为16进制我们都知道，但是将rgba装换为16进制知道的人可能就很少了，经过我查阅资料发现，国内几乎没有对于这个转换的正确解释，下面我将讲解如何进行装换。其实很简单，将rgba就是转换为8位的16进制即可。前6位为正常的rgb的转换，最后一位是透明度的转换。其中使用00 — 代表0%， 使用ff – 代表100...
2019-06-04 15:48:56
14640
原创 setMonth的小坑
今天在发现一个我之前写的测试用例出现了错误，最后发现是对Date的setMonth方法使用不够理解，下面进行一下分享。大家都知道setMoth就是设置Date对象的月份信息的，MDN的示列代码如下var event = new Date('August 19, 1975 23:15:30');event.setMonth(3);console.log(event.getMonth()...
2019-05-31 15:04:59
637
原创 React + Jest + Enzyme
遇到的小坑1.在引入测试的组件时，有时候我们的组件是以一个高阶的组件的形式导出的，而在我们测试的时候，我们只需要测试这个组件本身，不需要引入这个组件的封装体进行测试。比如我们的组件A.js如下```class A extends Component{ //....}export default HOC(A);```此时我们需要在对A.js进行如下更改```export ...
2019-05-28 15:39:52
634
原创 chrome安装插件提示image decode failed
今天在安装chrome插件时，发现插件列表中的所有图片均无法加载，点击安装时，页面提示image decode failed,在网上搜索了一个方法，成功解决，感觉很神奇，解决方法如下：删除C:\Windows\System32\drivers\etc下的hosts和hosts.dz文件或者剪切到别处，问题解决...
2019-05-16 09:47:42
26346
11
原创 eslint提示'React' is defined but never used
使用eslint --init进行基础的设置后，在React项目中发现如下报错提示'React' is defined but never used在.eslintrc.js文件中配置如下rule即可"react/jsx-uses-react": 2
2019-04-22 16:15:41
7661
原创 absolute 与overflow:hidden常见bug
我们使用第三方的组件时，第三方组件有时会依据我们引入组件的DOM的位置进行定位，很常见的CSS写法就是使用position：relative和position:absolute进行搭配使用，有时在父容器的外层添加了overflow:hidden之后，就会出现一些莫名奇妙的bug.下面举个例子你可以访问如下页面：https://alizwell.github.io/front-end/CSS/ab...
2019-03-26 21:37:18
2371
原创 mysql中的union小坑
今天在使用union时，遇到一个小小的坑业务情景如下，需要从表中查询出对应数据同时，还需要将当前表的最大id给查询出来，使用的SQL如下SELECT id FROM chat_session WHERE `from` = $from_id AND `to` = $to_id AND workbench_id = $workbench_id AND type = $type...
2019-03-13 12:01:38
665
原创 mysql中数据查重以及重复数据删除
有时候 业务功能出现了问题，最后发现是数据有问题，此时我们需要进出现问题的数据查询出来，并根据查询的结果将重复数据进行处理。举一个列子，有如下数据idfromtotimeworkbench_id13455431564564563234554315646511563354334515646616513比如上表的数据中，我们认为f...
2019-03-13 11:51:46
974
原创 使用localStorage进行页面间通信
在h5中，新增了localStorage，对应localStorage的有一个storage事件，这个事件可以用来进行页面间进行通信。页面间通信的列子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>A</title&a
2019-03-11 17:18:13
1160
原创 TP下的异常捕获
在项目中使用了TP框架，想要进行一个SQL更新语句的异常捕获，使用了如下写法 try{ $res = User::table("chat_session")->insertGetId($arr); }catch(\Exception $e){ //书写为（Exception $e）将无效 die(json_encode(...
2019-03-11 15:40:47
648
原创 ES5的函数与ES6的箭头函数的区别
之前被人问过这样一个问题，ES5的函数与ES6中的箭头函数有哪些区别当时想着这么不是很简单么，ES6中的箭头函数是拥有this绑定的，且箭头函数的this绑定是尤其定义时的作用域决定的，且箭头函数的写法更精简。其实这么说也没有问题，但是太肤浅了。查看了阮一峰大神的es6网站，看到有如下描述（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。 由于箭头函数使得this...
2019-03-07 11:45:52
1479
原创 JS正则test的巨坑
今天和同事问了我一个正则的编写，需求很简单，就是要匹配一个字符串，字符串的最后一部分是一个括号内包含一个数字，如下123(2)写的正则如下：var b =/^[\d\D]*\([1-9]\)$/g;然后我在控制台进行测试，诡异的事情发生了同一个测试字符串，结果却不同，我有点惊讶，在网上百度了一下，才发现是正则表达式中的g引起的之后在MDN搜索到如下内容所以，使用test时，这个g...
2019-03-06 16:35:01
1637
原创 二叉树系列(1)-实现排序二叉树
排序二叉树就是在一棵普通的数的基础上，一个节点的左节点的值一定小于这个节点的值，右节点的值大于这个节点的值。每棵树都是由节点生成的，每个节点都有左右节点两个属性，用JS来实现如下：function Node(data){ this.data = data; this.left = null; this.right = null;}每棵树都是由根节点构成，且树本身需要一个插入的方法...
2019-02-22 14:22:59
498
原创 bind的实现
ES6中拥有bind，可以通过ES5中的apply来实现我们知道bind的用法如下funcA.bind(obj,args);返回的是一个函数 Function.prototype.bind = function(context){ let arg = [].slice.apply(arguments,1); let self = this; return function...
2019-02-22 12:12:14
157
原创 ES6中的Class不用new就报错的实现
昨天面试的时候，遇到了一个问题，ES6中的class不使用new就会报错，请问你如何用ES5的构造函数实现同样的效果。当时我是一脸懵逼的，面试结束后，自己一直在思考这个问题，仔细想了想new的整个过程function myNew(fn){ let O = Object.create(fn.prototype); let S = fn.apply(O); return typeof ...
2019-02-22 11:13:04
1229
1
原创 CSS未解之谜
今天再帮同事调试一个样式的问题时，我发现了一个很神奇的现象，而其中的原由我个人却不得而知，现记录如下，待日后破解。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &
2019-02-22 10:58:44
183
原创 arguments转换为数组
使用如下方法即可Array.prototype.slice.call(arguments);[].slice.call(arguments);
2019-02-21 17:47:33
253
转载 git回退单文件
git回退预热：进入要回退的文件目录，或者使用find -name 文件名得到文件的完整路径步骤一：查看要回退文件的历史记录git log --oneline .a.txt比方说，这是我们需要回退到merge trunk的状态其版本sha1为 120a893步骤二：使用reset命令，默认是 --softgit reset 120a893 a.txt使用 git stat...
2019-02-21 15:25:05
1046
原创 JS排序算法
这里简单的总结一下排序算法中的4种1、冒泡排序2、选择排序3、插入排序4、快速排序1 冒泡排序冒泡排序就是循环遍历，两两进行比较排大小function BubleSort(s){ for(let i = 0; i < s.length; i++){ for(let j = i; j < s.length; j++){ s[j] > s[j-1] &am...
2019-02-18 22:43:29
263
原创 JS继承--圣杯模式
今天看到一篇文章，讲到了JS中的继承，提及了一个新的概念，圣杯模式。于是查阅了一下资料，看到对于圣杯模式的描述如下：var inherit = ((Origin, Target)=>{ let F= function(){}; return (origin, target)=>{ F.prototype = Origin.prototype; Target.prototy...
2019-02-15 16:14:48
1465
原创 JS中的this绑定
JS中的this绑定一共有5种情况，下面一一进行介绍1、默认绑定默认绑定中的this指向undefined或者window,根据环境不同，指向不同。在strict模式下，指向undefined2、隐式绑定隐式绑定简单来说就是谁调用的绑定谁3、显示绑定使用apply、bind、call来进行强制的显示绑定，需要注意bind绑定返回的是一个函数，而apply和call是函数调用，而且ap...
2019-02-14 11:57:12
361
原创 JS实现lazyMan
今天看到一个有意思的题目，使用JS实现LazyMan具体效果如下：LazyMan('xx');// Hello xxLazyMan('xx').eat('dinner');//Hello xx// Eat dinner ~~LazyMan('xx').sleep(3000).eat('dinner');//Hello xx//Sleep 3000 ~~~// Eat dinn...
2019-01-23 12:05:41
511
原创 JS大数相加
记得之前看到过一个JS超大正整数相加的题目，今天想了下自己会怎么实现，于是便进行了尝试，代码如下：function bigAdd(a, b){ let lenA = a.length, lenB = b.length, curry = 0, res = []; let loopLen = Math.max(lenA, lenB ); for(let...
2019-01-07 18:42:41
1687
原创 git--ssh key无效
有时候我们明明在github上添加了ssh key，但是在push代码的时候还会要求我们输入用户名密码，这是为什么了？其中一种可能的原因是，你在克隆代码的时候，使用了https协议，而不是git协议。https协议要求你每次都需要输入用户名以及密码，自由git协议才可以使用ssh-key文件。查看自己使用的源地址是https还是git使用git remote -v命令看到https开头的...
2018-12-26 11:07:50
4365
转载 JS事件循环与宏任务-微任务
其实关于JS的事件循环，自己之前是有部分了解的，但是这个了解还不够详细和深刻。今天看到一个有趣的JS题目，由此引发了自己对于这一块知识的深入学习和梳理。题目如下： setTimeout(function(){ console.log(1); },0) new Promise(function(resolve) { console.log(2); resolv...
2018-12-24 17:35:51
568
1
原创 CSS3巧妙实现空心三角箭头
前几天在浏览一个网站时，看到了一个常见的会话框右边显示箭头界面。当时自己就想了想，如果自己来实现，应该就是我以前写的文章中的使用before和after伪元素创建两个三角形来相互重叠覆盖实现。抱着试试看的心态，看了下网站的实现，结果还是有些收获的，下面将我的收获写下来。实现效果如下简单描述下具体的实现原理，就是使用伪元素before以及CSS3中的transform实现的。<st...
2018-12-21 18:16:35
1492
原创 剑指offer--圆圈中最后剩下的数
每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此。HF作为牛客的资深元老,自然也准备了一些小游戏。其中,有个游戏是这样的:首先,让小朋友们围成一个大圈。然后,他随机指定一个数m,让编号为0的小朋友开始报数。每次喊到m-1的那个小朋友要出列唱首歌,然后可以在礼品箱中任意的挑选礼物,并且不再回到圈中,从他的下一个小朋友开始,继续0…m-1报数…这样下去…直到剩下最后一个小朋友...
2018-12-21 16:59:32
154
原创 数组扁平化处理
今天看到一篇文章，其中讲解了数组扁平化处理的多种方法，个人觉得还是有点意思，现详细讲解几种实现的方法。使用forEach function flatten1(arr){ let res = []; arr.forEach((val)=&gt;{ res.push( ...( Array.isArray(val) ? flatten1(val) : [val] )...
2018-12-21 16:50:19
510
原创 JS中的模块化
今天看YDKJS时，明白了一个以前一直疑惑的东西，那就是JS中的模块开发，之前也使用过require.s进行模块化的开发，但是一直不能明白其中具体的原理，看了YDKJS的讲解后，真的是豁然开朗，在此记录其中一个实例的代码，并进行解析。 var myModules = (function foo(){ var modules = {}; function get(name){ re...
2018-12-14 16:32:49
291
原创 babel es6转es5
首先需要安装依赖环境npm i --save-dev babel-cli babel-preset安装es5转换npm i --save-dev babel-preset-es2015安装polyfillnpm i --save-dev babel-polyfill安装运行时转换npm i --save-dev babel-plugin-transform-r...
2018-12-14 10:59:42
355
原创 npm i报错Unexpected token
描述：npm i报错Unexpected token < in JSON at position 0 while parsing near ’ <fr…’npm ERR! Unexpected token < in JSON at position 0 while parsing near ’ <fr…’npm ERR! A complete log of this...
2018-12-14 10:00:19
2428
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人