2020年09月_一月清辉

转载异步请求xhr、ajax、axios与fetch的区别比较

1. XMLHttpRequest对象现代浏览器，最开始与服务器交换数据，都是通过XMLHttpRequest对象。它可以使用JSON、XML、HTML和text文本等格式发送和接收数据。优点：不重新加载页面的情况下更新网页缺点：使用起来也比较繁琐，需要设置很多值对于早期的IE浏览器，还需要写兼容代码if (window.XMLHttpRequest) { // model browser xhr = new XMLHttpRequest()} else if (window.A

2020-09-27 15:35:40 1526

转载函数式编程、函数的curry( 柯里化 )与合成

1、三大编程范式面向对象编程、面向过程式编程、函数式编程(Javascript)2、函数的合成如果一个值要经过多个函数，才能变成另外一个值，就可以把所有中间步骤合并成一个函数，这叫做"函数的合成"（compose）。上图中，X和Y之间的变形关系是函数f，Y和Z之间的变形关系是函数g，那么X和Z之间的关系，就是g和f的合成函数g·f。3、函数的柯里化所谓"柯里化"，就是把一个多参数的函数，转化为单参数函数// 柯里化之前function add(x, y) { return x + y;

2020-09-25 10:24:33 381

转载 var、let、const三者区别，以及const 和 let 声明的变量不在 window 上，那到底在哪里

1、let、const 以及 var 的区别是什么？其是否会挂载到window上var声明的变量会挂载在window上，而let和const声明的变量不会挂载到window上，它形成了一个块作用域是否存在变量提升var声明变量存在变量提升，let和const不存在变量提升是否形成块作用域let和const声明形成块作用域，var变量提升不会形成作用域同一作用域下是否可以重复声明同一作用域下let和const不允许重复声明，否则会报错，而var可以是否可以修改var和l

2020-09-24 21:33:31 3317

转载 Vue 原理解析(四)：虚拟Dom是怎么生成的

虚拟Dom, 顾明思议并不是真实的Dom, 而是使用javascript 的对象来对真实dom的一个描述。一个真实的dom 也无非是有标签名，属性，子节点等这些来描述它，demo如下：真实Dom<div id="app"> <span>Vue!</span></div>虚拟dom{ tag: 'div', attr:{ id:'app' }, children: [ { tag: 'span'

2020-09-24 11:14:48 345

转载 vue 原理解析（三）：初始化时created之前做了什么

继续this._init() 的初始化相关操作，接着又会执行如下三个初始化方法：initInjections(vm)initState(vm)initProvide(vm)callHook(vm, ‘created’): 1、initInjections(vm)、initProvide(vm)inject 和 provide ，这是vue@2.2 版本添加的一对需要一起使用的API,它允许父级组件向它之后的子孙组件提供依赖，让子孙组件无论嵌套多深都可以访问到.provide : 提供一

2020-09-24 10:19:26 818

转载 Vue 原理解析（二）：初始化时beforeCreate之前做了什么

我们知道在 new Vue() 时，内部会执行一个this._init() 方法。this._init() 方法会触发一系列初始化方法let uid = 0Vue.prototype._init = function(options) { const vm = this vm._uid = uid++ // 唯一标识 vm.$options = mergeOptions( // 合并options resolveConstructorOptions(vm.constr

2020-09-23 17:25:15 1000

转载 Vue原理解析(一) ------ Vue 是什么？

我们在使用vue时，初始化操作都会使用new Vue({…})，Vue是一个构造函数。当执行new Vue时，内部会执行一个方法this._init(options), 将初始化的参数传入。import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import {

2020-09-23 15:35:49 337

转载 Vue自定义指令

1、自定义指令的方法全局定义指令：在main.js中全局定义指令,Vue.directive(指令名，对象)// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { inserted: function (el) { // 当被绑定的元素插入到 DOM 中时…… // 聚焦元素 el.focus() }})局部指令(组件内定义指令)：使用钩子directives//注册一个组件内部的指令，使用钩子directive

2020-09-23 11:04:20 99

转载 vue中@hook使用技巧---监听本组件或子组件的生命周期

1、在同一个组件中，监听生命周期vue 文档在程序化的事件侦听器一节中讲了怎么注册/停止一个监听事件。简单语法如下：this.$on/$once('hook:生命周期'，callback) vue组件的任意一个生命周期都可以被监听除了官方文档中的例子，我们最常用到的是定时器的使用与销毁。export default{ data(){ timer:null }, mounted(){ this.timer = setInterval(()=>{

2020-09-22 19:53:05 1637

转载 JavaScript 创建对象的几种方式

主要介绍四种方式：工厂模式构造函数模式原型模式构造函数和原型相结合的模式动态原型模式1、工厂模式工厂模式是用函数来封装创建对象的细节，在函数里面创建对象并返回对象。function createPerson(name,age,job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayname = function(){ alert(this.n

2020-09-22 11:40:38 138

转载前端项目性能优化

1、HTML性能优化把js移到HTML后加载，因为JS会阻塞后面的页面的显示。减少iframe的使用，因为iframe会增加一条http请求。清除代码之间空格，虽然空格有助于我们查看代码，但是每个空格相当于一个字符，空格越多，页面体积越大，这样不利于web页面的传输。减少不必要的嵌套，避免代码纵深层次过深，尽量扁平化，因为当浏览器遇到一个开始标签时就会寻找它的结束标签，直到匹配上才会显示它的内容，所以当嵌套很多时打开页面就会特别慢。减少注释，因为过多注释不光占用空间，如果里面有大量关键词会影响搜

2020-09-21 17:21:15 3651

转载浅析函数防抖、函数节流

1、概念1.1 函数防抖（debounce）定义函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。简单的说，当一个动作连续触发，则只执行最后一次。应用场景1、搜索框搜索输入。只需用户最后一次输入完，再发送请求2、手机号、邮箱验证输入检测3、窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。1.2 函数节流（throttle）定义限制一个函数在一定时间内只能执行一次。应用场景1、加载

2020-09-21 16:18:57 350

转载谈谈你对webpack的理解

1、webpack是什么WebPack 是一个模块打包工具，可以使用WebPack管理模块，并分析模块间的依赖关系，最终编绎输出模块为HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器loader，比如说，CSS解析CSS的css-loader、style-loader，解析less的less-loader，sass的sass-loader,JS解析将 TypeScript 转换成 JavaScri

2020-09-19 18:16:17 4809

转载 XML和JSON的区别

1、什么是xmlxml 即可扩展标记语言，是当前处理结构化文档信息的有力工具，主要聚焦于描述数据，什么是数据，如何存放数据。2、xml和html的区别3、XML和JSON的区别(1).数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。(2).数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。(3).传输速度方面。JSON的速度要远远快于XML。(4).数据描述方面。XML对数据的描述性比JSON强。参考链接 http

2020-09-19 14:15:41 664

原创 position的值， relative和absolute分别是相对于谁进行定位，你真的知道吗？

常见的position定位方式如下:static 默认值。元素出现在正常的普通流中relative 生成相对定位的元素，相对于其在普通流中的位置进行偏移。fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 iframe 进行定位。inherit 继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。absolute 生成绝对定位的元素，相对于最近一级的不是 static 的父元素来进行定位,如果没有找到的话，最

2020-09-19 12:19:31 9481

转载 restful接口架构

1、restful架构优点前后端分离，后端只负责数据处理，前端表现方式可以是任何前端语言（android，ios,html5）安全问题集中在接口上，由于接受json格式，防止了注入型等安全问题服务器性能优化：由于前端是静态页面，通过nginx便可获取，服务器主要压力放在了接口上作者：Aniugel链接：https://www.jianshu.com/p/4db4b191de06来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。...

2020-09-17 19:27:30 139

转载对Vue 3.0的初步学习----Typescript、Proxy

1、Vue3.0变化的三大点1.1、提出的新API setup()函数(1) setup函数是一个新的组件选项。(2) 之前的data、自定义的函数都放置在setup()方法内，最终导出。(3) 从组件生命周期的视角来看，它会在 beforeCreate 钩子之前被调用。```<template> <div>{{data.helloWorld}}</div></template><script>import { reacti

2020-09-16 21:18:36 690

翻译 CSR、SSR、SPA是什么

1、前沿1.1、什么是SSRSSR（服务端渲染）顾名思义就是将页面在服务端渲染完成后在客户端直接展示。1.2、客户端渲染与服务端渲染的区别传统的SPA模式，即客户端渲染的模式Vue.js构建的应用程序，默认情况下是有一个html模板页，然后通过webpack打包生成一堆js、css等等资源文件。然后塞到index.html中用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 ->

2020-09-16 10:24:09 1013

转载 ES6常用的特性

ES6增加了Module方便了JS模块化问题、Promise解决异步函数的回调地狱、Class的面相对象编程等问题一、let和const定义变量let块级作用域内有效、不能重复声明、不存在变量提升、暂时性死区“暂时性死区“是什么如果先调用了该变量，然后才用let去声明，那么浏览器就会报错。这在语法上称为 “暂时性死区”。“暂时性死区”的本质只要一进入当前作用域，所要使用的变量就已经存在了，但不可获取（否则报错），只有等到声明的那一行代码出现，才可以获取和使用。const.

2020-09-15 18:33:32 130

转载 ES6---数组的spread扩展运算符

1、扩展运算符基本用法扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，功能是把数组或类数组对象展开成一系列用逗号隔开的值。该运算符主要用于函数调用，示例如下：function add(x, y) { return x + y;}const numbers = [4, 38];add(...numbers) // 422、扩展运算符引用拷贝数组下面看看ES5和ES6的实现：// ES5const a1 = [1, 2];const a2 =

2020-09-15 18:15:38 474

转载箭头函数学习

ES6 允许使用 “箭头” (=>)定义函数。1、基本用法（1）如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。var f = () => 5;//等同于var f = function () { return 5};var sum = (num1, num2) => num1 + num2;//等同于var sum = function(num1, num2){ return num1 + num2;}（2）如果箭头函数的代

2020-09-15 16:42:12 1243

转载解决element-ui的下拉框有值，点击后却无法选中的问题

出现原因因为下拉列表的数据是根据输入框的值的变化时行实时调用接口来更新而非不变的，频繁的更新，可能造成点击下拉列表中的某项后，select所绑定的value值无法进行及时的更新，尤其是所绑定的值是对象时（vue不能检测对象属性的变化），更加会造成无法选中的问题。解决方法无法及时更新，那么用change事件监听值的变化，调用this.$forceUpdate()手动强制更新，重新渲染。代码如下<el-select v-model="value" placeholder="请选择" @chan

2020-09-15 10:53:42 2350 1

转载 Vue面试可能问到的零星的知识点

1、vue 生命周期有哪些，以及对应的行为有哪些beforeCreate（创建前）在数据观测和初始化事件还未开始created（创建后）完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。mounted（载入后）挂载html到页面上。实例已完成以下的配置：用

2020-09-14 19:47:46 783

原创 arcgis墨卡托与经纬度之间的互相转换

使用 esri/geometry/webMercatorUtils 方法经纬度转墨卡托webMercatorUtils.lngLatToXY(x，y) //返回墨卡托坐标，[merx,mery]墨卡托转经纬度webMercatorUtils.xyToLngLat(merX，merY) //返回经纬度坐标，[x,y]require(["esri/map", "esri/geometry/webMercatorUtils", ], function(Map,webMercatorUtils

2020-09-14 09:43:20 1907

原创 React面试常见问题汇总及参考链接

1、react面试可能问的零星问题参考链接https://blog.csdn.net/yiyueqinghui/article/details/108521085

2020-09-10 21:04:53 190

翻译 React常见问题

1、React 中 key 的作用是什么？Key用于识别Virtual DOM 元素，以便追踪列表中哪些元素被修改、被添加或者被移除2、调用 setState 之后发生了什么？1、调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发调和过程（Reconciliation）。2、经过调和过程，根据新的状态构建 React 元素树。3、React 会自动计算出新树与老树的节点差异，根据diff算法，在充分利用原有节点的基础上，对现有节点进行增删改，进行局部更

2020-09-10 21:02:46 1129

转载排序算法如下----冒泡排序、快速排序、选择排序、插入排序、希尔排序

快速排序<body> <h4>算法步骤</h4> <ol> <li>先从数列中取出一个数作为“基准”。</li> <li>分区过程：将比这个“基准”大的数全放到“基准”的右边，小于或等于“基准”的数全放到“基准”的左边。 </li> <li>再对左右区间重复第二步，直到各区间只有一个数。</li> </ol></body><script

2020-09-03 20:40:25 197

转载 vue——axios请求成功却进入catch的原因

问题axios返回200状态码（即请求成功）却走进了catch里面原因当axios请求完成后走的时then的代码块，如果then代码块中存在错误代码信息，这时就会进入catch中抛出异常（注意：此时控制台并不会报错，因为错误被catch捕获了）...

2020-09-02 15:38:33 5249

yiyueqinghui的博客