js
文章平均质量分 63
海龟先生plus
星光不问赶路人
展开
-
书接上文 electron 桌面端之副屏展示 (二)
上文写到,借助可以简单且快速的实现桌面端应用,对于部分业务需求可能也想实现副屏的展示(比如零售行业,副屏显示结算信息之类的)老规矩,思路分析,首先上一篇我们知道,我们可以利用去创建窗口,然后加载对应的网页,那么副屏页可以用同样的思路,1、我们要知道怎么检测有没有副屏 2、,知道有副屏后,此时就应该去创建窗体,加载网页…,既然知道了思路,老规矩,去看看文档。原创 2023-03-11 22:17:57 · 2238 阅读 · 3 评论 -
记录一次使用 electron 套壳桌面端(一)
electron 套壳网页端原创 2022-09-04 16:29:10 · 2358 阅读 · 0 评论 -
记录一笔 个人理解的函数式编程
对于函数式编程个人一直不是很了解,于是抽空查看相关资料整理笔记下1、概念在编程思想上讲,目前有三类:命令式(面向过程)、面向对象、函数式,简单介绍下这三种命令式编程 ———— 求和let a = 10let b = 20let sum = a + b可以看到是多个语句或者指令等让计算机执行一些动作面向对象编程 ———— 把现实中的事物抽象成程序中的类和对象,通过封装、继承、多态来演示事物之间的联系函数式编程 ———— 求和 function add(x,y) { return原创 2022-04-23 22:18:56 · 1027 阅读 · 0 评论 -
小程序模仿抖音上下滑动视频
前景知识要实现小程序类似抖音上下滑动预览视频,就我了解的,方案可以分为两种1、利用原生组件swiper(据说很卡,我也试过,好像是有点不流畅)2、自己实现一个上下滑动效果(只需要监听一组事件,判断上拉还是下拉,接着就是移动dom)这里就采用第二种方案自己实现 ps: (本案例基于字节小程序,由于字节已经实现原生组件同层渲染,所以这里不考虑组件层级问题,如果是其他平台,可能需要结合实际解决同层渲染问题,思路应该是一致的)先看效果:开始实现(一) 布局笔者准备在视频列表外嵌套一个大盒子,这个大盒原创 2022-04-14 18:11:32 · 5926 阅读 · 16 评论 -
记录一则二分法查找数组元素
今天遇到一个问题:给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。栗子:对于给定排序数组 [1,3,5] 和 目标值 4,如果数组中能找到4就返回其下标,如果不能就插入对应排序位置(也就是3后面),且返回对应下标,且题目要求时间复杂度为 O(log n) 的算法,那就是用二分法了1、首先解决查找下标问题function getIndex(arr,num){ let len = arr.length, st原创 2022-03-03 10:39:16 · 132 阅读 · 0 评论 -
js 理解模块化
经常在面试或者其他文章看到关于模块化的问题,之前也只是寥寥看了几次,对于 CommonJS,AMD,ES6也说不出个所以然,于是今天抽空好好看了 红宝书第4版关于模块化的介绍,这里记录一下。理解模块模式初衷在开发中肯定有设计大量三方库或者业务逻辑代码,较好的方式是将其分割为多个小模块,最后以一定的方式连接起来使用,这就是模块化兴起的初衷。模块化一般包含什么?模块化通常需要含一下几个点。模块标识符模块系统本质上是键/值实体,每个模块都有引用它的标志符,一般是路径或者文件名,部分模块系统也支持自定原创 2022-01-12 09:46:21 · 313 阅读 · 0 评论 -
数组分块思路 记一笔
当面临某些不需要考虑执行顺序、同步的且耗时较长的任务,可以考虑分块思路js 代码 const ul = document.getElementById("ul") //创建测试数组 function cerateArr(size) { let arr = [] for (let i = size; i > 0; i--) { arr.push(i)原创 2021-12-16 11:05:31 · 856 阅读 · 0 评论 -
移动端适配问题的理解
最近无意间再次接触了适配问题,虽然之前也一直在使用诸如rem类的方案,也研究过引入的适配代码,突然让自己说出其中原委,却模棱两可,真是尴了个大尬,说到底还是没有彻底弄清除。1、网络求助自己没弄懂,就只有寻求网络,但是查找了许多博客、笔记好像都写的有点不清晰,很多上来就是 1rem = 100px,看得我也是一头雾水,最后找到一篇文章,按照其理解貌似懂了。原文链接2、rem适配原理首先要知道rem是一个相对单位,相对于根节点大小来的,假设根节点大小为 50px,则1rem = 50px,2rem =原创 2021-12-07 15:34:14 · 655 阅读 · 0 评论 -
记 flip 简单的动画思路
flip 一种简单的动画思路无意间看到某博主文章,介绍关于 filp 如何制作动画,觉得有趣,便自己动手将dome实现了一遍,参考原文链接在此FLIPf - first 记录动画开始前的位置、大小等信息 ( translateY(0px) )l - last 记录动画结束时的位置、大小等信息 ( translateY(100px) )i - invert 对动画前后数据信息的计算(translateY --> 100px,同时利用translate等操作,将dom恢复到 first位置)原创 2021-10-13 14:07:36 · 1066 阅读 · 0 评论 -
记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧(四)
J - Z 系列获取数组元素下标(findIndex的实现)const linearSearch = (arr, item) => { for (const i in arr) { if (arr[i] === item) return +i; } return -1;};linearSearch([2, 9, 9], 9); // 1linearSearch([2, 9, 9], 7); // -1// 只返回数组中的第一个绑定事件一次(前面也有类似函数)co原创 2021-10-11 11:31:45 · 165 阅读 · 0 评论 -
记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧(三)
G - I 系列获取元素距离顶部的距离const getVerticalOffset = el => { let offset = el.offsetTop, _el = el; while (_el.offsetParent) { _el = _el.offsetParent; offset += _el.offsetTop; } return offset;};offsetTop 是相对其父元素的距离,这里主要通过累加的方式来获取对于嵌套较深的原创 2021-09-24 11:33:27 · 121 阅读 · 0 评论 -
记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧(二)
D - F 系列防抖函数,限制高频触发const debounce = (fn, ms = 0) => { let timeoutId; return function(...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => fn.apply(this, args), ms); };};可以运用在监听屏幕缩放,或者input 搜索时,做一些性能优化转换首字母(或其他)大小写co原创 2021-08-17 14:21:50 · 138 阅读 · 0 评论 -
记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧 (一)
A - C 系列1、+ 号的隐式类型转换使用+[3] //3+[1,2,3].slice(-1) //将 [3] 转换为了32、日期的转换const addDaysToDate = (date, n) => { const d = new Date(date); d.setDate(d.getDate() + n); return d.toISOString().split('T')[0];};addDaysToDate('2020-10-15', 10); // '2原创 2021-08-06 14:00:00 · 328 阅读 · 0 评论 -
input placeholder信息输入效果
可能经常会在某些新闻或视频网站的搜索框看到类似打字机的效果,咋眼一看好像很简单,但是一些又说不上具体细节,如下图一眼一看,这不动态改变 placeholder 的值就好了吗?仔细看人家还有一个类似光标的东西呢,其实也简单,在拼接的时候再拼接个 | 不就好了吗?代码如下:const input = document.getElementById('input') let str = '女子否认拔病人尿管女子否认拔病人尿管' let str2 = '' let strArr = str原创 2021-07-13 17:45:21 · 247 阅读 · 0 评论 -
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识1、认识生成器思考如下代码: let x = 1 function foo() { x++ bar() console.log(x) // 3 } function bar() { x++ } foo()如上代码,我们确定知道,运行foo函数时,bar函数一定也会在 x++后执行,于是得到 x = 3,那原创 2021-06-22 16:22:58 · 150 阅读 · 1 评论 -
vue 简单实现 营销 转盘抽奖
1.0 思路整理转盘抽奖很常见,之前也没写过,现在有空来写写,分析如下:1.1 转盘旋转 ? ----- 可以用 transform 的 rotate 来解决1.2 旋转动画 ? ----- transition 过渡来处理1.3 停留目标位置及中奖提示 ? ------ 通过控制旋转角度控制停留位置,中奖提示,考虑添加回调1.1 开始行动上面的思考,我们知道了大概要实现的步骤,首先我们搞张图片这个圆盘有 10 份,每一份 360/10 = 36deg,假设要停留在第二个---->原创 2021-03-05 11:44:25 · 598 阅读 · 1 评论 -
记录一个 列表上拉淡入动画
1.0今天在看小米11官网介绍时,看到淡入的动画,觉得不错,于是来写写看https://www.mi.com/mi11 官网地址2.0简单分析其实原理很简单,就是添加一个动画.fade-in-bottom { animation: fade-in-bottom 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.1s both;}@keyframes fade-in-bottom { 0% { transform: tra原创 2021-01-04 15:32:42 · 178 阅读 · 1 评论 -
苹果官网 iphone12 文字渐变效果
1、0今天无意间在看视频时,发现了一个up主实现iphone12官网的文字效果,闲来无事,自己也来弄弄看,先看看官网效果这里搞了一个gif,不过也可以看出效果啦,由于本人是米粉,就不奉上苹果官网链接了。2、分析要实现文字渐变颜色,其实是 css 将文字设置为透明,背景图 颜色渐变,可以理解为 字是透明的,背景是黑的,所以映过来,字就是白色的了,这部分代码可以直接百度栗子:background: linear-gradient(90deg,#e8a93f,#fff8aa);-webkit-ba原创 2021-01-04 10:44:20 · 1322 阅读 · 5 评论 -
vue 节流、拖拽指令
1、在开发中时长遇到按钮重复点击或者多次点击的情况比如创建订单或者其他情况,当然也可以通过设置变量开关,禁止状态,这里就分享一个 节流的指令VUE2,VUE3好像指令的生命周期和组件的生命周期同步了//立即执行版本,点击后会执行一次,然后进入定时器export const throttle = { inserted: function(el, binding) { let timer = null el.addEventListener('click', handClick, false)原创 2020-12-22 16:04:12 · 399 阅读 · 0 评论 -
吸顶小计-----有意思的事儿
1、缘由:现在多数移动端网页有些按钮需要吸顶,尤其是落地页,按钮的吸顶有助于得到更多的注册量2、思路:其实大多思路都没得错,多数是 记录吸顶元素距离顶部距离 然后 监听滚动事件,获取当前滚动高度,然后和 记录的距离相比较let viewTop = this.$refs.ele.getBoundingClientRect().toplet scrollHeight = xxxscrollHeight > viewTop ? 吸顶 : 取消吸顶通常记录滚动高度是有兼容的,写的太烦了le原创 2020-12-21 15:25:46 · 111 阅读 · 0 评论 -
前端 滚动到目标元素位置 VUE 版本
1、前言想起之前一次在写一个小程序商城时候,详情页的类似锚点的跳转花了我不少时间,因为刚写,对小程序滚动,滚动距离那套不熟悉加之本身对什么滚动高度,元素距离顶部距离不是很了解,花了挺长时间的,这几天有空,就研究了下。2、先看效果额,tab点击没有加效果,看着不明显,你懂我的意思就行 哈哈,电商里面最常见了3、页面搭建先搞一个 tab,然后下面就是 几个对应的div盒子// 标题 <div class="tab" > <span v-for="item in 4"原创 2020-12-18 13:53:09 · 500 阅读 · 0 评论 -
js promise基础版本
关于promise经常用到,用来处理异步请求,也经常刷到一些什么手写promise等等,我一般对此没有太大的兴趣,今天忽然又看到这个话题,想着来试试?1、日常使用方法如下let p = new Promise((resolve, rejected) => { setTimeout(() => { resolve('真的Promise') },3000);})p.then((res)=>{ console.log(res,'结果')})可以发现原创 2020-12-16 00:05:09 · 237 阅读 · 0 评论 -
js 面向对象的程序设计 ------小结
1、原由前段时间,看了红宝书第三版,尤其的中间 面向对象一节,由于水平过低吧,看的迷迷糊糊,基本不知到讲的是什么,今天突然再次看到,仿佛懂了不少,于是写写这篇笔记2、理解对象js中对象,原文中这样定义,一组没有特定顺序的值,也就无序属性的集合(不同于其他语言中对象的定义,这里不做探究,能理解就行)3、对象的属性、读取对象属性的特性简单来说,对象内部有几个属性,大概就是 该对象是否可读,可枚举…,了解Js的应该都知道,接下来就是读取对象属性的特性,在其内还有两个函数 getter和setter,这两原创 2020-12-08 00:27:30 · 139 阅读 · 0 评论 -
有意思的 requestAnimationFrame html动画api
1、原由今天在看一个开源的Ui框架(vue)时,看到了一个返回顶部的自定义指令,也是随意一点,却发现,这个返回顶部页面滚动还带了动画,但是从f12确看不到动画的‘痕迹’,于是勾引了我的好奇心,不由去查看了该部分饿源码,却发现了 requestAnimationFrame这玩意2、requestAnimationFrame,浏览器请求动画的api,该api接收的一个回调,且已该浏览器刷新的帧数去执行,通常60hz(1000/60 16.7ms),也就是说,会以16.7ms的时间间隔去执行这个回调关于动原创 2020-10-24 23:46:07 · 227 阅读 · 0 评论 -
个人梳理 Js知识点
只记录了部分知识点大纲原创 2020-10-20 16:29:00 · 136 阅读 · 0 评论 -
js 事件 click onclick
记录 click 和 onclick 混淆点之前一直有点迷惑 onclick和click,今天看书可算搞清楚了,就记录一下吧 let div = document.getElementsByClassName('div')[0] div.onclick = function(e) { console.log('事件处理程序/事件侦听器') } setTimeout(() => { div.click() }, 3000);原创 2020-09-30 10:11:34 · 1156 阅读 · 1 评论 -
js 继承小计
function Person () { this.p1 = true } Person.prototype.getP1 = function () { return this.p1 } function Person2() { this.p2 = false } //让 一个原型对象 等于 另一个类的实例 ----继承 //这个原型对象 就包含了一个 指向另一个类的指针 //Person2.prototype 包含了...原创 2020-09-16 14:38:05 · 77 阅读 · 0 评论 -
js 包装数据类型 -----小计
js 中提供3个特殊引用类型 String、Number、Boolean,与其他引用数据类型一样,但也具有基本数据类型的相应的行为创建基本一个基本数据类型使用 带 new 关键字的构造函数创建 -----引用类型 let str = new String('使用构造函数创建') str.color = 'red' console.log(str.color) //red console.log(typeof str) //object通过构造函数的方式创建,基本数据类型,可以理解为原创 2020-09-14 18:11:25 · 175 阅读 · 0 评论 -
js 作用域小计
js 没有块级作用域在if语句中定义的变量,会添加到当前执行环境中if(true){ var a = '1'}console.log(a) ---->1 当前环境为 window function test(){ if(true){ var a = '1' } alert(a) ----->1 当前环境为 test}test()对于 for循环,结束后 变量任存在循环的 执行环境中for(var i = 0 ;i<10;i原创 2020-09-13 22:42:46 · 106 阅读 · 0 评论 -
js 执行环境 变量对象 活动对象
执行环境:定义了变量、函数有权访问其他数据,决定了他们各自的行为每当一个执行流进入函数时,就会被推入环境栈中,执行完之后,就被弹出,最底层就全局环境window变量对象:每个环境都有一个与之关联的变量对象,这个个对象里面就定义所有的函数和变量换句话说,在变量提升时,是将提升到了一个对象上-----变量对象,通过这个对象去访问。这也是 js 没有块级作用域的原因在执行函数前,会创建山下文对象,接着就是创建变量对象,对于函数1、建立arguments对象2、找到这个将要执行的函数内的所有函数声明原创 2020-09-13 22:23:31 · 250 阅读 · 0 评论 -
js函数传参数 按值传递
在js中,函数传递参数都是按值传递的,当在传递参数时,形参是一个局部变量,和实参互不影响,当参数是一个引用数据类型时,形参复制的是 实参的一份引用,所以当其改变时会影响外部实参,但并不意味着,是按引用传递的基本类型var num= 10test(num)function test(params){ params= 20 ----->改变}console.log(num) ------>外部变量num未发生变化调用函数时,params局部变量得到 nu原创 2020-09-13 11:02:22 · 1087 阅读 · 0 评论 -
简单 防抖 节流
<div class="move-box">宽100高100</div> <input type="text" class="input"> <script> let timer = null let dTimer = null let click = function(){ throttle(()=>{ console.log原创 2020-09-10 11:32:57 · 125 阅读 · 0 评论 -
js深拷贝、浅拷贝同时对比VUE源码写法
let origin = { a:1, b:3, f:['dd','pp'], c:{ d:'嵌套的' } } // 浅克隆 function原创 2020-09-10 10:59:32 · 225 阅读 · 0 评论 -
前端 拖拽---------小计
拖拽+边界值限定 <style> html,body{ width: 100%; height: 100%; margin: 0; padding: 0; } .move-box{ width: 420px; height: 560px; background:#f40 ;原创 2020-09-04 09:42:03 · 146 阅读 · 0 评论 -
记 今天看到的数组去重问题
let repeatArr = [1,1,1,2] let arr = [] 第一种 for(let i = 0; i<repeatArr.length; i++){ for(let j = i+1;j<repeatArr.length;j++){ if(repeatArr[i]==repeatArr[j]){ // 0 1...原创 2020-09-03 13:43:46 · 120 阅读 · 0 评论 -
移动端 Input自动上推页面
在做移动端或者小程序,可能都会遇到 Input输入时,自动上推页面,解决思路如下问题分析,在获取焦点的时候,键盘的抬起,上推了页面,那我们是不是可以给页面设置最小高度为当前屏幕高度,当键盘抬起时候,页面高度自然增加了,不会上推之前处理过,具体忘了,这里写个大概思路,可能有误...原创 2020-08-18 11:17:22 · 1172 阅读 · 0 评论 -
js 获取 上传视频时长
有时候我们在上传视频时,可能需要获取视频时长,可以有两种方法1.创建video标签,赋值src,然后播放获取时长(可将标签隐藏)2.通过 Audio 对象将 视频文件对象传入,获取时长,代码如下**获取 视频对象** let fileVIdeo = document.getElementById("upload").files[0]**获取时长 是异步的,可将其封装为priomise**//这里的需求是 时长 8-58秒 大小 50M// 判断时长 getVideoTime(fi原创 2020-06-30 12:08:24 · 4331 阅读 · 0 评论 -
js + css实现点击 波纹效果
有时候我们为了增加用户体验,可能会有一些点击样式 类似框架中的haver-class 这里简单用 js+css 实现一个点击效果(类似水波纹)大体思路1.获取点击时 鼠标坐标(相对于父元素)2.在当前点 创建 节点(设置对应的样式)3.设置定时器,移除节点–Okjs + dom<div class="box"> <button>点击试试1<...原创 2020-04-30 00:48:38 · 784 阅读 · 0 评论 -
简单 节流写法
let throttle_timer = nullexport const throttle = (cb,time = 3000) =>{ if (!throttle_timer) { throttle_timer = setTimeout(()=>{ throttle_timer = null },time) cb() } }原创 2020-04-22 18:20:25 · 556 阅读 · 1 评论 -
在 vue 中使用 typescript(vuex使用, 组件注册,接口定义)
在vue项目中使用typescript,主要是vuex的使用,组件全局注册,接口的定义一 项目搭建-----跳过(需要注意的是,如果不小心选择了语法检测,可在根目录下新建 vue.config.js 文件 里面添加如下)module.exports = { lintOnSave: false }二 组件全局注册(定义的过滤器,指令等),主要介绍 vue.use()方法这...原创 2020-04-19 16:50:20 · 3036 阅读 · 1 评论