- 博客(78)
- 收藏
- 关注
RSS订阅原创 ES7、ES8新特性整理
ES7ES7在ES6的基础上添加三项内容：求幂运算符（**）、Array.prototype.includes()方法、函数作用域中严格模式的变更。求幂运算符（**）Math.pow(2,2); //4// ES72**2 //4Array.prototype.includes()数组原型的方法,查找一个数值是否在数组中，只能判断一些简单类型的数据，对于复杂类型的数据无法判断。该方法接受两个参数，分别是查询的数据和初始的查询索引值。[1, 2, 3].indexOf(3) >
2020-08-13 11:28:38
830
原创 React的新特性之Hook
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook的含义：Hook 这个单词的意思是"钩子"。React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用u
2020-07-23 16:14:41
625
原创 react项目中使用esri-loader加载天地图
1.在项目中安装esri-loadernpm install esri-loader// oryarn add esri-loader2.加载代码如下：代码是基于react hook编写：import React, { useEffect, useRef } from 'react';import { loadModules } from 'esri-loader'const LoadMap = props => { //这个代码我封装成公用组件了，因此从父组件传来样式、变量等信
2020-07-23 10:48:19
1328
原创 redux基础整理
设计和使用原则store是唯一的：整个应用只保持一个Store，所有组件的数据源就是这个Store上的状态。保持状态只读，只有store能改变自己的内容：保持状态只读，就是说不能去直接修改状态（setState），要修改Store的状态，必须要通过派发一个action对象完成。数据改变只能通过纯函数完成：这里所说的纯函数，就是Reducer，基本概念1.StoreStore 就是保存数据的地方，相当于一个容器，整个项目只能有一个 Store。Redux 提供createStore这个函数，
2020-07-16 15:31:21
287
原创 div可编辑文本的选中文本效果
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <title>demo</title> <style type="text/css">
2020-05-22 08:57:00
1134
原创 网址验证的两种正则表达式
1.验证网址的正则表达式：var reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;用于校验http[s]：//www.aaa.com类型的网址。2.校验IP合法的正则表达式：var reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)((2[0-4][0-9])|(25[0-5])|(1[0-9]
2020-05-16 08:47:01
6351
原创 useState()的回调实现
通过一个例子说明一下：功能：按钮点击使input组件显示，显示后实现input的光标聚焦。分析：input组件显示后才能调用input的focus()。1.定义class的实现方式：import React from 'react';import { Button, Input } from 'antd';class App extends React.Component { state = { inputVisible: false, }; save
2020-05-11 10:59:27
14107
原创 更改前端路由且不刷新页面的两种方式
1.url的hashlocation.hash="名称" 执行：路由变成：2.HTML5的historyhistory.pushState()三个参数：data,title, url执行：路由变成：history.replaceState()执行：路由变成：pushState和replaceState的区别：pushState()执行的操作类似于压栈...
2020-05-08 17:22:05
3441
原创 箭头函数中this的指向理解
测试代码：<script> setTimeout(() => { console.log(this) // window对象 }, 1000) const obj = { test() { setTimeout(() => { console.log(...
2020-05-08 15:46:59
286
原创 webpack配置时对图片文件的处理
1.安装url-loadernpm install --save-dev url-loader2.配置module.exports = { module: { rules: [ { test: /\.(png|jpg|gif|jpeg)$/, use: [ { loader: 'url-lo...
2020-05-07 08:08:53
647
原创 webpack配置less-loader时报错：loaderContext.getResolve is not a function
webpack配置less-loader时遇到错误：原因：less-loader的版本过高因为我使用的webpack版本号是3.6.0，less和less-loader的版本过高，导致报错。降低一下less和less-loader的版本号即可。...
2020-05-06 16:10:23
1749
原创 字符串编码，解码
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。encodeURIComponent(URIstring)decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。decodeURIComponent(URIstring)...
2020-04-27 09:47:53
206
原创 state的理解
针对state要明确三件事：1.不要直接修改state// 错的this.state.name = 'alice';应该使用setState()// 正确this.setState({ name: 'alice'});注意：构造函数是唯一可以给this.state赋值的地方 constructor(props) { super(props); this.s...
2020-04-23 09:08:49
1542
原创 antd design(4.x)中Upload应用------编辑缩略图
import React, { useState, useEffect } from 'react';import style from './index.less';import { EditOutlined, SettingTwoTone, PlusOutlined } from '@ant-design/icons';import defaultImg from './img/defa...
2020-04-22 09:15:29
1763
原创 antd design（4.x）中的Form
1.初始化表单数据initialValues：表单默认值，只有初始化以及重置时生效。代码示例如下： <Form layout="horizontal" form={form} initialValues={{ RealName: userInfo.RealName, Sex: userInfo.Sex, Mobile: us...
2020-04-21 10:21:46
4637
1
原创 contenteditable=“true”编辑状态时不允许换行效果
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><script type="text/javascript" src="jquery-1.11.3.min.js"></scrip...
2020-04-13 11:55:59
4573
原创 通过按钮控制div文本的编辑
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <title...
2020-04-08 21:05:38
319
原创 CSS之清除浮动
什么是CSS清除浮动？在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。<style> .div1 { width: 200px...
2020-03-11 08:13:08
140
原创 CSS中的position属性
定位定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素, 通过position属性来设置元素的定位属性值：固定定位fixed元素的位置相对于浏览器窗口是固定的，不会因为页面的滚动而移动。fixed定位使元素的位置与文档流无关，因此不占据空间。fixed定位的元素和其他元素重叠。IE6不支持固定定位。相对定位relative如果对一个元素进行相对定位，它将出现在它...
2020-03-10 15:00:56
186
原创 CSS中的盒模型
定义：用来装页面上的元素的矩形区域。css中的盒模型包括IE盒子模型和标准的W3C盒子模型。IE盒子模型W3C盒子模型区别：从图中可以看出，这两种盒子模型的最主要区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，因此，计算整个盒子的宽度时存在着差异：标准盒...
2020-03-10 10:08:35
172
原创 div垂直居中的方法
方法一：margin:auto法定义上下左右为0，margin:auto，实现脱离文档流的居中//css.div1 { position: relative; width: 200px; height: 200px; border: 3px solid forestgreen; margin-bottom: 20px; } .div2 {...
2020-03-09 18:08:47
367
转载 .NET WebAPI post参数传递
可行的传参形式键值对对应dynamic动态类型（非跨域）实体类JObject参数（推荐）1.键值对对应这里所说的键值对并非是一般的键值对，是指键为空，值不为空的键值对前台请求$.ajax({ url: host + '/api/Source/TestParams', type:"post", data: { '': "Amon"}, succes...
2020-03-06 16:01:51
688
原创 如何实现arcgis中MapServer服务要素的高亮
通过添加graphic来实现，代码如下： //data为需要高亮的要素信息 highLight = data => { const { view } = this.props.mapView; loadModules([ //react中加载arcgis的方式 'esri/Graphic', ], { css: true }) .the...
2020-03-06 15:45:36
484
原创 javascript的异步加载
什么是异步加载javascript使js文件脱离html解析的瀑布流加载，可以实现并行下载。为什么要使用异步加载默认方式是同步加载，一般将js写在head里，这就会导致在进行js加载的过程中，无法在其加载完成前对后续的内容进行操作，造成页面内阻塞，对用户体验很不友好。异步加载的方式1.defer异步加载用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行h5的新属性，主要用来...
2020-03-06 15:19:40
253
原创 react生命周期
组件的生命周期可分为三个状态：Mounting：已插入真实DOMUpdating：正在被重新渲染Unmounting：已移出真实DOM生命周期的方法有：componentWillMount 在渲染前调用,在客户端也在服务端。(组件即将挂载到页面上自动执行)componentDidMount : （组件被挂载之后自动执行）在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DO...
2020-03-05 16:17:31
736
原创 react深入之高阶组件
什么是高阶组件？如果一个函数，接受一个或多个组件作为参数并且返回一个组件，就可以称之为高阶组件。React中的高阶组件React中的高阶组件主要有两种形式：属性代理（Props Proxy）和反向继承（Inheritance Inversion）。1.属性代理分两种情况：情况一：无状态组件（Stateless Component）function MapComponent(Wrapp...
2020-03-05 15:58:26
239
1
原创 react中父子组件通信传值
父组件向子组件传值-----props父组件：import React, { Component } from 'react';import Child from './Child';class Parent extends Component { state = { parentStatus: 'parent' } showParent = ...
2020-02-26 18:10:34
313
原创 react中如何绑定this方法整理
方法一：ES6中可以在构造函数中，直接将当前组件（或者叫类）的实例与函数绑定示例代码：方法二：在方法编写结尾的时候绑定this示例代码：方法三：在方法调用的时候绑定this示例代码：方法四：ES6中的箭头函数（个人觉得：方便好用）示例代码：...
2020-02-26 17:40:16
400
原创 08------JS字符串深入
字符串有两种形式的字符串：基本类型，对象类型对象类型的字符串封装了一些属性以及方法，而基本类型则没有可以直接用基本类型字符串调用字符串对象封装的属性及方法，无须手动转换var str = 'hello world'console.log(typeof str) //stringvar str1 = new String('hello world')console.log(type...
2020-02-13 10:07:47
219
原创 07------数组深入
认识数组内置对象是JS语言自带的对象，提供了一些基本的功能供开发者使用。常用的内置对象有Math、String、Array、Date等。对象：属性（变量）和方法（函数）的集合数组就是对象可以存储多个不同类型的数据创建数组1.内存栈区：基本数据类型保存在栈区，会根据函数的结束而自动释放堆区：需要手动开辟，并且需要手动释放2.new在堆区开辟内存空间来存储对象返回堆区对...
2020-01-26 11:18:14
150
原创 06------线程机制与事件机制
进程与线程1.进程程序的一次执行，它占有一片独有的内存空间可以通过windows任务管理器查看进程2.线程是进程内的一个独立执行单元是程序运行的一个完整流程是CPU的最小调度单元如下图：3.相关应用程序必须运行在某个进程的某个线程中一个进程中至少有一个运行的线程：主线程，进程启动后自动创建一个进程中可以同时运行多个线程，程序是多线程运行的一个进程内的数据可以供...
2020-01-21 15:17:19
147
原创 05------JS面向对象高级
对象创建模式1.Object构造函数模式方法：先创建空Object对象，再动态添加属性/方法适用场景：起始时不确定对象内部数据问题：语句太多// 一个学生var s = new Object()s = {} //内部数据不确定//动态添加属性和方法s.name = 'alice's.score= 90s.setScore = function (score) { thi...
2020-01-21 11:30:47
122
原创 04------JS函数高级之作用域（链）、闭包
作用域和作用域链1.作用域理解：就是一块地盘，一个代码所在的区域它是静态的（相对于上下文对象），在编写代码的时候就已经确定分类：全局作用域局部作用域块作用域（ES6）作用：隔离变量，不同作用域下同名变量不会有冲突2.作用域和执行上下文1).区别1全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定，而不是在函数调用时全局执行上下文环...
2020-01-21 10:32:20
208
原创 03------JS函数高级之执行上下文与执行上下文栈
原型和原型链1.原型函数的prototype属性每个函数都有一个prototype属性，它默认指向一个Object空对象（即原型对象）原型对象中都有一个construtor，它指向函数对象//每个函数都有一个prototype属性，它默认指向一个Object空对象（即原型对象）console.log(Date.prototype)console.log(typeof Date.p...
2020-01-20 19:38:04
195
原创 02------JS函数高级之原型与原型链
原型和原型链1.原型函数的prototype属性每个函数都有一个prototype属性，它默认指向一个Object空对象（即原型对象）原型对象中都有一个construtor，它指向函数对象//每个函数都有一个prototype属性，它默认指向一个Object空对象（即原型对象）console.log(Date.prototype)console.log(typeof Date.p...
2020-01-20 17:49:30
162
原创 01------JS基础总结
数据类型1.分类基本（值）类型Number: 任意数值Srting: 任意字符串Boolean: true/falseundefined: undefinednull: null对象（引用）类型Object: 任意对象Function: 特别的对象（可以执行）Array: 特别对象（内部数据有序/数据下标）2.判断typeOf: 数值/字符串/布尔值/undef...
2020-01-19 11:22:35
176
原创 cesium查询arcgis/wms服务并实现自定义信息框，分页展示查询要素
想实现自定义信息框，首先要在cesium初始化时，将默认的infoBox设置为false，因此要自己手动实现查询功能。1. 监听点击事件，对arcgis/wms服务进行查询具体实现代码如下： const _self = this; const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); ...
2020-01-11 16:32:41
5595
9
原创 react中cesium添加billboard广告牌，billboard点击事件和鼠标滑过效果
刚做完项目中广告牌的效果，顺便分享一下。更多可以参考官网的例子查看详情先上效果图:1.添加广告牌:2.鼠标滑过效果（放大了一点点）：3.鼠标点击后，视野定位到具体的位置：1.添加广告牌代码：viewer.entities.add({ name: '1号大棚', position: Cesium.Cartesian3.fromDegrees(117.5673, 36.7...
2019-12-11 09:59:52
5470
7
原创 如何在nginx中配置多个前端项目
首先安装好ngnix,找到目录下的html文件夹，将自己打包好的前端项目放在html文件夹下，如下图:找到conf>nginx.conf文件，以我框选出来的为例，配置好想设置的端口号，对应的文件夹名称。重启nginx，访问http://localhost:2456即可新的项目复制粘贴代码，更改端口号和对应的文件夹，详情看下面的代码。我标红的这两个项目都是react的，补充两点：...
2019-12-09 18:49:52
3877
原创 如何给coding的项目绑定钉钉机器人
写在前面的话：之前想弄这个功能来着，但是不巧，钉钉的Webhook正好在维护，就搁置了。于是每次合并代码之类的，我都会对着老大喊一嗓子，同意一下呗。今天喊了一嗓子后，老大说：你快弄下那个机器人提醒吧。哈哈，可能受不了我突然的一嗓子~弄好之后趁着热乎劲，顺便记录一下过程，方便以后再用，老话说–好记性不如烂笔头。钉钉上：首先你得有个群，并且是群管理员，然后点击 群助手>添加机器人选择自...
2019-12-06 11:32:45
4993
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人