javascript技巧

本文实例为大家分享了微信小程序实现上传图片的具体代码,供大家参考,具体内容如下 //wxml <button class='button' bingtap="uploadSomeMsg">上传</button>               <view class="uploadImgBox">             <view class='smallImgBox'>               <block

由于之前做过12306的自动抢票软件,因此对12306情有独钟,接下来就给大家介绍一下12306用户登录密码的参数破解办法. 最近在学习JS逆向方面的知识,由于之前做过12306的自动抢票软件,因此对12306情有独钟,接下来就给大家介绍一下12306用户登录密码的参数破解办法. 首先我们打开12306的登录界面,打开抓包工具,输入用户名和一个错误的密码(例:123456),点击登录按钮并滑动验证码进行验证,在Ajax包中我们可以点击login这个包进入查看,我们可以发现password这个参数

本文实例为大家分享了小程序轮播每次显示三条数据的具体代码,供大家参考,具体内容如下 1.页面布局 <!-- 统计过程控制s -->               <view class='Lean_item'>                 <view class='Lean_container'>                   <view class='Lean_item_title'>                     <image c

目录 前言 改写this实现思路 前期准备 手写call方法 手写apply方法 手写bind方法 前言 改变this指向在书写业务的时候经常遇到,我们经常采用以下方法进行改写 使用作用声明变量存储this 使用jJavaScript的原生方法call,apply,以及bind进行改写 第一种方法就不说了,就是一个变量存储的问题,主要说第二种如何实现的 call,bind,apply方法都是JavaScript原生的方法,挂载在Function原型上,使得所有函数都可以调用,今天我们来实现一下c

目录 演示 技术栈 源码 css js 演示 技术栈 这里用到了一个二维码生成库qrcode.js下面是简单介绍: //初始化QRCode对象 var qrcode = new QRCode(document.getElementById("qrcode")); //也可以在初始化QRCode对象,传入更多参数 var qrcode = new QRCode(document.getElementById("qrcode"),{ width: 128, height

本文实例为大家分享了微信小程序实现录音的具体代码,供大家参考,具体内容如下 为录音 录音中 wxml: <!-- 开始录音 --> <image src="/img/add_voice.png" class="add-voice" wx:if="{{record == 0 }}" bindtap="startRecord"></image>   <!-- 录音中 --> <

目录 前言 数组转换为树 树转换为数组 总结 这段时间重新捡起了数据结构和算法,发现里面的树和图是真的掉头发.本文基于一个面试题,详细分析如何实现数组和树的相互转换. 前言 树或者图是个比较抽象的概念,并不存在这样的数据类型.我们看一下树的结构,一层嵌套一层,同层次可能还会有多个节点,这种结构的数据可以使用{}对象来表示.数组就比较简单了,因此数组和树的转换可以理解为数组和对象之间的转换,只是需要转换的数组和对象都是比较特殊的数据.为了更好的看清楚转换过程,本文采用ts的语法,使用js的话没有类

本文实例为大家分享了小程序实现轮播图的具体代码,供大家参考,具体内容如下 那个先上效果: step1:页面index.wxml代码 <!-- 轮播 --> <swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>     <block wx:for="{{bnrUrl}}" wx:for-i

目录 一.keyof 简介 二.keyof 的作用 三.keyof 与对象的数值属性 四.keyof 与 typeof 操作符 一.keyof 简介 TypeScript 允许我们遍历某种类型的属性,并通过 keyof 操作符提取其属性的名称.keyof 操作符是在 TypeScript 2.1 版本引入的,该操作符可以用于获取某种类型的所有键,其返回类型是联合类型.下面我们来看个例子: interface Person {   name: string;   age: number;   lo

目录 前言 定义枚举 << 是什么? 用法 如何理解这段代码? 我们为什么要使用这个技巧? 学习Vue源码 前言 假设有这样一个场景,我们需要统计员工的技术栈,目前我们需要标记的技术有 CSS.JavaScript.HTML.WebGL. 然后我可以这样写枚举: const SKILLS = { CSS: 1 , JS: 2, HTML: 3, WEB_GL: 4 } 之前是这样写的,但是,最近看vue源码的时候,发现了一个高效使用枚举的技巧,在这里分享给大家. 定义枚举 我们可以这样写上面的

目录 实现思路 准备知识 data-* getBoundingClientRect() throttle window.innerHeight 完整代码 js部分 CSS部分 运行结果 总结 图片懒加载,往往作为减少首页白屏时间的一个解决方案而出现.直观的来说,就是不要直接加载所有图片,而是满足一定条件后才加载,也就是”惰性加载“.实现图片懒加载的方式有很多,如果要简单点那就直接使用第三方插件:vue-lazyload,如果想探究一下别人的插件是怎么实现图片懒加载的,那么可以看看本文是如何实现的

目录 this指向原理 问题的由来 内存的数据结构 函数 环境变量 箭头函数的缺点 不适用的场景 总结 箭头函数作为ES6新增的语法,在使用时不仅能使得代码更加简洁,而且在某些场景避免this指向问题.但是箭头函数不是万能的,也有自己的缺点以及不适用的场景,虽然可以解决this只想问题,但是也可能会带来this指向问题.具体场景具体分析,本文就深入探讨箭头函数. 箭头函数没有自己的this,其this取决于上下文中定义的this. this指向原理 问题的由来 学懂 JavaScript 语言,

目录 添加基站模型 拖拽 这个地方是想实现一个什么效果呢?就是使用 cesium 在地图上添加一个3D模型,然后实现拖拽效果. 添加基站模型 然后这篇博文介绍的主要不是添加模型,但是也简单把代码直接粘贴过来吧,就不详细说了. // 添加基站模型 function addSite() { let position = Cesium.Cartesian3.fromDegrees(116.236393, 40.075119, 0); // 设置模型方向 let hpRoll = new Cesium.

目录 前言 1.目标分析 2.setTimeout 封装 3.Promise 封装 4.async/await 总结 前言 我们都是 JavaScript 是一个单线程语言,单线程有它的好处也有它的坏处.在我们熟知的如 Java.C++等语言中,都提供了一个叫做 Sleep 的内置函数.这个函数的作用就和它的名字一样:睡眠. 假设我们有这样一个场景:我们需要在项目运行起来后的十分钟之后去执行一段代码,这段代码可以是符合你业务场景的任何代码,比如查看内存占用多少等等. 在 Java 这类语言中,可

前言 策略设计模式就是指一个问题匹配多个解决方法,不一定要用到哪一个,而且有可能随时增加多个方案 比如我们去买书,书店都会搞一些优惠活动,满100减20,满200减50,八折优惠这些,但是优惠活动源源不止这些,后期会陆续添加优惠活动,比如双11活动打七折,等到双11活动过去之后打七折活动还需要取消 我们先不用策略设计模式进行实现计算折扣后价格,我们声明一个方法,里面接受俩个参数,这俩个参数一个是价格一个是折扣种类,然后在方法里面使用if语句判断折扣种类计算价格,如果没有折扣就是原价,最后把计算过

目录 bind.call和apply的用法 bind call&apply 实现bind 实现call和apply 总结 bind.call和apply都是Function原型链上面的方法,因此不管是使用function声明的函数,还是箭头函数都可以直接调用.这三个函数在使用时都可以改变this指向,本文就带你看看如何实现bind.call和apply. bind.call和apply的用法 bind bind()方法可以被函数对象调用,并返回一个新创建的函数. 语法: function.bin

目录 手撕Promise 看完收获 Promise分析 作用 特点 总体实现 resolve和reject初步实现 then方法的实现 Promise.all的实现 手撕Promise 手写一个Promise已经是一个常见的手写功能了,虽然实际工作上可能并不会用到.但是在面试时还是会经常被提起的. 看完收获 实现一个手写promise 对promise执行流程有着更深刻的理解 从底层理解proimse,应对各种面试题 Promise分析 作用 通过链式调用的方式,解决回调地狱的问题. 特点 是E

本文实例为大家分享了JavaScript实现动态网页飘落雪花的具体代码,供大家参考,具体内容如下 设计思路: 1.定义一定数量的雪花层,每层包含一个雪花: 2.雪花水平方向左右摇摆则是Math.sin()方法,正弦函数: 3.雪花垂直方向则是采用自加方法每次增加一定距离: 4.雪花每个大小不一: 采用的方法如下: Math.ceil()方法:返回大于等于其数字参数的最小整数,如Math.ceil(3.4)=4: Math.random()方法:返回介于0和1之间的随机数(含0但不包括1): cl

目录 一.数组的声明 二.数组初始化 三.数组元素赋值.添加.更改 四.删除 五.合并.断开数组 六.查找数组元素位置 七.连接数组元素 八.排序.反序数组 九.遍历请看这里 数组是一个很简单的数据结构,但是每次使用TypeScript的数组的时候又总是忘记怎么用了,干脆直接弄成干货,忘了过来看看. 一.数组的声明 let array1:Array<number>; let array2:number[]; 二.数组初始化 let array1:Array<number> = ne

目录 前言 采集阶段:要采集哪些数据? 前端异常 接口异常 行为数据 API 阶段:搭建上报数据的 API 接口 数据存储阶段:接口对接数据库 查询统计阶段:数据查询和统计分析 可视化阶段:最终的数据图表展现 报警阶段:发现异常马上报警通知 部署阶段:万事俱备只等上线 总结 前言 上一篇介绍了,前端为什么要有监控系统?前端监控系统的意义何在?有小伙伴看完后留言想听些详细的实现.那么本篇我们就开始介绍前端监控如何实现. 如果还不明白为什么,搞监控有什么用,建议先看上篇文章:为什么前端不能没有监控系