正题 1、 1varlength=1; 2functionfn(){ 3console.log(this.length); 4} 5varobj={ 6length:100, 7action:function(callback){ 8callback(); 9arguments[0](); 10} 11} 12obj.action(fn,...[1,2,3,4]); 2、 1vara=10; 2functiontest(){ 3console.log(a); 4a=100; 5console.log(this.a); 6vara; 7console.log(a); 8} 9test()...
很久没有发文了今天水一篇文章，图片预加载且展示加载的进度条，在现代的Web开发中，优化用户体验至关重要。一种常见的方法是在页面加载时预加载图片，并展示一个加载进度条，让用户了解加载进度。在本文中，我们将深入探讨如何实现这两个关键功能，以提高网站性能和用户满意度，首先谈一下我的思路： 创建一个函数用于new一个image对象，遍历需要预加载的图片数组，设置图片的src属性为传入的URL，从而触发图片的加载，在每个图片加载成功后，用数组长度计算出百分比更新加载进度并将加载的图片添加到页面上，其中的我有一个我踩的坑需要注意一下 / 图片预加载 / exportfunctionprel...
9月16日，全栈Web框架Remix正式发布了2.0版本，Remix团队在发布1.0版本后经过近2年的持续努力，发布了19个次要版本、100多个补丁版本，并解决了数千个问题和拉取请求，终于迎来了第二个主要版本！ Remix具有以下特性： 追求速度、用户体验（UX），支持任何SSR/SSG等 基于Web基础技术，如HTML/CSS与HTTP以及WebFecthAPI，在绝大部分情况可以不依赖于JavaScript运行，所以可以运行在任何环境下，如WebBrowser、CloudflareWorkers、Serverless或者Node.js等 客户端与服务端一致的开发体验，客户端代码与服务端...
9月19日，Next.js13.5正式发布，该版本通过以下方式提高了本地开发性能和可靠性： 本地服务器启动速度提高22%：使用App和PagesRouter可以更快地进行迭代 HMR（快速刷新）速度提高29%：在保存更改时进行更快的迭代 内存使用量减少40%：在运行nextstart时测量 优化的包导入：使用流行的图标和组件库时进行更快的更新 next/image改进：支持<picture>标签、暗模式等 修复了超过438个错误！ 改善启动和快速刷新时间 AppRouter的采用在持续增加，根据HTTPArchive对前1000万个网站进行的统计数据来看，其增长速度达到了每月8...
本文来盘点微软开源的十大前端项目，这些项目在Github上获得了超过45万Star！ VisualStudioCode VisualStudioCode是一款由微软开发的开源的代码编辑器。它支持多种编程语言，如C、C、C、Python、JavaScript和TypeScript等，并提供丰富的插件生态系统来扩展功能。VSCode具有丰富的编辑功能，包括语法高亮、智能代码补全、代码导航、调试功能等。它还提供了集成的终端窗口、Git版本控制工具和丰富的主题和扩展插件，能够满足开发者的各种需求。 Github（151k⭐️）：https://github.com/microsoft/vscode ...
1.原始值和引用值 ECMScript变量包含两种不同类型是数据：原始值和引用值。 原始值：最简单的数据。有6中原始值：Undefined、Null、Boolean、Number、String和Symbol。原始值是按值访问。 引用值：由多个值构成的对象。三大引用类型：1.object2.Array类型3.Function类型。引用值是保存在内存中的对象，由于js不允许直接访问内存位置，所以对引用值的访问是访问该对象的引用而非对象本身。 这里可以类比java中的基本数据类型和引用数据类型。 2.复制 通过变量把一个原始值复制到另一个另一个变量时，原始值会在内存中增加一个值，赋值为新的变量，如n...
1、案例：猜数字 设置一个1-10之间的随机数，然后输入进行猜数字，猜的大了怎么样、猜的小了怎么样、猜对了怎么样 知识点：设置随机数、if判断、while循环 写题思路： 1.设置弹框提出问题 2.定义一个随机数0-10的数组 3.if判断取值的范围，在其范围内反馈的结果 4.while循环，直到猜对停止提问 结果演示： 2、案例：超市打折 某超市做活动，消费超过3000元打七折，2000到3000打八折，1000到2000打九折，1000以下打九五折 知识点：逻辑分析、if条件、算数运算 写题思路： 1.设置变量 2.使用ifelse条件进行逻辑分析 代码示例： 结果所示： 3、案例...
在日常开发中，很多时候需要对数组进行分组，每次都要手写一个分组函数，或者使用lodash的groupBy函数。好消息是，JavaScript现在正在引入全新的分组方法：Object.groupBy和Map.groupBy，以后再也不需要手写分组函数了，目前最新版本的Chrome（117）已经支持了这两个方法！ 以前的数组分组 假设有一个由表示人员的对象组成的数组，需要按照年龄进行分组。可以使用forEach循环来实现，代码如下： constpeople=[ {name:"Alice",age:28}, {name:"Bob",age:30}, {name:"Eve",age:28}, ...
theme:qklhk-chocolate 引言：你有没好奇过，在一个使用了transform变换的元素上使用window.getComputedStyle(htmlElement)['transform']查询出来的值代表什么？ 为什么硬件加速要使用transform，以及为什么硬件加速会快? 小科普：关于矩阵的乘法 以两个二阶齐次矩阵相乘为例 [[[ a11,a12,b11,b12,=a11b11+a12b21,a11b12+a12b22, a21,a22b21,b22a21b11+a22b21,a21b12+a22b22 ]]] 由此，可以看到两个矩阵相乘就是拿...
安装导入 npm npmithree 导入 并非所有功能都在three，还需从子目录导入 //three模块 importasthreefrom'three' //一些不在three模块的功能，这里是OrbitControls导入示例 import{OrbitControls}from'three/addons/controls/OrbitControls.js'; 静态页面/CDN three是一个esm模块，需要按模块导入方法导入， //不是所有浏览器都支持ems模块，这是一个esm模块兼容库 <scriptdefersrc="https://unpkg.com/es-modul...
16开始接触前端，一直对一个问题特别感兴趣，那就是js动画，也就是从那时起开始探究动画的各种表现形式，也是那个时候开始意识到编程这块东西最终考验的就是抽象和逻辑，而这一切完全是数学里边的东西。 最早接触tweenJS是去年还是前年来着有点忘了，不过当时有点不大看得懂，勉勉强强算是过了一遍，不过有了这个体验之后，我自己做了一套项目，里边有个返回顶部按钮，当鼠标按下时，我使用了sin函数控制阴影的大小，具体效果表现还着实惊艳了自己一番，就像呼吸灯那样，于是在那以后的各种面试会上，我都乐此不彼的给面试官展示我的项目。现在想想觉得还是有趣极了。 有点扯远了，现在来说说tweenJS，因为我很懒所以下面...
[webpack中文文档](概念|webpack中文文档|webpack中文文档|webpack中文网(webpackjs.com))： 本质上，webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependencygraph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。 这篇笔记主要记录的是Webpack5。 基本使用 安装 安装webpack的同时需要安装webpack-cli。 npmiwebpackwebpack-cli-D...
1StyleSheet 一张StyleSheet由一系列Rules组成，这些Rules可以分成2大类: 1StyleRule 2At-Rule 下面的例子展示了StyleRule和At-Rule: //StyleRule div{ background-color:red; font-size:12px; } //At-Rule @mediaprint{ body{ font-size:10pt; } } 上面代码的第1个Rule是StyleRule，表示<div>标签的背景色是红色，字号是12px。 代码的第2个Rule是At-Rule，At-Rule都以'@'字符开始。@...
今天来盘点北京的泛互联网公司。涵盖了综合类、外企类、硬件类、电商类、游戏类、娱乐类、生活类、工具类、人工智能类、金融类、教育类、招聘类、汽车类、外包类、信息化类以及国企央企类等多个领域。 综合类 字节跳动 美团 百度 阿里巴巴 腾讯 网易 外企类 微软 谷歌 亚马逊 Paypel Canva Shopee Airbnb IBM 苹果 三星 戴尔 宝马 印象笔记 思科 联发科 爱立信 Grab Freewheel 特斯拉 Oracle 领英 Coupang 英特尔 Hulu 硬件类 华为 小米 联想 VIVO OPPO 荣耀 京东方 国美电器 中兴 电商类 京东 拼多多 当当网 值...
1.d3.shuffle D3.shuffle()方法用于将数组中的元素随机排序。它使用Fisher–Yates洗牌算法，该算法是无偏的，具有最佳的渐近性能（线性时间和常数内存）。 D3.shuffle()方法的语法如下： d3.shuffle(array,[start,end]) 其中： array是原数组。 start是开始索引，默认为0。 end是结束索引，默认为数组的长度。 如果end是负数，则它表示从数组末尾开始向前计算的索引。 D3.shuffle()方法返回的数组是一个新数组，它包含原数组中元素的随机排列。 D3.shuffle()方法的常见用法如下： 将数组中的元素随机...
JavaScript中有很多简写技巧，可以缩短代码长度、减少冗余，并且提高代码的可读性和可维护性。本文将介绍20个提升效率的JS简写技巧，助你告别屎山，轻松编写优雅的代码！ 移除数组假值 可以使用filter()结合Boolean来简化移除数组假值操作。假值指的是在条件判断中被视为false的值，例如null、undefined、空字符串（""或''）、0、NaN和false。 传统写法： letarr=[12,null,0,'xyz',null,-25,NaN,'',undefined,0.5,false]; letfilterArray=arr.filter(value=>...
1.为什么需要模块化打包工具 在上一篇文章中提到的ESModule可以帮助开发者更好地组织代码，完成js文件的模块化，基本解决了模块化的问题，但是实际开发中仅仅完成js文件的模块化是不够的，尤其是面对一个较为庞大的工程项目的时候，主要仍有以下几个问题需要解决： ESModule是ES6新语法，一些老的浏览器不支持 每个模块对应一个script标签，模块划分过于细致的时候，网络请求次数多，页面会卡顿。（在开发过程中，划分多个模块是有益于代码组织的，但是生产运行的时候，不需要这么多模块，过多的模块反而会影响页面加载效率） 不光JS文件需要模块化，其他不同种类的资源（包括css文件等）都要完成模块...
全文约5100字，预计阅读需要15分钟。 JavaScript运行时是指执行JavaScript代码的环境。目前，JavaScript生态中有三大运行时：Node.js、Bun、Deno。老牌运行时Node.js的霸主地位正受到Deno和Bun的挑战，下面就来看看这三个JS运行时有什么区别！ JS运行时概述 Node.js Node.js在2023年被StackOverflow开发者评为最受欢迎的Web技术。Node.js于2009年推出，允许开发人员在浏览器之外使用JavaScript，彻底改变了服务端编程。它拥有强大的生态系统、庞大的社区，并且经过验证且稳定。为大型应用程序提供LTS构建...
这是我在博客园的第一篇博客，也是我人生中的第一篇博客。希望它能够记录我的成长，帮助更多的人。 最近在写我们社团的社团网站，有一个页面不太希望普通访客能访问到,所以想做一个“统一身份验证验证”，但是又苦于社团网站搭建是纯静态站，没法做数据库，只能妥协，将账号密码字符串组写到JavaScript脚本里，最后再混淆加密。当然，现在我已经找到了更好的方法，可惜暂时没有时间完成，我将在后文简述思路，如有可能，我会另开一篇新方法实现过程。 思路如下： 1.首先建立一个遮罩层挡住你要验证后才能看的内容 2.建立一个form表单，为其赋予name 3.然后在表单中添加inp...
说明： 轮播图在前端开发中是一种常见的元素，通常用于展示一系列的图片或者内容，并通过滑动或者点击的方式进行切换。使用JavaScript来实现轮播图有以下几个意义： 提升用户体验：轮播图可以在有限的空间内展示更多的内容，为用户提供更多的信息。同时，轮播图也具有较好的视觉效果，可以吸引用户的注意力。 提高页面加载速度：如果页面中有大量的图片或者内容需要展示，那么一次性加载所有内容可能会导致页面加载速度变慢。使用轮播图可以分批次加载内容，提高页面加载速度。 节省空间：轮播图可以将多个图片或者内容整合在一起，减少页面中的空间占用，使页面更加整洁。 实现动态效果：使用JavaScript可以实现轮播...