- 博客(47)
- 收藏
- 关注
RSS订阅原创 简易版手淘视频播放器开发心路历程
播放 video 的时候，触发了 onPlay，但其实真正播放的是隐藏起来为了实现 无限循环 的 video，并且 这两个 Carousel 里面的 video 的 index 是相同的~页面采用两个 video，一个现实，一个 display:none;由于涉及业务保密信息，在此简单描述一下这个功能：在一个走马灯组件里面第一屏是一个视频，第二屏第三屏是图片，点击播放视频，播放过程中滚动窗口，视频 fixed 在窗口顶部，回到顶部，视频还原，两个窗口视频播放进度无缝衔接，类似于淘票票和手机淘宝的功能。
2024-03-07 15:51:05
976
原创 TS 基础知识整理
删除this参数类型，如果类型没有显示声明this的参数，则结果是简单的类型，否则，将this创建一个没有参数的新函数类型。泛型被删除，只有最后一个重载签名被传播到新的函数类型中。，从构造函数类型的类型构造元组或数组类型，它产生一个包含所有参数类型的元组类型。，提取函数类型的this参数的类型，如果函数类型没有参数，则为未知this。，构造一个对象类型，Keys为键得类型，属性值得类型为Type。，构造一个类型，该类型由构造函数的实例类型组成的。，从函数类型的参数中使用的类型构造元组类型T。
2024-03-05 16:03:12
264
原创 select滑动分页请求数据
/ 是否触底// 当前页// 列表try {// pageSize 最大 100，让用户感知不到 分页请求数据// 调用接口// 成功// 结构出后端返回给你的 total，赋值// 10 为 pageSizereturn;} catch {message.error('请求超时，请稍后再试！');
2024-02-21 16:20:22
476
原创 lottie
官网首页上难免会有一些比较炫酷的 动画效果，代码控制太复杂且不需求交互，gif 又会失真，直接使用 lottie 一劳永逸；之前只在 小程序 端 用过 lottie ，官网上写的很清楚，主要是 处理一下兼容和兜底方案；将设计是给的 lottie json 传到。可以预览效果，也会生成代码；
2024-02-21 14:37:24
135
原创 js 常用简写技巧
（空值合并操作符） 如果果没有定义左侧返回右侧，这种方法非常实用，有时候仅仅只是想判断一个字段有没有值，而不是把空字符串或者 0 也当做。如果 ||前面的值是0 、‘’、false、 null、 undefined 、NaN其中的任意一种，则直接返回||后面的值；逻辑运算符 ||=、&&=、?=，这三个运算符相当于先进行逻辑运算，然后根据运算结果，再视情况进行赋值运算。逻辑或赋值运算符 x||=y 仅在 x 是 false时对其赋值。逻辑与赋值运算符 x&&=y 仅在 x 是 true 时对其赋值。
2024-02-20 14:45:36
238
原创 浅谈 setState 异步、同步问题
setState 无所谓 同步还是 异步，主要是看能不能命中 batchUpdate 机制，判断 isBatchingUpdates 的值，为 false 表示同步。
2023-03-30 13:48:59
290
原创 React Hooks
本质是一个 函数，以 use 开头；内部正常使用 react 的所有 hooks；返回格式不限制；封装通用功能，开发、使用第三方 hooks，满足扩展性；
2023-03-30 12:07:45
110
原创 重绘（repaint）和 重排（reflow）
元素外观改变，如 颜色、背景色，尺寸，定位不会改变，不会影响其他元素。重新计算元素的尺寸和定位，可能会影响到其他元素的位置；重排一定会引起重绘。
2023-03-30 11:09:39
43
原创 VDOM 、 diff、JSX
用 JS 模拟 DOM结构（VNODE）；新旧 VNODE 对比，得出最小的更新范围，最后更新 VDOM；数据驱动视图模式下，有效控制 DOM 操作React v16.x 及以前 babel 进行 jsx 解析编译的是根据加粗样式解析成进行包裹；React v17.x 及之后的版本，对 jsx 转换用，而不再依赖React.createElement；
2023-03-29 15:58:19
240
原创 【css】渐变-背景渐变、边框渐变、文字渐变
● position：指定渐变起点的坐标，您可以使用数值加单位、百分比或者关键字（例如 left、bottom 等）等形式指定渐变起点的坐标，如果提供 2 个参数，那么第一个参数用来表示横坐标，第二个参数用来表示纵坐标，如果只提供一个参数，那么第二个参数将被默认设置为 50%，即 center；● direction 可选值，定义渐变的方向（例如从左到右，从上到下），可以是具体角度（例如 90deg），也可以通过 to 加 left、right、top、bottom 等关键字来表示渐变方向;
2023-03-28 16:56:39
767
原创 常用的数组 API
本文针对常用的数组 API 做了简单的整理。直接修改原数组arr.push()在数组的尾部追加 1-n 个新元素；参数：需要添加到数组尾部的元素；arr.pop()用于删除数组中的最后一个元素；返回值：返回删除的元素；arr.reverse()用于颠倒数组中的所有元素；arr.shift()用于删除并返回数组中的第一个元素，并将后面的元素向前移动一位，并且 length-1；返回值：返回被删除的数组；arr.sort(callback)对数组内的元素按照特.
2020-11-23 16:44:29
398
原创 前端工作规范
1.日报上午做了什么？下午做了什么？遇到了什么问题？是否已经解决，解决方法？明天准备做什么（计划）？署名、日期2.周报XXXX.XX.XX-XXXX.XX.XX周报:1.本周主要内容：……2.工作中存在的主要问题：……3.下周工作计划：……3.常用的邮件格式：明确参与者，即邮件要发送给谁；邮件的主题；主题必须有且仅有一个可以酌情添加【请批阅、请熟知】等邮件正文称呼明确条理分明署名XX部分、XX职位姓名、时间.
2020-11-23 15:59:50
203
1
原创 用原生js实现数组扁平化
数组扁平化：[1, 3, [5, 2], [2, 3, [4, 5]]]------->[1, 3, 5, 2, 2, 3, 4, 5]/实现一：递归/function flatArray(arr){ var result = []; for(var i=0; i<arr.length; i++){ if(Array.isArray(arr[i])){ result ...
2019-12-01 16:09:06
345
原创 浏览器 ie6 的一些兼容问题
浏览器 ie6 有哪些兼容<!DOCTYPE HTML>文档类型的声明。产生条件：IE6浏览器，当我们没有书写这个文档声明的时候，会触发IE6浏览器的怪异解析现象；解决办法：书写文档声明。不同浏览器当中，很多的标签的默认样式不同，如默认的外部丁内补丁。产生条件：不同浏览器；解决办法：利用CSS reset文件进行样式的清除，然后再根据需要进行设置。...
2019-11-29 19:51:59
166
原创 npm: relocation error: npm: symbol SSL_set_cert_cb, version libssl.so.10 not defined in file libssl.
symbol SSL_set_cert_cb, version libssl.so.10 not def ined in file libssl.so.10 with link time reference
2019-11-27 20:34:12
560
原创 React基础之组件中的数据挂载方式、组件的属性和状态详解、组件的状态提升、非受控组件与受控组件
React基础之组件中的数据挂载方式、组件的属性和状态详解、组件的状态提升、非受控组件与受控组件1.React中数据分为2部分属性——props状态——state
2019-11-15 10:24:31
236
原创 封装axios和fetch方法
比较两种请求方式1.使用原生提供的fetch2.使用第三方封装库：axiosVue中可以统一对axios进行挂载Vue.prototype.$http = axios3.比较fetch和axiosaxios 对已获得的数据进行了一层封装 XSRFaxios底层自动对数据进行了格式化fetch并没有进行封装，拿到就是格式化后的数据fetch进行了多一层的格式化...
2019-11-14 17:25:13
330
原创 React基础之组件与元素、组件的组合与嵌套、组件添加样式、配置sass
React元素与组件1.元素：VDOM，是React的最小组成部分const vdom = <div>React组件</div>2.组件函数式组件（ 无状态组件 PureComponent）函数式组件，函数 可以是一个组件，体现函数式编程组件是由元素构成的函数式组件由一个参数props，来接收绑定在组件上生成的属性由于元素没有...
2019-11-12 19:11:57
474
原创 React脚手架及CRA脚手架的使用
React1.使用：不能直接在浏览器运行，因为有组件系统和jsx解决方法：webpack解析组件系统、JSX2.React脚手架CRA - react官方推荐使用国内：蚂蚁金服：Dva - 守望先锋Umi - 乌木3.React框架的目的高效实现用户输入数据快速展示在界面上4.React解决的前端问题高效实现服务端诗句渲染到页面上5.Rea...
2019-11-12 17:19:45
1202
原创 React起源、特点、React与MVC、React与Vue渲染流程、JSX原理、VDOM
1.Facebook+Instagram+社区 团队项目2.开源时间：2013.53.开发背景：4.React 与 MVC比较5.React与Vue的渲染流程6.JSX原理
2019-11-12 16:52:47
222
原创 Vue生命周期钩子函数
Vue生命周期1.注意：钩子函数不能写成箭头函数，箭头函数会改变this指向2.为什么要有生命周期？Vue为了在一个组件的从创建到销毁的一系列过程中去添加一些功能，方便更好的去控制组件3.生命周期图示：4.Vue的生命周期分三个阶段，8个钩子函数初识阶段生命周期的更新阶段组件的销毁阶段5.主要研究方向：公共特向各自的功能/特点初识阶段1.be...
2019-11-10 18:41:38
287
原创 Vue快速构建工具cli
关于cli1.vue项目的快速构建工具 cli 【 脚手架 】 底层 webpack2.什么是cli?cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack3.版本：cli2cli3cli4cli3、cli4对电脑的配置有一定要求cli的安装及使用1.cli的安装 【 推荐使用yarn 】yarn 安装和配置安装: $ ...
2019-11-10 17:56:01
153
原创 javascript中单引号与双引号的区别
双引号与单引号的区别：大多情况下没有区别，但是在有些情况下单引号具有转义的作用很多小伙伴们在一开始学习js的时候可能会犹豫到底什么时候用单引号什么时候用双引号，因为效果是一样的，确实，单引号与双引号没有很大区别，但是一般在js语法中建议使用单引号，因为双引号在css样式中用来引用属性值。...
2019-11-10 17:32:01
596
原创 Vue虚拟Dom节点、VDOM渲染流程、diff算法、JSX
Vue虚拟Dom节点、VDOM渲染流程、diff算法、JSX，Vue中为什么要是用jsx
2019-11-10 17:30:20
534
原创 Vue动态组件component、动态缓存组件keep-alive、过渡效果transition、过滤器filter、插槽solt
Vue动态组件component、动态缓存组件keepalive、过渡效果transition、过滤器filter、插槽solt
2019-11-10 17:10:21
768
原创 Vue组件之间的通信-父子、子父、非父子组件通信
组件1.data选项为什么是函数?组件是一个整体，它的数据也应该是独立的，函数形式可以给一个独立作用域，目前js的最大特点是函数式编程，而函数恰好提供了一个独立作用域，所以我们data在出根组件外都是函数2 .返回值为什么是一个对象？Vue特点：深入响应式data 选项要劫持【es5中的Object.defineProerty】的getter和setter，而data选项...
2019-11-10 15:28:33
135
原创 Vue组件详解
Vue组件1.了解前端组件化发展历史前后端耦合前后端不分离项目前后端分离组件化为了解决多人协作冲突问题复用2.组件的概念组件是一个html、css、js、img等的一个聚合体组件 - Vue的功能之一...
2019-11-09 14:55:52
139
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人