![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
ruby_xc
好好学习,天天向上
展开
-
理解event loop
Call stack(执行栈):Script start - 第一轮主线程==>await async2() ===> 第一轮让出线程Async2 end - 第一轮主线程==> setTimeout ==> 到宏任务队列promise - 第一轮主线程promise1 ==> 第一轮到微任务队列promise2 ==>...原创 2021-10-09 15:12:01 · 124 阅读 · 0 评论 -
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 <原创 2017-10-25 21:13:08 · 1104 阅读 · 0 评论 -
前端代码规范
通用规范tab键用两个空格代替 因为在不同系统的编辑工具对tab解析不一样,windows下的tab键是占四个空格的位置,而在linux下会变成占八个空格的位置(除非你 自己设定了tab键所占的位置长度)。 每个样式属性或者每句代码后加 “;” 方便压缩工具”断句”。 HTML规范HTML5 doctype为每个 HTML 页面的第一行添加标准模式(standard mode)的声明,这转载 2017-10-26 10:38:11 · 414 阅读 · 0 评论 -
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原创 2017-12-24 16:58:54 · 443 阅读 · 0 评论 -
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...原创 2018-02-10 17:48:14 · 3014 阅读 · 0 评论 -
webpack打包去掉开发日志console.log和找到代码异常位置
在webpack.prod.config.js中修改为如下:new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_debugger: true, drop_console: true }, sourceMap: true...原创 2018-02-10 17:57:06 · 7934 阅读 · 0 评论 -
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 ...原创 2018-05-11 10:26:55 · 313 阅读 · 0 评论 -
html5 input新类型在不同浏览器下的表现
html5新增了很多输入类型, 其中一个作用就是可以在不引入javascript的情况下限制用户输入的类型, 为input元素添加required属性表示该项为必填, 在表单提交的时候浏览器如果该项为空就会发出警告(如果为特殊类型的话没有required属性提交时也会发出警告)...原创 2018-05-12 19:38:45 · 844 阅读 · 0 评论 -
IE事件处理和W3C事件处理的区别
注意:W3C事件的 target 与 currentTarget 的区别?target 只会出现在事件流的目标阶段 currentTarget 可能出现在事件流的任何阶段 当事件流处在目标阶段时,二者的指向相同 当事件流处于捕获或冒泡阶段时:currentTarget 指向当前事件活动的对象(一般为父级)手写事件侦听器(浏览器兼容) // 手写事件侦听器...原创 2018-07-17 14:29:12 · 1084 阅读 · 0 评论 -
throttle含义, 应用场景和原理
函数节流(throttle)是指阻止一个函数在很短时间间隔内连续调用. 只有当上一次函数执行后达到规定的时间间隔, 才能进行下一次调用. 但要保证一个累计最小调用时间间隔(例如拖拽类的节流需要有连续效果) 函数节流用于onresize, onscroll等短时间内会多次触发的事件 函数节流的原理: 使用定时器做时间节流. 当触发一个事件时, 先用setTimeout让这个事件延迟一小段时间在执...转载 2018-07-17 14:44:20 · 3732 阅读 · 0 评论 -
遇到的一些兼容问题
一. 隐藏滚动条.scroll-box { overflow: auto; /*隐藏滚动条 - 兼容ie*/ -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-con...原创 2018-10-15 13:19:45 · 439 阅读 · 0 评论 -
前端缓存
原创 2018-10-16 15:11:43 · 140 阅读 · 0 评论 -
react require图片路径问题
在require中引用本地图片时需要使用require(require里的值必须为字符串)本地测试时, 如后端返回图片路径为'../static/img/img1.jpg',使用props传入显示图片的组件在子组件中引入该路径(引入失败):此时看到控制台报错觉得很奇怪, 我在前端写死图片路径, 如下(图片均能正常引入):或者 把require放入表达...原创 2019-02-18 10:55:40 · 8434 阅读 · 2 评论 -
nodejs 使用Logger功能时TypeError: winston.Logger is not a constructor
由于使用的winston版本为3.2.1, 使用 winston.createLogger 代替 new (winston.Logger)即可改为原创 2019-02-14 14:42:02 · 2041 阅读 · 1 评论 -
关于react打包与koa设置session问题
这两天写到权限验证的问题, 第一次写koa, 关于session的问题, 在登录时已经设置过session了, 然后在其他controller里面读取session的时候一直为空, 原因是请求时设置如下:默认情况下,fetch不会从服务端发送或接收任何cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置credentials...原创 2019-03-07 17:41:56 · 491 阅读 · 0 评论 -
antd 在componentWillReceiveProps生命周期中调用setFieldsValue造成死循环
最近遇到一个情况因为表单数据需要通过接口获得, 所以子组件需要在componentWillReceiveProps中获取props并填充表单但是直接填充的话会造成死循环解决方法:...原创 2019-04-19 16:31:08 · 1919 阅读 · 0 评论 -
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...原创 2019-05-08 12:05:09 · 1944 阅读 · 0 评论 -
知识点汇总
什么是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; /转载 2017-10-04 09:51:47 · 352 阅读 · 0 评论 -
深入理解js中的加载事件
load load事件:当页面完全加载后(包括所有图片、javascript文件、css文件等外部资源),就会触发window上的load事件window.onload = function(e) { e = e || event; var target = e.target || e.srcElement; console.log(target); }IE中输转载 2017-09-26 12:20:50 · 1928 阅读 · 0 评论 -
深拷贝
深拷贝:把一个对象里面的东西一模一样地复制到另一个对象,并且这两个对象分别放在内存的不同地方对象//方法一function cloneObject(obj){ var o = obj.constructor === Array ? [] : {}; for(var i in obj){ if(obj.hasOwnProperty(i)){原创 2017-10-11 12:30:57 · 317 阅读 · 0 评论 -
cookie、localStorage和session的小练习
1、简单的登录界面(login.php)2、在处理页处理表单数据(保存用户名和密码),server.php判断是不是post请求,如果不是就提示重新登录,返回登录界面,确定是post之后,再进行判断信息是不是输入正确,如果正确就setcookie封装setCookies函数使用web Storage的setItem方法 通过session保存到服务器 3、回到login.php,获取保存好的值转载 2017-03-25 20:42:31 · 515 阅读 · 0 评论 -
学习Promise
新的ES6中引入了Promise,目的是让回调更为优雅。层层嵌套的回调会让javascript失去美感和可读性,同时javascript也推荐采用链式的方式去书写函数调用。于是Promise就应运而生。Promise即承诺的意思,new一个Promise就是新建一个承诺。在新建一个承诺的时候需要做两件事情: 1. 指定承诺所需完成的事 2. 设置承诺是否实现的标准 下面我们来定义一个承诺,并让转载 2017-07-23 09:41:26 · 460 阅读 · 0 评论 -
this
**this 是在运行式进行绑定的,并不是在编写是绑定 this的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式 this实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用**默认绑定var a = 'aaa';var obj = { a: 'bbb'}var fun = { a: 'ddd', foo: function(){原创 2017-09-23 19:20:08 · 204 阅读 · 0 评论 -
杂七杂八什么都有(一)
一个页面从输入url到页面加载显示完成,这个过程发生了什么?1. 浏览器根据请求的url交给DNS域名解析,找到真实的IP,向服务器发起请求2. 服务器交给后台处理完后返回数据,浏览器接受文件(html, css, js, img等)3. 浏览器对加载到的资源进行语法解析,建立相应的内部数据结构(如html的dom)4. 载入解析到资源文件,渲染页面,完成行内元素、块级元素行内元素:a b原创 2017-09-23 22:03:25 · 203 阅读 · 0 评论 -
Js实现快速排序
快速排序过程:1. 在数据集之中,找一个基准点2. 建立两个数组,分别存储左边和右边的数组3. 利用递归进行下次比较function quickSort(arr) { if(arr.length <= 1) { return arr; //如果只有一个数就直接返回 } var middle = Math.floor(arr.length/2); //原创 2017-09-24 09:36:26 · 216 阅读 · 0 评论 -
常见兼容性问题
常见兼容性问题png24位的图片在IE6浏览器上出现背景 => 做成png8,也可以引用一段脚本处理浏览器默认的margin和padding不同 => 加一个全局的*{margin:0; padding:0; }来统一IE6双边距bug:块级元素float之后,又有横行的margin,所以在IE6显示的margin比设置的大#box{ float: left;原创 2017-09-24 12:12:06 · 299 阅读 · 0 评论 -
杂七杂八什么都有(二)
闭包的特性如果某个函数被它的父函数之外的一个变量引用,就形成了一个闭包1. 函数嵌套函数2. 函数内部可以引用外部的参数和变量3. 参数和变量不会被垃圾回收机制回收(由于IE的js对象和DOM对象使用不同的垃圾回收机制,因此闭包在IE中无法销毁驻留在内存中的变量,其他浏览器可以使用mydata = null来销毁变量)缺点:常驻内存,会增大内存的使用量,使用不当会很容易造成内存泄露目的:设计私原创 2017-09-23 22:26:46 · 173 阅读 · 0 评论 -
前端性能优化
代码层面:避免使用css表达式,使用避免使用高级选择器和通配选择器缓存利用:缓存ajax,使用CDN,使用外部js和css文件以便缓存,添加expires头,服务端配置等Etag,减少DNS查找等请求数量:合并样式和脚本,shi使用css图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载请求带宽:压缩文件,开启GZIP代码层面的优化用hash-table来优化查找少用全局变量用转载 2017-09-24 09:13:21 · 294 阅读 · 0 评论 -
Javascript模块化
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html转载 2017-09-24 22:46:37 · 122 阅读 · 0 评论 -
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 = [];原创 2017-09-26 10:33:51 · 440 阅读 · 0 评论 -
javascript 容易忘记的知识点
var arr = [1,2,3,4,5] //reduce(function(total,currentItem,(currentIndex),(arr)){/*code..*/},initialValue) var sum = arr.reduce(function(sum,item,index,arr){ return sum+item },4);原创 2017-09-19 08:53:10 · 347 阅读 · 0 评论 -
javascript 小球碰撞
小球起始位置随机,颜色随机 在指定div中运动html:<div id="box"> <div id="ball"></div> </div>css:#ball{ width:80px; height:80px; background: skyblue; border-radius: 50原创 2017-09-27 16:29:55 · 504 阅读 · 0 评论 -
前几天遇到的笔试题
1. 按顺序写出打印结果(function(){ console.log("1_script start"); Promise.resolve().then(function(){ console.log("2_promise1"); }).then(function(){ console.log("3_p原创 2017-09-27 18:31:10 · 220 阅读 · 0 评论 -
基本排序算法
插入排序算法描述: 1. 从第一个元素开始,该元素可以认为已经被排序 2. 取出下一个元素,在已经排序的元素序列中从后向前扫描 3. 如果该元素(已排序)大于新元素,将该元素移到下一位置 4. 重复步骤 3,直到找到已排序的元素小于或者等于新元素的位置 5. 将新元素插入到该位置后 6. 重复步骤 2~5现有一组数组 arr = [5, 6, 3, 1, 8, 7, 2, 4转载 2017-10-03 10:58:34 · 236 阅读 · 0 评论 -
跨域问题
什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。所谓同源是指,域名,协议,端口均相同,例如:http://www.123.com/index.html 调用 http://www.123.com/server.PHP (非跨域)http://www.123.com/index.html 调用 http://www.转载 2017-03-26 15:26:38 · 578 阅读 · 0 评论 -
图片预览
<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原创 2017-10-11 11:34:14 · 181 阅读 · 0 评论 -
Cookie、session和localStorage、以及sessionStorage之间的区别
一、Cookie、session和localStorage的区别 cookie的内容主要包括:名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。 会话cookie一般不存储在硬盘而是保存在内存里,当然转载 2017-03-25 19:34:22 · 17609 阅读 · 1 评论