
javascript
文章平均质量分 59
知猪狭
保护姑娘 贯彻落实
展开
-
forEach循环如何跳出
需求有一个数组arr,使用forEach,当遍历到2时跳出循环let arr = [1,2,3,4]arr.forEach(n=>{ if (n == 2){ // 跳出 }})注意break 和 continue 是给for循环使用的forEach的方法机制对数组的每个有效元素执行一次callback函数解决方法使用try{} catch(e) {}模拟一个错误let arr = [1, 2, 3, 4]let key = nulltry原创 2021-11-30 12:43:51 · 2446 阅读 · 0 评论 -
uni-app使用canvas技术实现弹幕(思路+代码)
之前在公司有一个项目,需要使用uni-app实现一个弹幕的效果,展示已付款用户。当时项目赶时间,使用了一个插件,后来琢磨了一下实现思路:分析一个弹幕功能,首先需要拿到弹幕内容,这个不用多说。除此以外,还要有画布的总宽度,让数据一开始处于画布区域之外。然后让数据以不同的速度,向canvas区域内容滑动,知道完全穿过这个canvas区域。当然数据不会只有一条,所以还要设置y轴的间距,如图所示:实现思路整理数据接口中返回的数据,一般只包含弹幕内容,所以速度和x轴,y轴这些属性,只能靠前端自己原创 2020-10-30 17:36:11 · 2428 阅读 · 4 评论 -
canvas解决绘制文字自动换行问题
今天在写小程序的canvas时,遇到一个蛮有趣的问题:使用canvas的ctx.fillText绘制文字时,即使超出画布了,也不会自动换行。于是琢磨出了如下解决办法:首先获取字符串的长度let allFontNum = str.length然后获取画布宽度,以画布宽度占整个屏幕宽度的90%为例let canvasWidth = wx.getSystemInfoSync().windowWidth * 0.9这样就可以计算出来,每一行需要绘制多少个字// 每行需要的字数 = 字符串长度向下取原创 2020-10-22 13:21:28 · 4455 阅读 · 2 评论 -
javascript中的面向对象:封装、继承、多态详解
目录封装继承多态重载arguments重构封装在面向对象中,一定要把公用以及父级自己要用的属性和方法封装在父对象的内部继承当子对象需要公用属性或方法时,可以直接从父对象中继承多态重载配合arguments,根据传入的参数不同,执行不同的函数体arguments一个类数组对象,包含所有传入的参数,是实现重载的一种工具重构父对象构造出来的属性和方法,都可以在子对象中重新定义...原创 2020-09-29 21:11:41 · 392 阅读 · 0 评论 -
观察者模式原理及演示代码
// 被关注的对象var data = { // 被关注的变量 money: 1000, // 存放观察者对象的数组 observes:[], // 通知观察者对象 notifyAll() { // 遍历调用观察者们的notify方法,即发出通知 this.observes.forEach((item)=>{ item.notify() }) }, // 修改属性,并执行 发出通知 的方原创 2020-09-21 12:39:02 · 122 阅读 · 0 评论 -
利用对象方法给数组去重
有这么一个数组var arr = [1,2,3,2,1,4]利用唯一下标去重一个对象中不允许有重复的下标var hash = {}for (var i = 0; i < arr.length; i++) { hash[arr[i]] = 1}var res = []var i = 0for (res[i++] in hash)console.log(res)遍历时,hash对象在内存中的样子hash = { 1: 1, 2: 1, 3: 1, 2: 1, // 不原创 2020-09-20 15:24:10 · 195 阅读 · 0 评论 -
使用访问器属性,模拟Vue的绑定原理
有这样一段HTML<h1>Welcome</h1><h2>积分:{{scroe}}</h2><h1>用户名:{{uname}}</h1><h2>积分:{{score}}</h2>分析new Vue()做了哪些事1、改造data对象中的属性,并通过访问器属性对每个变量进行保护var data = { _uname:"dingding", _score:2000}2、扫描真实DOM树并创建虚原创 2020-09-20 12:35:41 · 341 阅读 · 0 评论 -
详解call,apply,bind的区别
call场景函数get想要获取一个对象 lilei 的属性 this.name ,但是函数默认的this是指向window的,所以获取不到this.name这个值。解决办法:使用call将函数get默认的this指向对象 lilei。codefunction get(age,money) { console.log(this.name,age,money)}let lilei = {name:"lilei"}get.call(lilei,20,2000) // output:原创 2020-08-22 12:05:08 · 231 阅读 · 0 评论 -
Number对象的用法
创建方式字面量创建var num = 1;构造函数创建var num = new Number(1);相关api本身当作函数用Number(true); // output: 1;设置进制方法var num = 12;//转字符串同时,也转为2进制console.log(num.toString(2)) // output: 1100;保留小数点后n位var num = 314.00002;num.toFixed(n)...原创 2020-08-08 13:09:06 · 217 阅读 · 0 评论 -
数组反转原理及实现
原理定义一个新数组,让旧数组的值根据反向的下标添加进新数组。举例var arr = [1,2,3,4];这个问题考察的点在于如何获得旧数组反向的下标,涉及数组循环下标,首先考虑与arr.length的关系。目前数组下标0,1,2,3需要获取下标3,2,1,0arr.length4循环条件for(var i = 0; i < arr.length; i++) { console.log(i) // output: 0,1,2,3}根据上述已知条件可以让arr.l原创 2020-08-07 15:34:50 · 983 阅读 · 0 评论 -
javascript冒泡排序最详细解读
冒泡排序是什么机制有这么一组数据,要进行从小到大的冒泡排序。var arr = [23,79,40,19,57];根据冒泡排序的机制,让相邻的两个数进行两两比较,如果第一个数大于第二个数,则两个数交换位置。第一轮比较让23和79进行比较,23不大于79,位置不变79和40进行比较,79>40,两个数交换位置79和19进行比较,79>19,两个数交换位置79和57比较,79>57,两个数交换位置第二轮比较(节省篇幅:图解只展示最终结果)23和40比较,2原创 2020-08-07 14:27:12 · 449 阅读 · 1 评论 -
touch简单判断用户上滑或下拉操作
//判断touch事件var startx,starty,endx,endy;//开始点击的时候获取触点document.addEventListener("touchstart",function(e){ startx = e.touches[0].pageX; starty = e.touches[0].pageY;})//结束点击时获得触点document.addEventListener("touchend",function(e){ endx = e.chang原创 2020-08-03 15:42:18 · 768 阅读 · 0 评论