这个昵称没有被占用吧的博客

转载 理解JavaScript的async/await

本文摘自边城的理解JavaScript的async/await一文以及git上关于Mavericker-1996关于async/await的一些见解主要需要理解javascript中同步任务、异步任务、宏任务和任务。宏任务(macro task)主要包含：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageCh...

原创 【JavaScript重中之重】关于原型与原型链，prototype和__proto__的理解

说到原型链，必须先抛出这张图了

原创 使用Fiddler中使用AutoResponder创建规则替换线上文件

事情是这样的。。。我们的项目在app登录后，会根据传到用户中心的指定渠道码跳转到一个指定的页面(带上用户的登录信息)，然后该页面再跳转到项目页面。然后每次为了app内测试，都得重新发版。刚来公司时，心想，这还不简单，host绑定域名，nginx代理服务地址，访问页面就指向本地了...

原创 background-size在ios下失效？

最近天天被动画和音频折磨~个人比较喜欢用css，所以需求中碰到广告牌闪烁的需求，果断使用了css3的动画，代码如下：#ad { animation: changeAd 1s infinite;}@keyframes changeAd { from { background: ad1.png no-repeat center center; background-size: 100...

原创 ios端兼容input光标高度处理

最近在项目中遇到一个问题，input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。后来发现，是因为给父盒子添加了height和line-height。当点击输入的时候，光标的高度就自动和父盒子的高度一样了。而当有内容的时候，光标是从input的顶端到文字的底部。解决办法：不用给父盒子设置高度height和行高line-height，内容用...

原创 还在坑中。。。vue项目中，页面第二次刷新时，document.documentElement.scrollTop失效

文章目录问题描述问题定位解决问题问题描述需求需要从第三方页面进入页面时，会带一个table字段，然后根据table字段，定位到指定位置。将滚动操作写在mounted函数中，发现进入页面时能成功定位，但是一刷新页面，滚动就失效了。mounted(){ let { tab='' } = this.$route.query; let top = document.getElementById(...

原创 如何区分防抖和节流

**防抖：**指在时间n内，函数被触发多次，但是只执行一次，只会执行最新的触发。也就是说，在时间n内，碰到新的触发，就清除之前的，重新计时。**节流：**当持续触发某个事件时，会有规律的每隔时间n就才执行一次函数。...

转载 ios下非button/a标签点击事件失效问题

当使用事件委托给一个元素添加 click 事件时，如果事件是委托到 document 或 body 上，并且委托的元素是默认不可点击的（如 div, span 等），此时 click 事件会失效。如果是可点击的（比如 button、a 标签），此时 click 事件还是有效的，这点要特别注意。解决方法：将事件委托到非document和body下 给标签添加custor: point...

原创 小程序hidden在display:block下失效

<view> <text hidden="{{ true }}">这是错误信息</text></view>在将text设置为display:block后，hidden的作用失效。

转载 npm install和cnpm install时的不同

如果package-lock.json存在，则两者安装后结果可能不一样。因为cnpm install安装时，是不会去从package-lock.json中读取依赖包的版本信息的。npm 5版本，在延续npm 3扁平化依赖包安装方式的基础上，新增了一个package-lock.json文件。package-lock.json的主要作用就是锁定依赖项的安装目录和依赖包的版本信息。关于pa...

原创 千位分割符的理解

本文请结合正则表达式中?=和?:和?!的理解一文一起“食用”，该文最后举个一个千位分割符的例子，本文将对该例进行分析。"1234567890".replace(/\B(?=(?:\d{3})+(?!\d))/g,",")经过分析，发现好像加不加非捕获分组(?:)对结果都没有影响，但是很多地方给出的正则表达式都会加上，不知道为什么...

转载 img图片不显示时设置默认图片

img标签显示图片：<img src="url" alt="error txt" />当图片地址错误时，就是显示error txt，为了更好的用户体验，通常我们可以设置一张默认图片，当图片地址错误时，就显示该默认图片。img是自闭合标签，所以一般不会去考虑使用伪元素before或after，但是，经过测试，在chrome68.0.3440.75上确实可以使用的，当图片地址...

转载 flex弹性布局兼容写法

今天在写h5活动的时候，使用到了flex布局，在chrome浏览器手机模式下测试一切ok，然后使用真机(iphone 5c)时，就发现了各种问题

转载 webpack中loader和plugin的区别

原文地址：详解webpack loader和plugin编写一、webpack的常见配置const webpack = require("webpack");const path = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = { /...

转载 position：fixed失效

参考文章：position失效了？设置了position为fixed的元素，如果其祖先元素的transform不为none，则该元素会相对于该祖先元素进行定位，而不是相对于窗口进行定位。一个使用swiper做的tab切换，因为只需要在单个tab页内添加一个顶部按钮，因此在位置1处添加了button，然后使用position:fixed进行定位。<div class="swi...

原创 js实现深拷贝

方法一：递归方法function deepClone(obj){ var copy = obj instanceof Array ? [] : {}; for(var key in obj){ if(obj[key] &amp;&amp; typeof obj[key]==="object"){ copy[key] = deepClon...

原创 table的box-sizing在不同浏览器下的表现不一样

下面通过一个实例来说明该属性：<style> html * { margin: 0; padding: 0; } table { width: 100%; border: 1px solid red; box-sizing: content-box!important; ...

原创 返回结果是一个对象obj，但是obj instanceOf Object返回false

今天在使用koa的使用，为了判断传入参数中是否正确，使用了object的hasOwnPrototype，但是却发现代码报错了。首先获取到参数：var params = ctx.query;然后判断返回对象中是否存在指定参数，如user参数：params.hasOwnPrototype("user")最后执行的时候，发现代码报错执行params instanceOf Object，发现返回的...

原创 react-router设置path无效，错误信息Cannot GET /xxx

为了写react demo，搭了一个简介版的环境，因此webpack配置极其简单：const path = require(&quot;path&quot;);const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);module.exports = { mode: &quot;development&quot;, entry: { app:..

原创 使用gulp-inject自动注入css或js

今天加到一个需求，需要在所有的页面中增加埋点，因为所有页面比较多，而且页面中没有引入公用部分，所以想有什么绑定可以动态加载页面呢？毕竟在每个页面中手动去加载一个文件是比较低效的工作。受另一个项目的启发，想到是否可以在打包时引入。除了解决这个问题以外，还有一个原因就是不想在开发环境下引入埋点。经过资料查询，找到一个插件gulp-inject(因为项目是使用gulp打包)可以满足这一要求，gulp-...

原创 CSS中display/float/position属性值的相互影响

CSS中有三个属性与页面布局和box的创建有关：display，position和float，但是如何同时设置了三个属性，则三者之间有优先级关系：

转载 webpack配置react-hot-loader热加载局部更新

csdn的收藏有点鸡肋，只好以博客的形式记录下来。原文地址：https://blog.youkuaiyun.com/huangpb123/article/details/78556652我们知道webpack-dev-server已经是热加载了，能够做到只要代码修改了页面就自动更新，那么为什么在react项目中还要安装react-hot-loader呢？两者有什么区别呢？webpack-dev-serve...

转载 本地文件上传至git

原文地址：https://www.cnblogs.com/eedc/p/6168430.html摘录下来，以便查阅。(进入项目文件夹)通过git init把这个项目变成git可以管理的仓库把文件添加到版本库中：使用git add .添加到暂存区里面去，后面的.意为添加文件夹下的所有文件用命令git commit告诉git，把文件提交到仓库git commit -m 提交说明关联...

原创 nginx反向代理地址是域名时请求不通的情况

使用nginx的反向代理，是解决跨域的一个重要方法。在nginx的配置文件中，我们通常可以看到这么一段：proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;从名字proxy_set_he...

转载 mongoose 验证是否是 ObjectId (_id)

方法1：console.log( mongoose.Types.ObjectId.isValid(id))方法二：console.log(/^[a-fA-F0-9]{24}$/.test(c) )原文地址：https://www.zhubenjie.com/article/5bbd5fc2716e9710a2cb549a

原创 Number.parseInt和parseInt

我们都知道在js中，可以通过Number.parseInt() 方法把一个字符串解析成整数。该方法和全局的 parseInt() 函数是同一个函数。但是，今天在用iphone 5c测试h5页面时，却发现一个问题，那就是Number.parseInt方法无效，必须使用parseInt。...

转载 webPack打包React,组件中import的scss顺序在开发环境和生成环境打包顺序不一致

webPack打包React,组件中import的scss顺序在开发环境和生成环境打包顺序不一致CSS resolving order

原创 使用React.cloneElement()给子组件传值

react提供了一个克隆组件的API：React.cloneElement( element, [props], [...child])可以利用该方法，给子组件传值，使用如下：class Parent extends Component{ constructor(){ super(); this.state = { count: 1 }; } getChil...

转载 border-radius:50%和100%的区别

在使用border-radius时，发现有些人使用50%，有些人使用100%，都可以得到一个圆，那这两个值到底有什么区别呢：border-radius的值是百分比的话，就相当于盒子的宽度和高度的百分比。如一个50px 150px的方形，如果border-radius设置为100%，则等价于：border-radius: 50px/150px;而border-radius又是由border...

转载 js实现复制文本到剪切板

代码：&lt;script type="text/javascript"&gt;function copyUrl2() { var Url2=document.getElementById("biao1").innerText; var oInput = document.createElement('input'); oInput.va...

原创 正则表达式中使用test方法时不要忽略lastIndex属性带来的影响

const handlePage = (page) =&amp;gt; { const reg = new RegExp(`${page}_`, &quot;g&quot;); return (action) =&amp;gt; { if(!reg.test(action.type)){ return &quot;error&quot;; } return &quot;success&quot;; }}const p

原创 nginx一台服务宕机如何正常访问其它server(负载均衡)

最近在学习nginx知识，今天看了下upstream模块，但是在测试的时候发现一个问题。当一台服务器宕机后，没有尝试访问其它server。台式机配置如下：server { listen 80; server_name test.com location / { proxy_pass http://test_upstream; // 笔记本上此处设置为http://127.0.0.1:...

原创 js中创建对象和继承的方法

原创 判断设备是否为移动端

常用方法：获取user-agent，如果user-agent中包含Mobile，则为移动端其它方法：'ontouchstart' in document如果返回true，则设备为移动端，否则为pc端

转载 元素class类名的添加和删除之classList

相信很多人都知道通过element.className的方式给元素添加class属性或获取元素的class属性。本文要介绍的HTML DOM classList是也可用于给元素添加、移除或切换class属性。classList的基本使用：一、语法：element.classList返回的是一个DOMTokenList类数组对象。二、属性：length 返回类列表中类的数量value...

转载 git回滚代码

回退命令：git reset --hard HEAD^ 回退到上一个版本git reset --hard HEAD^3 回退到前3次提交之前，回退到前n次提交之前就将3改成相应的数字git reset --hard commit_id 回退/前进到指定commit强推到远程：git push origin HEAD --force...

原创 git如何合并其它分支的部分文件或文件夹

如：想要将分支B下public文件下所有文件和view下index.html文件合并到分支A// 首先切换到分支A git checkout A // 合并 git checkout B public/** view/index.html注意：因为public下可能有多层目录，所有不能使用public/*...

原创 让你一次了解document.forms和document.formName的兼容性

今天在代码中不小心写了两个name相同的form表单，然后通过document.forms[formName]形式获取到的只有第一个表单，然后深入学习了下document.forms[formName]和document.formName的区别和兼容性。下面先测试了下document.forms[formName]、document.forms.formName、document.formNam...

原创 requestAnimationFrame实现setInterval类似功能(不考虑requestAnimationFrame兼容问题)

&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&a

转载 浏览器进程

浏览器是多进程的，主要包含的进程有：Browser进程：浏览器的主进程(负责协调、主控)，只有一个。作用包括：负责浏览器界面显示，与用户交互。如前进后退等负责各个页面的管理、创建和销毁其它进程将Render进程得到的内存中的Bitmap，绘制到用户界面上网络资源的管理、下载等第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建GPU(Graphics P...