- 博客(36)
- 收藏
- 关注
RSS订阅原创 react-grid-layout 拖拽元素时滚动条不能跟随
在使用react-grid-layout拖拽元素时出现了滚动条不能跟随拖拽元素滚动的问题，在百度和google上都没有搜索到原因，后经过和官方案例的debug，发现是样式多了一个user-selector:none 属性造成的
2021-10-18 09:31:47
650
原创 webstorm正则表达式遍历
以下代码为webstorm全局搜索中正则表达式的搜索\{t\('(SePD3fh5UydV|KpXceEM3Bxym|Eb35o1GpY2wH|qXcIxWH0wfme|4w0vLDgk2HpJ|LgSYGnDKlo18|7GsHMeZRcOo5|F7vQkExyDeJW|sKFj6JTo3dgR|ATEShV9NUIs0|os6aRujx4WO1|QhkBjlzEZdXg|Jb58ztQEl0KG|nblXYD18twMA|5NkjP3IguQWR|mpzRZiGdbJB0|reEG4wpmcRhX|i
2021-10-05 23:16:22
476
原创 解决react router刷新后跳转其他页面的需求
解决react router刷新后跳转其他页面的需求在开发工作中碰到了一个需求，页面刷新的时候需要跳转到另外一个页面，只有正常的案件逻辑才能进行下一个页面的渲染此前尝试使用过onload、onbeforeunload事件，搭配localStorage存储一个prevRoute来进行判断是否是刷新后的页面，然后在load之后进行页面的跳转，但是方法实现之后发现效果非常不好，而且还涉及到一些其他的逻辑判断，所以查找是否有其他方式解决此问题。后续查找react router如何实现传参时，忽然意识到，不同的
2021-05-08 23:04:39
863
原创 关于js date 最近发现的几个坑
关于js date 最近发现的几个坑使用new Date().toLocaleDateString()时返回的数据格式不一致该问题是由于浏览器的语言不同导致的，例如在中文下会返回‘2021/2/2’, 而在英文环境下会返回‘2/2/2021’new Date(‘2021-02-02’).getTime() 不等于 new Date(‘2021-2-2’).getTime()该问题暂未找到文本上的依据，不过在查看new Date(‘2021-02-02’)和new Date(‘2021-2-2’)的
2021-02-02 14:25:03
260
原创 d3制作桑基图，由v3切换到v5
更改d3版本后运行代码发现提示以上错误，然后跳转到sankey.js中查找源码通过断点调试，发现此处的source和target的索引都为-1，继续向上追寻发现此处所有的name都是携带$符号的，继续查找自己写的代码此处发现结果是携带符号的，所以可以确定代码的问题出现在graph.nodes = d3.keys(d3.nest() .key(function (d)...
2020-04-03 17:15:21
492
原创 d3 渲染path为直线时，渐变色无法适用
<path class="link" d="M15,15.345833333333333C279,15.345833333333333 279,15.345833333333333 543,15.345833333333333" style="stroke-width: 30.6917; opacity: 0.15; stroke: url("#gradient26&am...
2020-04-02 09:40:35
537
1
原创 使用最新的create react app脚手架创建项目后如何使用DllPlugin打包出不常变更的第三方库
思路由于不管是上测试环境还是上生产环境，都需要经常打包代码，但是如果把事件都花在打包代码上得不偿失，所以可以把不常变更的第三方库都单独打包出来，然后只打包自己的逻辑代码，这样就可以加快打包速度具体实现1. webpack.dll.config.js如图，在config目录下创建webpack.dll.config.js，添加代码：// webpack.dll.config.jscon...
2020-01-10 16:31:56
569
原创 使用webpack时发生Cannot read property 'tap' of undefined
webpack设置后出现报错信息使用webpack的插件时要注意不要放错位置，create-react-app生成的项目目录使用eject解压缩之后的webpack设置中会有包含在resolve中的plugins，在使用类似webpack.DllReferencePlugin这种插件时要注意放在正确的位置，否则会在运行时出现’tap’未定义的问题...
2020-01-10 14:35:38
4912
3
原创 切换语言时如何切换字体
css选择器有一个方法是:lang(en),使用该方法可以进行语言切换:lang(cn){ font-family: 'Noto Sans SC', sans-serif !important;}.loadingTitle { height: 48px; font-size: 48px; font-weight: normal; font-stretc...
2019-07-30 11:08:32
588
原创 使用d3创建搭配foreignObject实现svg文本换行，出现文字不显示的问题
.append('xhtml:p')对于非svg标签，需要添加xhtml:来标识，否则不能显示内容
2019-06-06 14:16:35
2400
原创 加载模型后模型周边会出现失真
原因：半透明材质需要单独设置解决方法：object.traverse(function (child) { console.log(child) if(child instanceof THREE.Mesh) { child.material.transparent=true; ...
2019-05-31 17:38:13
301
原创 如何在三维空间中画线
function initLine(){ var point = new THREE.Vector3(0, 0, 20) console.log(point) TweenMax.to(point, 2, {x:-10, y:-10, z: 20, onUpdate: () => { var material = ...
2019-05-06 14:57:43
1833
原创 使用HTML元素作为sprite添加到场景后无法转动视角的问题
controls = new THREE.OrbitControls( camera, renderer.domElement );在使用OrbitControls时，第二个参数传递了renderer.domElement，但是当 labelRenderer = new THREE.CSS2DRenderer(); labelRenderer.setSize( window...
2019-05-03 18:08:48
424
原创 safari请求usdz文件不能看到webAR的效果
请求的content-type需要改为model/usd，才能在safari中打开usdz文件
2019-03-12 16:36:35
1094
原创 react中如何实现类似VUE的具名效果
在子组件中使用this.props时，该属性有一个children属性，使用该属性即可获取父组件包含的内容例如：import React from 'react'class JobManagement extends React.Component{ constructor(props){ super(props) this.state = { ...
2019-02-28 10:06:05
771
原创 在React中使用H5接口IntersectionObserver实现图片懒加载
export let picLazyLoad = function(){ let observer = new IntersectionObserver( (changes) => { changes.forEach((change) => { if(change.intersectionRatio >...
2019-02-22 14:31:57
1255
原创 如何使用css对图片进行截取
例如图片长这个样子，但是设计图给的图片实际没有黑边。这个时候如果我直接将图片嵌入div，就会出现图片被压缩的情况。例如这样：解决方法如下：<div class="imgDiv"> <img class="img" src=src /></div> .imgDiv { width: 240px; height: 135px; overf...
2019-02-19 11:20:41
815
原创 React hooks
Hooks何时使用hooks如果你编写一个函数式组件并意识到你需要为它添加一些 state(状态) ，那么之前你必须将它转换为一个 classes(类) 。 但是现在，您可以在现有函数式组件中使用 Hook 。也就是说，在React的早前版本中，如果想创建一个携带state（状态）的组件，就只能使用Class来创建，无法使用函数式创建方法。使用hooks之后，可以使用函数方法创建组件，并...
2019-01-21 11:15:46
107
原创 MapBox reverse geocoding
如果想根据经纬度获取国外的地区信息，可以使用MapBox来进行反向编码：L.mapbox.accessToken = '<your access token>';var a = L.mapbox.geocoder('mapbox.places') a.reverseQuery({ lat:39.983887, lng: 116.48348 }, function(err, da...
2018-12-07 15:19:57
507
原创 如何防止在3G网络下图片加载出来时文字会下落的情况
解决方法：撑开div的高度，给图片加载留出空间.item-img-wrapper overflow: hidden height: 0 padding-bottom: 33.9% .item-img width: 100% <div class="item-img-wrapper"> <img class="item-img" ...
2018-11-30 15:15:40
89
转载 给定A, B两个整数，不使用除法和取模运算，求A/B的商和余数
第一种办法：从小到大遍历 for(i = 2 to A - 1) if(i * B > A) 商 = i- 1, 余 = A - (i -1) * B第二种办法二分法，在[2, A]中查找满足的解第三种办法以除数为初始测试值，以2的指数为步长来搜索问题空间，当被除数与测试值的差小于除数时便结束搜索，若在这之前测试值大于被除数，则将被除数减去前一个测试值，并重复上述过...
2018-11-20 11:39:25
2756
原创 有关React的State初始化的问题
使用create-react-app脚本工具时初始化state可以用如下写法：class Example extends React.Component{ state = { name: "name" } onValueChange = (e) => { this.setState({ name: e.target.value }) } render(){...
2018-11-14 11:45:20
1737
原创 HOC和Redux的connect
HOC高阶组件（HOC)，个人认为其实就是将已写好的组件外层再包裹一层，进而可以达成以下操作：代理props反向继承（Inheritance Inversion）属性代理const HOC = (WrappedComponent) =&gt; class WrapperComponent extends React.Component{ render(){ const ...
2018-11-14 11:36:49
500
原创 JS实现并发Ajax请求
问题：有A、B、C三个请求，C请求需要A、B请求获取到的数据，如何解决此前碰到这类问题都是直接改为串行解决，先获取到A然后A的回调调用B，B再调用C。最近发现了解决方法：JQ：jq1.5版本之后重写了AJAX，并且新增了一个新功能：deferred对象$.when(A(), B()) .done(function(){console.log('done')}) .fail(func...
2018-11-12 10:31:05
2558
原创 学习webpack中遇到的问题
缺少less模块除了要安装less-loader之外，还要安装less： npm install lessless中"#"未定义在webpack.config.js中配置加载less需要使用的插件时，除了安装的less-loader之外，还需要style-loader和css-loader： { test: /\.less$/, rules: [ 'style-l...
2018-10-17 15:55:26
113
原创 webstorm出现failed to change read-only flag for webstorm的问题
sudo chown -R username 项目目录-R的R区分大小写
2018-10-12 10:45:18
5305
原创 Flex布局
Flex布局List item运用在flex container上的属性flex-direction： 确定主轴方向flex-wrap： 设置是否换行flex-flow： 设置主轴方向和是否换行justify-content：延主轴方向的布局方式align-item： 延交叉轴方向的布局方式align-content： 多根轴线的布局方式运用在Flex items上的属...
2018-09-26 17:23:55
117
原创 深拷贝和浅拷贝
类型和原数据是否指向同一对象第一层数据为基本数据类型原数据中包含子对象赋值是改变会使原数据一同改变改变会使原数据一同改变浅拷贝否改变不会使原数据一同改变改变会使原数据一同改变深拷贝否改变不会使原数据一同改变改变不会使原数据一同改变浅拷贝数组直接遍历let arr = [1,2,3,4]function shallowCopy(...
2018-09-19 18:46:36
72
原创 图片旋转
做项目时有一个需求是一个指针在一段时间内旋转一定角度指向某个头像： $('#cssTest').css('transition-duration', '1s').css('transform', 'rotate(0deg)')transition-duration设置过渡效果持续时间transform: rotate(10deg)设置以10deg旋转...
2018-09-18 11:20:20
115
转载 移动端点击出现蓝色框的解决方案
/这一句是用来解决在安卓上的点击出现篮框问题/body{ -webkit-tap-highlight-color:rgba(0,0,0,0); }/下面是解决ios上去除微信点击蓝色边框 /a:focus,input:focus,p:focus,div:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-us...
2018-09-17 16:57:18
4097
转载 关于IOS移动端H5返回之后不刷新
在网上找了几个答案都没有解决，但是在Github上找到了解决办法浏览器往返缓存（Back/Forward cache）问题的分析与解决感谢原作者！
2018-09-17 16:15:19
1509
原创 在做socket有关的H5时，遇到同时投票排名页会出现混乱的情况
setTimeout(function () { $('.ResultListDiv > ul').empty() JSON.parse(dataJson.data).map(function (value, index) { console.log(value, ...
2018-09-17 10:17:46
166
原创 使用Better-scroll不能横滚
初始化BScroll的时候需要设置scrollX和scrollY还有用js来动态设置ul的宽度：$('.myScroll ul ').width(6.75 * dataJson.count + 'rem') var myScroll = new BScroll('.myScroll', { ...
2018-09-14 11:50:22
539
原创 Javascript高级程序设计重读
Javascript高级程序设计重读基本概念typeof null // object特殊值null被认为是一个空的对象引用if(car != null){ // 对car进行某些操作}如果定义的变量准备在将来用于保存对象，最好将该变量初始化为nullnull === undefined // falsenull == undefined // tr...
2018-09-10 17:51:47
196
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人