- 博客(28)
- 收藏
- 关注
RSS订阅
原创 AngularJS 过滤器\自定义过滤器 $filter
【AngularJS】—— 内置过滤器 QyizosQyi***@163.com1、uppercase，lowercase 大小写转换{{ "lower cap string" | uppercase }} // => LOWER CAP STRING{{ "TANK is GOOD" | lowercase }} /
2017-09-19 14:06:00
499
原创 记一个报错 ResizeObserver loop limit exceeded
起因：项目中onError监听到了异常window.addEventListener('error', ()=>{}）window.addEventListener('error', ()=>{}）并发现了报错查询之后发现https://github.com/ant-design/ant-design/issues/23246antd忽略了该报错https://github.com/ant-design/ant-design/blob/a51439cbbabef454e352188
2021-05-18 17:53:42
9706
原创 ES7-10特性速览
ECMAScript版本新增特性ECMAScript2016(ES7)数据inclued, Math.powECMAScript2017(ES8)异步操作、Object String 能力进一步增强，让代码编写更加效率ECMAScript2018(ES9)遍历中的异步，异步归一操作等问题，提供了对象的拷贝和筛选功能，增强了正则ECMAScript2019(ES10)JSON问题修复，数组、字符串、对象、函数能力增强，BigIntES7Array.prot...
2021-05-17 20:12:36
180
原创 JS函数防抖和节流
在前端开发的过程中，我们经常会遇到连续触发的事件，比如resize、scroll、keydown 等等，有些时候，比如触发事件会有Ajax请求，耗时的运算，页面渲染等，我们不希望在事件持续触发的过程中那么频繁地去执行函数。一般来说，防抖和节流是比较好的解决方案。tips: 防抖和节流都是利用了闭包来保持对函数内变量的持续引用另外还需要注意的是 this 和 参数的传递防抖（debounce）防抖就是在事件触发n毫秒后执行函数，如果在这期间再次触发则重新计算函数执行事件，即：连续的触发中只有最后
2020-07-30 15:18:16
187
原创 前端-JS获取对象属性需先判空
前端开发，在接口约定基础上，必须对对用的对象做非空校验，来保证前端代码的健壮性参考：阮一峰《ES6入门》链判断运算符1. TypeScript 3.7 Optional Chaining const data = {product:{productId:12},order:null} const productId = data?.product?.productId //12 const orderId = data?.order?.orderId
2020-06-08 19:44:27
617
原创 面试题：在浏览器输入url后发生了什么
W3C对浏览器的实现标准如下图所示，回答了该问题重定向缓存DNS解析TCP连接HTTP请求HTTP响应渲染页面装载下面是详细介绍浏览器实现标准performance.timing属性介绍属性说明：是一个无符号long long 型的毫秒数 表示某个时间的unix时间戳PerformanceTiming.navigationStart：浏览器上下文上一个页面u...
2019-12-30 20:19:00
537
原创 JS实现排序算法
1. BubbleSort基本思想：依次比较相邻两个数，较大的数下沉，较小的数冒起来。优化： 设置flag 排好序后终止多余的循环平均时间复杂度：O(n2) let temp let flag var arr = [20, 17, 13, 28, 14, 23, 15, 42] for (let i = 0; i < arr.length; i++) {...
2019-05-27 18:47:18
149
原创 《React-Hooks 介绍》
文章目录什么是Hooks一眼看完Hooks`State Hook``Effect Hook`React v16.7-alpha 版本，推出了一个新的 API 叫做 React-Hooks，它的主要功能是让 function component 可以像 class component 那样，可以处理 state, life-cycle, effect, context 等特性。相比 clas...
2018-11-06 17:29:35
707
原创 javascript 原型 原型链 继承
每个函数对象都有一个prototype属性，但普通对象没有prototype属性，prototype下面有一个constructor，指向这个函数每个人对象有一个名为[[prototype]]的内部属性，指向所对应的构造函数的原型对象，原型链基于__proto__Object Function 互相继承对方，既是函数也是对象属性查找在访问对象的某个成员的时候会先在对象中找是...
2018-10-02 15:35:03
266
原创 JavaScript 运行机制 宏任务微任务
[转载自ssssyoki的博客](https://juejin.im/post/59e85eebf265da430d571f891.关于javascriptjavascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的，一切javascript多线程都是纸老虎...
2018-10-01 16:56:04
874
原创 Node.js知识整理
Node.js入门什么是node.js本质是JavaScript解释器 Node.js 就是运行在服务端的 JavaScriptV8内核为什么使用Node.js为了提供高性能的Web服务IO性能强大时间处理机制完善天然能够处理DOM社区活跃，日趋完善Node.js的优势处理大流量数据适合实时交互的应用完美支持对象数据库异步处理大量并发链接学习Node.js...
2018-09-20 21:25:53
411
原创 react 生命周期笔记
Component initial1. constructor() 会在装配之前调用，构造函数是初始化状态的合适位置 可以基于属性来初始化状态，这样有效的分离属性并根据初始属性设置状态constructor(props) { super(props); this.state = { color: props.initialColor };}2. comp...
2018-09-14 12:01:53
202
原创 Linux 基本命令入门
ls (列出目录)-a ：全部的文件，连同隐藏档( 开头为 . 的文件) 一起列出来-d ：仅列出目录本身，而不是列出目录内的文件数据-l ：长数据串列出，包含文件的属性与权限等等数据cd (切换目录). 表示当期目录.. 表示上一级目录mkdir 创建目录pwd (显示目前所在的目录)Print Working Directory mkdi...
2018-07-27 23:22:40
165
原创 同源策略及跨站 学习笔记
同源策略1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页”同源”。所谓”同源”指的是”三个相同”。协议相同域名相同端口相同 “同源政策”是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了 浏览器同时还规定，提交表单不受同源政策的限制。...
2018-07-25 23:01:04
194
原创 JavaScript 经典笔试面试题
1. 变量提升 + function() { alert(1); alert(a); var a = function() { console.log(1); } function a() { consol...
2018-07-25 17:54:07
910
转载 Web前端性能优化——如何提高页面加载速度
转载前言： 在同样的网络环境下，两个同样能满足你的需求的网站，一个“Duang”的一下就加载出来了，一个纠结了半天才出来，你会选择哪个？研究表明：用户最满意的打开网页时间是2-5秒，如果等待超过10秒，99%的用户会关闭这个网页。也许这样讲，各位还不会有太多感触，接下来我列举一组数据：Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100
2017-10-11 13:30:04
769
原创 正则表达式总结
RegExp (regular expression) 正则表达式语法/pattern/flags 字面量new RegExp(pattern [, flags]) 构造函数RegExp(pattern [, flags]) 工厂符号flagsg 全局匹配 i 忽略大小写 m 匹配多行 将开始和结束符 (^ $) 视为在多行上工作，分别匹配每一行的
2017-10-08 12:26:11
267
转载 常见的web性能优化方法
原文地址戳此 前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ? 1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。 2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节
2017-10-08 12:01:07
237
原创 事件流 和 事件绑定
事件流定义：1.事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。2.事件就是用户或浏览器自身执行的某种动作。诸如click(点击)、load(加载)、mouseover(鼠标悬停)。3.事件处理程序响应某个事件的函数就叫事件处理程序(或事件侦听器)。下面所示例子注册事件的方式均使用DOM2级事件定义的事件处理程序进行注册，兼容性的问题不涉及。
2017-09-28 02:44:41
245
原创 CSS 用一个div写个旋转的齿轮（maybe船舵）
目标：用css写出如下图形思路分析一下，要写出这个图形并不难，我数数，总共有4个同心圆，和8个圆角矩形，需要8+4=12个DOM节点，似乎离一个还有很远如果用border写同心圆，可以减少2个圆如果加上before 和 after 伪类又可以减少2个节点如果巧用box-shadow ，一个div 足矣！
2017-09-26 21:55:06
2215
1
原创 移动端布局常见问题汇总
横竖屏限制问题<meta name = "x5-orientation" content="portrait | landscape" /> 只支持x5内核<meta name = "screen-orientation" content="portrait" /> 只支持UC浏览器全屏限制问题<meta name = "x5-fullscreen" content="true" />
2017-09-25 17:07:15
862
转载 reflow repaint 小心重绘与回流，优化浏览器性能
让我们从一些背景资料开始，当一个元素的外观的可见性visibility发生改变的时候，重绘(repaint)也随之发生，但是不影响布局。类似的例子包括：outline, visibility, or background color。根据Opera浏览器，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点元素的可见性。而回流更是性能的关键因为其变化涉及到部分页面（或是整个页面）的布局。一个元素的回流导致了其所有
2017-09-23 16:44:33
374
原创 CSS 3D炫酷的 旋转魔方
最近在复习HTML 和 CSS，把以前做的一些小例子拿出来分享一下，也加深自己的印象css 是通过 transform 来实现3D旋转的，看代码之前，先复习一下相关知识transform-origin 规定了转换的中心点 ，定义场景，也就是灭点，2D 转换可以设置 x轴和y轴，3D转换还能设置 z轴 语法：transform-origin: x-axis y-axis z-axis;tran
2017-09-23 13:07:16
1860
原创 弹性盒模型 flex 方法总结
弹性布局 2009年，W3C 提出了一种新的方案—-Flex 布局（弹性布局），可以简便、完整、响应式地实现各种页面布局。 传统盒子模型： 一般的布局我们都是用的盒子模型，通过浮动 定位来布局。 行元素、行内块元素不换行，块元素独占一行的。 利用浮动可以使块元素横排。 但是某些特殊的布局，它们很难实现。比如 垂直居中。设置弹性盒子之后，盒子内部的元素没有行元素与块
2017-09-23 07:52:02
419
原创 前端算法防虐题汇总
最近面试的时候遇到了数组全排的问题问题如下 假设有一个集合 [‘foo’, ‘bar’, ‘hello’, ‘world’]，求这个集合里单词组合起来的所有不同的结果，比如： foobarhelloworld barfoohelloworld …相信很多宝宝都遇到过类似的笔试题，天下程序员是一家，前端也要精于算法
2017-09-22 16:16:48
335
原创 单页 hash 跳转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单页hash跳转</title></head><body><script>window.addEventListener("DOMContentLoaded", function(){ //DOM树构建完成后执行下面的代码
2017-09-22 11:57:11
928
原创 HTML5 新增标签
HTML5 新增了许多语义化标签语义化好处:便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。作用 (转自freeyiyi1993)：1.为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；2.用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；3.有利于SEO：和搜索引擎建立良好沟通，有助
2017-09-20 19:21:22
1119
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人