- 博客(56)
- 收藏
- 关注
RSS订阅
原创 网站滚动条的重构（附详细代码和注释）
最近 看了一下网上关于自定义滚动条的描述，有些使用webkit内核的浏览器滚动条实现定制，也有一部分更简单，直接编写成了插件。我个人认为既然是重写网站滚动条，我觉得有必要从底层开始重构一下滚动条，毕竟我们 更喜欢自己亲手打造的东西。下面将进行梳理。首先游览器都会有自己默认定义的滚动条，我们可以通过通过body,html{height:100%; overflow:hiden;}的方式对其进行禁...
2018-08-23 23:13:17
292
原创 通过一个例题彻底理解原型链
今天看到了一个有意思的原型链例题，可以很好的理顺思路。 首先我们来描述一下下面这段代码的思路。构建两个对象，学生和人类。 人类拥有name, age属性，和hi(), walk()函数（通过原型）。 学生通过Student.prototype=Object.create(Person.prototype);原型继承到name和age属性，并且在学生原型下建立hi()，learn()函...
2018-07-29 16:39:34
443
原创 mac升到11.0.1后android 打包报错 Could not find tools.jar
MAC(OSX)升到 11.0.1 bigsur 后 android 打包报错 Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation.1、首先查看地址查看 JDK 位置的命令 /usr/libexec/java_home -V（升级 OSX11.0.1 后，执行这个命令可能看
2020-12-07 15:40:09
4397
2
原创 前端umi2.x项目start的时候报cannot find module ‘@babel/helper-validator-identifier‘，并且npm run tsc会有很多报错
用npm 重新装一下试试，不清楚原因
2020-10-16 20:07:30
2469
原创 Xcode build to 真机报错：Verify the value of the CODE_SIGN_ENTITLEMENTS build setting for target “owner“
解决方法：Open ios/Runner.xcworkspace in Xcode 10 beta 3From Xcode menu select: “File ~> Workspace settings…”Change selected build system from “New build system (Default)” to “Legacy build system”
2020-08-17 10:51:12
1256
1
原创 项目第一次pod install时glog报错
第一次安装环境创建工程 pod install 出现 glog 脚本报错（如下图）.直接在项目里执行 sudo xcode-select --switch /Applications/Xcode.app 即可
2020-08-12 11:56:32
1141
原创 vercel使用指北
关于icloud内储存在碎片文件导致的<finder访达卡死现象>问题描述： 每次开机后finder卡死。任何icloud同步的文件的位置移动都会导致finder卡死或崩溃。问题定位：icloud云盘启动。并且开启了与某个文件的关联(如桌面与文稿，假设是桌面，下面以桌面描述)。并且你的左面存在大量碎片文件，如前端工程文件内的node_modules。问题解决：#1 首先建议你对...
2020-04-22 17:08:41
12303
8
原创 RN build时提示xxx程序包不存在，字符不存在
Task :react-native-spinkit:compileReleaseJavaWithJavac FAILED/data/app/dongdianyi/node_modules/react-native-spinkit/android/src/main/java/com/react/rnspinkit/RNSpinkit.java:5: 错误: 程序包android.support...
2020-04-16 21:54:21
1294
翻译 When to use JSX.Element vs ReactNode vs ReactElement?如何在ts中选择jsx.element和ReatNode类型
A ReactElement is an object with a type and props.interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> { type: T;...
2020-01-15 14:23:00
3236
2
原创 结合antd layout做自适应的可见区高度
目的: 当content组件高度不足一屏时，中间部分会塌陷，所以加minHeight让他不足一屏时自动占满一屏。restHeight 是除了content的部分，比如header + footer的高度值。所以minHeight: document.documentElement.clientHeight - restHeight具体代码：import React from 'reac...
2019-12-19 11:08:21
7939
原创 custom类antd menu
工作需要封装了一下如下图的menu，实现比较简单，使用也比较简单。比较来说没有antd menu好用，大家看个思路自定义自己的menu；技术栈 react + umi + ice-store + hooks + ts + less + antdindex.tsx如下/* * @文件描述:Menu菜单 * 参数 menus数组 见接口 * @作者: 于效仟 * @Date: 20...
2019-11-28 17:02:12
417
原创 解决轮播图组件异步加载后第一张为最后一张图的问题
我使用的是react-slick插件，其实无论哪个插件好像都没有异常处理，你如果用本地资源去做加载的时候是不会出现异常的。但是当你使用如ajax去异步请求数据时就会出现问题。原因：当页面还没有接收ajax数据的时候，swiperList是空数组，轮播图的初始创建是通过空数组创建的，当ajax获取数据后，swiperList变成真正的数据项，再传给子组件时，才获取到新的数据，重新渲染新数据对应的...
2019-11-28 16:56:19
1299
原创 隐藏横向和纵向滚动条
通过如下代码块，多数时候都好用。html { /*火狐下隐藏滚动条*/ scrollbar-width: none; height: 100%; } body::-webkit-scrollbar { display: none; }
2019-11-16 11:43:48
523
原创 JS如何优雅的删除对象中的指定属性？
基于React钩子的轻量级状态管理解决方案 Ice-store 的简单使用优点极简 API：只有 5 个 API，简单上手，使用方便，不需要学习 Redux 里的各种概念。React Hooks：拥抱 Hooks 的使用体验，同时也是基于 React Hooks 实现。集成异步状态：记录异步 action 的执行状态，简化 view 组件中对于 loading 与 error 状态的渲染...
2019-09-19 18:10:47
3616
原创 从js传属性到css文件中
如果你写大量的布局和适配方案，可能会想，可不可以把一个参数值传给css文件呢。比如js内有多种渲染情况，如render一个list或者只是一个div可能是完全不同的布局。我们首先会想到可以判断一下类型并且用三元表达式复制给需要响应标签一个className。这里我发现了一个更好的方法。JavaScript 操作 CSS 变量的写法如下。// 设置变量document.body.style...
2019-09-04 17:51:12
2868
原创 判断不同设备后重定向到不同url的nodejs实现
我们在开发时可能会遇到这种问题。你用的手机端需要跳转到 m,xxx.com ,PC端跳转到taobao.com这样一个功能我们可以通过nodejs和user-agent属在这里插入代码片性判断来实现。具体代码如下:const express = require('express');const next = require('next');const dev = process.env....
2019-08-20 17:01:09
478
原创 移动端video点开后层级过高问题
网络上有很多关于该问题的解答，而且大家遇到的状况也是层出不穷。我初步分析是由于不同厂商和游览器内核版本等不同导致的标签解析和渲染问题。我仅仅以我的两个手机进行解答。首先我得机型分别是nubia z11 android 6.0.1和 huawei nova 3 android 9.0测试时间 2019.8.13两款手机的表现是，huawei 和 nubia未点击video时，video都是...
2019-08-13 10:13:11
11135
14
原创 Router.push('/link')不跳转顶部的问题解决
使用nextjs的Router.push跳转方法时出现了一个奇怪的问题，无法跳转到顶部，百度上大多都是对Vue的解决方案。netxjs解决方案：Router.push('/link').then(() => window.scrollTo(0, 0));其实换汤不换药，都是一个思想，跳转后滚动到顶部。我觉得最好的实践是通过路由变化监听的方法，只要发生跳转就让他跑到顶部：const...
2019-08-12 16:26:37
1788
原创 nextjs报错:'NODE_ENV' 不是内部或外部命令
最近在使用next.js的时候，在生产模式下使用nodejs跑server.js文件时，运行"start": "、 NODE_ENV=production node server.js", 出现‘NODE_ENV’ 不是内部或外部命令，也不是可运行的程序或批处理文件之前的配置:解决方法：安装cross-env：yarn add cross-env –d，再在NODE_ENV=xxxxx...
2019-08-12 10:58:30
3913
原创 移动端设置overflow-x:hiden后scrollTop失效并一直为0
在移动端h5页面开发时，我们可能需要监视scrollTop来控制一些顶部菜单样式变化。但是我们通常又会隐藏掉侧边栏，我们可以通过overflow-x:hiden来隐藏掉侧边滚轮。但是此时问题出现了，scollTop一直为0，且可以监听到滑动事件。此时我们首先会考虑兼容性问题，比如定义这么一长串东西const top = window.pageYOffset || document.docume...
2019-08-07 10:46:56
1447
1
原创 require引入图片，出现了Cannot find name 'require'. Do you need to install type definitions for node
我们经常会遇到这种引入图片的方式，webpack会自动找到该路径为我们引入该资源，但是我在项目初始化的时候使用require出现了这样的问题 ‘Cannot find name ‘require’. Do you need to install type definitionsfor node’解决办法：在tsconfig.json内的compileerOptions下添加 “t...
2019-07-15 10:15:42
8500
1
原创 taro初始化出现Unknown plugin "transform-decorators-legacy"解决
最近试了一下taro写h5项目，并初始化了一个项目。在通过yarn dev:h5启动时报错， 应该是包文件出了问题，此时可以通过执行如下指令解决。npm install babel-plugin-transform-class-properties babel-plugin-transform-decorators-legacy babel-plugin-transform-export...
2019-07-09 15:53:18
4871
3
转载 js将手机号中间四位变成*号
当我们使用一种语言时会出现各种问题，通常的解决办法是通过console.log打印各种变量查看状态来解决问题。但是当我们使用RN开发时，由于窗口在模拟器中无法查看打印。下面是我的解决方法：首先下载调试工具 react-native-debugger 官网有winds和mac两种版本，移步到官网自行下载。下载后打开工具，会发现左下角显示:没有设备连接的英文。此时打开模拟器调试面板并点击如...
2019-07-08 10:57:42
1063
2
原创 移动端页面几个常用的代码块一键粘贴
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /><script src="https://as.alipayobjects.com/g/component/fastclick/1.0....
2019-03-27 11:55:08
907
原创 typescript下的重载
重载允许一个函数接受不同数量或类型的参数时，作出不同的处理。比如，我们需要实现一个函数 reverse，输入数字 123 的时候，输出反转的数字 321，输入字符串 ‘hello’ 的时候，输出反转的字符串 ‘olleh’。利用联合类型，我们可以这么实现：function reverse(x: number | string): number | string { if (typeo...
2019-03-15 14:11:24
1297
2
原创 每日开脑
.实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制 // 方法一：Object.prototype.clone = function(){ var o = this.constructor === Array ? [] : {}; for(var e in this){...
2019-02-17 17:03:17
93
原创 每日开脑
有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。function serilize...
2019-02-16 22:19:33
85
原创 故事，你不知道的bootstrap
今天看到了一张照片。最后一排写着，90年创办了BootStrap。但是我印象中BootStrap从2.0版本到现在也没有这么长时间呀，我便搜了搜BootStrap官网的关于。是这样写的：Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架没有这位老先生的名字呀，我...
2018-12-26 23:24:47
448
原创 VUE项目初步构建的一些理解
首先对页面进行分析，定义state，state应该为页面显示会用到的数据或者请求回来的数据的保存容器然后可以先写mutations因为对state的直接我们比较容易思考。mutations有两个参数(state,{传过来的数据}),mutations是一个用于直接修改state的函数的对象。那么mutations怎么触发？actions站出来了。actions包含n个用于间接更改数据的方法的对...
2018-12-23 00:01:07
138
原创 Vue核心源码的理解
我的理解是结合GitHub中一个MVVM.js的源码进行分析，该源码对vue的核心源码进行了分离。并且借助下面的流程图可以有助于理解。当我们使用new MVVM({})方法时，第一个执行的函数应该是observer，它的作用是监视data中所有层次的属性，并且会创建一个与data中属性一一对应的dep对象。data方法之后执行的函数是compile，他的作用是编译模板。它内部做了三件事。...
2018-12-18 22:28:36
579
原创 数组常用方法总结以及伪数组转真数组的方法
###数组常用方法总结以及伪数组转真数组的方法##1.数组的操作方法*1. arrayObject.concat(arrayX,…,arrayX) 用于连接两个或多个数组,基于当前数组，创建一个新的数组，并返回这个新数组，不会改变原数组。 代码示例: var color1 = ["red","green","blue"]; var color2 = color1.concat("...
2018-12-17 19:28:54
1818
原创 Vue入门学习笔记
1. Vue.js是什么?1). 一位华裔前Google工程师(尤雨溪)开发的前端js库2). 作用: 动态构建用户界面3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效率高, 移动/PC端开发 * 它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目4). 与其它框架的关联: * 借鉴angular的模板和数据绑定技术 * 借鉴react的组件化和...
2018-12-14 22:52:08
342
原创 使用JS定义一个代表栈类型的模块
栈和队列在内存中不真实存在，而是通过JS代码形式封装出的抽象的内存结构下面我们来定义一个代表栈类型(构造函数/类)的模块其内部使用数组实现，并具有以下功能：push(element): 添加一个或是几个新元素到栈顶pop(): 移除栈顶的元素，同时返回被移除元素peek(): 返回栈顶的元素，但并不对栈顶的元素做出任何的修改size(): 返回栈的元素个数isEmpty(): 检查栈...
2018-12-11 23:48:39
378
原创 关于express和mongoose的简单服务器配置
1首先要清楚是服务器配置,几个文件 index.js db modules router2new express 拿到app => app.listen(3000,err => {…}) => 对3000接口进行监听3然后写路由，路由设置有两种方式-app,get(’/path’,(req,res)=>{}) 直接设置，当页面比较少的时候实用-当页面功能较多...
2018-12-10 18:09:59
351
原创 react项目成型的个人心得
此文是我在react项目搭建后对整个流程的一些环节进行整理和梳理，如有错误还请指正。一般目录结构搭建好后，我们会首先在src中开始工作，因为大多数代码都是在src中完成的。这里要说一个React项目的构建思想：1 准备工作快速构建React项目，我采用的是脚手架构建方式。首先我们需要复制一个脚手架。将里面public、src文件夹下的文件全部删除。接着将需要的html粘进public文件...
2018-12-10 18:07:47
979
转载 JavaScript事件委托的技术原理
使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。基本概念非常简单，但仍有很多人不理解事件委托的工作原理。这里我将要解释事件委托是如何工作的，并提供几个纯JavaScript的基本事件委托的例子。假定我们有一个UL元素，它有几个子元素： <ul id="parent-l...
2018-11-12 18:16:02
195
原创 web浏览器和web服务器的交互过程和输入URL后的过程
web浏览器和web服务器的交互过程例：用户访问东南大学主页 Http://www.seu.edu.cn/seu/welcome.htm，浏览器与服务器的信息交互过程如下：(1)浏览器向DNS获取web服务器www.seu.edu.cn的IP地址：202.119.24.11(2)浏览器与IP地址为202.119.24.11的服务器进行TCP连接，端口为80；(3)浏览器执行HTTP协议，...
2018-10-29 21:54:27
2683
原创 移动端1px边框
目的：dpr为2或3时，即iphone6/7/8或iphone 6p的不同设备下，元素边框都为1px。实现思路：border用伪元素实现，当dpr=2时，通过scaleY=0.5实现边框为1px的效果代码如下：html内容<!DOCTYPE html><html> <head> <meta name="viewport" content="...
2018-09-17 20:39:43
171
原创 rem、viewport、1px适配
###rem适配优点：可以使用meta标签， 可以实现等比缩放 缺点：换算比较麻烦核心思想：基于rem，布局中元素单位为rem，html根元素字体大小设置成屏幕宽rem适配： 设计图纸较大 ，元素相对较多 （750px,1080px）<!DOCTYPE html><html> <head> <meta charset="UTF-...
2018-09-17 20:30:36
889
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人