前端高级
仗剑天涯,从摘要开始
这个作者很懒,什么都没留下…
展开
-
使用chrome开发者工具中的performance面板解决性能瓶颈
前面的话 使用Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动。本文将详细介绍如何使用performance面板解决性能瓶颈准备【匿名模式】 匿名模式可以保证Chrome在一个相对干净的环境下运行。比如安装了许多chrome插件,这些插件可能会影响我们分析性能表现 使用快捷键ctrl + shift + N即可代码匿名模式下的chrome新标签页【移动设备CPU】 移动设备的CPU一般比台式机和笔记本弱很多。分析页..原创 2020-07-19 11:27:33 · 1140 阅读 · 0 评论 -
网站PWA升级
渐进式网络应用 ( Progressive Web Apps ),即我们所熟知的 PWA,是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案。PWA 本质上是 Web App,借助一些新技术也具备了 Native App 的一些特性。本文将详细介绍针对现有网站的PWA升级效果演示【添加到桌面】【离线缓存】 由于手机录屏选择无法进行离线录制,改由模拟器模拟离线效果概述 PWA 的主要特点包括下面三点: 1、可靠 - 即...原创 2020-07-18 17:48:13 · 480 阅读 · 0 评论 -
pc网页唤起QQ、企业微信、skype、whatsApp等
<div class="test"> 企业微信: <a rel="nofollow" href="wxwork://message?uin=账号&source=100">touck me</a> </div><!-- 微信不可以: --> <div class="test"> 微信: <a rel="nofollow" href="weixin://dl/b...原创 2020-07-17 16:15:06 · 2635 阅读 · 3 评论 -
用 const 还是用 let?
ES6 里新增了两种声明变量的方式,let 和 const,加上原来的 var,一共就有三种方式来声明变量了。那到底该用哪个呢?关于“尽可能不用 var” 这一点,大家应该没有什么意见分歧(其实还是有少数人不这么想的),关于“是用 let 还是用 const”,社区里主要有两种不同的观点:1. 默认全用 let,只在符合一些写代码的人的主观判断条件的时候用 const,下面举个这样的“主观判断条件”的例子(实际代码中用到 const 的几率大概会是 0.1%):你能 100%确定该变量永远不会在其.原创 2020-06-15 11:40:43 · 1703 阅读 · 0 评论 -
JS的防抖与节流
在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件...原创 2020-04-26 01:30:45 · 72 阅读 · 0 评论 -
资源加载过程
无论是地址栏输入,还有代码里加载的,都会有一个URL,所以加载资源的第一步是 :URL解析——(提取出URL包含的信息,比如域名) DNS查询——(根据解析出的域名,到DNS服务器上查找该域名对应的IP) 请求资源——(带有所有的请求信息,到这个IP地址上去请求资源,然后再从服务器上把请求的资源下载下来) 浏览器解析——(浏览器拿到这些资源以后,根据不同的类型,做不同方式的解析)上边4...原创 2020-04-06 19:18:04 · 128 阅读 · 0 评论 -
了解JS单线程和任务队列!
一、单线程和任务队列单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等待。 如果排队是因为计算量过大,CPU忙不过来,倒也算了,但是很多时候CPU是闲着的,因为IO设备(输入输出设备)很慢(比如Ajax操作从网络读取数据),不得不等着结果出来,再往下执行! JavaScript语言的设计者意识到,这时主线程完全可以不管IO...原创 2020-04-06 19:18:09 · 149 阅读 · 0 评论 -
JS函数作用域提升
当你看到var a=2;时,可能会认为这是一个声明。但js实际上回将其看成两个声明:var a;和a=2;。第一个定义声明是在编译阶段进行的。第二个赋值声明会被留在原地等待执行阶段。? 1 2 3 a=2; var a; console.log(a);//2 ? 1 2 cons...原创 2020-04-06 19:18:13 · 341 阅读 · 0 评论 -
JS函数种类详解
JS函数种类详解1. 普通函数1.1 示例 1 2 3 function ShowName(name) { alert(name); } 1.2 Js中同名函数的覆盖在Js中函数是没有重载,定义相同函数名、不同参数签名的函数,后面的函数会覆盖前面的函数。调用时,只会调用后面的函数。 1 2...原创 2020-04-06 19:18:17 · 1162 阅读 · 0 评论 -
ES6之模版字符串
最近在项目中使用了ES6的模版字符串,在这里加以总结。 1.之前我们也可以使用JavaScript输出模版字符串,通常是下面这样的: $("#result").append( "He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is a...原创 2020-04-06 19:18:20 · 87 阅读 · 0 评论 -
使用mock.js生成前端测试数据
image.png概述:Mock.js是一个模拟数据生成器,可以让前端独立于后端进行开发。如果你正在开发一个前端页面,可是后台还没有完成供你调用的API,并且数据格式已经确定,那么你就可以使用Mock.js模拟相关的接口,生成假数据来查看页面的效果。Mock.js的功能,生成随机数据,拦截Ajax请求。如何mock数据?1. 安装Node.js,通过http-server开启本...原创 2020-04-04 18:33:30 · 528 阅读 · 0 评论 -
理解作用域链
先来看两个例子var x = 10;bar(); //10function foo(){ console.log(x);}function bar(){ var x = 30; foo();}解析 执行bar,相当于执行foo(),foo里面要输出x,我们首先要从foo自己的作用域下面去找 foo里边是没有声明x的,然后我们会到foo的...原创 2020-04-04 18:32:42 · 137 阅读 · 0 评论 -
js ~~ 或 + 把各类型转换成数字的两种方法
一、前言在使用 js 的时候经常会出现要把非Number类型转为Number,而又因为 js 奇奇怪怪的转换规则而导致一头雾水。在这篇文章里我总结一下使用 + 和 ~~ 两种方式尝试把各类型转换为数字。二、+ 的妙用我曾做过一道题:var a = false;var b = 1++a ;问 b 为多少?当时我看到这两个加号就隐约觉得不妙。。。实际上这里就用到了 “ + ”...原创 2020-03-31 15:21:58 · 1101 阅读 · 3 评论 -
详解 ESLint 规则,规范你的代码
在很久之前就想通过工具来规范自己的代码风格,减少程序出错的概率,如果看过我的一个前端程序猿的Sublime Text3的自我修养,这篇博客的朋友,肯定知道在当时我使用SublimeLinter-jshint插件来规范风格,但是实际上一直懒癌发作也没去看它的文档,使用着它默认的规则。不过现在是时候切换到 ESLint 了!作为一个有理想有抱负的前端工程师,只是使用默认规则,而不是...原创 2020-03-29 14:38:54 · 316 阅读 · 0 评论 -
项目根目录下的.editorconfig文件
一、.editorconfig文件是什么?在项目里,大多时候都能看到.editorconfig文件,刚开始总是忽视掉它,认为它不太重要。但是,它的存在,必定有它的理由,于是,抽空来研究一下,它是什么,能做什么。官网是这么介绍EditorConfig的,“EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。EditorConfig项目由用于定义编码样式的...原创 2020-03-29 13:38:53 · 379 阅读 · 0 评论 -
Nginx服务器的Websockets配置方法
这篇文章主要介绍了简介Nginx服务器的Websockets配置方法,是使用Nginx服务器的网管的必备知识XD~需要的朋友可以参考下Nginx 1.3.13 已经发布了,该版本支持 Connection: upgrade 和 Upgrade 头,这就意味着支持WebSocket代理了.很多人都在等这个新特性以至于 “Nginx 支持 websockets 吗?” 成为了 freenod...原创 2020-03-20 17:57:04 · 531 阅读 · 0 评论 -
Promise.resolve()与new Promise(r => r(v))
Promise.resolve方法的参数分成四种情况。参数是一个 Promise 实例如果参数是 Promise 实例,那么Promise.resolve将不做任何修改、原封不动地返回这个实例。这是一个特殊的情况会和另一种new Promise(r => r(v))产生不一样的效果,最后说明参数是一个thenable对象thenable对象指的是具有then方法的对象,比如下...原创 2020-03-13 12:15:54 · 5210 阅读 · 0 评论 -
promise是什么?
promise是什么?1、主要用于异步计算2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果3、可以在对象之间传递和操作promise,帮助我们处理队列为什么会有promise?为了避免界面冻结(任务) 同步:假设你去了一家饭店,找个位置,叫来服务员,这个时候服务员对你说,对不起我是“同步”服务员,我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了,你只是想要...原创 2020-03-13 12:13:30 · 112 阅读 · 0 评论 -
apiDoc - 超简单的文档生成器
大家所熟知的API文档有swagger等, 今天给大家推荐一个写注释就能生成文档的工具, 真的很简单!http://apidocjs.com/快速开始第一步, 老规矩~装环境~npm install apidoc -g第二步, 新建一个项目文件结构src: 打算放注释文档的文件, 先只建一个文件(file1.js, 不用纠结这些注释含义, 后面会详解)代码如下...原创 2020-03-11 23:36:03 · 267 阅读 · 0 评论 -
apiDoc 使用指南
安装安装node.js 安装apiDocnpm install apidoc -g配置在你的项目根目录下新建apidoc.json文件,该文件描述了项目对外提供接口的概要信息如名称、版本、描述、文档打开时浏览器显示标题和接口缺省访问地址。apidoc.json{ "name": "ServiceEbikeAPIs", "version": "3.1.0", "...原创 2020-03-11 23:31:07 · 264 阅读 · 1 评论 -
Promise详解与实现(Promise/A+规范)
1.什么是Promise?Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一2.对于几种常见异步编程方案回调函数 事件监听 发布/订阅 Promise对象这里就拿回调函数说说1.对于回调函数 我们用Jquery的ajax获取数据时 都是以回调函数方式获取的数据$.get(url, (data) =&g...原创 2020-03-08 11:59:44 · 509 阅读 · 0 评论 -
ES6对象的扩展
属性的简洁表示法ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于const baz = {foo: foo};上面代码中,变量foo直接写在大括号里面。这时,属性名就是变量名, 属性值就是变量值。下面是另一个例子...原创 2020-03-06 15:13:51 · 141 阅读 · 0 评论 -
async 函数的含义和用法
本文是《深入掌握 ECMAScript 6 异步编程》系列文章的最后一篇。Generator函数的含义与用法 Thunk函数的含义与用法 co函数库的含义与用法 async函数的含义与用法一、终极解决异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题。从最早的回调函数,到 Promise 对象,再到 Generator ...原创 2020-03-06 14:19:27 · 140 阅读 · 0 评论 -
ES6解构赋值
前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段。在ES6中添加了可以简化这种任务的新特性:解构。解构是一种打破数据结构,将其拆分为更小部分的过程。本文将详细介绍ES6解构赋值引入 在ES5中,开发者们为了从对象和数组中获取特定数据并赋值给变量,编写了许多看起来同质化的代码let options = { repeat: true, ...原创 2020-03-04 11:50:01 · 135 阅读 · 0 评论 -
深入浅出Object.defineProperty()
讲解大致会根据下图展开本文部分参考了书籍《你不知道的javascript》上卷对象的定义与赋值经常使用的定义与赋值方法obj.prop =value或者obj['prop']=valueObject.defineProperty()语法说明Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性...原创 2020-03-02 14:02:16 · 79 阅读 · 0 评论 -
vscode 前端插件推荐
常用插件Auto Close Tag自动添加HTML / XML关闭标签(必备)Auto Rename Tag自动重命名配对的HTML / XML标签(必备)Beautify格式化javascript,JSON,CSS,Sass,和HTMLBootstrap 4 & Font awesome snippets包含Bootstrap 4&Font aw...原创 2020-02-26 13:47:54 · 753 阅读 · 0 评论 -
mouseover和mouseenter两个事件的区别
mouseover(鼠标覆盖)mouseenter(鼠标进入)二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内...原创 2020-02-21 22:42:36 · 446 阅读 · 0 评论 -
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别JavaScriptEvent 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。一、测试代码如下:[html]view plaincopy<!DOCTYPEHTML><htmllang="zh-cn"><head>&...原创 2020-02-17 15:20:13 · 233 阅读 · 0 评论 -
JS正则表达式总结
第一部分 基础知识一、正则申明方式1、构造函数方式var reg = new RegExp('\d', 'gi');● 通过 new 构造一个正则表达式对象,其中第一个参数 '\d' 是正则内容,第二个参数 'gi' 是修饰符。两个参数皆为字符串类型● 修饰符的作用是对匹配过程进行限定● 修饰符有三种:i, g, m,可以同时出现,没有顺序(即 gi 与 ig 一...原创 2020-02-17 14:33:19 · 640 阅读 · 0 评论 -
js获取当前屏幕宽度方法
js中获取当前屏幕宽度方法如下:网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document....原创 2020-02-16 22:10:02 · 1443 阅读 · 0 评论 -
JS正则表达式详解
文章目录常用的正则字符 RegExp类型 正则表达式定义方式 以字面量的形式来定义正则表达式 使用RegExp构造函数 正则表达式方法 RegExp对象的exec()方法 test()方法 search()方法 match方法 replace方法 常用实例 常见问题 1.正则表达式中 ?= 和 ?: 的区别到底在哪里? 正则表达式非常有用,查找、...原创 2020-02-11 16:22:14 · 360 阅读 · 0 评论 -
【js】event(事件对象)详解
1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象. 事件通常与函数结合使用,函数不会在事件发生前被执行! 使用场景即:v...原创 2020-02-10 22:06:41 · 384 阅读 · 0 评论 -
javascript事件系统的发展史
一个完整的事件系统,通常存在以下三个角色:事件对象,用于储存事件的状态。 事件源对象,当前事件在操作的对象,如元素节点,文档对象,window对象,XMLHttpRequest对象等。 事件监听器,当一个事件源生成一个事件对象时,它会调用相应的回调函数进行操作。在IE中,事件对象恒为全局属性window.event的分身。在w3c没有把其DOM 模型引入网页时,netscape与微软已经...原创 2020-02-10 22:06:08 · 204 阅读 · 0 评论 -
jQuery的datatables插件禁用某一列
中文网配置http://datatables.club/reference/option/columns.orderable开启/禁用这列是否排序最低支持版本:DataTables 1.10复制本页地址描述(Description)使用这个参数可以控制用户是否能够操作该列排序。对于有些生成的列你并不想让用户对其排序,比如索引列,或者操作列(删除,编辑按钮)。注意,这...原创 2020-02-07 01:07:32 · 251 阅读 · 0 评论 -
CSS3 filter的使用(改变模糊度 亮度 透明等)
讲到对图片的处理,我们经常想到的就是Photoshop等类的图像处理工具,其实css也可以很强大,作为一个前端开发我们也常常要做一些特效,比如根据不同的状态显示不同状态的颜色,或者hover的时候等等。 上面这些效果css一样能做到 CSS :filter CSS滤镜(filter)属提供的图形特效,像模糊,锐化或元素变色。过滤器通常被用于调整图片,背景和边界的渲染。...原创 2020-01-20 16:56:01 · 339 阅读 · 0 评论 -
使用vscode自动编译less
1.到应用商店安装easyless插件2.在setting.json中添加配置 "less.compile": { "compress": false, "sourceMap": false, "out": "${workspaceRoot}\\css\\", // 这里是代表编译后生成的css文件所放的位置 ...原创 2019-12-28 15:32:45 · 1190 阅读 · 0 评论 -
$.ajax()方法详解
1.url:要求为String类型的参数,(默认为当前页地址)发送请求的地址。2.type:要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。3.timeout:要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。...原创 2019-12-26 22:10:39 · 95 阅读 · 0 评论 -
浅谈移动端中的视口(viewport)
在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度。而移动端则较为复杂,它涉及到三个视口:布局视口(Layout Viewport)、视觉视口(Visual Viewport)和理想视口(Ideal Viewport)。本文主要讨论移动端...原创 2019-12-23 20:49:13 · 134 阅读 · 0 评论 -
移动web基础总结
1、什么叫做物理像素物理像素又称为———设备像素 (设备固定的属性)逻辑像素就是设备独立像素window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是:window.devicePixelRatio = 物理像素 / dips1、一个物理像素是显示器(手机屏幕)上最小的物理显...原创 2019-12-23 20:48:19 · 111 阅读 · 0 评论 -
ECharts快速上手
ECharts百度的ECharts目前在国内使用的比较多,所以总结了一些相关知识;官网地址,详细的可以参考:http://echarts.baidu.com/index.html特性介绍ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 ...原创 2019-12-22 15:06:56 · 329 阅读 · 0 评论