- 博客(62)
- 收藏
- 关注
RSS订阅原创 map去重
map去重 let map = new Map(); for (let item in arr) { let key=arr[item].name+arr[item].code+arr[item].extend if (!map.has(key)) { map.set(key, arr[item]); } else if(!!type && type=="yes"){ map.set(
2021-08-30 17:44:14
232
1
原创 css white-space| word-break属性详解
white-space属性 源码空格 源码换行 <br>换行 容器边界换行 normal 合并 忽略 换行 换行 nowrap 合并 忽略 换行 不换行 pre 保留 换行 换行 不换行 pre-wrap 保留 换行 换行 换行 pre-line 合并 换行 换行 换行 ...
2021-08-25 13:48:41
394
原创 JSON.stringify深拷贝的缺点
浅拷贝和深拷贝：针对对象深拷贝和浅拷贝只针对像Object和Array这样的复杂对象的，String,Number等简单类型不存在深拷贝。浅拷贝：因为浅拷贝只会将对象的各个属性进行依次复制，并不会进行递归复制。在JavaScript中，对于Object和Array这类引用类型值，当从一个变量向另一个变量复制引用类型值时，这个值的副本其实是一个指针，两个变量指向同一个堆对象，改变其中一个变量，另一个也会受到影响。所以浅拷贝会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址，当
2021-08-15 17:38:10
831
原创 js数组方法-改变原数组和不改变原数组的方法整理
js数组方法-改变原数组和不改变原数组的方法整理改变原数组： pop(): 删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不 改变数组，并返回 undefined 值。arrayObject.pop() push():push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组，arrayObject.push(newelement1,new
2021-05-24 16:24:40
995
原创 bit与byte&进制的总结
概述网上查到了一些大神的资料是这样写的：这就要从计算机的发展史来说了，在早期，有一种“一位计算机”，也就是每次只能处理1位二进制数的计算机。之后“四位机”“八位机” “十六位机”等等。数据处理能力逐步增强。在“八位机”兴盛期间，各项计算机的理论基本成型，确立了8位二进制数的主导地位。后来都以8位二进制数作为一个数据单元，称为一个字节。 而后期的高档计算机，则以处理位数称为“字”。例如：“十六位机”的一个“字”为16位二进制数；“32位机”的一个“字”为32位二进制数。这就是为什么原码使用8位数的原
2020-08-20 19:48:33
641
转载 探讨ES6的import export default 和CommonJS的require module.exports
es6与commonJs的用法 与一些注意项转载至
2020-08-18 11:27:04
116
原创 百度地图经纬度获取标点与城市编码
1.获取城市codetype接口<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/
2020-08-04 20:35:35
2473
原创 百度地图Api citycode的获取
官网地址获取json的url接口实例：接口功能介绍逆地理编码http://api.map.baidu.com/reverse_geocoding/v3/?ak=您的ak&output=json&coordtype=wgs84ll&location=31.225696563611,121.49884033194 //GET请求注意：当前为V3.0版本接口文档，V2.0及以前版本自2019.6.18起新用户无法使用。老用户仍可继续使用V2.0及以前版本请求实现逆地理编码
2020-08-04 16:45:25
1430
原创 class类的总结
/** construct方法 会在类中默认添加上的*/class Point{ constructor(){ this.name="xxx" } tostring(){ return "xxxxx" } }class B extends Point{}let point=new Pointlet b=new B// console.log(Point.prototype)//{constructor: ƒ, tostring: ƒ}// co
2020-07-17 10:05:41
137
原创 symbol的api总结
//symbol//1.字符串作为参数var s1=Symbol("foo")var s2=Symbol("bar")console.log(s1,"s1")//Symbol("foo")console.log(s2,"s2")//Symbol("bar")//2.对象作为参数var obj={ toString:function(){ return "abc" }}var s3=Symbol(obj)console.log(s3,"s3")//Symbol.
2020-07-17 10:03:47
359
原创 算法排序总结
//双重默认值// function fetUrl(url,{method="GET"}={}){// console.log(method,"---")// }// fetUrl("11111",{method:"post"})// function m1({x=0,y=0}={}){// return [x,y]// }// function m2({x,y}={x:0,y:0}){// ...
2020-07-17 09:59:34
110
原创 柯里化函数
//柯里化//第一种function curry(fn){ const g=(...allAges)=>allAges.length>=fn.length? fn(...allAges):(...arg)=>g(...allAges,...arg) return g}let foo=curry((x,y,z)=>{ return x+y+z})console.log(foo(1)(2)(3),"foo")//第二州function cu
2020-07-14 21:13:06
103
原创 js实现斐波那契数列 0 1 1 2 3 5 8 13 21 34 。。。
let arr=[0,1,1]function test(n){ if(n<3){ return arr[n] } if(arr[n]!==undefined){ return arr[n] } let data= test(n-1)+test(n-2 )//如果没有return data的话是娶不到值的 arr[n]=data return data} test(6)console.log(arr,"text"
2020-07-14 19:42:02
595
原创 防抖与截流总结
//防抖 是指在事件触发结束后延时一段时间再去执行代码，如果在延时期间再次触发该事件，则重新计算延时时间//第一个参数为事件触发后需要执行的方法，第二个参数为延时时间function debounce(method, delay) {function debounce(method, delay) { let timer = null; return function () { //this 指向调用的他的函数 arguments是调用它的一下属性参数
2020-07-14 17:43:41
2729
原创 CSS中的BFC详解
引言：这篇文章是我对BFC的理解及总结，带你揭开BFC的面纱。你将会知道BFC是什么，形成BFC的条件，BFC的相关特性，以及他的实际应用。一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件1、浮动元素，float 除 none 以外的值；2、定位元素，position（absolute，fixed）；3、display 为以下其中之一的值
2020-07-01 18:01:53
176
原创 重绘与重排的总结
一、浏览器渲染流程解析HTML，创建DOM树解析CSS，生成CSS规则树将DOM树与CSS规则树合并，构建渲染树(RenderingObject树)布局和绘制，重绘(repaint)和重排(reflow) (重排也称回流)1.下述情况会发生浏览器重排1.添加或者删除可见的DOM元素2.元素位置改变3.元素尺寸改变（包括：内外边距、边框厚度、宽度和高度等属性的改变）4.内容改变，例如：文本改变或者图片被另一个不同尺寸的图片替代5.页面渲染器初始化6,浏览器窗口尺寸改变’7.对可见元
2020-06-30 17:46:22
485
原创 HTTP常见状态码（404、400、500）等错误
一些常见的状态码为：200 - 服务器成功返回网页404 - 请求的网页不存在503 - 服务不可用==1xx（临时响应） ==表示临时响应并需要请求者继续执行操作的状态代码代码 说明100 （继续） 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。101 （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换2xx （成功）表示成功处理了请求的状态代码代码 说明200 （成功） 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页
2020-06-30 15:15:58
170
原创 mvc 与mvvm mvp的图示
一、MVCMVC模式的意思是，软件可以分成三个部分视图（View）：用户界面。控制器（Controller）：业务逻辑模型（Model）：数据保存各部分之间的通信方式如下1.View 传送指令到 Controller2.Controller 完成业务逻辑后，要求 Model 改变状态3.Model 将新的数据发送到 View，用户得到反馈所有通信都是单向的。1-2、互动模式接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受指令，传递给 Controller另一
2020-06-28 16:41:22
185
原创 正则的api的整理
1.普通正则var eg = /hello/ig; 正则可以传入两个参数： 这里是引用 1、正则主体部分，一般情况下就是字符串 2、修饰符(没有先后顺序) i 忽略大小写 g 全局匹配 m 换行匹配2.new RegExp() 对象var num = new RegExp(“hello”, “ig”);3.省略new创建正则var num = RegExp(“hello”, “ig”);4.
2020-06-28 16:02:31
649
原创 try catch与promise 的错误异常的问题
try/catch无法捕获promise.reject的问题function f2() { try { Promise.reject('出错了'); } catch(e) { console.log(e) }}f2() //Uncaught (in promise)原因是try 里面不能写异步代码解决1.用async aweitasync function f() { try { await Promise.reject('出错了') } ca
2020-06-23 16:17:49
3398
原创 js 手写缓存方法,可以设置过期时间
下面的例子是采用uniapp的接口写的,== 如果是h5可以把uni.getStorageSync换成localStorage.getitem 和localStorage.setitem== /** cache( ) 参数key值 value值 seconds设置时间*/function cache(key, value, seconds) { var timestamp = Date.parse(new Date()) / 1000 if (key && val
2020-06-17 16:03:45
907
原创 css rem的换算
为什么要使用rem之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。例如以屏幕320像素为基准，设置1，那屏幕375像素就是375/320=1.18以此类推。但直接这样强制页面缩放过于粗暴，会导致页面图片文字失真模糊。Px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的font-size，页面层级越深，em的换算就越复杂，而rem是直接相对于根元素，这就避开了很多层级
2020-06-03 11:45:21
2077
原创 计算机缓存的理解与总结(一)
1.简介缓存-称为CASH-是用于在计算环境中临时存储某些东西（通常是数据）的硬件或软件少量更快，更昂贵的内存用于提高临时访问存储在缓存客户端本地且与大容量存储分开的快速访问存储介质中的最近访问或经常访问的数据的性能。缓存通常由缓存客户端使用，例如CPU，应用程序，Web浏览器或操作系统（OS）使用缓存是因为大容量或主存储无法满足缓存客户端的需求。 缓存缩短了数据访问时间，减少了延迟，并改善了输入/输出（I / O）。因为几乎所有应用程序工作负载都依赖于I / O操作，所以缓存可以提高
2020-05-28 15:51:22
626
原创 让我们再聊聊浏览器资源加载优化
1.简介几乎每一个前端程序员都知道应该把 script 标签放在页面底部。关于这个经典的论述可以追溯到 Nicholas 的 High Performance Javasript 这本书的第一章 Loading and Execution 中，他之所以建议这么做是因为简而言之，如果浏览器加载并执行脚本，会引起页面的渲染被暂停，甚至还会阻塞其他资源 (比如图片) 的加载。为了更快的给用户呈现网页内容，更好的用户体验，应该把脚本放在页面底部，使之最后加载。我们经常谈论的一些页面优化技巧，比如上面所说的总是
2020-05-27 16:22:06
499
原创 网络协议 osi与tcp/ip总结
一、概述网络协议设计者不应当设计一个单一、巨大的协议来为所有形式的通信规定完整的细节，而应把通信问题划分成多个小问题，然后为每一个小问题设计一个单独的协议。这样做使得每个协议的设计、分析、时限和测试比较容易。协议划分的一个主要原则是确保目标系统有效且效率高。为了提高效率，每个协议只应该注意没有被其他协议处理过的那部分通信问题；为了主协议的实现更加有效，协议之间应该能够共享特定的数据结构；同时这些协议的组合应该能处理所有可能的硬件错误以及其它异常情况。为了保证这些协议工作的协同性，应当将协议设计和开发成完整
2020-05-26 17:35:21
482
原创 GET和POST两种基本请求方法的区别
GET和POST是HTTP请求的两种基本方法，要说它们的区别，接触过WEB开发的人都能说出一二。最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。你可能自己写过无数个GET和POST请求，或者已经看过很多权威网站总结出的他们的区别，你非常清楚知道什么时候该用什么。当你在面试中被问到这个问题，你的内心充满了自信和喜悦。你轻轻松松的给出了一个“标准答案”：GET在浏览器回退时是无害的，而POST会再次提交请求。GET产生的URL地址可以被Bookmar
2020-05-25 16:58:46
104
原创 浏览器输入URL到网页完全呈现的过程
简单总结1.查看缓存（浏览器缓存，系统缓存，路由器缓存），如果有直接访问2.如果没有，DNS服务器进行域名解析，解析成ip地址3.通过ip地址找到服务器，进行TCP链接，完成三次握手4.浏览器像服务器发送http请求5.服务器响应，将响应报文通过TCP发送回浏览器6.对响应进行解码，根据资源类型决定如何处理7.如果是HTML文档，则构建DOM树，下载CSS，JS资源，构建渲染树，布局，绘制8.断开连接：TCP四次挥手详细介绍DNS解析什么是URL在讲解DNS解析前，先简单介绍下URL
2020-05-25 16:52:57
222
原创 js 日期时间格式化
将日期时间转换为指定格式，如：YYYY-mm-dd HH:MM表示2019-06-06 19:45function dateFormat(fmt, date) { let ret; const opt = { "Y+": date.getFullYear().toString(), // 年 "m+": (date.getMonth() + 1).toString(), // 月 "d+": date.getDate()
2020-05-22 16:23:27
107
原创 ES6-字符串扩展-padStart()，padEnd()
ES6 引入了字符串补全长度的功能，如果某个字符串不够指定长度，会在头部活尾部补全。padStart() 用于头部补全；padEnd() 用于尾部补全‘x’.padStart(5, ‘ab’) // ‘ababx’‘x’.padStart(4, ‘ab’) // ‘abax’‘x’.padEnd(5, ‘ab’) // ‘xabab’‘x’.padEnd(4, ‘ab’) // ‘xaba’上面代码中，padStart 和 padEnd 一共接受2个参数，第一个是用来指定字符串的最小长度，
2020-05-22 16:08:21
126
原创 webpack 总结构建开发环境与生产环境（三）
1. 构建开发环境如果你一直跟随我前面的博文，那么你对webpack的基础知识已经有比较深刻的理解了。之前，我们一直执行着npm run build来打包编译输出我们的代码，本文我们来看看如何构建一个开发环境，来使我们的开发变得方便些1.1 webpack-dev-serverwebpack-dev-server是一个简单的小型的web服务器，并且能够实时重载，配置也很简单，首先安装：npm install --save-dev webpack-dev-server配置webpack.co
2020-05-21 17:54:34
196
原创 webpack对css模块的导出的总结(二)
1. 在项目中使用 less安装 less-loader：npm i less-loader -D添加 rules： { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }2. 使用MiniCssExtractPlugin我们之前的样式代码都是通过 style 标签载入的，那么如何
2020-05-21 17:28:59
252
原创 http requst header参数的详解
一个header由三个部分组成通用 generalRequest URL: https://www.baidu.com/Request Method: GETStatus Code: 200 OKRemote Address: 14.215.177.39:443Referrer Policy: no-referrer-when-downgrade1. Request URL 就是请求地址2. Request Method 请求方式3. Status Code 状态码4.. Remote Addr
2020-05-20 17:29:13
1283
原创 webpack打包优化的总结（一）
Webpack是个很流行的打包工具，但其打包速度却一直被吐槽着如果不用上一些打包的优化建议，单单打包两三个文件就能花上好几秒，放上几十个入口文件依赖几百上千个包的话，几分钟十几分钟妥妥的本文整理了常见的一些方法，部分使用之后就看到了很大改善，部分没什么明显的变化，也可能是项目规模还不够大，先记录一下方法也好还是太慢了，快快使用Webpack4一、使用监听模式或热更新热替换webpack支持监听模式，此时需要重新编译时就可以进行增量构建，增量构建是很快的，基本不到一秒或几秒之内就能重新编译好注意区
2020-05-20 17:10:15
456
原创 伪类与伪元素的区别已经他们各自的用法
CSS3伪类与伪元素的区别及注意事项原文出处：尐轩web前端网络日志CSS中伪类与伪元素的概念是很容易混淆的今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义w3c中对于它们是这么解释的伪类：用于向某些选择器添加特殊的效果伪元素：用于将特殊的效果添加到某些选择器讲道理，可能我语文不好，我觉得这两句话是等价的 ????根本不能看出有什么区别都是对某些选择器“加特技”标准有这么一句话翻译过来是这样的CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式
2020-05-18 17:41:32
420
原创 css 居中问题的总结
1.css让浮动的盒子水平居中解决方法：给浮动的盒子加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子为margin: 0 auto;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin:
2020-05-15 17:27:39
2247
原创 css 高度塌陷的总结
高度塌陷的原因在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷原代码<div id="yeluosen"> <div id="a1"></div> <div id="a2"></div></div>1.加一个空div标签清除浮动(缺点：不利于优化，优点：兼容性强)
2020-05-15 11:44:19
243
原创 格式化导航栏参数
/*调用方法 getQueryVariable( " key")*/function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for(var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if(pair[0] == va
2020-05-14 14:58:34
230
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人