- 博客(67)
- 收藏
- 关注
RSS订阅
原创 详解react hooks(含高阶组件)
一. 面试中出现的关于hooks的题目1. 简单介绍下什么是hooks，hooks的优点？React Hooks是react团队研发的，它主要有两方面作用：用于在函数组件中引入状态管理和生命周期方法取代高阶组件和render props来实现抽象和可重用性在hooks出现之前，只有在类组件中可以使用本地状态管理和生命周期方法，函数组件只能是无状态组件，因为函数组件使用便利优雅，已经被广泛使用，后期如果函数组件需要承担一些副作用，只能把它重构成类组件，hooks的出现就不需要重构了。它帮助函数组
2020-06-01 15:22:38
26051
5
原创 h5拖拽api (drag,drop)实现多图片拖动排序，兼容移动端
需求：h5页面实现允许多张图片上传并且支持对图片长按拖动排序，由于我们的h5页面在pc端和移动端都有入口，因此拖动排序需要兼容pc和移动端。这里不涉及图片上传，只涉及对上传的图片进行拖动排序。在开发前需要知道，h5拖拽api(drag/drop)基本只支持pc端（但是，我在实际开发中，发现很多安卓手机也支持这个api, ios端不支持），因此我们如果使用拖拽api，需要做移动端的兼容。如果完全自...
2019-04-08 19:26:20
6560
原创 react中实现效果——点击除弹层区域的其他页面区域，弹层消失
比如如下面的情况： 当我们点击更多时候，页面出现一个弹层，点击叉叉，再次点击更多或者点击其中某个城市，这个弹层都会消失，但是现在我们希望点击页面其他任意区域弹层也会消失，为此，我们使用react实现它。首先我们在react的生命周期函数中增加监听器，给整个页面最顶级（window）增加一个点击事件处理函数componentDidMount() { window.addEven...
2018-08-28 11:29:25
7275
原创 react实现pc端图片轮播
1.开始展示多张图片效果图：点击左右按钮的时候可以滑动，当向左滑动完成之后，有按钮消失；当像右滑动完成之后左按钮消失。 解决方法：可以直接使用jquery的动画效果。。。（开始想使用原生js，各种报错。。。后边在想下） 具体操作：首先react组件中的图片是循环输出的，每次点击一个城市，其相应的景点信息就会输出在它的下方，需要操作的内容如下： <div classNa...
2018-08-21 09:36:26
7029
1
原创 前端性能优化web Worker在项目中的具体应用
1 实际项目中使用Web Worker下面这篇文章详细介绍了web worker常用的api, 场景(这里不知道有没有具体衡量指标)，使用过程中的注意事项，文章写的很好，感兴趣可以看下，这里不在详细叙述具体概念Web Worker使用1.1 场景这里分享的一个场景，是把从数据查询接口获取的数据的格式化过程放在web worker中执行。首先简单介绍下我们的项目，一个可视化相关项目，接口主要分为两大方面，配置查询和数据查询接口，其中数据查询接口是影响页面性能指标的一个很关键的因素，并且从查询接口获取
2022-02-15 11:59:02
1860
原创 构建属于你自己的基于react的前端UI组件库
一. storybook二. eslint+prettier+changelog构建代码规范三. 文档(gitbook/vuepress)四. 版本管理
2021-05-13 17:32:00
1129
3
原创 了解Hybird和小程序和react-native的技术架构
1. Hybrid App1.1 Hybrid app的优势Hybrid app是介于native和web之间的一种混合app，它既有native良好的用户体验和兼容性特点，又具有web跨平台和快速开发迭代的特点。可以对比下三种app 在开发成本，用户体验，迭代速度等方面的表现：webHybridnative开发成本低较低高用户体验差较优优迭代速度快速快速较慢安装不需要需要需要跨平台支持怼支持不支持1.2 Hybri
2020-09-26 13:45:35
601
原创 react状态管理工具redux还是mobx？
一、redux1. 工作原理： JavaScript 状态容器，提供可预测化的状态管理，严格遵守单向数据流2. 简单实现function createStore(reducer) { let currentState; // 始终保持最新的state const listeners = []; // 用于存储订阅者 // 订阅store function subscribe(fn) { this.listeners.push(fn) } // 获取最新state
2020-08-09 14:40:04
643
原创 前端面试中的es6
1. 说一下你所知道的es6（es6新特性）let和const声明变量，两个都有块级作用域，ES5中var是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明,且不能重复声明。箭头函数模板字符串模板字符串，更便捷的连接变量和字符常量解构赋值，允许按照一定模式，从数组和对象中提取值，对变量进行赋值for of循环，可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串支持import、export模块化管理代码set和map数据结构… 展开运算符可以
2020-06-16 17:29:16
430
原创 大厂面经 ----- 详解react 16之前的生命周期(附带完整demo)
1. 父子组件的生命周期执行过程1.1 首次渲染父constructor => 父componentWillMount => 父render => 遇到子组件进入子组件的生命周期 => 子constructor => 子componentWillMount => 子render => 子componentDidMount => 父componentDidMount1.2 数据更新数据更新主要是两个主要的生命周期componentWillRece
2020-05-28 20:24:51
338
原创 大厂面经---js面试常见考察基础题
1. typeoftypeof null === ‘object’2. NaN3. 类型转换'1'+2+3parseInt('123ab') //123parseInt('123ab')++Number('123ab') // NaN
2020-05-26 19:47:34
235
原创 大厂面经-js基础篇(必包/this)
1. 必包1.1 什么是必包必包是js语言的一种特性，主要包含的要点是函数会形成单独的作用域，同作用域的对象可以互相访问，作用域呈层级包含状态，形成作用域链，子作用域的对象可以访问父作用域的对象，反之不能。比如我们在a函数里面返回b函数，当 b 函数执行的时候，a函数上下文已经被销毁了啊，但是我们依然能读取到a作用域下的值？这是因为作用域链导致的，b函数引用了 a函数活动对象中的值的时候，即使 a的执行上下文被销毁了，但是 js依然会让 a函数活动对象活在内存中，b函数依然可以通过 b 函数的作用域链
2020-05-25 20:11:58
354
1
原创 大厂面经--js基础篇(执行上下文/作用域/变量对象)
1. 执行上下文1.1 什么是执行上下文var foo = function () { console.log('foo1');}foo(); // foo1var foo = function () { console.log('foo2');}foo(); // foo2// 变量提升function foo() { console.log('foo1');}foo(); // foo2function foo() { console.log
2020-05-23 20:09:45
220
原创 彻底搞懂js原型，原型链，继承
一、js中的原型和原型链和其他的面向对象编程语言不同，最开始js并没有引入class的概念，但是js中有在大量使用对象，为了保证对象之间的联系，JavaScript引入了原型与原型链的概念。1、什么是原型在js中，每一个构造函数都拥有一个prototype属性，这个属性指向一个对象，也就是原型对象。原型对象默认拥有一个constructor属性，指向指向它的那个构造函数，每个对象都拥有一个隐藏的属性[[prototype]]，指向它的原型对象。原型对象就是用来存放实例中共有的那部分属性。2. 什么是
2020-05-23 17:20:40
582
原创 史上最全面的http协议考点
一. http协议1. http协议的发展历程以及每个版本存在的问题1.1 http1.1优缺点1.1.1 优点针对tcp连接十分耗时，使用Connection: keep-alive增加了持久连接增加管道机制，在1.0请求必须排队发出的基础上增加了管道机制，请求可以同时发出，但是响应必须按照请求发出的顺序依次返回，性能在一定程度上得到了改善。在1.0版本，服务器端必须等到一操作全...
2020-05-04 07:27:07
308
原创 前端项目工程化工具webpack，gulp，babel的使用和原理
一、项目中的工程化node.js 运行时，npm 包管理expressjs 服务端框架babel 编译 ES2015+ 代码到 ES5webpack打包和压缩源码eslint 检查代码规范(腾讯那套)prettier.js 代码自动美化排版git hook规范代码提交格式（按照anjular.js）mocha 单元测试二、webpack使用和工作原理webpack是前端项目...
2020-02-22 18:02:19
1210
原创 使用eslint+prettier来构建前端项目提交规范
背景团队多人协同开发，为了保证代码质量，对代码制定规范化的标准是必须的，在此分享下，目前我们的项目采用的规范化手段：一、代码校验以及提交的过程中的配置在package.json中配置pre-commitpre-commit钩子可以在 git commits 之前运行一段脚本，比如在commit代码之前运行eslint，校验失败则代码提交失败，校验成功则允许提交代码。"pre-comm...
2019-12-26 20:54:14
991
原创 webpack原理，使用，优化
1.webpack的原理2.webpack的使用3.webpack的优化上图是采用常规webpack配置，并未采用优化手段打包，打包时间60s…
2019-10-10 19:53:18
962
原创 使用hash和history实现前端路由切换,含完整源码
1.什么是路由路由最早出现在后端，也就是服务器端的路由，对于服务器来说，当接收到客户端发来的HTTP请求，就会根据所请求的相应URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。对于最简单的静态资源服务器，可以认为，所有URL的映射函数就是一个文件读取操作。对于动态资源，映射函数可能是一个数据库读取操作，也可能是进行一些数据的处理，等等。然后根据这些读取的数据，在服务器端...
2019-07-20 14:32:40
1223
原创 微信小程序开发---微信获取微信绑定手机号并登录流程
一、微信原生调用步骤调用wx.login()获得codewx.login({ success: function(res){ console.log(res.code) }})开发者使用code在微信服务器调用接口获得openid，session_key，unionid（https://developers.weixin.qq.com/miniprogram/dev/a...
2019-05-22 15:56:54
5854
原创 移动端h5使用touchstart，touchmove实现多图片拖拽效果
1、需求描述：对移动端多张图片可以进行拖动排序(例子中使用两排5张图片)2、实现过程：主要思想就是能够通过用户手势，捕捉到被拖 动元素以及拖动结束后的被交换元素，通过交换这两个元素实现拖动排序。除此之外，我们还需要获得被拖动元素在拖动过程中的的left和top值，增加拖动过程中的效果。在这个过程中会用到移动端的手势事件touchstart,touchmove,touchend首先，需要...
2019-05-17 10:47:25
3608
原创 多个组件实例上添加事件监听器导致的问题
问题描述：最近在做项目遇到一个问题：项目是一个mvc的框架，在项目站内切换的时候不会卸载上一个页面的组件，这就会导致一个问题，如果一个组件被多个页面调用，并且该组件上涉及到添加事件监听器，如果使用getId的方式获得dom并添加事件监听器，那势必会导致在a页面的时候调用这个组件，并在a组件实例上添加了监听器，当进入到b页面使用getId的方式获得dom是a页面的，并且监听器也并没有被移除，那再b...
2019-05-10 16:21:10
1390
原创 微信小程序开发----分享
分享是小程序中使用最多的功能，包括小程序原生页面的分享和使用webview打开的h5页面的分享。原生页面：onShareAppMessage(),点击右上角的三个点分享会自动执行该函数，关于该函数需要注意：该函数是同步函数，里面涉及到的分享参数不能通过异步函数获取，如果想异步获取，需要在点击分享之前准备好相应参数分享参数要做好容错，不然很容易出现奇奇怪怪问题h5页面的分享：在小程序里...
2019-04-29 17:35:07
445
原创 微信小程序架构原理
一、相关SDK小程序SDK原生小程序页面开发使用微信提供的小程序基础库(小程序sdk：https://developers.weixin.qq.com/miniprogram/dev/api/)进行。小程序基础库提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。JS-SDK小程序内嵌的h5页面的开发，通过调用微信提供的JS-SDK(htt...
2019-04-28 16:36:25
1828
原创 获取图片高度问题------页面图片加载完成后获取图片高
问题描述：因为埋点的需要，需要判断一个产品是否进入用户可视区域，在实现过程中出现：每次新打开一个窗口，使用element.getBoundingClientRect().top的值都是错的，但是刷新页面，值又正常了。思考过程：为什么会出现这种情况啊，明明是在componentDidMount中做的处理，该生命周期函数运行的时候不是页面dom都加载完了吗，那不应该获取不到图片高度啊？是不是...
2019-04-26 17:01:47
2558
原创 windows下配置并运行react-native项目
因为后边要做rn项目，所以需要搭建下环境，过程中遇到很多问题，特记录下来。首先我是按照react-native中文网官方提供的教程进行进行安装的。react-native 需要的依赖的环境：node, python2, jdk，react-native-cli. 这里需要注意，python必须是2，jdk必须是1.8以上，jdk遇到过坑，因为本地安装了多个版本的jdk，使用java -ve...
2019-04-19 15:07:12
1355
原创 js中异步处理-------callback，promise， async/await
1. 回调函数callback回调就是在异步操作之后把得到的值传递给回调函数进行处理。function queryCity(latitude, longitude, callback) { wx.request({ url: "/restapi/soa2/10398/json/LBSLocateCity", method: "POST", ...
2019-03-28 10:25:08
1459
原创 项目遇到的问题以及解决方法---h5页面回退，保留前一个页面用户浏览位置
具体需求描述：一个h5的产品列表页，用户滑动列表页，当用户滑动到感兴趣的产品，点击进入详情页，浏览完详情页在回退到列表页能保留之前用户浏览位置。（react下开发）1.开始什么都没做，回退的时候自然无法保留用户浏览位置。2.然后考虑怎么解决，最开始的想法是保留scrolly的值，在回退的时候使用window.scrollTo()强制回退到上次浏览位置。但是这面临着一个问题，回退相当于重新加载页...
2019-02-22 17:55:17
2213
1
原创 项目遇到的问题以及解决方法---小程序页面因数据量大带来问题的优化
一 、问题描述：小程序开发中开发一个城市列表选择页，如下：但是由于接口返回的城市数量过多，导致首屏白页的问题：怎么优化这个问题？1. 首先考虑是把接口返回数据存储为本地文件，进行本地加载，可以节约请求回显时间，但是这种做法并没有使问题获得改善，这表示接口返回应该是很快的，请求或者本地并不是主要影响，那么主要影响可能是在真机上数据太大导致列表渲染耗时太长。2. 采用本地、分段加载：把按照...
2019-02-20 15:22:58
6328
原创 读you don't know js提取自己没注意的点
1. == 和===区别之前理解：前者检查值的等价性，而后者检查值和类型两者的等价性，一般随意两者随意使用读书之后理解：前者在允许强制转换的条件下检查值的等价性，而后者是在不允许强制转换的条件下检查值的等价性。判断是何时使用哪个的规则：如果一个比较的两个值之一可能是true或false值，避免==而使用===如果一个比较的两个值之一可能是这些具体的值（0，""，或[] —— 空数组），避...
2019-02-20 13:27:05
140
原创 使用抓包工具fiddler修改接口返回值进行调试
安装完fiddler, 配置https和Connections.配置完点击options-HTTPs右侧Action-导入证书到桌面。 然后在谷歌浏览器设置-高级-管理证书-受信任的跟证书颁发机构中导入fillder证书，重启fillder和浏览器。...
2019-02-18 16:54:14
2469
原创 坑货----win10下的node canvas
在安装node canvas的时候直接使用npm install canvas结果报错，具体可能由于canvas一堆依赖并依赖C++,于是查找资料，按照https://my.oschina.net/wangr15/blog/1540126操作的，装了一堆东西，然后依旧报错：C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V120\Micros...
2019-01-30 19:20:22
1076
2
原创 es6中class继承的坑
1. es6继承的过程ES6 的继承机制和ES5完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。2. super关键字super作为函数调用时，代表父类...
2018-11-23 11:40:37
1481
原创 react中进行状态提升，多个组件公用的组件提到父组件
我们使用一个日期和毫秒实时转化的样例作为例子，像图中这种，上面输入日期，下边可以实时转为毫秒，同时毫秒也可以实时转为日期：大概思考的方向：首先需要一个输入组件，承载用户的输入；然后需要一个父组件存放这两个输入组件。如果把state放在子组件中，那再父组件中调用的两个子组件就是完全相互独立的，就不能实时更新，因此我们需要把state提升到父组件中，既然state提升到父组件中了，那么两个子组件...
2018-11-19 13:47:51
1070
原创 小程序中scroll-view组件实现效果之--------城市列表页的索引（scroll-into-view）
想要实现的功能是在一个城市列表页实现字母索引点击字母跳转到相应的位置，在小程序里面利用scroll-view特别简单首先需要索引字母添加一个点击事件，捕获到点击的id <view wx:for ="{{searchLetter}}" wx:key="index" data-letter="{{item.name}}" catchtouchend="clickLetter">{...
2018-10-11 14:25:09
2349
原创 秒杀需求的实现思路
首先大致说一下需求：大概就是要实现下面的效果，秒杀分为三个阶段: 预热中，抢购中，已结束。 预热中的展示效果又分为两种：当距离秒杀开始超过24小时的时候显示秒杀什么时候开始；当距离秒杀开始时间少于24小时的时候，开始倒计时。 抢购中的展示效果也分为两种：当距离秒杀结束超过24小时的时候显示秒杀什么时候结束；当距离秒杀结束时间少于24小时的时候，开始倒计时。 结束就展示已经结束。 基于i...
2018-08-30 19:59:36
2239
原创 react学习过程记录2（包含项目home中出现的问题）
1.react中在父组件调用子组件传值的时候，注意在data={ {} }值是以对象形式传递，比如在父组件father调用子组件child: &amp;amp;amp;amp;amp;lt;child data={{name:[1,2,3]}}&amp;amp;amp;amp;amp;gt;是这样传递一个数组的。2.当我们给子组件传递一个数组的时候，这个数组怎么在子组件中输出呢？ render() { const {name}=this.props.da
2018-08-14 17:09:23
870
原创 vscode使用记录
由于第一次使用vscode，所以记录一下使用：vscode默认打开一个项目，如果想在打开一个项目窗口，可以按CTrl+shift+n. 未完待续。。。。。
2018-08-09 20:40:57
1142
原创 项目修改记录
1.景酒项目（通过秒杀来了解项目）最开始参考别人实现的思考可以在controller中增加一些变量：秒杀开始时间，结束时间，当前处于的状态，是否是秒杀产品等等（当然这些变量也可以写在model的状态中，在controller中改变他们就行）增加的这些变量之后，可以通过UPDATE_STATE({parms}）把这些新变量增加到项目的总状态集合state中。（注意state已经更新成功，但是...
2018-08-07 17:43:20
885
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人