javascript技巧

小程序实现侧滑删除功能

2022-06-24
本文实例为大家分享了小程序实现侧滑删除的具体代码,供大家参考,具体内容如下 1.页面布局 <view class='dialogue-box'>       <scroll-view scroll-y="true" style="height:{{winHeight-50}}px">         <view class='top-list'>           <view class='standard_text1'&

小程序自定义弹框的方法

2022-06-24
本文实例为大家分享了小程序自定义弹框的具体代码,供大家参考,具体内容如下 1.页面简单布局 <button bindtap='ElasticFrameClick'>弹框</button> <view class="modal-mask" bindtap="hideModal" wx:if="{{showModal}}"></view> <view wx:if="{{showModal

微信小程序开发实现轮播图

2022-06-24
小程序,移动端离不开轮播图的功能,下面就写一个小程序的轮播图功能分享给大家 效果图: 1.页面代码 <!--index.wxml--> <view class="container">     <!--轮播图-->   <swiper class="home-swiper" indicator-dots="true" autoplay="{{autoplay}}" interval=&

JavaScript的11个小技巧整理

2022-06-24
目录 1.过滤唯一值 2.短路求值(Short-Circuit Evaluation) 工作原理 场景举例 3.转换Boolean型 4.转换String型 5.转换Number类型 6.快速求幂 7.快速Float转Integer 使用场景 8.类中自动绑定 9.截取数组 10.获取数组中的最后的元素 11.格式化JSON代码 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的,没有重复的值.结合扩展运算符(...)我们可以创建一个新的数组,达到过滤原数组重复值

小程序模实现糊搜索功能

2022-06-24
本文实例为大家分享了小程序模实现糊搜索功能的具体代码,供大家参考,具体内容如下 1.写好页面布局 <!--搜索--> <view class="searchbox">   <form bindsubmit="formSubmit">     <view class="search">       <image class="search-icon" src="{{

解决window.open()被浏览器拦截的问题

2022-06-24
一.问题描述 最近在做项目的时候碰到了使用window.open被浏览器拦截的情况,虽然在自己的环境可以对页面进行放行,但是对用户来说,不能要求用户都来通过拦截.何况当出现拦截时,很多用户根本不知道发生了啥,不知道在哪里看被拦截的页面.因此必须通过代码来解决这个问题! 以下是浏览器拦截示例: 二.问题分析 浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了,即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('cl

一文掌握JavaScript数组常用工具函数总结

2022-06-24
目录 一. 实现Array.isArray 二. 将类数组转换为数组 1. 借用数组的方法进行转换 2. es6的方式转换 三. 判断是否为数组 四. 数组方法实现 1.forEach 2. filter 3. every 4. some 5. findIndex 6. Reduce 五. 实现数组扁平化 1. 普通递归+concat 2. reduce+concat 3. while+concat 4. toString+split 5. flat 6. 正则 六. 去重 1. 利用 ES6 

JavaScript中arguments.callee属性的作用与替换方案

2022-06-24
arguments.callee的作用 在函数内部,有两个特殊的对象:arguments 和 this.其中, arguments 的主要用途是保存函数参数, 但这个对象还有一个名叫 callee 的属性,该属性是一个指针,指向拥有这个 arguments 对象的函数. 请看下面这个非常经典的阶乘函数 function factorial(num){ if (num <=1) { return 1; } else { return num * factorial(num-1) } } 定义阶乘函

微信小程序实现轮播图指示器

2022-06-24
本文实例为大家分享了微信小程序实现轮播图指示器的具体代码,供大家参考,具体内容如下 1.文件目录 2.轮播图页面布局 需求:自定义轮播指示器:当轮播图发生变化时,自定义轮播指示器跟随图片发生对应改变 bindchange:current 改变时会触发 change 事件,即当图片索引发生变化时触发的事件 current:当前所在滑块的 index (number类型) autoplay: 是否自动切换 interval: 自动切换时间间隔 circular: 是否采用衔接滑动 <view cla

详细解析let和const命令

2022-06-23
目录 let命令 基本用法 特性 暂时性死区 不允许重复声明 const 特性 补充——块级作用域 let命令 基本用法 我们都知道let命令是用来声明变量的,类似于var,但是通过let命令声明的变量只在所在代码块内有效. let a = []; for (let i = 0;i < 10; i++ ) { a[i] = function () { console.log(i); } } a[5](); // 5 如上代码所示,使用的是let声明的i,那么这个变量仅在块级作用域内有效,即只在每

微信小程序实现轮播图标题跑马灯

2022-06-23
本文实例为大家分享了微信小程序实现轮播图标题跑马灯的具体代码,供大家参考,具体内容如下 微信小程序做轮播图,轮播图下的标题如果不长不需要跑马灯效果,过长的无法显示全的则添加跑马灯效果 <swiper class="swiper" current="0" bindchange="onSlideChange">     <swiper-item wx:for='{{carouselImgArr}}' wx:key='index'&g

javascript的23种设计模式示例总结大全

2022-06-23
目录 一.设计模式介绍 设计模式的五大设计原则 设计模式的三大类 二.设计模式 1.工厂模式 2.抽象工厂模式 3.建造者模式 4.单例模式 5.适配器模式 6.装饰器模式 7.代理模式 8.外观模式 9.发布订阅模式 10.迭代器模式 11.状态模式 12.策略模式 13.命令模式 14.组合模式 15.模块方法模式 16.享元模式 17.职责链模式 18.中介模式 19.原型模式 20.备忘录模式 21.桥接模式 22.访问者模式 23.解释器模式 总结 一.设计模式介绍 什么是设计模式 设

小程序自定义轮播图圆点组件

2022-06-23
本文实例为大家分享了小程序自定义轮播图圆点组件的具体代码,供大家参考,具体内容如下 微信小程序自带的轮播图小点,是一个圆点且在图片上展示,不美观.上图为自定义后的轮播图效果 代码如下: wxhtml: <!-- 轮播图 -->     <view class="lbt">       <swiper class="banner-list" style="height:100%;" circular="{{c

深入学习JavaScript中的promise

2022-06-23
目录 为什么要用Promise? 使用Promise解决异步控制问题 Promise的结构 回调函数 为什么异步代码一定是回调函数结构? 刨析Promise 原型方法——catch\finally\then 为什么要在.then的回调函数中return一个Promise呢? 那如果我们不指明return返回值,它会返回什么呢?是如何实现链式调用呢? resolve和reject resolve() reject() Promise常用API——all().allSettled().any().r

JavaScript手写Promise核心原理

2022-06-23
目录 准备 完善 resolve/reject then 异步处理 链式调用 边界处理 catch 优化后完整代码 准备 首先,promise 有三种状态:pending fulfilled rejected; promise在实例化操作中, 有两个改变状态的方法,分别为resolve,reject; promise有很多方法,详情请见 mdn, 本篇文章先实现 promise的核心api: then和catch; 我们使用 es6 提供的 class 来实现 class MyPromise {

vue实现简易选项卡功能

2022-06-23
本文实例为大家分享了vue实现简易选项卡功能的具体代码,供大家参考,具体内容如下 1. 效果: 1. 实现发布评论功能 2. 实现评论列表的展示 3. 使用标签页切换的方式来实现 4. 高亮显示当前标签页栏对应的导航 2.HTML <div id="app">         <p>             <button @click="tab(0)" :class="current===0?'active':''"

JavaScript设计模式中的观察者模式

2022-06-23
目录 观察者设计模式 初始数据 被观察者 观察者 观察者设计模式 观察者设计模式中分为被观察者和观察者,当被观察者触发了某个边界条件,观察者就会触发事件,这里需要俩个构造函数进行观察者设计模式一个是被观察者一个是观察者 我们来利用观察者监听对象某个属性的修改操作,对象某个属性的修改会触发观察者的某些方法 初始数据 let obj = { name: "若水" } 被观察者 创建被观察者,我们给被观察者定义一个初始化状态,用于记录观察属性的初始值,还需定义一个观察者方法队列,用于对观察者

JavaScript中BOM,DOM和事件的用法详解

2022-06-22
目录 BOM 概念 对象组成 Window:窗口对象 Location:地址栏对象 History:历史记录对象 DOM 概念 W3C DOM 标准被分为 3 个不同的部分 核心DOM模型 HTML DOM 事件监听机制 概念 常见的事件 事件简单学习 BOM 概念 BOM全称Browser Object Model浏览器对象模型,将浏览器的各个组成部分封装成对象. 对象组成 Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Lo

梳理总结25JavaScript数组操作方法实例

2022-06-22
目录 1.删除数组重复项 2. 获取数组的片段 3.Array.from 达到 .map 的效果 4.置空数组 5. 将数组转换为对象 6. 用数据填充数组 7. 数组合并 8.求两个数组的交集 9.从数组中删除虚值 10. 从数组中获取随机值 11.反转数组 12 lastIndexOf() 方法与indexOf()方法 13.对数组中的所有值求和 14.数组的遍历 15.数组的映射 16.数组的拷贝 17.数组元素的查找 18.查询数组 19.数组的过滤 20.数组的插入 21.删除数组元素

微信小程序实现播放音频

2022-06-22
本文实例为大家分享了微信小程序实现播放音频的具体代码,供大家参考,具体内容如下 wxml: <!-- 语音 --> <view wx:if="{{content.mp3.length > 0 }}">   <view class='audio' bindtap='musicStart'>     <view class='audio_btn'>       <image src='/img/btn_play3.png' cla