javascript技巧

Javascript实用方法之json合并的场景分析

2022-09-05
场景 2个json合并, jQuery 的“extend()”方法有两个原型:合并的方法,分别是浅合并和深度合并,其实浅合并只是json的第一层被合并,而深度合并是全部层数都被合并,分别如下写法: 1.浅合并,target被object1...合并,只有一层 $.extend( target [, object1 ] [, objectN ] ) 深度合并,target被object1...合并,包含一层二层三层... 要深度合并, [deep]需要为true, 后面覆盖前面,所以如要要保留后面

JS中的art-template模板如何使用if判断

2022-09-05
目录 JS art-template模板使用if判断 模板引擎art-template的基本使用 一.输出数据 二.if判断语句 三.for循环语句 四.子模板 JS art-template模板使用if判断 JS代码:     // json数据     var json=[         {             "id": 1,             "good_sign": 2,             "good_img": &q

JavaScript webpack5配置及使用基本介绍

2022-09-02
目录 一.webpack 1.1 简介 1.2 五大核心概念 entry (入口) output (出口) loader plugin (插件) mode (模式) 二.配置及使用 项目结构 使用html-webpack-plugin 三.写在最后 一.webpack 1.1 简介 在最原始的前端开发中,我们引入js和css等文件都是通过手动地在html中插入script和link标签来达到引用的目的,不仅繁琐,每个文件都需要单独发一次请求,而且容易发生变量冲突的问题. 于是提出了JavaScr

一文带你彻底搞懂JavaScript正则表达式

2022-08-31
目录 正则表达式的概述 什么是正则表达式 正则表达式的作用 正则表达式的特点 正则表达式在js中的使用 创建正则表达式 测试正则表达式 test 正则表达式中的特殊字符 正则表达式的组成 边界符 字符类 量词符 预定义类 正则表达式的替换 开发中常用正则表达式 小结 正则表达式的概述 什么是正则表达式 正则表达式( Regular Expression ) 是用于匹配字符串中字符组合的模式.在js中,正则表达式也是对象! 正则表达式的作用 正则表达式通常被用来检索.替换那些符合某个模式(规则)的

JavaScript中Number的对象解析

2022-08-30
目录 Number对象是什么 静态属性 实例方法 Number.prototype.toString() Number.prototype.toFixed() Number.prototype.toExponential() Number.prototype.toPrecision() Number.prototype.toLocaleString() Number对象是什么 Number对象是数值对应的包装对象,可以作为构造函数使用,也可以作为工具函数使用. 作为构造函数时,它用于生成值为数值

js防抖具体实现以及详细原理步骤说明(附实例)

2022-08-29
目录 Why?为啥要有防抖? What? 啥是防抖? How? 防抖咋用啊? 什么是延迟debounce?? 总结 ps:本文将从一个案例出发循序渐进,在其中你不仅能知道防抖是如何实现的,还可以学习到关于 this .apply.arguments 等知识的具体应用. Why?为啥要有防抖? 因为有时候频繁的事件触发是没有意义的,不仅影响性能还可能造成卡顿. 为了避免这种情况,我们需要用防抖来解决这个问题. What? 啥是防抖? 防抖debounce: 简单来说,防抖的效果就是在一定的时间间隔

Vue自定义日历小控件使用方法详解

2022-08-29
本文实例为大家分享了Vue自定义日历小控件的具体代码,供大家参考,具体内容如下 废话少说,先上效果图: 可以在效果图中看到,选择不同的月份的时候当月天数与星期几都是一一对应,非当月天数则是灰色显示,一目了然. 并且此日历控件支持自动确定当前时间,每次打开默认显示的就是最新的月份,用来做签到打卡的功能比较合适. 由于使用的是原生div进行制作,自定义功能非常强,可以自由的更换样式.背景.颜色.大小等等. 在与数据库的时候可以从数据库获得时间信息并填充到控件中,图中的色块就可以看出. 该控件使用了V

uniapp小程序使用RSA加密解密的操作代码

2022-08-29
1.安装wxmp-rsa npm i wxmp-rsa -S 2.新建rsa.js文件 import WxmpRsa from 'wxmp-rsa' //公钥和私钥换自己的 // 定义公钥 const publicKey = ` -----BEGIN PUBLIC KEY----- MIGeMA0GCSqGSIb3DQEBAQUAA4GMADCBiAKBgFnWSUwsmGawhMJ30z6y5li2jcf1 m7rPMZcwZOS3To8bk3OBaMGhVEc1F8GtJBbc1rn/HCL

TypeScript中定义变量方式以及数据类型详解

2022-08-29
目录 TypeScript定义变量 变量声明格式 变量类型推导 JS和TS的数据类型 TS中使用JS的数据类型 number类型 boolean类型 string类型 Array类型 Object类型 Symbol类型 null和undefined类型 TS自身特有的数据类型 any类型 unknown类型 void类型 never类型 tuple类型 总结 TypeScript定义变量 变量声明格式 我在前面强调过,在TypeScript中定义变量需要指定 标识符 的类型. 所以完整的声明格式

JavaScript自定义日历实现签到功能

2022-08-29
本文实例为大家分享了JavaScript自定义日历签到功能的具体代码,供大家参考,具体内容如下 先看下效果图 红色块为已签到的日期,样式可以随意更改,清晰明了,话不多说上代码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath

js数组去重常见的方法汇总(7种)

2022-08-28
目录 1.借助ES6提供的Set结构 new Set() 简单好用 强烈推荐 2.利用 filter() 去重 3.利用for 循环 搭配 indexOf 去重 4.将数组的每一个元素依次与其他元素做比较,发现重复元素,删除 比较繁琐 不推荐 5.借助新数组 通过 indexOf 方法判断当前元素在数组中的索引,如果与循环的下标相等则添加到新数组中 6.利用双重for循环 7.利用includes实现数组去重 总结 1.借助ES6提供的Set结构 new Set() 简单好用 强烈推荐 直接给一

js实现签到日历

2022-08-28
本文实例为大家分享了js实现签到日历的具体代码,供大家参考,具体内容如下 wxml代码 <view class="boxMain" style="height:{{dateList.length>35?'805rpx':'730rpx'}}">     <view class="calendarHeader">         <view>本月已签到<text>{{recordList.len

使用 TypeScript 开发 React 函数式组件

2022-08-28
目录 前言 如何使用 TypeScript 定义函数式组件 1. 使用 React.FC 2. 使用 JSX.Element 3. 直接定义完整类型 4. 使用 React.PropsWithChildren 使用过程需要注意的点 1. 函数式组件返回值不能是布尔值 2. 无法为组件使用 Array.fill() 填充 3. 支持使用泛型来创建组件 前言 在我们使用 React 开发项目时,使用最多的应该都是组件,组件又分为函数组件和类组件,我们可以这么定义: 定义函数组件: function

uni-app实现微信小程序长按拍视频功能

2022-08-28
本文实例为大家分享了uni-app实现微信小程序长按拍视频功能的具体代码,供大家参考,具体内容如下 html <!-- 上传视频 -->      <view class="Voice_input">                 <text class="Voice_title">上传视频:</text>                 <view class="" >       

微信小程序实现五星评价

2022-08-28
本文实例为大家分享了微信小程序实现五星评价的具体代码,供大家参考,具体内容如下 首先准备两张图片,在阿里巴巴矢量图标库中随便下两个颜色不一样的星星 效果如下 wxml 循环五次图片,添加点击事件 <view class="card_start flex">     <span style="font-size: 28rpx;">服务评价</span>        <image class="imagecls&qu

微信小程序实现上传图片小功能

2022-08-28
本文实例为大家分享了微信小程序实现上传图片的具体代码,供大家参考,具体内容如下 用到的apiwx.chooseMedia(); 用于拍摄或从手机相册中选择图片或视频 功能:点击上传图片,可多选,或者拍照上传:点击图片放大查看:长按图片删除 效果图 json里面引用weui的组件uploader {   "navigationBarTitleText": "评价工单",   "usingComponents": {     "mp-upl

微信小程序自定义导航的方法

2022-08-27
本文实例为大家分享了微信小程序自定义导航的具体代码,供大家参考,具体内容如下 在app.js中获取状态栏信息和胶囊按钮信息 onLaunch() {     // 展示本地存储能力     const logs = wx.getStorageSync('logs') || []     logs.unshift(Date.now())     wx.setStorageSync('logs', logs)     // 获取系统信息     this.globalData.systemInfo

微信小程序实现评价功能

2022-08-27
本文实例为大家分享了微信小程序实现评价的具体代码,供大家参考,具体内容如下 首先去图标库,找一个空心星图片和一个实星图片 先是效果图 代码 wxml文件 for循环5次,初始值是5星,data-name用于区别是那个评价的星星src="{{item-total+1>0?’…/image/empty_stars.png’:’…/image/entity_stars.png’}}"条件判断,图片判断一个是空星,一个实星,根据自己图片地址改变 <view class="

微信小程序实现上传视频功能

2022-08-27
本文实例为大家分享了微信小程序上传视频,供大家参考,具体内容如下 微信开发者工具需要安装ffmpeg环境才能正常使用下面的官方方法. 1.调用官方提供的方法(wx.chooseMedia) choosevideo(){     let that=this     console.log("上传视频的方法")     wx.chooseMedia({       count: 1,  //上传视频的个数       mediaType:['video'],  //限制上传的类型为vide

微信小程序实现拍照打卡功能

2022-08-27
本文实例为大家分享了微信小程序实现拍照打卡的具体代码,供大家参考,具体内容如下 由于拍照组件是相当于一个块,用隐藏显示的方法不太好,为了更好的用户交互,选择了在一个新的页面调用相机组件,上传图片并保存打卡数据的方式. 小程序端 签到页面wxml <view class="signBtn" bindtap="signSubmit">   <view>{{signTime}}</view>   <view>打卡签到<