随笔分类 - js
学习
摘要:
背景 本文将深入讲解如何使用 snapdom 和 jsPDF 实现高质量的 HTML 转 PDF 功能,并通过一个完整的消息列表导出案例,带你掌握这套方案的核心技术。 为什么 HTML 转 PDF 如此重要? 在现代 Web 应用中,HTML 转 PDF 是一个非常常见的需求场景: 客服系统:导出聊
阅读全文
背景 本文将深入讲解如何使用 snapdom 和 jsPDF 实现高质量的 HTML 转 PDF 功能,并通过一个完整的消息列表导出案例,带你掌握这套方案的核心技术。 为什么 HTML 转 PDF 如此重要? 在现代 Web 应用中,HTML 转 PDF 是一个非常常见的需求场景: 客服系统:导出聊
阅读全文
摘要:
背景 本篇文章整理了一些常见的 JavaScript 语法优化技巧,并标注了每个特性的 ECMAScript 版本,以帮助开发者更好地理解和应用这些特性。 1. 多次解构拿到最终属性值 ES6 (2015) 引入了解构赋值。 const obj = { part: { name: "David",
阅读全文
背景 本篇文章整理了一些常见的 JavaScript 语法优化技巧,并标注了每个特性的 ECMAScript 版本,以帮助开发者更好地理解和应用这些特性。 1. 多次解构拿到最终属性值 ES6 (2015) 引入了解构赋值。 const obj = { part: { name: "David",
阅读全文
摘要:
一、canvas 简介 <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。 它最初由苹果内部使用自己 MacOS X WebKit
阅读全文
一、canvas 简介 <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。 它最初由苹果内部使用自己 MacOS X WebKit
阅读全文
摘要:
当我第一次看到这动画效果时,还以为是通过 GIF、CSS3 或者 Canvas 制作的。结果出乎意料,居然是用 SVG 实现的! 也许你对 SVG 动画还不太熟悉,那就让我们一起开启这场奇妙的旅程吧! 什么是 SVG 动画? SVG(Scalable Vector Graphics)是一种用于描述二
阅读全文
当我第一次看到这动画效果时,还以为是通过 GIF、CSS3 或者 Canvas 制作的。结果出乎意料,居然是用 SVG 实现的! 也许你对 SVG 动画还不太熟悉,那就让我们一起开启这场奇妙的旅程吧! 什么是 SVG 动画? SVG(Scalable Vector Graphics)是一种用于描述二
阅读全文
摘要:
一、Canvas介绍 1. canvas是html5的一个新标签,属于h5的新特性2. canvas标签是一个图形的容器,简单点说就是一块画布,你可以在上画矩形,圆形,三角形,折线等等,也可以用来画logo3. 它是通过javascript来画的,即脚本绘制图形 canvas可以用来干啥呢?1. 制
阅读全文
一、Canvas介绍 1. canvas是html5的一个新标签,属于h5的新特性2. canvas标签是一个图形的容器,简单点说就是一块画布,你可以在上画矩形,圆形,三角形,折线等等,也可以用来画logo3. 它是通过javascript来画的,即脚本绘制图形 canvas可以用来干啥呢?1. 制
阅读全文
摘要:
在 JavaScript 中,setTimeout 和 setInterval 是处理异步操作的常用方法,分别用于延迟执行代码和定时执行代码。虽然它们使用起来十分简单,但背后的工作原理和实际应用却有许多值得探讨的细节。 一、setTimeout 和 setInterval 基础用法 1. setTi
阅读全文
在 JavaScript 中,setTimeout 和 setInterval 是处理异步操作的常用方法,分别用于延迟执行代码和定时执行代码。虽然它们使用起来十分简单,但背后的工作原理和实际应用却有许多值得探讨的细节。 一、setTimeout 和 setInterval 基础用法 1. setTi
阅读全文
摘要:
在移动端H5项目中,首页白屏时间过长会严重影响用户体验,导致用户流失和跳出率上升。本文将从白屏时间的定义、常见原因、优化方案等方面,详细讲解如何有效缩短H5首页的白屏时间。 一、白屏时间的定义 白屏时间通常指的是用户从点击页面到看到首屏内容所经历的时间,通常包括以下几个关键阶段: DNS解析:浏览器
阅读全文
在移动端H5项目中,首页白屏时间过长会严重影响用户体验,导致用户流失和跳出率上升。本文将从白屏时间的定义、常见原因、优化方案等方面,详细讲解如何有效缩短H5首页的白屏时间。 一、白屏时间的定义 白屏时间通常指的是用户从点击页面到看到首屏内容所经历的时间,通常包括以下几个关键阶段: DNS解析:浏览器
阅读全文
摘要:
JavaScript 真是一个特殊的语言, 其他语言都只有一个表示 "无" 的值, 比如 Java 语言用的是 null, C 语言用的是 NULL, Python 语言用的是 None, Ruby 语言用的是 nil. 只有 JS 里面表示 "空" 的有两个, 一个是 undefined, 一个是
阅读全文
JavaScript 真是一个特殊的语言, 其他语言都只有一个表示 "无" 的值, 比如 Java 语言用的是 null, C 语言用的是 NULL, Python 语言用的是 None, Ruby 语言用的是 nil. 只有 JS 里面表示 "空" 的有两个, 一个是 undefined, 一个是
阅读全文
摘要:
将<script>标签放在<head>和<body>底部,会对页面的加载和性能产生不同的影响: <script>标签放在<head>部分 优点: 1.预加载:浏览器在渲染页面之前,会先下载和解析所有在<head>部分的脚本文件。这样可以确保脚本在页面加载过程中随时可以被调用。 2.全局可用性:一些脚
阅读全文
将<script>标签放在<head>和<body>底部,会对页面的加载和性能产生不同的影响: <script>标签放在<head>部分 优点: 1.预加载:浏览器在渲染页面之前,会先下载和解析所有在<head>部分的脚本文件。这样可以确保脚本在页面加载过程中随时可以被调用。 2.全局可用性:一些脚
阅读全文
摘要:
最近给之前的老项目增加的一个配送骑手地图显示,要应用高德地图,这里就简单的把代码摘点出来,做个小随笔。 参照路径规划-参考手册-地图 JS API 1.4 | 高德地图API AMap.Riding AMap.Riding骑行路径规划服务,提供起始、终点骑行路线查询服务。用户可以通过自定义回调函数取
阅读全文
最近给之前的老项目增加的一个配送骑手地图显示,要应用高德地图,这里就简单的把代码摘点出来,做个小随笔。 参照路径规划-参考手册-地图 JS API 1.4 | 高德地图API AMap.Riding AMap.Riding骑行路径规划服务,提供起始、终点骑行路线查询服务。用户可以通过自定义回调函数取
阅读全文
摘要:
disable-devtool 可以禁用所有一切可以进入开发者工具的方法,防止通过开发者工具进行的 ‘代码搬运’。 该库有以下特性: 1、支持可配置是否禁用右键菜单2、禁用 f12 和 ctrl+shift+i 快捷键3、支持识别从浏览器菜单栏打开开发者工具并关闭当前页面4、开发者可以绕过禁用 (u
阅读全文
disable-devtool 可以禁用所有一切可以进入开发者工具的方法,防止通过开发者工具进行的 ‘代码搬运’。 该库有以下特性: 1、支持可配置是否禁用右键菜单2、禁用 f12 和 ctrl+shift+i 快捷键3、支持识别从浏览器菜单栏打开开发者工具并关闭当前页面4、开发者可以绕过禁用 (u
阅读全文
摘要:
一、什么叫跨域 ??? 跨域,是指浏览器不能执行其他网站的脚本。 它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。 浏览器的同源策略: 简单来说 同源 就是 指 协议、域名、端口号 均相同 二、解决跨域 1、CORS 下面是MDN对于CORS的定义: 跨域资源共享(COR
阅读全文
一、什么叫跨域 ??? 跨域,是指浏览器不能执行其他网站的脚本。 它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。 浏览器的同源策略: 简单来说 同源 就是 指 协议、域名、端口号 均相同 二、解决跨域 1、CORS 下面是MDN对于CORS的定义: 跨域资源共享(COR
阅读全文
摘要:
本文将带你了解 JavaScript 中常见的错误类型,处理同步和异步 JavaScript/Node.js 代码中错误和异常的方式,以及错误处理最佳实践! 1. 错误概述 JavaScript 中的错误是一个对象,在发生错误时会抛出该对象以停止程序。在 JavaScript 中,可以通过构造函数来
阅读全文
本文将带你了解 JavaScript 中常见的错误类型,处理同步和异步 JavaScript/Node.js 代码中错误和异常的方式,以及错误处理最佳实践! 1. 错误概述 JavaScript 中的错误是一个对象,在发生错误时会抛出该对象以停止程序。在 JavaScript 中,可以通过构造函数来
阅读全文
摘要:
html代码如下: <div class="header"> <ul class="nav fr"> <li class="nav-item nav-line"> <a href="/" class="nav-link">首页</a> </li> <li class="nav-item nav-li
阅读全文
html代码如下: <div class="header"> <ul class="nav fr"> <li class="nav-item nav-line"> <a href="/" class="nav-link">首页</a> </li> <li class="nav-item nav-li
阅读全文
摘要:
var、let、const三者区别可以围绕下面五点展开: 变量提升var声明的变量存在变量提升,即变量可以在声明之前调用,值为undefinedlet和const不存在变量提升,即它们所声明的变量一定要在声明后使用,否则报错 暂时性死区var不存在暂时性死区let和const存在暂时性死区,只有等到
阅读全文
var、let、const三者区别可以围绕下面五点展开: 变量提升var声明的变量存在变量提升,即变量可以在声明之前调用,值为undefinedlet和const不存在变量提升,即它们所声明的变量一定要在声明后使用,否则报错 暂时性死区var不存在暂时性死区let和const存在暂时性死区,只有等到
阅读全文
摘要:
写个会常用到的js,点击显示跟随的区域层。获取跟随的是你鼠标所点击的位置 html代码如下: <!-- 表单最外层--> <div class="print-panel"> <div class="name_title"> 不跟随区域 </div> <!-- 点击跟随区域--> <div class
阅读全文
写个会常用到的js,点击显示跟随的区域层。获取跟随的是你鼠标所点击的位置 html代码如下: <!-- 表单最外层--> <div class="print-panel"> <div class="name_title"> 不跟随区域 </div> <!-- 点击跟随区域--> <div class
阅读全文

浙公网安备 33010602011771号