javascript技巧

微信小程序实现简单Tab切换效果

2021-05-12
本文实例为大家分享了微信小程序实现Tab切换效果的具体代码,供大家参考,具体内容如下 使用步骤 代码如下(示例): 定义一个状态status data: { status: 0, }, 代码如下(示例): 在点击切换时利用status来切换根据index下标来实现 js代码: handtab(e) { console.log(e); let index = e.currentTarget.dataset.index console.log(index); this.setData({ curre

JS如何实现基于websocket的多端桥接平台

2021-05-12
1. 要调试什么 我们主要要知道调试什么,最终回去到什么样子的结果: 1.调试接口,传入接口地址,即可获取对应的结果:并且可以同时调试多个设备: 2.调试 jsapi,输入对应的方法,则即可在新闻客户端中展示出效果. 在调试接口方面,其实我们有一种方法可以方便地进行调试,但有两个限制条件:Android系统和测试版的客户端,这样通过 Chrome 浏览器进行桥接.但这种方式,在 iOS 系统和正式版的客户端中,就失效了. 2. websocket 的特性 WebSocket 协议的最大特点就是,

Promise面试题详解之控制并发

2021-05-11
前言 在写这篇文章的时候我有点犹豫,因为先前写过一篇类似的,一道关于并发控制的面试题,只不过那篇文章只给出了一种解决方案,后来在网上又陆续找到两种解决方案,说来惭愧,研究问题总是浅尝辄止,所以今天便放在一起,借着这道面试题再重新梳理一下. 题目是这样的: 有 8 个图片资源的 url,已经存储在数组 urls 中(即urls = ['http://example.com/1.jpg', -., 'http://example.com/8.jpg']),而且已经有一个函数 function loa

JavaScript判断文件是否存在的实例代码

2021-05-11
一.业务场景 最近一直在做和文件上传和下载相关的开发,在涉及到下载的时候,我使用如下的方法进行下载 //获取或者赋值一个下载路径 let downUrl; //采用如下的方式可以直接下载文件 window.location.href = downUrl; 业务问题:如果这个文件不存在,会出现页面跳转的情况: 比如:1.刚好文件存储服务器挂机了 2.或者刚好文件存储服务器上的文件被人删除了 如上的不正常访问都会导致下载功能出现问题,对用户来说不友好的是出现页面跳转的情况 这里如果我们在下载的时候知

一篇文章弄懂javascript内存泄漏

2021-05-11
1.什么是内存泄漏 在了解什么是内存泄漏之前, 我们应该要对内存是什么有个概念, 随机存取存储器(英语:Random Access Memory,缩写:RAM)是与 CPU 直接交换数据的内部存储器.它可以随时读写, 而且速度很快,通常作为操作系统或其他正在运行中的程序的临时资料存储介质. 什么是内存泄漏? : 程序不再需要使用的内存, 但是又没有及时释放, 就叫做内存泄漏! 然后在理解泄漏之前, 我们的了解下内存的管理, 在一些底层语言中, 如C语言, 内存是需要开发者自己分配和释放的, 通过

JavaScript继承的三种方法实例

2021-05-11
继承 1. 什么是继承 继承: 首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承. 继承也是为了数据共享,js中的继承也是为了实现数据共享 我们可以联想到原型,他的两个作用是: 原型作用之一:数据共享,节省内存空间 原型作用之二:为了实现继承 继承是一种关系:父类级别与类级别的关系 例子: 人类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 学生类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 学习行为 老师类别: 姓名, 性别, 年龄

JavaScript原始值与包装对象的详细介绍

2021-05-10
前言 随着 JavaScript 越来越流行,越来越多地开发者开始接触并使用 JavaScript. 同时我也发现,有不少开发者对于 JavaScript 最基本的原始值和包装对象都没有很清晰的理解. 那么本篇文章,就由渣皮来给大家详细介绍一下它们.

JS使用reduce()方法处理树形结构数据

2021-05-09
定义 reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值. reduce() 与forEach().map().filter()这些方法一样,也会对数组中的每一项进行遍历,但是reduce() 可以将遍历的前一个数组项产生的结果与当前遍历项进行运算. 语法 array.reduce(function(prev, cur, index, array){ ... }, init); 回调函数中的参数: prev 必需.表示调用回调时的返

JavaScript之不可靠的undefined

2021-05-09
undefined在 JavaScript 中,假设我们想判断一个是否是undefined,那么我们通常会这样写: if(a === undefined){//code} 但是,JavaScript 中的undefined并不可靠,我们试着写这样一个函数: function test(a) { var undefined = 1; console.log(undefined); // => 1 if(a===undefined) { // ... } } 可以看到,undefined被轻易地修改

JavaScript如何删除对象的某个属性详析

2021-05-09
1.delete delete是删除对象的属性没有任何剩菜,剩下的唯一真正的方法,但它的工作比其"替代"设置慢100倍 object[key] = undefined var myObject = { "ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*" }; delete myObject.

原生Js 实现的简单无缝滚动轮播图的示例代码

2021-05-08
   简单无缝滚动轮播图存在很多漏洞,就是后期增加图片时会很不方便,需要改动的地方也很多,耦合性也很强,只适用于一部分程序,所以我们可以通过改动图片结构和计算折算点的方式,升级代码.       原简单的滚动轮播代码 <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &

详解JS浏览器事件模型

2021-05-08
什么是事件 我想你很可能听说过事件驱动, 但是事件驱动到底是什么?为什么说浏览器是事件驱动的呢? 事件驱动通俗地来说就是什么都抽象为事件. 一次点击是一个事件 键盘按下是一个事件 一个网络请求成功是一个事件 页面加载是一个事件 页面报错是一个事件 浏览器依靠事件来驱动APP运行下去,如果没有了事件驱动,那么APP会直接从头到尾运行完,然后结束,事件驱动是浏览器的基石. 一个简单的例子 其实现实中的红绿灯就是一种事件,它告诉我们现在是红灯状态,绿灯状态,还是黄灯状态. 我们需要根据这个事件自己去完

promise封装wx.request的方法

2021-05-08
上篇文章给大家介绍了使用Promise封装小程序wx.request的实现方法,本文重点给大家介绍promise封装wx.request的方法,具体内容如下所示: 为什么要封装wx.request? 因为我们请求接口时,有时候会请求一个接口的多个api,如果没有使用封装,那么我们编写代码会变得繁琐,并且也会导致性能问题. 封装的话,利于我们编写,并且提高用户体验和便于代码的修改. 对于封装的选择为什么使用promise? 当我们进行微信小程序的编写时,写到wx.request的时候,我想大家一定

如何用JavaScipt测网速

2021-05-07
前言 事情是这样的,最近尝试写一个通过判断当前网速,从而在前端控制范围请求去分步请求一个大型文件的库.这个东东我现在一行代码都还没写,除了突然发现这个需求的思路有些不太实际之外,另一个原因是我突然问自己--前端要怎么判断网速啊?? ? ! 前端判断网速的原理总结 (注:下面求的网速单位默认为KB/S)通过查阅相关资料,我发现思路主要是分为以下几种: 1.通过img加载或者发起Ajax请求计算网速 通过请求一个和服务端同域的文件,例如图片等,在前端开始请求和收到响应两个时间点分别通过Date.no

微信小程序实现拍照和相册选取图片

2021-05-07
本文实例为大家分享了微信小程序实现拍照和相册选取图片的具体代码,供大家参考,具体内容如下 布局: <!--pages/camera/camera.wxml--> <view class="tui-menu-list" id="view1" style="display:flex;flex-direction:space-between"> <button id="b1" size="mi

基于 antd pro 的短信验证码登录功能(流程分析)

2021-05-07
概要 最近使用 antd pro 开发项目时遇到个新的需求, 就是在登录界面通过短信验证码来登录, 不使用之前的用户名密码之类登录方式. 这种方式虽然增加了额外的短信费用, 但是对于安全性确实提高了不少. antd 中并没有自带能够倒计时的按钮, 但是 antd pro 的 ProForm components 中倒是提供了针对短信验证码相关的组件. 组件说明可参见: https://procomponents.ant.design/components/form 整体流程 通过短信验证码登录的

微信小程序用户授权最佳实践指南

2021-05-07
前言 开发微信小程序中,经常会用到获取一些用户权限的页面,比如你要登录,就要获取个人信息.你要做人脸识别,就要获取相机权限.你要做位置地图功能.就要获取用户的位置权限,你要将图片保存在用户的相册,需要获取相册权限等等 微信的 scope 流程: 大多数功能都是没有授权不可用的,一般我会检测是否开启权限,然后如果开启了就继续使用,没开启就给出提示继续请求授权..如果还是拒绝 就给出提示 然后让用户手动去设置页打开... #正常逻辑 但是这一套写下来可能就是这样的: wx.getSetting({

微信小程序实现录音Record功能

2021-05-07
本文实例为大家分享了微信小程序实现录音Record功能的具体代码,供大家参考,具体内容如下 布局 <!--pages/record/record.wxml--> <view> <button class="tui-menu-list" bindtap="startRecordAac" type="primary">录音开始(aac)</button> <button class="t

详解TypeScript映射类型和更好的字面量类型推断

2021-05-07
概述 TypeScript 2.1 引入了映射类型,这是对类型系统的一个强大的补充.本质上,映射类型允许w咱们通过映射属性类型从现有类型创建新类型.根据咱们指定的规则转换现有类型的每个属性.转换后的属性组成新的类型. 使用映射类型,可以捕获类型系统中类似Object.freeze()等方法的效果.冻结对象后,就不能再添加.更改或删除其中的属性.来看看如何在不使用映射类型的情况下在类型系统中对其进行编码: interface Point { x: number; y: number; } inte

JS 9个Promise面试题

2021-05-07
1. 多个.catch var p = new Promise((resolve, reject) => { reject(Error('The Fails!')) }) p.catch(error => console.log(error.message)) p.catch(error => console.log(error.message)) 以上代码的输出将会是什么?请选择正确的答案: [ ] 打印一次消息 [x] 打印两次消息 [ ]UnhandledPromiseReject