- 博客(83)
- 收藏
- 关注
RSS订阅原创 iterm配置alias
步骤cd ~/.oh-my-zsh/plugins/gitlsREADME.md git.plugin.zshvim git.plugin.zsh打开git.plugin.zsh后就可以看到他的配置，然后在这里修改alias即可g=gitga='git add'gaa='git add --all'gapa='git add --patch'gb='git...
2019-11-05 20:14:00
433
原创 sequelize使用坑
报错：hasOne Cannot add foreign key constraint使用多表查询的时候，必须在建表后再使用Student.sync(); // 先同步表Student.hasMany(Info, {foreignKey: 'studentId'}); // 同步表以后就可以使用了Student.sync({force:true}); // 先同步表Student....
2019-10-07 17:28:46
1484
原创 mysql
mysql服务器,开启暂停命令mysql.server stopmysql.server startmysql.server restart如果出现登陆失败按下面方法解决：# 启动 mysql, 并设置为开机启动brew services start mysql# 关闭 mysqlbrew services stop mysql# 重启 mysqlbrew servic...
2019-09-07 16:15:32
143
原创 mac上xxx.app已损坏,打不开.你应该将它移到废纸篓
出现原因？软件包问题mac安全设置问题解决1 系统偏好设置---> 安全性与隐私-->任何来源如果没有：任何来源这一项2 sudo spctl --master-disable 上面执行以后就开启了：任何来源3 系统偏好设置---> 安全性与隐私-->任何来源...
2019-09-07 15:00:13
259
原创 git clone 'remote: HTTP Basic: Access denied
gitlab添加ssh以后，git clone项目url报错：git clone 'remote: HTTP Basic: Access denied解决办法点击ssh后面第二个tag，复制url然后： git clone xxx
2019-09-04 16:25:01
182
原创 了解React.createElement
了解React.createElement组件通过React.createElement（type,props,children）为什么代码没有使用react相关方法，也要在文件顶部import reactimport React from "react";const App = () => ( <div className='test'>Hello Worl...
2019-09-02 22:21:35
618
原创 Es6
Es6常用includes'abc'.includes(a) //true['a','b'].includes(a) //true函数可以赋予初始值function log(x, y = 'World') { console.log(x, y);}log('Hello') // Hello World函数参数的单独作用域let x = 1;fun...
2019-08-22 17:11:34
95
原创 React--为什么需要绑定this
不绑定this的情况下,this指向丢失class Foo extends React.Component{ constructor( props ){ super( props ); } handleClick(event){ console.log(this); // 'this' is undefined } render(){...
2019-08-20 21:38:07
395
原创 React判断：函数组件还是类组件
React如何判断是函数组件还是类组件方法一： 通过instancOflass A {}class B extends A {}console.log(B.prototype instanceof A); // true而我们的类组件写法，是通过继承React.Component来，所以可以通过instanceOf来判断class Child extends React.Co...
2019-08-14 08:33:17
2203
原创 React优化--函数式组件
react优化connect利用的是pureComponent，注意props的比较是浅比较函数式组件了解函数式组件缺点：1 没有this2 没有生命周期3 没有state因为没有生命周期，无法使用shouldComponet进行优化一旦父组件setState，那么子组件也要重新渲染函数组件缺点const Child = (props) =>...
2019-08-13 15:04:30
1070
原创 ComponentWillMount不进行ajax请求原因
ComponentWillMount不进行ajax请求原因Fiber原因1、React16之后采用了Fiber架构，只有componentDidMount声明周期函数是确定被执行一次的，ComponentWillMount的生命周期钩子都有可能执行多次所以不加以在这些生命周期中做有副作用的操作，比如请求数据之类2、服务端渲染，ComponentWillMount会执行两次co...
2019-08-09 17:16:14
3935
2
原创 pureComponent
pureComponent通过对比props的改变，自动调用shouldComponent优点： 减少render优化性能缺点： props对比是浅比较，可能导致子组件该渲染的时候没有渲染shouldComponent的bugclass Father extends React.PureComponent{ handleClick = (list) =>...
2019-08-09 17:14:48
139
原创 虚拟列表无限下拉组件
import * as React from 'react';import { debounce } from '@src/until/until';export default class Scrool extends React.Component<any, any> { constructor(props: any) { super(props); ...
2019-08-08 23:19:18
538
原创 箭头函数
没有this无法new不能使用arguments不能使用yield不适合使用箭头函数的地方对象中const cat = { lives: 9, jumps: () => { this.lives--; }}动态thisvar button = document.getElementById('press');button.addEve...
2019-08-08 11:06:17
84
原创 sse
web workers sse websocketweb workers: 单独开一个线程，进行大量数据的处理sse（Server-sent Events）参考文章：https://mp.weixin.qq.com/s?__biz=MjM5MDI3MjA5MQ==&mid=2697266556&idx=1&sn=7115ba3d95e96192892...
2019-08-03 19:58:50
345
原创 css
padding 百分比相对于宽度positiontop： 50% 相对于高度left: 50% 相对于宽度的50%实现进度条 <div class="box4"><div/>.box4{ border: 1px solid red; background-image: linear-gradient(green,green); ...
2019-07-31 13:52:07
82
原创 new与apply
newfunction myNew(fn,args){ var obj = {} obj.__proto__ = fn.prototype //创建实例的时候传参 var res = fn.apply(obj,args) //当构造函数有return时，返回return值,没有则返回obj{} return res instanceof Objec...
2019-07-29 17:16:52
233
原创 sleep
const sleep = (time) => { return new Promise(resolve => setTimeout(resolve, time))}sleep(1000).then(() => { // xxx})
2019-07-29 16:49:42
156
原创 原生js实现ajax请求
XHRvfunction createXHR(){ if (typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined"){ if (typeof arguments.callee.activeXString !=...
2019-07-27 19:27:52
141
原创 深拷贝
真正实现深拷贝function deepClone(param){ if(!isObject(param)) return param; let cloneVal = isArray(param) ? [] : {} for(let key in param){ cloneVal[key] = isObject(param[key]) ? deepCl...
2019-07-27 11:20:56
89
原创 理解react的diff算法
关于React的diff算法React活着diff的核心目的，就是不管页面多大，DOM怎么变化，我都以最小(其实不是）的代价去更新DOM1 React并不是说比原生操作DOM更快，相反由于有diff反而会有性能损失diff性能损失为什么还要用？因为diff可以以最小的代价来更新DOM，如何最小代价更新了 ？内存中存有虚拟DOM即用对象来展示的DOM{ type:'...
2019-07-25 17:07:49
193
原创 前端100
Object mapconst data = {};const element = document.getElementsByClassName('App');data[element] = 'metadata';console.log(data['[object HTMLCollection]']) // "metadata"Object: 字符串-值Map: 值-值...
2019-07-25 09:51:43
91
原创 BFC
BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有：html 根元素float 浮动绝对定位overflow 不为 visiabledisplay 为表格布局或者弹性布局BFC 主要的作用是：清除浮动防止同一 BFC 容器中的相邻元素间的外边距重叠问题防止高度塌陷问题...
2019-07-25 09:46:52
85
原创 css
面试题记-CSS篇https://juejin.im/post/5cdb7bc26fb9a0321557044d盒模型box-sizing: box-border // width=padding + border + content box-sizing: box-border // width=content水平居中justify-content: cente...
2019-07-25 09:43:58
90
原创 前端工程化
webpack工程化提高构建速度webpack4缩小搜索extention范围，强制后缀dll减少大小分析资源图按需加载做了哪些优化debounc和throttle尽量采用受控组件redux-thunk和redux-saga选型问题?老大考虑到团队成员学习的曲线，最终选择thunk为了更方便团队人员使用，封装直接的thunk，和cobineReducer为什...
2019-07-24 16:18:17
100
原创 GET和POST区别
GET和post真正区别？1、首先明白get和post本质上是没有区别，只是HTTP规定和浏览器/服务器的现在，导致有些不同如：GET有请求长度限制（数据量太大对浏览器和服务器都是很大负担），post没有get、post都是HTTP协议中发送请求的发方法HTTP：基于TCP/IP关于数据如何在万维网中如何通信的,HTTP的底层是TCP/IP所以get、post都是TCP链接，二者能做...
2019-07-23 22:19:17
79
原创 React的key
多个子组件的更新说明key的重要性第一种无key情况：更新前：<div> <Test text={'one'}/> <Test text={'two'}/></div>更新后：<div> <Test text={'one'}/> <Test text={'two'}/> <...
2019-07-23 21:44:30
108
原创 js常用原生方法的实现
// myNewfunction myNew(fn,...args){ let obj = {} let res = fn.apply(obj,args) obj.__proto__ = fn.prototype return res instanceof Object ? res : obj}function myall(arr){ return...
2019-07-23 19:02:56
180
原创 继承方式
JS继承的方式构造函数方式五种function Sup(){ this.name = 'father'}function Sub(){ this.age = 13}构造函数绑定function Sub(){ Sup.call(this,arguments)//Parent中Children的实例.name = 'father'实现继承 this.age = 13...
2019-07-23 16:48:08
59
原创 使用css-module防止组件重名污染
typescritp中，配置css-module第一步：配置d.tsindex.d.tsdeclare module '*.less'因为要把less当作模块引入，而ts检查，外部模块必须申明第二步： 配置webpack.dev.config.js { test: /\.less$/, use: [ 'style-loader', ...
2019-07-22 22:02:45
630
原创 webpack配置全局变量less文件
配置全局less第一步：安装 style-resources-loadernpm i style-resources-loader第二步：配置webpack.config.dev.js{ test: /\.less$/, use: [ 'style-loader', { loader: 'css-loade...
2019-07-22 20:36:18
6849
原创 算法
排序#JS代码位置最好写在body标签闭合之前，这样浏览器会在加载脚本之前，解析和显示HTML，有利于提升页面的性能#快排var quickSort = function(arr){ //检查数组的元素个数，如果小于等于1，就返回 var len = arr.length; if(len <= 1){ return arr } ...
2019-07-22 16:34:28
57
原创 删除数组中出现次数最小的字符串
function deleteLess(str){ let obj = {} for(let idx in str){ if(obj[str[idx]]) obj[str[idx]]++ obj[str[idx]] = 1 } let keys = Object.keys(obj) let valuses = Object.v...
2019-07-21 22:42:45
214
原创 object.create()
// create只有原型对象上的属性function create(obj){ function fn(){} fn.prototype = obj.prototype return new fn()}// new产生的对象，即有构造函数的属性，也有prototype上的属性function mynew(fn){ let obj = {} fn...
2019-07-21 15:51:35
155
原创 after
let count = 0; // after(3,log)('hi')这种用法count = 0只能放在这里function after(times,callback){ //var log = after(3,log) //log(1) 这种用法，count = 0只能放在这里核下面都一样 let count = 0; return function(......
2019-07-21 11:15:28
302
原创 myThunk和combineReduner
actionconst action = { type:'name/@fetch', payload:data}myThunkconst effects = modelx.getEffects()const myThunk = (store) => (next) => (action) => { let typeArr = actio...
2019-07-16 20:45:47
77
原创 saga优点
saga使用后体验优点一，分离了action和effect，变得更纯粹感觉这不是他的核心重点，因为即使分离了，也没法复用action为异步请求，在saga中只不过是，将thunk的异步请求分离到了saga中然后再put（action)等价于thunk 中的dispatch真正优点takeLatest处理重复点击的问题，一定业务条件下不用写debouncetakeLatest，在...
2019-07-15 23:03:58
461
1
原创 关于回流
关于回流引起因素1 集合属性变化2 及时获得DOM元素的位置ffsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight减少回流的方法1 设置classNam...
2019-07-15 23:01:07
211
原创 redux-thunk对比saga优缺点
redux解决异步操作方法redux-thunk优点： 库小，代码就几行缺点：代码臃肿，reducer不再是纯粹函数，直接返回对象，违背了当初的设计原则redux-saga优点： 将异步与reducer区分开了，更加优雅，适合大量APi请求，而且每个请求之间存在复杂的以来关系缺点：1 学习曲线比较陡，理解async await2 而且库也比较大，即使发布的...
2019-07-15 22:59:52
2434
原创 RAM和ROM
RAM就是电脑的内存RAM:（用来运行程序）1 SRAM(静态存储，CPU读取非常快)2 DRAM（动态随机存储器，通常说的电脑内存指的就是dRAM)软件占用内存过大可用做cache的内存变少，响应的Io就受影响CPU从内存读取数据慢，就引入的cache，把预先要读的数据放入cache，这样读取的时候速度变快cache：分为L1 L2 L3L1: SR...
2019-07-15 22:44:59
157
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人