我小哥在学习-CSDN博客

原创 echarts + echarts-gl - 使用geo3d + map3d + scatter3D做3d地图

3d地图，有贴图材质

2022-01-06 11:38:15 11742 2

原创阅读《深入浅出vue.js》 - 1-4章笔记

阅读《深入浅出vue.js》 - 笔记第一章：简介vue的发展视图层渲染组件机制路由机制状态管理器构建打包工具vue.js是一个渐进式的javascript框架第二章：Object的变化侦测变化侦测？什么变化了？怎么侦测？得到的效果是什么？先来理解一下什么叫渲染：渲染是从状态生成dom，再显示到用户界面的一整套流程叫做渲染；系统或者应用在运行的过程中因为状态不断发生变化，其视图也需要重新渲染，其中最重要的是变化侦测。这里的状态主要是指数据，数据发生变化了，会通知试图做相应的更新

2021-11-11 11:35:32 2108

原创在vue项目中使用svg图标

字体图标可以随字体一样变色、大小可更改且不失真；应用在项目中不仅可以摆脱图片占用内存大的问题，还可以减少代码量，优化系统。使用字体图标的步骤如下：安装svg-sprite-loader插件npm install svg-sprite-loader自定义svg-icon组件并注册为全局组件新建文件夹放置svg图标文件配置vue.config.js...

2021-10-29 15:51:25 2043

原创解决echarts图表在element(el-tab)宽度不自适应的问题

echarts在element(el-tab)宽度不是自适应的问题问题项目中有一个需求，就是有两个tab页，两个tab页面中都有echarts图表；在实现需求的过程中，默认显示的tab页图表宽高度显示正常，但是需要切换才能显示的tab页图表宽度不符合预期，如下图显示：.chart{ width: 100%; height: 200px;}默认显示tab页的图表，显示是正常的需要切换的tab页的图表，显示不正常查看页面代码显示切换的tab页的图表宽度并不是100%，而是100px。

2021-09-15 17:10:14 1631 4

原创一些关于微信小程序的面试题

一、简单描述下微信小程序的相关文件类型微信小程序项目结构主要有四个文件类型：wxml：类似html，是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部是微信自己定义的一套组件wxss：类似css，是样式语言，用于描述wxml的组件样式js：数据逻辑处理，进行网络请求等json：小程序设置，比如页面注册，设置页面标题及 tabBar主要文件app.json：必须要有这个文件，如果没有项目无法运行；它作为配置文件入口，是整个小程序的全局配置，包括页面注册、网络设置及

2021-03-11 15:05:39 560 1

原创前端网络相关面试题

http一、介绍一下http，有什么特点http是超文本传输协议(Hyper Text Transfer Protocol)，主要负责web server和浏览器之间的通讯；http协议是把客户端的请求发送到一个服务器，并把网页内容从服务器返回到客户端特点：简单快速：客户向服务器请求服务时，只需要发送请求方法和路径灵活：http允许传输任意类型的数据对象，使用Content-Type标志无连接：无连接是指限制每次只连接处理一个请求，服务器处理完客户的请求并收到客户的应答后，即断开连接无状态：

2021-03-10 18:33:30 317

原创学一学css的重排和重绘

一、HTML渲染页面过程浏览器获取到html代码解析成DOM树：html中每一个tag都是DOM中的一个子节点，根节点就是document对象。DOM树里包含了所有的html标签，包括display:none隐藏的标签、js动态添加的元素等浏览器整理样式：首先解析所有样式（用户自定义的和用户代理的），解析成样式结构体，再解析的过程中会去掉浏览器不能识别的样式，比如ie去掉-moz开头的样式，firefox去掉-ms开头的样式等DOM树 + 样式结构体组合成 render树：render树类似DOM

2021-03-09 17:57:34 194

原创 ajax+axios

ajax一、什么是ajax？ajax作用是什么？ajax全称是Asynchronous javascript and xml(异步javascript和XML)，是一种异步请求数据的web开发技术；对于改善用户的体验和页面性能很有帮助特点是在不需要重新刷新页面的情况下，ajax通过异步请求加载后台数据，并在网上呈现出来；目的是提高用户体验，减少网络数据的传输量，由于ajax请求的是数据而不是html文档，节省了网络带宽，让用户浏览体验更顺畅二、ajax的原理是什么？ajax相当于在用户和服务器之间

2021-03-08 21:22:19 315

原创 vue-面试题

一、对MVVM的理解MVVM是Model-View-ViewModel的简写，是一个软件架构设计模式，是一种简化用户界面的事件驱动变成方式，由微软WPF和Silverlight的架构师于2005年发表的MVVM源自经典的Model-View-Controller（MVC）模式，MVVM的出现极大促进了前端开发和后端业务逻辑的分离，极大提高了前端开发的效率，其核心是ViewModel层，负责转换Model中的数据，对数据进行处理和解析，向上与视图层进行双向数据绑定，向下与数据层通过接口请求进行数据交互对

2021-03-06 16:05:57 568

原创 Vue路由的两种模式

后端路由1、后端渲染：jsp-java server page后端编写jsp文件代码，包含html+css+java，java代码的作用是从数据库中读取数据，并且将它动态地放在页面中。当浏览器去请求时，后端会返回已经处理好的完整的页面给前端显示。所以早期的网站开发整个HTML页面是由服务器来渲染的，服务器直接生产渲染好的对应的HTML页面，返回给客户端进行展示。2、后端路由后端处理url和页面之间的映射关系一个页面有自己对应的网址，也就是urlurl会发送到服务器，服务器会通过正则对该url进

2021-03-03 15:53:14 1075 1

原创 javascript-面试题

一、javascript的基本数据类型基本数据类型：Number、String、Boolean、undefined、null、Symbol引用数据类型：Object、Array、RegExp、Date、Function，特殊的基本包装类型(Number、String、Boolean)、以及单体内置对象(Global、Math等)二、如何判断不同的javascript数据类型typeof：typeof x ，基本类型除null返回object，其余全部返回自身的数据类型；引用类型除Function

2021-03-02 18:33:26 124

原创 Promise对象

Promise对象定义promise是一个对象，用来保存异步操作之后的结果。promise的状态只由异步操作的结果决定，分别有pending(进行中)、fulfilled(成功)、rejected(失败)。promise一创建就会执行，无法取消，无法终止。promise提供统一的API，各种异步操作都可以用同样的方法处理解决了什么问题promise的链式调用解决了回调地狱、callback层层嵌套的问题promise让代码简洁易懂，易于维护基本用法使用Promise()构造函数接收一个函

2021-03-02 15:33:31 937

原创前端跨域介绍及跨域解决方案

什么是同源策略同源策略(Same origin policy)是一种约定，是由Netscape提出的一个著名的安全策略，是浏览器最核心也基本的安全功能。同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击，所谓同源是指协议+域名+端口三者相同，即便是两个不同的域名指向同一个ip地址，也不是同源。什么是跨域

2021-03-01 20:44:32 112 1

原创 css-面试题

一、css盒子模型，对box-sizing属性的理解盒子模型：content + padding + border + margin盒子大小：content + padding + borderbox-sizing：是一个css属性，决定元素元素的宽高计算方法content-box：元素的宽高(width、height)即为内容区的宽高(width、height)(默认)border-box：content + padding + border = 元素的宽高(width、height)，即内

2021-02-26 16:32:18 158

原创 html-面试题

一、 Doctype作用，HTML5 为什么只需要写<!DOCTYPE html>首先我们要知道DTD（document type definition）是文档类型定义，是一种特殊文档，它规定约束符合标准通用标示语言(SGML)胡总和XML规则的定义和解析。H5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为；而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。二、行内元素有哪些，块级元素有哪些，空(void)元素

2021-02-25 19:23:58 78

原创图片懒加载

图片懒加载意义在网页中，常常会需要用到图片，加载图片需要流量和时间；一般情况下浏览器解析html会从上往下依次加载<img src="xxx">的图片资源；如果图片数量过多则需耗费过多资源(比如电商、网商等)，且用户不一定会滚动网页去查看所有的图片，那未被看到的图片请求回来就会造成浪费。图片懒加载的意义是通过前端优化图片请求时机，“按需加载”，减少请求次数或延缓请求时间，减少服务器压力，给用户更好的体验实现原理给图片统一设置src路径(如src="xxx/loading.gif")，然后

2021-02-25 11:04:36 98

原创 vue+element多个表单校验记录

需求有一个长度为n的对象数组，对象的结构和属性一样，属性值不同。每一个对象都是一个表单数据 formData。如下图所示，左侧为菜单，点击设置当前表单展示的数据，右侧表单展示左侧的表单数据，即arr[k] = formData，在提交表单时，需要逐个校验arr[k]的必填项，校验通过则可提交，不通过则将表单停留在当前不通过的表单上，页面滚动到当前未填字段位置知识点promise异步、组件渲染思路遍历菜单数组，设置当前表单formData的数据，返回一个promise，利用await关键字同步校

2021-02-21 18:10:07 316

原创 vue3的数据劫持跟vue2的有什么不一样

vue2-Object.definePropertyvue2的响应式对象的核心是利用了ES5中 Object.defineProperty 给对象的属性添加了getter和setter。Vue会把props、data等变成响应式对象，在创建过程中，发现子属性也为对象时则递归把该对象变成响应式。触发getter的时候，触发依赖收集，那么依赖收集做了哪些事情？getter-依赖收集vue源码 Object.defineProperty(obj, key, { enumerable: tru

2021-01-26 16:15:09 709

原创 Set 和 Map

Set 和 Map 数据结构Set定义Set本身是一个构造函数，使用new Set()生成Set数据结构，其成员值唯一。其数据结构如下：let s = new Set([1,2,3,4])console.log(s) // {1,2,3,4}基本用法1、向Set构造函数传入一个数组(或者是具有Iterable结构的其他数据结构，详情见遍历器文章)作为参数，用来初始化。2、不传参，直接初始化，后续再使用add方法添加数据//用法1 传参let s1 = new Set([1,2,3])

2021-01-11 16:25:21 300

原创简单了解一下JavaScript原型链

只是想写一写原型链原型链~~~继承面向对象编程都支持两种继承：接口继承和实现继承。ECMAScript唯一支持的继承方法是实现继承，主要是通过原型链实现的。什么是继承？简单定义一下：对象A通过继承对象B，就能够直接拥有对象B所有属性和方法继承有什么用？我工作的时候几乎没有用到过继承。因为我用的框架主要是Vue，在页面级的开始中很少用到 js 继承方式，直接写个函数更简单高效些。继承应用的最好是那些以js为主开发的大型项目，比如写js框架，前台所有东西的都用js来完成，整个站的跳转、部分逻辑、数

2020-12-01 16:45:26 120

原创 webpack面试题

一、在webpack如何配置解析ES6和React？1、首先安装@babel/core、@babel/preset-env、babel-loader、@babel/preset-react2、使用babel-loader，babel的配置文件是：.babelrc{ "presets":[ "@babel/preset-env",//将es6转es5规则 "@babel/preset-react"//解析react jsx ]}3、在webpack.config.js中，与

2020-11-30 12:10:31 406

原创 JavaScript作用域与执行上下文

在说作用域和执行上下文中先来讨论一下很多人函数传参是对象的到底是按值传递还是按引用传递的疑问？函数传参ECMAScript 中所有函数的参数都是按值传递的，变量有按值和按引用访问，而传参则只有按值传递。看下列代码：person变量指向一个对象的引用(或者是指针值、内存地址)，执行setName函数时person的引用按值传递给了参数obj，obj和person的值都是相同的引用，obj也会通过引用访问对象，在改变了name的值后也就修改了该引用指向的对象，所以外部person引用指向的对象也会反映这

2020-11-29 14:50:48 104

原创 javascript节流和防抖

节流和防抖节流和防抖严格意义上来说是属于性能优化领域的，实际上遇到的频率很高，如果不做防抖或者节流可能会出现bug或者页面卡死现象，使用防抖和节流可以节省大量不必要的开销。防抖什么是防抖对于短时间内连续触发的事件如滚动事件，关注最后结果只执行一次，防抖的定义是在某个时长内，事件处理函数执行一次。(连续触发的过程中只执行中最后一次，控制次数)如何实现防抖function debounce(fn,duration){ let timer = null return function

2020-11-26 21:13:39 93

原创 JavaScript闭包详解

闭包是什么？A说：闭包就是函数里面嵌套函数，然后return函数B说：可以访问其他函数作用域内变量的函数叫做闭包C说：函数和函数内部能访问到的变量的总和就叫闭包查一查JavaScript高级红宝书咋说的吧：闭包指的是那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现的，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁疑问为啥要嵌套函数只是为了设计出局部变量和方法，也可以说是私有变量和方法，避免污染全局变量为啥要return函数如果不return，外部就无法使用这

2020-11-25 20:47:10 88

原创区别JavaScript的浅拷贝和深拷贝并掌握两者的实现方法

基本数据类型基本数据类型存放在栈内存中，拷贝之后都是相互独立的，无所谓深浅。引用数据类型浅拷贝和深拷贝讨论是引用数据类型，即为object类型的数据。浅拷贝和深拷贝的本质区别深拷贝和浅拷贝的最根本的区别是否获得了一个对象的复制实体，而不是引用，不是指针。深拷贝在计算机中开辟了一块内存地址用于存放复制的对象；而浅拷贝只是复制了指向被拷贝对象的内存地址，是一个指针，如果源地址对象的对象被改变了，那么浅拷贝出来的对象也会改变。注意：拷贝有一些属性是拷贝不了的，比如：正则表达式，function，und

2020-11-24 16:14:37 69

原创一表区别localStorage、sessionStorage和cookie

一表区别localStorage、sessionStorage和cookielocalStorage和sessionStorage是HTML5的新特性，主要作为本地存储使用的，解决了cookie存储空间不足的问题(每条cookie的存储空间大小为 4 k)

2020-11-24 10:53:35 97

原创学一学webpack4

写一写webpack学习webapck之前的疑问webpack究竟是个啥呢webpack就是一个模块打包工具，构建代码文件模块之间的依赖关系图，利于模块化开发，要使用的话需要npm install webpack webpack-cliwebpack是什么时候出现的因为webpack使用了ES moudle模式，大概在12年的时候出现的吧？？？是为了解决低版本浏览器不支持 ESM 模块化的问题，将各个分散的 JavaScript 模块合并成一个文件，同时将多个 JavaScript 脚本

2020-11-19 12:09:04 180

原创初步了解HTTP缓存

HTTP缓存定义1、http缓存是在http请求传输时用到的缓存，主要用于对一些实时性要求不高的文件，浏览器端在用户内存或者硬盘上对最近请求过的文档进行存储，其缓存机制是根据http报文的缓存标识进行的，主要在服务器代码上设置2、当浏览器向服务器请求资源的时候，都会率先抵达浏览器缓存，如果浏览器有这个资源请求的副本，就可以直接从浏览器获取资源，而不用去请求浏览器3、常用的http请求只能缓存get请求响应的资源，对于其他类型的响应无效4、http缓存都是从第二次请求开始的，第一次请求资源的时候，服

2020-11-18 18:37:28 518 1

现代通信原理仿真

空空如也