ruby_xc的博客

原创 理解event loop

Call stack(执行栈):Script start - 第一轮主线程==>await async2() ===> 第一轮让出线程Async2 end - 第一轮主线程==> setTimeout ==> 到宏任务队列promise - 第一轮主线程promise1 ==> 第一轮到微任务队列promise2 ==&gt...

原创 koa 413 Payload Too Large

修改koa引用的koa-body模块配置:const koaBody = require('koa-body');app.use(koaBody({ multipart: true, formLimit: "10mb", jsonLimit: "10mb", textLimit: "10mb", enableTypes: ['json', 'for...

原创 antd 在componentWillReceiveProps生命周期中调用setFieldsValue造成死循环

最近遇到一个情况因为表单数据需要通过接口获得, 所以子组件需要在componentWillReceiveProps中获取props并填充表单但是直接填充的话会造成死循环解决方法:...

原创 mongolass插入第二条数据时报错E11000 duplicate key error collection

第一次使用mongolass插入用户模型的第二条数据时就报错了:E11000 duplicate key error collection: test.users index: account_1 dup key: { : null }说是account_1重复了, 但是模型中并没有这个键, 这个键是我之前设置的, 后来已经删除了我清空数据后插入还是一样插入第二条就报错了后来删...

原创 关于react打包与koa设置session问题

这两天写到权限验证的问题, 第一次写koa, 关于session的问题, 在登录时已经设置过session了, 然后在其他controller里面读取session的时候一直为空, 原因是请求时设置如下:默认情况下，fetch不会从服务端发送或接收任何cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置credentials...

原创 react require图片路径问题

在require中引用本地图片时需要使用require(require里的值必须为字符串)本地测试时, 如后端返回图片路径为'../static/img/img1.jpg',使用props传入显示图片的组件在子组件中引入该路径(引入失败):此时看到控制台报错觉得很奇怪, 我在前端写死图片路径, 如下(图片均能正常引入):或者 把require放入表达...

原创 nodejs 使用Logger功能时TypeError: winston.Logger is not a constructor

由于使用的winston版本为3.2.1, 使用 winston.createLogger 代替 new (winston.Logger)即可改为  

原创 前端缓存

原创 遇到的一些兼容问题

一. 隐藏滚动条.scroll-box { overflow: auto; /*隐藏滚动条 - 兼容ie*/ -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-con...

转载 throttle含义, 应用场景和原理

函数节流(throttle)是指阻止一个函数在很短时间间隔内连续调用. 只有当上一次函数执行后达到规定的时间间隔, 才能进行下一次调用. 但要保证一个累计最小调用时间间隔(例如拖拽类的节流需要有连续效果) 函数节流用于onresize, onscroll等短时间内会多次触发的事件 函数节流的原理: 使用定时器做时间节流. 当触发一个事件时, 先用setTimeout让这个事件延迟一小段时间在执...

原创 IE事件处理和W3C事件处理的区别

 注意:W3C事件的 target 与 currentTarget 的区别？target 只会出现在事件流的目标阶段 currentTarget 可能出现在事件流的任何阶段 当事件流处在目标阶段时，二者的指向相同 当事件流处于捕获或冒泡阶段时：currentTarget 指向当前事件活动的对象(一般为父级)手写事件侦听器(浏览器兼容) // 手写事件侦听器...

原创 html5 input新类型在不同浏览器下的表现

html5新增了很多输入类型, 其中一个作用就是可以在不引入javascript的情况下限制用户输入的类型, 为input元素添加required属性表示该项为必填, 在表单提交的时候浏览器如果该项为空就会发出警告(如果为特殊类型的话没有required属性提交时也会发出警告)...

原创 concat和app.push两种连接数组的方法

function myConcat(a, b) { a.concat(b); // 1ms}function myPush(a, b) { a.push.apply(a, b); // 14ms}function test(fn, a, b) { var start = new Date().getTime();//起始时间 fn(a, b); var end = new ...

原创 linux后台运行node程序

1. npm install -g forever2. forever start index.js

原创 ssh上传本地文件到linux服务器

1、从服务器上下载文件scp root@39.107.80.119:/var/www/test.js 把192.168.0.101上的/var/www/test.js 的文件下载到/var/www/local_dir（本地目录）2、上传本地文件到服务器scp /var/www/test.js root@39.107.80.119:/var/www/  把本机/var/www/目录下的test.js...

原创 linux下mysql导入数据库文件

创建数据库：mysql> create database test;选择数据库：mysql> use test;设置数据库编码格式：mysql> set names utf8;导入数据库文件： mysql> source /home/username/test.sql;...

原创 linux升级node

sudo npm cache clean -fsudo npm install -g nsudo n stable

原创 ubuntu卸载和安装mysql

卸载mysql1. sudo apt purge mysql-*如果出现如下错误：E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)E: 无法锁定管理目录(/var/lib/dpkg/)，是否有其他进程正占用它？则执行命令：sudo rm /var/lib/apt/lists/locksudo rm /var/lib/dpkg/lock再重新执行步骤1...

原创 webpack打包去掉开发日志console.log和找到代码异常位置

在webpack.prod.config.js中修改为如下：new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_debugger: true, drop_console: true }, sourceMap: true...

原创 vue打包后jquery is not defined和静态资源路径找不到

1、jquery is not defined:解决：webpack.prod.conf.js:new webpack.DefinePlugin({ 'process.env': env, $ : 'jquery', jQuery : 'jquery' }),改为：new webpack.ProvidePlugin({ $: "jq...

原创 js 打字效果

html：<span id = "first-default" > This is <p id = "first-words" > </p></span>js：var types = ["abcd.", "efgh.", "ijkl."], words = document.getElementById("first-words"), stopType = false

转载 前端代码规范

通用规范tab键用两个空格代替 　　因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置（除非你 自己设定了tab键所占的位置长度）。 每个样式属性或者每句代码后加 “;” 方便压缩工具”断句”。 HTML规范HTML5 doctype为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这

原创 js 正则找出最长连续子串长度

function maxLenStr(str){ var len = 0, max_len = 0; var reg = new RegExp("(.)\\1{1,}","g"); var res = reg.exec(str); while(res != null){ len = res[0].length; if(max_len <

原创 HTTP状态码

1– 信息类100：继续，一般在发送post请求时，已发送了http header之后，服务器端将返回此信息，表示确认，之后发送具体参数2– 响应成功类200：ok，正常返回信息（响应成功）201：created，请求成功并且服务器创建了新的资源202：accepted，服务器已接受请求，但尚未处理3– 重定向类301：moved permanently，请求的网页已永久移动到新位置

转载 webSocket和http关系、WebSocket原理

一、WebSocket是HTML5中的协议，支持持久连接；而Http协议不支持持久连接。首先HTMl5指的是一系列新的API,或者说新规范，新技术。WebSocket是HTML5中新协议、新API.Http协议本身只有1.0和1.1，也就是所谓的Keep-alive，把多个Http请求合并为一个。二、WebSocket是什么样的协议，具体有什么优点。首先，相对于Http这种非持久的协议来说，WebS

转载 几种保持登录状态的方式

1. session机制保持回话存在的问题 - 高并发情况下，会占用服务器大量内存 - 分布式（一个业务分成几个子业务，部署在多个服务器）或者集群（一个业务部署在多个服务器）的时候，session不能共享。解决方案高并发的时候可以将session存储到redis，如果用户长时间没有访问，将session存储到redis，就减少了服务器的压力分布式或者集群的时候，先通过redis来判断用户

原创 深拷贝

深拷贝：把一个对象里面的东西一模一样地复制到另一个对象，并且这两个对象分别放在内存的不同地方对象//方法一function cloneObject(obj){ var o = obj.constructor === Array ? [] : {}; for(var i in obj){ if(obj.hasOwnProperty(i)){

原创 图片预览

<body><input type="file" name="file" onchange='show(this)'/><img id="img" src="" width="70" height="85"/><script type="text/javascript">function show(img){ var file = img.files[0]; if(windo

转载 网络学习

HTTP与HTTPS区别 HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。 默认HTTP的端口号为80，HTTPS的端口号为443。为什么HTTPS安全？因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全

转载 知识点汇总

什么是CSS Hack 一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。 IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack。例如： 1. 条件Hack<!--[if IE]><style>.test{color:red;}</style><![endif]-->属性Hack.test{color:#090\9; /

转载 基本排序算法

插入排序算法描述： 1. 从第一个元素开始，该元素可以认为已经被排序 2. 取出下一个元素，在已经排序的元素序列中从后向前扫描 3. 如果该元素（已排序）大于新元素，将该元素移到下一位置 4. 重复步骤 3，直到找到已排序的元素小于或者等于新元素的位置 5. 将新元素插入到该位置后 6. 重复步骤 2~5现有一组数组 arr = [5, 6, 3, 1, 8, 7, 2, 4

原创 前几天遇到的笔试题

1. 按顺序写出打印结果(function(){ console.log("1_script start"); Promise.resolve().then(function(){ console.log("2_promise1"); }).then(function(){ console.log("3_p

原创 javascript 小球碰撞

小球起始位置随机，颜色随机 在指定div中运动html：<div id="box"> <div id="ball"></div> </div>css：#ball{ width:80px; height:80px; background: skyblue; border-radius: 50

转载 深入理解js中的加载事件

load load事件：当页面完全加载后（包括所有图片、javascript文件、css文件等外部资源），就会触发window上的load事件window.onload = function(e) { e = e || event; var target = e.target || e.srcElement; console.log(target); }IE中输

原创 javascript版括号匹配

function check(str){ str = str.split(""); if(str[0] == ')' || str[0] == '}' || str[0] == ']') return false; else if(str.length %2 != 0) return false; else { var arr = [];

转载 Javascript模块化

http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

转载 转

哪些操作会造成内存泄露内存泄露是指任何对象在不再需要它之后仍然存在垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）列举

原创 常见兼容性问题

常见兼容性问题png24位的图片在IE6浏览器上出现背景 => 做成png8，也可以引用一段脚本处理浏览器默认的margin和padding不同 => 加一个全局的*{margin:0; padding:0; }来统一IE6双边距bug：块级元素float之后，又有横行的margin，所以在IE6显示的margin比设置的大#box{ float: left;

原创 Js实现快速排序

快速排序过程：1. 在数据集之中，找一个基准点2. 建立两个数组，分别存储左边和右边的数组3. 利用递归进行下次比较function quickSort(arr) { if(arr.length <= 1) { return arr; //如果只有一个数就直接返回 } var middle = Math.floor(arr.length/2); //

转载 前端性能优化

代码层面：避免使用css表达式，使用避免使用高级选择器和通配选择器缓存利用：缓存ajax，使用CDN，使用外部js和css文件以便缓存，添加expires头，服务端配置等Etag，减少DNS查找等请求数量：合并样式和脚本，shi使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载请求带宽：压缩文件，开启GZIP代码层面的优化用hash-table来优化查找少用全局变量用