前端
文章平均质量分 60
拙慕JULY
这一生波澜壮阔或是不惊都没问题。
展开
-
简易版手淘视频播放器开发心路历程
播放 video 的时候,触发了 onPlay,但其实真正播放的是隐藏起来为了实现 无限循环 的 video,并且 这两个 Carousel 里面的 video 的 index 是相同的~页面采用两个 video,一个现实,一个 display:none;由于涉及业务保密信息,在此简单描述一下这个功能:在一个走马灯组件里面第一屏是一个视频,第二屏第三屏是图片,点击播放视频,播放过程中滚动窗口,视频 fixed 在窗口顶部,回到顶部,视频还原,两个窗口视频播放进度无缝衔接,类似于淘票票和手机淘宝的功能。原创 2024-03-07 15:51:05 · 978 阅读 · 0 评论 -
TS 基础知识整理
删除this参数类型,如果类型没有显示声明this的参数,则结果是简单的类型,否则,将this创建一个没有参数的新函数类型。泛型被删除,只有最后一个重载签名被传播到新的函数类型中。,从构造函数类型的类型构造元组或数组类型,它产生一个包含所有参数类型的元组类型。,提取函数类型的this参数的类型,如果函数类型没有参数,则为未知this。,构造一个对象类型,Keys为键得类型,属性值得类型为Type。,构造一个类型,该类型由构造函数的实例类型组成的。,从函数类型的参数中使用的类型构造元组类型T。原创 2024-03-05 16:03:12 · 283 阅读 · 0 评论 -
select滑动分页请求数据
/ 是否触底// 当前页// 列表try {// pageSize 最大 100,让用户感知不到 分页请求数据// 调用接口// 成功// 结构出后端返回给你的 total,赋值// 10 为 pageSizereturn;} catch {message.error('请求超时,请稍后再试!');原创 2024-02-21 16:20:22 · 495 阅读 · 0 评论 -
前端开发冷知识之【盘古之白】
盘古之白:指的是在中文和 English 混排的时候,中文和英文半角字母之间需要加入的那两个空格。原创 2024-02-20 14:57:34 · 330 阅读 · 0 评论 -
js 常用简写技巧
(空值合并操作符) 如果果没有定义左侧返回右侧,这种方法非常实用,有时候仅仅只是想判断一个字段有没有值,而不是把空字符串或者 0 也当做。如果 ||前面的值是0 、‘’、false、 null、 undefined 、NaN其中的任意一种,则直接返回||后面的值;逻辑运算符 ||=、&&=、?=,这三个运算符相当于先进行逻辑运算,然后根据运算结果,再视情况进行赋值运算。逻辑或赋值运算符 x||=y 仅在 x 是 false时对其赋值。逻辑与赋值运算符 x&&=y 仅在 x 是 true 时对其赋值。原创 2024-02-20 14:45:36 · 243 阅读 · 0 评论 -
浏览器输入 url 到页面展示完整的过程
下面进行以上三步进行简单的赘述。原创 2023-03-30 11:17:02 · 192 阅读 · 0 评论 -
重绘(repaint)和 重排(reflow)
元素外观改变,如 颜色、背景色,尺寸,定位不会改变,不会影响其他元素。重新计算元素的尺寸和定位,可能会影响到其他元素的位置;重排一定会引起重绘。原创 2023-03-30 11:09:39 · 46 阅读 · 0 评论 -
常见的前端攻击手段及预防方案
安全问题不是前端 or 后端一方的责任,需要两端都处理!!!原创 2023-03-30 10:48:51 · 653 阅读 · 0 评论 -
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 · 244 阅读 · 0 评论 -
前端计算小文件文件 hash、分片计算大文件 hash
需要计算 文件 hash 传给后端进行核验;原创 2023-03-28 17:16:34 · 1966 阅读 · 1 评论 -
【css】渐变-背景渐变、边框渐变、文字渐变
● position:指定渐变起点的坐标,您可以使用数值加单位、百分比或者关键字(例如 left、bottom 等)等形式指定渐变起点的坐标,如果提供 2 个参数,那么第一个参数用来表示横坐标,第二个参数用来表示纵坐标,如果只提供一个参数,那么第二个参数将被默认设置为 50%,即 center;● direction 可选值,定义渐变的方向(例如从左到右,从上到下),可以是具体角度(例如 90deg),也可以通过 to 加 left、right、top、bottom 等关键字来表示渐变方向;原创 2023-03-28 16:56:39 · 781 阅读 · 0 评论 -
常用的数组 API
本文针对常用的数组 API 做了简单的整理。直接修改原数组arr.push()在数组的尾部追加 1-n 个新元素;参数:需要添加到数组尾部的元素;arr.pop()用于删除数组中的最后一个元素;返回值:返回删除的元素;arr.reverse()用于颠倒数组中的所有元素;arr.shift()用于删除并返回数组中的第一个元素,并将后面的元素向前移动一位,并且 length-1;返回值:返回被删除的数组;arr.sort(callback)对数组内的元素按照特.原创 2020-11-23 16:44:29 · 403 阅读 · 0 评论 -
用原生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 · 347 阅读 · 0 评论 -
浏览器 ie6 的一些兼容问题
浏览器 ie6 有哪些兼容<!DOCTYPE HTML>文档类型的声明。产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象;解决办法:书写文档声明。不同浏览器当中,很多的标签的默认样式不同,如默认的外部丁内补丁。产生条件:不同浏览器;解决办法:利用CSS reset文件进行样式的清除,然后再根据需要进行设置。...原创 2019-11-29 19:51:59 · 168 阅读 · 0 评论 -
React基础之组件中的数据挂载方式、组件的属性和状态详解、组件的状态提升、非受控组件与受控组件
React基础之组件中的数据挂载方式、组件的属性和状态详解、组件的状态提升、非受控组件与受控组件1.React中数据分为2部分属性——props状态——state原创 2019-11-15 10:24:31 · 238 阅读 · 0 评论 -
封装axios和fetch方法
比较两种请求方式1.使用原生提供的fetch2.使用第三方封装库:axiosVue中可以统一对axios进行挂载Vue.prototype.$http = axios3.比较fetch和axiosaxios 对已获得的数据进行了一层封装 XSRFaxios底层自动对数据进行了格式化fetch并没有进行封装,拿到就是格式化后的数据fetch进行了多一层的格式化...原创 2019-11-14 17:25:13 · 333 阅读 · 0 评论 -
React基础之组件与元素、组件的组合与嵌套、组件添加样式、配置sass
React元素与组件1.元素:VDOM,是React的最小组成部分const vdom = <div>React组件</div>2.组件函数式组件( 无状态组件 PureComponent)函数式组件,函数 可以是一个组件,体现函数式编程组件是由元素构成的函数式组件由一个参数props,来接收绑定在组件上生成的属性由于元素没有...原创 2019-11-12 19:11:57 · 481 阅读 · 0 评论 -
React脚手架及CRA脚手架的使用
React1.使用:不能直接在浏览器运行,因为有组件系统和jsx解决方法:webpack解析组件系统、JSX2.React脚手架CRA - react官方推荐使用国内:蚂蚁金服:Dva - 守望先锋Umi - 乌木3.React框架的目的高效实现用户输入数据快速展示在界面上4.React解决的前端问题高效实现服务端诗句渲染到页面上5.Rea...原创 2019-11-12 17:19:45 · 1209 阅读 · 0 评论 -
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 阅读 · 0 评论 -
Vue生命周期钩子函数
Vue生命周期1.注意:钩子函数不能写成箭头函数,箭头函数会改变this指向2.为什么要有生命周期?Vue为了在一个组件的从创建到销毁的一系列过程中去添加一些功能,方便更好的去控制组件3.生命周期图示:4.Vue的生命周期分三个阶段,8个钩子函数初识阶段生命周期的更新阶段组件的销毁阶段5.主要研究方向:公共特向各自的功能/特点初识阶段1.be...原创 2019-11-10 18:41:38 · 290 阅读 · 0 评论 -
Vue快速构建工具cli
关于cli1.vue项目的快速构建工具 cli 【 脚手架 】 底层 webpack2.什么是cli?cli是vue提供的一个用来快速构建项目环境的一个工具,底层使用的是webpack3.版本:cli2cli3cli4cli3、cli4对电脑的配置有一定要求cli的安装及使用1.cli的安装 【 推荐使用yarn 】yarn 安装和配置安装: $ ...原创 2019-11-10 17:56:01 · 156 阅读 · 0 评论 -
javascript中单引号与双引号的区别
双引号与单引号的区别:大多情况下没有区别,但是在有些情况下单引号具有转义的作用很多小伙伴们在一开始学习js的时候可能会犹豫到底什么时候用单引号什么时候用双引号,因为效果是一样的,确实,单引号与双引号没有很大区别,但是一般在js语法中建议使用单引号,因为双引号在css样式中用来引用属性值。...原创 2019-11-10 17:32:01 · 601 阅读 · 0 评论 -
Vue虚拟Dom节点、VDOM渲染流程、diff算法、JSX
Vue虚拟Dom节点、VDOM渲染流程、diff算法、JSX,Vue中为什么要是用jsx原创 2019-11-10 17:30:20 · 539 阅读 · 0 评论 -
Vue动态组件component、动态缓存组件keep-alive、过渡效果transition、过滤器filter、插槽solt
Vue动态组件component、动态缓存组件keepalive、过渡效果transition、过滤器filter、插槽solt原创 2019-11-10 17:10:21 · 772 阅读 · 0 评论 -
Vue组件之间的通信-父子、子父、非父子组件通信
组件1.data选项为什么是函数?组件是一个整体,它的数据也应该是独立的,函数形式可以给一个独立作用域,目前js的最大特点是函数式编程,而函数恰好提供了一个独立作用域,所以我们data在出根组件外都是函数2 .返回值为什么是一个对象?Vue特点:深入响应式data 选项要劫持【es5中的Object.defineProerty】的getter和setter,而data选项...原创 2019-11-10 15:28:33 · 138 阅读 · 0 评论 -
Vue组件详解
Vue组件1.了解前端组件化发展历史前后端耦合前后端不分离项目前后端分离组件化为了解决多人协作冲突问题复用2.组件的概念组件是一个html、css、js、img等的一个聚合体组件 - Vue的功能之一...原创 2019-11-09 14:55:52 · 142 阅读 · 0 评论 -
解决react安装CRA启动spawn cmd ENOENT报错问题
解决react安装CRA启动spawn cmd ENOENT报错问题原创 2019-11-09 10:58:24 · 911 阅读 · 0 评论 -
Vue选项之计算属性computed、侦听属性watch和混入mixin
Vue的计算属性computed、侦听属性watch和混入mixin原创 2019-11-03 17:31:39 · 1361 阅读 · 0 评论 -
Vue数据请求:axios & fetch
vue的数据请求方式:axios和fetch原创 2019-11-03 17:07:09 · 221 阅读 · 0 评论 -
Vue事件处理与各类修饰符
vue事件处理器、事件修饰符、按键修饰符、系统修饰符、鼠标修饰符,自定义事件,其他指令(v-pre、v-cloak、v-once),自定义指令原创 2019-11-02 16:53:45 · 147 阅读 · 0 评论 -
Vue模板语法及常见指令
Vue基础之Vue的模板语法、v-html指令、v-text指令、v-if指令、v-for指令、样式style绑定、类名class绑定、v-on事件处理器、v-model表单控制器原创 2019-10-27 22:40:09 · 131 阅读 · 0 评论 -
浅谈Vue的深入响应原理
Vue的深入响应式,又称双向数据绑定、数据驱动。原创 2019-10-27 21:23:02 · 158 阅读 · 0 评论 -
浅谈前端开发流程规范
前端开发流程规范,包括:前端命名规范、前端工作规范、开发文档书写规范原创 2019-10-27 20:38:40 · 546 阅读 · 0 评论 -
初识vue
初识vue原创 2019-10-18 21:02:18 · 85 阅读 · 0 评论 -
MongoDB数据库
1.数据库使用数据库结构来组织、管理、存储数据的仓库。2.数据库分类关系型数据库代表:MySql非关系型数据库代表:MongoDB3.关系型数据库与非关系型数据库的区分是否有表4.数据库的构成SQL数据库 - 表 - 行NoSql数据库 - 集合 - 文档文档:一个bson的键值对文档5.bsonbson是json的超集...原创 2019-10-17 22:31:18 · 72 阅读 · 0 评论