MingleHDU的博客

原创 天地图绘制区域图层

如何切换不同坐标系的地图源，实现快速绘图呢

原创 判断iOS系统；判断iPhoneX及以后版本；判断微信环境；判断网络

这里写自定义目录标题判断IOS系统判断iPhoneX及以后版本判断微信环境判断网络判断IOS系统function getIsIOS(){ const UA = navigator.userAgent.toLowerCase(); const isAndroid = /android|adr/gi.test(UA); const isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid; return isIos

原创 首页项目踩坑史

首页最外层加overflow：scroll后，会导致wowjs的效果展示不出来

原创 React web端 高德地图引入

1.逆向地理编码（将经度纬度转换地址）时报错10009（USERKEY_PLAT_NOMATCH），明明用的是web端的key值，为什么会报不匹配的bug呢？可能的原因是：在逆向地理编码的时候用的不是逆向编码的url，正确的url地址如图：2.写地理编码时报错：AMap.Geocoder is not a constructor，网上查到的解决方法有：1）入口index.html文件的引入的script的key值后面加上plugin=AMap.Geocoder2）或者是在key值后面接&

原创 截取视频首帧图片

基本框架：antD upLoad组件上传视频 +视频消息推送+ canvas截取视频首帧图片<Upload name="myfile" data={ { _token: getConfig()._token, }} listType="picture-card" className="avatar-...

原创 antD Table表头气泡提示自定义

本文很详尽地介绍了如何利用antD的Table组件，动态展示接口返回的表头和表格信息。若表头对象的气泡提示字段存在，实现气泡悬浮提示内容的自定义。希望能帮助大家避坑~

原创 动态获取查询条件和table展示区字段 typeScript

背景：切换菜单栏的“请假”、“测试”，能够获取不同的formCode，根据formCode的不同，搜索区动态获取查询条件。接口返回的数据结构为：搜索区动态搜索条件的数据结构：对应代码实现：{/* 动态搜索条件 */} <Row gutter={24}> {dynamicDomData && ...

原创 关于移动端滚动区域滑动卡顿，不顺畅问题

解决方法一：overflow-scrolling：touch;给滚动区域添加overflow-scrolling：touch;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;解决方法二：overflow-y：visible;overflow-y: visible;...

原创 antD Calendar组件ios手机下拉加载上一个月份困难

bug描述：在ios手机上加载上一个月数据时非常困难，经常加载不出来同组的同事也用过这个组件，但无此bug，基本确定是我自身外码影响所致。而将calendar同级代码都注释掉后发现，该问题仍存在。所以可以基本可以确定是外层样式产生的干扰了。经排查，果然是外层的ovetflow-scrolling：touch样式产生了影响。移动端上下滑动时不顺畅时，应立马想到利用-webkit-overf...

原创 antD使用二三事-设置主题色 && 不同组件间对antD的样式修改互不干扰

设置主题色前期准备：npm install babel-plugin-import --save-devnpm install antd --save1. webpack.config.theme.js中，设置主题色primary-color，并导出module.exports={ "primary-color": "#0ba29a", "link-color": "...

原创 项目中引用自定义 iconfont字体库

项目中引用自定义 iconfont字体库前期准备字体源文件下载进入“我参与的项目”，下载项目拷贝至项目src/assets/iconfont拷贝到该路径下后，将iconfont.css文件命名成自身项目名，如evaluiconfont.css。将除去demo的其他文件拷贝到项目。字体命名为防止与 iconfont官方字体库冲突，需为自身项目字体设置新的字体名。在evalui...

原创 redux同组件内多个值赋值覆盖问题

项目背景：用户提交修改结果时，需要将修改后的状态和该状态对应的开始考勤时间存到redux中（editedState和stateStartTime），便于在数据展示页更新相应数据item。但由于改成某些特定状态时是不需要修改初始时间的，所以存在只给editedState赋值，而不给stateStartTime赋值的情况。bug描述：只修改editedState而不修改stateStart...

原创 实现table全选组件

selectedIdArr：存在已选择item的idallIdArr：所有数据的id组成的id全集通过操作selectedIdArr数组中的元素增减来实现选中/取消

原创 fixed布局兼容写法

DOM结构<div> <div className={styles.tableMock}> <div className={styles.tableHeader}></div> <div className={styles.ulWrap} style={{height:`calc(${document.b...

原创 关于边框1px

手机端1像素边框在iphoneX上遇到的问题：一开始是简单粗暴写了border-bottom:1px solid #e5e5e5;后面改成了scaleY的写法。在网上查证了原因是因为1px的边框在devicePixelRatio = 2的retina屏下会显示成2px。比较灵活的写法是用参考链接：https://segmentfault.com/a/1190000...

原创 react-router 多路由共用同个组件，切换不刷新

先描述下需求吧。从服务端获取菜单栏要展示的菜单项（如校园公告，乐课网，课程消息，乐答消息，作业消息，...，待办通知），其中校园公告，乐课网和代办通知是一定会有的菜单项（下文称为“常驻嘉宾”），而消息类（如课程消息，乐答消息，作业消息，...）根据运营后台的配置不同而不同（下文称为“本期特邀嘉宾”）。接口返回数据：实现思路：根据type区分不同菜单类型，故可以用type来区...

原创 粗略手写一个redux

原创 箭头函数 setTimeout this指向

今天面试的时候被问到了箭头函数和普通函数中的程序输出问题，归来实践验证一下。本文核心的三大理论依据：普通函数的this指向看调用，箭头函数的this指向看声明，指向声明时候的父级作用域； setTimeout会延迟函数的声明example1：分析：根据第1条，可知，声明时就已经确定了this的指向为父级作用域，也就是window所以输出undefined；example...

原创 reflow回流 repaint重绘 硬件加速

浏览器处理动画顺序获取dom：获得我们所有的dom树 分割图层：浏览器根据z-index，和脱离了原来dom层的dom解构进行分层。 计算样式：分解图层完毕后，将所有的图层批量进行样式计算。这里有些属性是CPU去计算的，有些属性是GPU去计算的，具体哪些，请看下文。 reflow-relayout-paint set up-repaint:这一系列过程其实是页面从回流到重绘发生的步骤...

原创 vue-router前端路由

前端路由定义：在单页面应用中，前端对url自行管理，控制页面展示不同的内容或页面。优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户缺点：使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的...

原创 vue 虚拟DOM

虚拟DOM：Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。由页面渲染过程可知，虚拟DOM可以理解为保存了一棵DOM树被渲染之前所包含的所有信息。目的：虚拟dom就是为了减少js与DOM的交互而设计的。步骤：以虚拟dom的形式存储旧的dom信息； 检测到数据更新，先在JavaScript中将需要修改的节点全部修改完成； 将最终生成的虚拟DOM更新到视图中去...

原创 浏览器/页面渲染过程

1.网络通信用户输入网址，输入url后会开一个新的网络线程 DNS域名解析，查询出相应的IP地址 发起TCP三次握手，建立连接 为什么不是两次握手： 3次握手完成两个重要的功能。既要两方做好发送数据的准备工作(两方都知道彼此已准备好)，也要同意两方就初始序列号进行协商，这个序列号在握手过程中被发送和确认。如今把三次握手改成仅须要两次握手。死锁是可能发生的。作...

原创 排序算法-快速排序，直接插入排序，二分法排序，冒泡排序

快速排序思想：每次选出一个基准值，经过一趟比较，比基准大的都在右侧，比之小的，都在左侧；递归左右子区间 function quickSort(arr) { if (arr.length &lt;= 1) return arr; var middleIndex = Math.floor(arr.length / 2); var middleNum = ar...

原创 Vue 简单MVVM实现思路

实现方式：数据劫持结合发布者-订阅者模式MVVM的实现核心：Observer监听器劫持并监听data内的所有属性，如有变动，拿到最新值并且通知订阅者Watcher订阅者收到属性的变动通知，执行指令绑定的回调函数，从而更新视图起到桥梁作用Compiler解析器对每个DOM节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数页面上每一个与数据相...

原创 本地代码上传至github仓库

在学习webpack配置时写了一个小的练习项目，写完之后觉得过段时间可用于复习查阅，遂决定上传到github仓库。github建立仓库初始化本地仓库1&amp;gt; 进入要上传的项目文件（我的是mooc_learning）cd mooc_learning/2&amp;gt; 创建readme文件touch README.md3&amp;gt; 初始化本地仓库git initgit init执行...

原创 webpack4配置详细过程及采坑

新建项目文件夹 如mooc_learning没有进到mooc_learning，进行安装时，会报错Failed to execute ‘/usr/local/bin/node /usr/local/lib/node_modules/npm/xxx’新建src文件夹，并建立文件src-&amp;gt;app.vue&amp;lt;template&amp;gt; &amp;lt;div id=&quot;test&quot;&a

原创 webpack知识点整理

官网中，将webpack定义为： 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。入口Entry入口指示一个入口起点（或多个入口起点）。默认值为 ./src。是构建依...

原创 我与LeetCode的50天之JavaScript实现

first day：**求二叉树的深度**：描述：// 输入一棵二叉树，求该树的深度。// 从根结点到叶结点依次经过的结点（含根、叶结点）形成树的一条路径，// 最长路径的长度为树的深度。知识点：节点的左右孩子节点表示为node.left node.right递归方法实现function TreeDepth(pRoot){ // 参考实现为：https:/...

翻译 观察者模式

定义 观察者模式（发布-订阅模式）：其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。 好处 （1）可广泛应用于异步编程中，是一种替代传递回调函数的方案。 （2）可取代对象之间硬编码的通知机制，一个对象不用再显示地调用另外一个对象的某个接口。两对象轻松解耦。 参考解释： http://blog.csdn.net/ligang2585116/ar

原创 重绘与回流（repaint和reflow）

reflow：回流 回流：指计算页面布局。render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流,每个页面至少需要一次回流，就是在页面第一次加载的时候。 repaint ：重绘 重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

原创 css画圆

半圆（不同颜色）<style>.half-circle{ border-width: 100px; width: 0px; height: 0px; border-color:red blue transparent transparent; border-style: solid; border-radius: 50%; transfor

原创 disabled 与 readonly的区别

disabled指当 input 元素加载时禁用此元素。input内容不会随着表单提交； readonly 属性规定输入字段为只读。readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。input内容会随着表单提交。 ## 无论设置readonly还是disab

原创 hr设置线条颜色

border: none; background-color: #f2f2f2; height: 1px;color：针对字体颜色； 线条：需要用background-color；其实，hr是有默认的border的，所以在给线条设置颜色之前，我们需要将它的边框去掉，设为border:none单纯的将背景色设为蓝色是不够的，线条还是灰色的，我们需要给线条一个高度，也就是我们需要的1px

原创 border-color

border-color:：[ border-top-color ] || [ border-right-color ] || [ border-bottom-color ] || [ border-left-color ] 上 右 下 左 图例即为：border-color:transparent #169bd5 transparent transparent;

原创 position:relative相对定位

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

原创 split()和splice()

split()方法：将字符串分割成字符串数组语法： stringObject.split(分割符,返回的数组长度)举例：<script type="text/javascript">var str="What are you doing now?"document.write(str.split(" ") + "<br />")document.write(str.split("") + "

原创 声明

变量声明：各种varvar str= "qwer";函数声明：functionfunction addNums(){ ...}一维数组声明：有三种方式var str = new Array();//创建的新数组是空数组，没有值，如输出，则显示undefined。str = [10,20,30];第二种方式是：var str = new Array(10,20,30);还有一种方式是：va

原创 alert confirm prompt

alert-警告 语法是：alert（字符串或变量）; 按顺序弹出括号内的内容。 confirm-确认 语法：confirm（在消息对话框要显示的文本）; 返回：Boolean值（用户点击确定，返回TRUE）。 多跟if else结构搭配，根据用户的不同选择，做出相应的判断输出。prompt–提问 语法：prompt(显示在消息对话框中的文字，文本框中的可修改内容); 返回值：点

原创 js位置

JavaScript中js文件的位置放在头部中<head> <script>j....</script></head>放在body内<body> <script>......</script></body>浏览器在对HTML进行解释的时候，是按照先后顺序的，所以前面的script就先被执行。因此，一般将进行页面显示初始化的js必须放在head中，因为初始化（如页面body

原创 Windows和Mac环境下的sublime快捷键

Sublime快捷键-Windows版VSMac版本 作为一个时常需要在Windows和Mac环境下写代码的初级程序媛，每次记快捷键真是一件头疼炸裂的事情。熟练使用快捷键不仅能加快代码速度，更主要的是，当你的盆友不经意路过的时候，你假装随意的一个快捷键组合，绝对是装逼界的制霸神器，秒杀代码渣渣不残留好么! 那就让我们从最简单的快捷键开始，2017,3,21！记住这个日子，因为从今天开始，你的装1