- 博客(31)
- 收藏
- 关注
RSS订阅原创 未来可期的HTTP/3
2015年HTTP/2标准发表后，大多数主流浏览器也于当年年底支持该标准。此后，凭借着多路复用、头部压缩、服务器推送等优势，HTTP/2得到了越来越多开发者的青睐，不知不觉的HTTP已经发展到了第三代。本文基于兴趣部落接入HTTP/3的实践，聊一聊HTTP/3的原理以及业务接入的方式。1.HTTP/3原理1.1HTTP历史在介绍HTTP/3之前，我们先简单看下HTTP的历史，了解下HTTP/3出现的背景。随着网络技术的发展，1999年设计的HTTP/1.1已经不能满足需求，所以Go.
2020-06-03 15:01:58
308
原创 javascript 类数组转数组的五种姿势
什么是类数组拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)varaDivs=document.querySelectorAll('div');//类数组functionhello(){console.log(arguments);//类数组console.log(arguments...
2020-04-09 14:03:52
277
原创 ES6中export和export default
export与export default均可用于导出常量、函数、文件、模块你可以在其它文件或模块中通过import+(常量|函数|文件|模块)名的方式，将其导入，以便能够对其进行使用在一个文件或模块中，export、import可以有多个，export default仅有一个通过export方式导出，在导入时要加{ }，export default则不需要其实很多时候export...
2020-04-09 11:06:29
239
原创 ES6中export和import详解
1.Export模块是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过export输出，// profile.jsexport var firstName = 'Michael';export var lastName = 'Jackson';export var year = 1958;或者用更好的方式：用大括号指定要输出的一组变量...
2020-04-09 10:44:43
523
原创 ES6-对象解构与数组解构
1.对象解构//原始获取对象属性时的写法，需要不停的声明变量来获取const Asher = { name: 'Asher Zhang', age: 5, family: { mother: 'North Zhang', father: 'Richard Zhang', brother: 'Howard Zhang'...
2020-04-09 10:20:52
503
原创 ES6 动态计算属性名
在ES5之前，如果属性名是个变量或者需要动态计算，则只能通过 对象.[变量名] 的方式去访问。<script type="text/javascript"> var p = { name : '李四', age : 20 } var attName = 'name'; console.log(p[attName]) ...
2020-04-08 18:24:01
188
原创 VS Code保存时候自动格式化问题
2018年7.14更新，现在项目都接入eslint，写代码越来越规范了，自带格式，几乎不会用到alt+shift+F格式化操作，希望大家能保持良好的编程风格。不知道从哪个版本起，VS code 保存会自动格式化。以前都是alt+shift+F格式化的，现在一保存就格式化，而且html什么全都乱了，项目也没法写，悲伤的我难道要转webstorm嘛？如何解决呢，操作如下：于是我找到设置，搜索关...
2020-04-08 16:45:23
1434
原创 简析 Node.js 特点与应用场景(让你更了解它)
前言如果你有一定的前端基础，比如HTML、CSS、JavaScript、jQuery；那么，Node.js能让你以最低的成本快速过渡成为一个全栈工程师(我称这个全栈为伪全栈，我认为的全栈也要精通数据库，不喜勿喷)，从而触及后端和移动端的开发。当然，Node.js也不是万能的、也不是说学了它就可以完全取代后端的其他开发语言，它有自己的使命和擅长的应用领域。除此之外现在非常火热的Vue....
2020-04-07 18:43:28
788
原创 理解js防抖和节流
在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。resize 对浏览器窗口调整大小函数防抖函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执...
2020-04-07 11:38:55
180
原创 BAT 用一行代码实现了网页黑白显示
在前端最少只用“一行”代码即可搞定。那么是如何实现的呢？我们先看看以下公司是如何实现的呢？1、百度2、今日头条3、阿里云4、腾讯从上面的实现方式可以看到，关键技术是利用了 CSS 的 filter 技术，也就是 CSS 的滤镜功能。我们看看 MDN 关于 filter 的描述：Thefilt...
2020-04-04 11:23:42
386
原创 nginx代理接口后上传文件大小限制
新装了一台服务器，用nginx做代理。突然发现上传超过1M大的客户端文件无法正常上传，于是修改了下nginx的配置。cd/export/servers/nginx/conf/nginx.conf,在这个配置文件里面的server段里面的location / {root html;index index.html index....
2020-04-03 18:29:22
3237
1
原创 前端也要知道的 Nginx 知识
随着前端变革，Nginx也成为了前端开发工程师必不可少应该具备的一项技能了，那nginx到底起的是吗作用？其实Nginx一直跟我们息息相关，它既可以作为 Web 服务器，也可以作为负载均衡服务器，具备高性能、高并发连接等1.负载均衡当一个应用单位时间内访问量激增，服务器的带宽及性能受到影响，影响大到自身承受能力时，服务器就会宕机奔溃，为了防止这种现象发生，以及实现更好的用户体验，...
2020-04-03 17:54:31
180
原创 理解JS中的浅拷贝和深拷贝
在前端开发过程中常常会听到对象的深拷贝与浅拷贝,对于初学者来说,可能是傻傻的分不清楚,本人将详细介绍javascript中对象的深拷贝与浅拷贝。浅拷贝：当拷贝完一个对象的时候，其中一个对象的数据发生了变化，另一个对象的数据也会发生变化，因为浅拷贝拷贝的是索引深拷贝：当拷贝完一个对象的时候，其中一个对象的数据发生了变化，另外一个对象的数据不会发生变化，因为深拷贝拷贝的是数值,拷贝后的引用数据...
2020-04-03 15:45:43
204
原创 JS中各种的隐式数据转换
隐式转换介绍· 1.2 隐式转换规则· 1.3 坑一：字符串连接符与算术运算符隐式转换规则混淆· 1.4 坑二：关系运算符：会把其他数据类型转换成number之后再比较关系· 1.5 坑三：复杂数据类型在隐式转换时会先转成String，然后再转成Number运算· 1.6-坑四：逻辑非隐式转换与关系运算符隐式转换搞混淆1.1-隐式转换介绍· 在js中，当运算符在运算时...
2020-04-03 14:53:39
1376
原创 js检测数据类型四种办法
typeof类型检测 作用：用于判断一个一个表达式，（对象或者原始值），返回一个字符串。var a;var b=null;var c=true;var d=1;var e='s';var f=[1,2];var g={name:'kk'};var h=function(){};var i=new h();console.log(typeof(a...
2020-04-02 14:44:13
1246
原创 js 数组sort, 多条件排序
Array.sort();sort()方法可以传入一个函数作为参数，然后依据该函数的逻辑，进行数组的排序。一般用法：（数组元素从小大进行排序） 1 2 vara = [9, 6, 5, 7, 11, 52, 15]; a.sort(function(returna-b;)); sort()方法，接收了一个函数作为参数时...
2020-04-01 22:55:58
3685
原创 理解ES6中的Map
一、MapMap 是 ES6 中新增的数据结构，Map 类似于对象，但普通对象的key必须是字符串或者数字，而 Map 的 key 可以是任何数据类型...1. Map构造器先看Map的简单用法// 字符串作为key，和JS对象类似varmap =newMap()// setmap.set('name','John')//两个参数，分为对应map中key,val...
2020-04-01 18:28:36
665
原创 js实现数组去重简洁代码(filter,Set,reduce,Map)
1、通过filter实现数组去重filter中传入的函数有三个参数。第一个item表示当前元素的值，第二个index表示当前元素的索引值，第三个self表示当前元素属于的数组对象。vararr = [2,4,3,3,4,2,3,254,234,4];functionunique(arr) {returnarr.filter((item, index, self) =&...
2020-04-01 18:19:53
895
原创 理解ES6，新增数据结构Set的用法
ES6 提供了新的数据结构 Set。特性似于数组，但它的一大特性就是所有元素都是唯一的，没有重复。我们可以利用这一唯一特性进行数组的去重工作。单一数组的去重。let set6 = new Set([1, 2, 2, 3, 4, 3, 5])console.log('distinct 1:', set6)结果：distinct 1: Set { 1, 2, 3, 4...
2020-04-01 10:46:21
188
1
原创 理解Array.prototype.slice.call()方法详解
JavaScript中的Array.prototype.slice.call(arguments)能将有length属性的对象转换为数组(特别注意： 这个对象一定要有length属性). 但有一个例外，IE下的节点集合它不能转换(因为IE下的dom对象是以com对象的形式实现，js对象和com对象不能进行转换)首先，我们来看看JavaScript中的slice用法， 在JavaScript中A...
2020-03-31 21:21:57
6497
3
原创 面试官问：面试题之 JS 篇
1.闭包理解父函数将子函数作为返回值，再将子函数赋值给一个变量，所以子函数会存在于内存中，而子函数依赖于父函数存在，所以父函数也会存在于内存中，也就不会被垃圾回收机制回收。Js高级程序中解释为:有权访问另一个函数作用域中的变量的函数let val = 7function createAdder() {function addNumbers(a, b) {...
2020-03-31 18:22:57
438
原创 关于iview、element-ui重置表单并清除校验的方法
平时在使用iview或者vue重置表单是时，我会习惯使用this.$refs[formData].resetFields();但是直接这样写上去方法是不起作用的，内容必须要在每个form-item里加上prop属性，并且与你v-model的值相同才可以生效例如:iview代码段：<Modal v-model="showDialog" :title="modalT...
2020-03-31 18:22:10
543
原创 jsonp的原理与实现
概述 动态创建script标签，因为script标签是没有同源策略限制，可以跨域的jsonp是一种跨域通信的手段，它的原理其实很简单：首先是利用script标签的src属性来实现跨域。通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。由于使用script标签的src属性，因此只支持get方法2、实现流程1）、设定一个s...
2020-03-31 15:49:05
289
原创 终于明白了vue使用axios发送post请求时的坑及解决原理
前言：在做项目的时候正好同事碰到了这个问题，问为什么用axios在发送请求的时候没有成功，请求不到数据，反而是报错了，下图就是报错请求本尊vue里代码如下： this.$http.post('/getMatterList.do',{"matterIds":"1,2,3"}) .then((res)=>{ console.log(res); }...
2020-03-31 15:39:53
1907
原创 js获取对象长度和名称
1.对象的长度不能用.length获取，用js原生的Object.keys可以获取到var obj = {'name' : 'Tom' , 'sex' : 'male' , 'age' : '14'};var arr = Object.keys(obj);console.log(arr); // ['name','sex','age']console.log(arr.len...
2020-03-31 15:22:12
188
原创 理解js中==和===、Object.is()区别
简单来说： == 代表相同， ===代表严格相同, 为啥这么说呢，这么理解： 当进行双等号比较时候： 先检查两个操作数数据类型，如果相同， 则进行===比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而===比较时， 如果类型不同，直接就是false.操作数1 == 操作数2，操作数1 === 操作数2比较过程： 双等号==： （1）...
2020-03-31 09:01:30
164
原创 JavaScript深入系列之浮点数精度
前言0.1+0.2是否等于0.3作为一道经典的面试题，已经广外熟知，说起原因，大家能回答出这是浮点数精度问题导致，也能辩证的看待这并非是ECMAScript这门语言的问题，今天就是具体看一下背后的原因。数字类型ECMAScript中的Number类型使用IEEE754标准来表示整数和浮点数值。所谓IEEE754标准，全称IEEE二进制浮点数算术标准，这个标准定义了表示浮点数的格式等内容...
2020-03-30 19:42:59
289
原创 前端同学经常忽视的一个 JavaScript 面试题
题目functionFoo() {getName=function() { alert(1); };returnthis;}Foo.getName=function() { alert(2);};Foo.prototype.getName=function() { alert(3);};vargetName=f...
2020-03-30 15:29:25
184
原创 css3中translate、transform和translation，以及动画animation
example:元素整体居中：.box{ position:absolute; top:50%; left:50%; width:50px; height:50px; transform:translate(-50%,-50%); background:gray;}1.translate:移动，是transfor...
2020-03-27 17:07:24
461
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人