javascript技巧

目录 演示 技术栈 源码 css部分 大雨滂沱 演示 技术栈 最近用canvas有点上瘾,接着上次的雨滴和流星雨的思路我们在改进一下 <canvas id='canvas' width='1280' height='720'></canvas> 源码 css部分 body { margin:0; padding:0; background: #000; overflow:hidden; } canvas { background:url('../img/maxresdefault.

目录 使用定时器实现动画出现卡顿的原因 requestAnimationFrame 的前世今生 requestAnimationFrame VS setInterval 参考资料 总结 前段时间在使用 JavaScript 做动画的时候发现做出来的动画会出现卡顿的现象,今天我们主要就来聊一下卡顿的原因以及如何解决这个问题. 使用定时器实现动画出现卡顿的原因 主要原因是浏览器无法确定定时器的回调函数的执行时机.以 setInterval 为例,当一个 setInterval 定时器被创建后,它的回

目录 一.写在前面 二.正文部分 2.1 扁平数据转为 tree 数据 2.2 tree 数据转为扁平数据 2.3 完整测试 demo 三.写在后面 一.写在前面 有时我们拿到的数据的数据结构可能不是理想的,那么此时就要求前端程序员,具有改造数据的能力.例如拿到扁平的数据, 但我们要应用在 tree 树形组件或 Cascader 级联选择器组件中,这样的组件要求数据结构是非扁平的的具有层级递进关系的 tree 结构. 总之就是说,提供数据的接口给到的数据,未必符合要求,而当我们又无法令他人为为我

目录 前言 1. typeof.instanceof.Number.isInteger 2. parseInt.parseFloat 3. isNaN.isFinite 4. Number.isNaN.Number.isFinite 5. 正则表达式 6. 终极方案(推荐) 7. 结语 前言 js判断是否为数字的方式很多: typeof.instanceof.Number.isNumber parseInt.parseFloat isNaN.isFinite Number.isNaN.Numbe

目录 概念引入 问题现象 解决办法 恢复视频模式 概念引入 TypeScript 是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成 Transport Stream 即传输流,是一种常见的视频封装格式,基于MPEG-2的封装格式(所以也叫MPEG-TS) TypeScript和Transport Stream的文件扩展名均为ts 问题现象 在Windows操作系统上.ts被默认标记为Transport Stream,对于普通用户来讲这完全没有问题,但对于

目录 前言 1.基本概念 1.1 Map(字典) 1.2 Set(集合) 2.基本使用 2.1 Map 基本使用 2.2 Set 基本使用 3.Map和Set区别 4.使用场景介绍 4.1 Set对象使用场景 4.2 Map对象使用场景 5.思考点 总结 前言 作为前端开发人员,我们最常用的一些数据结构就是 Object.Array 之类的,毕竟它们使用起来非常的方便.往往有些刚入门的同学都会忽视 Set 和 Map 这两种数据结构的存在,因为能用 set 和 map 实现的,基本上也可以使用对

目录 什么是树形图 浏览JS树形图 创建一个基本的JS树形图 1. 创建一个HTML页面 2. 参考JavaScript文件 3.设置数据 4. 编写一些JS树形图代码 自定义JS树形图 A. 改变颜色 B. 应用线性色标 C. 格式化标签和工具提示 D. 按升序排列图块 树形图可视化广泛用于分层数据分析.如果你没有经验还想创建一个,那将会有些复杂.下面是一个详细教程,教你如何使用JavaScript创建交互式树形图. 宇宙中只有我们吗?我们每个人都曾在某个时候问过自己这个问题.当我们在考虑地球

小程序也是有富文本编辑器这个控件的,别说,之前我还真没注意. 官方文档 官方文档中给出的东西倒是不多,具体的代码示例在下图红框中标注的位置: 示例代码大概是这个样子: 通过官方的示例,我这边大概了解了一下微信小程序editor的使用,我这里封装了一个自定义组件: 效果如下图所示: 功能展示大概就是这个样子,我这里放一下我组件的全部代码: myEditor.js // api 请求类 const API = require("../../request/api.js").report;

目录 写在最前 git地址 成果展示 实现思路 详细说明 写在最后 写在最前 看了canvas的动画系列,已经抑制不住内心的冲动想写个小游戏了,还是那个套路——多写写,你才能了解它.加上这两天下班后我都没有机会去摸摸篮球,所以就写了个接球的小游戏(准确的说不能叫游戏,太简单了,叫动画吧...). 都是一些基础的实现,有时间你也可以试试,废话说到这里,我们开始吧. git地址 https://github.com/ry928330/ballGame.git 成果展示 实现思路 这里我们采用疑问的句

目录 可迭代对象(Iterable object) Symbol.iterator 把对象本身构造成迭代器 String也是可迭代的 String的迭代器 类数组对象和可迭代对象 Array.from 总结 可迭代对象(Iterable object) 数组是一个特殊的对象,它和普通对象的区别不仅仅在于元素的顺序访问.存储.另外一个重要的区别是:数组是可迭代的,也就是可以使用for ... of语句访问(迭代)所有的元素. 我们可以简单的做一个小实验: let arr = [1,2,3,4,5]

目录 一. 概念 1. 入口 1.1 基础概念 1.2 单文件入口 1.3 多文件入口 2. 出口 2.1 基础概念 2.2 使用占位符来为每个文件命名,保证名称唯一 2.3 使用CDN和资源hash 3. loader 3.1 基础概念 3.2 安装并使用loader 3.3 使用loader的三种方式 3.4 loader加载顺序 3.5 loader 特性 4. 插件 4.1 基础概念 4.2 核心知识 5. 模式 二. 配置 1. 基本配置 2. 多种配置 2.1 导出为一个函数 2.2

目录 演示 技术栈 源码 设置画布 js部分 演示 技术栈 介绍一下画布吧: HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性 它的方法挺多的大家可以去搜一下我就说几个常用的: 源码 设置画布 <canvas id="canvas" style="position:

目录 前言 宏任务 微任务 事件循环 宏任务与微任务 总结 参考资料 前言 异步函数也是有执行顺序的.本质上来说,JavaScript是单线程语言,不管是在浏览器中还是nodejs环境下.浏览器在执行js代码和渲染DOM节点都是在同一个线程中,执行js代码就无法渲染DOM,渲染DOM的时候就无法执行js代码.如果按照这种同步方式执行,页面的渲染将会出现白屏甚至是报错,特别是遇到一些耗时比较长的网络请求或者js代码,因此在实际开发中一般是通过异步的方式解决. 什么是异步?js是一步一步执行代码的,

本文实例为大家分享了js版扫雷游戏的具体代码,供大家参考,具体内容如下 界面 考虑到简单,一般,困难三个扫雷区域的格子数都不同,所以界面上的扫雷区域是用js动态生成.先搭好整体html框架: <div class="container">         <div class="level">             <button class="select">简单</button>       

目录 前言 wx.getLocation 腾讯位置服务 总结 前言 在微信小程序的开发中不可避免的会遇到需要显示用户地理位置的操作,本文将简单介绍如何在微信小程序中显示用户当前的地理位置. wx.getLocation 通过wx.getLocation我们得到用户的经纬度位置. 使用wx.getLocation之前需要简单的配置一下.因为获取用户地理位置的操作需要用户同意,所以我们在app.json文件里面加上配置: "permission": { "scope.userLo

目录 开始 断言 非空断言 类型断言 尖括号 as 确定赋值断言 类型守卫 trpeof in 函数 可选参数 默认值参数 函数重载 结束 开始 现在要加速学习了,大佬们有没有内推,给个推荐 会vue2/vue3 + ts 断言 非空断言 非空断言就是确定这个变量不是null或者undefined,就是把null或者undefined从他的类型中排除 function demo(message:string|undefined|null) { const str: string = messag

目录 前言 语法 错误用法 添加或删除原数组中的数据 修改原数组中的数据 回调函数中使用异步函数 使用return结束循环 未传入this 正确用法 总结 前言 使用过forEach的人大致有两种:普通使用,简简单单:复杂使用,总想搞出点花样来,结果一些莫名其妙的bug就出现了,解决这些bug所花费的时间都可以换一种思路实现了,能用作for循环的,又不只是forEach.没错,笔者就是后者,终究是自己“学艺不精”.于是乎,花点时间,结合自己的实际开发经验,再来好好理理forEach. 语法 fo

本文实例为大家分享了用js+canvas实现扫雷游戏的具体代码,供大家参考,具体内容如下 记录js学习后制作的第一关小游戏. 这里的代码还不够精简,许多地方偷懒没有封装,逻辑也有许多可以优化. <body>       胜利条件,找出所有地雷并标记     <form action="javaScript:createContent()">         <div id="message" style="color: red

目录 一.单线程 二.事件循环 三.事件循环的应用 四.使用代码来说明 五.setTimeout() 六.思考:劣质的优化 一.单线程 Javascript 是单线程的,意味着不会有其他线程来竞争.为什么是单线程呢? 假设 Javascript 是多线程的,有两个线程,分别对同一个元素进行操作: function changeValue() { const e = document.getElementById("ele1"); if (e) { e.value = "VAL

目录 一.需求场景描述 1.先看演示效果 2.需求分解 二.关键技术点提前知 技术点1:Element.scrollIntoView() 技术点2:Element.getBoundingClientRect() 三.实现思路分析 1.数据初始化处理 2.监听滚动条,以便滚动内容时,关联激活右侧导航标签 3.实现点击右侧导航节点,关联左侧内容滚动到可视区顶部 4.实现滚动右侧内容,关联激活左侧导航节点 四.完整 demo 示例代码 一.需求场景描述 1.先看演示效果 类似这种,当也页面左侧内容滚动