天行无忌的博客_前端开发原创博文

JavaScript 对象管家 Proxy

JavaScript 在 ES6 中，引入了一个新的对象类型 Proxy，它可以用来代理另一个对象，并可以在代理过程中拦截、覆盖和定制对象的操作。Proxy 对象封装另一个对象并充当中间人，其提供了一个捕捉器函数

缓存

proxy

对象操作

js封装

原创精选 2023-03-09 12:53:27 293 阅读

简介TS 的 class 构造函数 constructor 方法

在 TypeScript 的类中，constructor 方法是类的构造函数，用于初始化对象的属性和方法。虽然在 TypeScript 类中定义 constructor 方法不是必须的，但是通常建议在类中使用 constructor 方法，因为它有以下几个优点

构造函数

继承

依赖注入

原创精选 2023-03-07 13:55:19 2460 阅读

JavaScript 中获取数组最后一个元素3种方法及性能

当需要从 JavaScript 中的数组中获取最后一个元素时，有多种选择，本文将提供 3 种可用方法：利用数组长度属性、数组方法slice、数组方法pop。

数组

性能比较

赋值

原创精选 2023-02-05 22:55:15 702 阅读 1评论

在 JavaScript 中编写Go式错误处理的async/await

ES7 引入 async/await 允许开发人员编写看起来像同步的异步 JavaScript 代码。在当前的 JavaScript 版本中，还可以使用 Promises，这些功能都是为了简化异步流程并避免回调地狱。

程序异常

async/await

原创推荐 2023-02-01 13:39:07 661 阅读

requestVideoFrameCallback() 简单实例

在文章《浏览器视频帧操作方法 requestVideoFrameCallback() 简介》中介绍了基本的使用情况，本文来体验一下其使用过程，后续将增加一些酷炫的实例。点击开始播放视频、暂停视频以读取元数据。在画布上绘制视频帧与实际视频帧速率同步的画面。GITHUB中包含整个代码实例，主要代码如下：<template> <div id="app">

播放视频

requestVideoFrameCal

video

原创推荐 2022-10-26 09:42:39 440 阅读

浏览器视频帧操作方法 requestVideoFrameCallback() 简介

HTMLVideoElement.requestVideoFrameCallback() 是一个新的WEB API，2021 年 1 月 25 日提交的草案。requestVideoFrameCallback() 方法允许WEB开发者注册一个回调方法，回调方法在新视频帧发送到合成器时在渲染步骤中运行。

HTMLVideoElement

requestVideoFrameCal

原创精选 2022-10-25 09:51:20 820 阅读

使用 ServiceWorker 提高性能

service worker 是一种在独立的处理线程上执行后台任务的 worker，允许用户拦截网络请求并有条件地将其存储在称为 CacheStorage API 的特殊缓存中，此类缓存不同于本地浏览器缓存，因为它允许在用户脱机的情况下从缓存中提供数据，还可以提高页面的性能。

浏览器缓存

原创精选 2022-10-23 15:18:53 417 阅读 1评论

JavaScript 设计模式之代理模式

代理模式，代理（proxy）是一个对象，它可以用来控制对另一个对象的访问。

代理模式

缓存

html

原创精选 2022-10-21 09:51:24 248 阅读 4评论

了解 Vue 生命周期钩子

和其他框架一样，Vue 有许多生命周期钩子，它们允许将代码附加到在创建或使用 Vue 应用程序时发生的特定事件，如，当组件加载时、当组件被添加到页面时或者当某些东西被删除时。Vue 有很多生命周期钩子，令人困惑的是每个钩子的含义或作用。在本指南中，将介绍每个生命周期挂钩的作用以及如何使用它们。

生命周期

VUE

组合式API

原创精选 2022-10-20 10:00:22 431 阅读 2评论

Vue 组件如何在设置 Props

在 Vue 中构建组件通常需要定义一些属性，以使组件可以更好复用，在这种情况下会使用 props 来自定义数据来传递数据。接下来以一个简单的组件来介绍如何使用组件 props 。

VUE

VUE组件

组件属性

原创精选 2022-10-20 09:54:35 488 阅读 1点赞 1评论

如何在 JavaScript 中让代码更加精简

解构赋值语法是一种 JavaScript 表达式，通过解构赋值, 可以将属性/值从对象/数组中取出，赋值给其他变量。这种语法是 ECMAscript 6 规范引入了一种新语法，可以更轻松地从数组和对象中获取值。

赋值

javascript

数据类型

对象解构

原创精选 2022-05-30 22:53:51 358 阅读

VUE创建视频流应用

继续使用 Vue.js 构建前端部分。进入主题之前先简单了解一下依赖库 vue-core-video-player。

vue

video

node.js

原创精选 2022-03-16 23:34:49 805 阅读 yyds干货盘点

创建 Node.js 视频流应用之后端

在本文中，将展示一个非常简单的 Node.js 应用程序，用于在线流媒体视频传输。本文仅涵盖后端，在下一部分中，将使用 Vue.js 创建前端。话不多说，下面开始进入主题。

node.js

express

video

视频流

原创精选 2022-03-15 23:14:06 378 阅读 yyds干货盘点

【CSS Master】选择器四种基本类型#yyds干货盘点#

理解选择器是编写可维护、可扩展的CSS的关键，选择器是CSS规则与元素匹配的机制，有很多方法可以做到这一点，其中的大多数都很熟悉。如元素类型、类名、ID和属性选择器，都得到了很好的支持和广泛的使用。

选择器

css

原创精选 2022-02-19 10:03:28 470 阅读 yyds干货盘点

JavaScript数据结构之Number#yyds干货盘点#

Number 是JavaScript的基本数据结构，是对应数值的应用类型。要创建一个 Number 对象，就使用 Number 构造函数并传入一个数值。在 JavaScript 中没有其他语言这么多的数字类型。根据 ECMAScript 标准，数字只有一种类型，它是“双精度 64 位二进制格式 IEEE 754 值”。

javascript

四舍五入

Number

数据结构

原创精选 2022-02-17 09:28:32 559 阅读 yyds干货盘点

JavaScript 数据结构之 Set#yyds干货盘点#

Set 也是 ECMAScript 6 规范中引入的一种数据结构，是一种叫做集合（是由一堆无序的、相关联的，且不重复的内存结构）的数据结构。Set 就像一个数组，但是仅包含唯一项。Set对象是值的集合，可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。

数据结构

javascript

Set

ECMAScript 6

原创精选 2022-02-14 15:41:52 937 阅读 yyds干货盘点

5 个可以拓展全栈技能的开源项目

介绍 5 个可以开拓全栈技能、提高项目开发效率的 WEB 开源项目，让前端开发者开拓一些构建后端数据服务的思维，有些可能成为新的技术解决方向。

github

appsmith

hasura

GraphQL

原创精选 2022-01-23 21:55:37 1475 阅读 1收藏

使用 React 和 Next.js 构建博客

Next.js 是由 Vercel 创建和维护的基于 React 的应用程序框架。本教程将从零开始学习如何使用 Next.js 构建一个小型的博客网站：

html

next.js

react

原创推荐 2022-01-22 21:18:38 5183 阅读

2021 年 6 个 GitHub 推荐前端项目

本文就来总结 2021 年 6 个 GitHub 上的推荐前端项目，基于 GitHub 上的 star 数量，从这个趋势可以看出前端开发的一些发展趋势。

github

ide

css

原创精选 2022-01-19 18:40:21 2395 阅读

Three.js 入门指南

Three.js 是一个 JavaScript 库，用于在 Web 浏览器中创建 3D Web 图形。

html

渲染器

3d

three.js

webgl

原创精选 2022-01-18 22:47:24 951 阅读

JavaScript数据结构之Object

Object 定义一组属性的无序集合，可以将其想象成一张散列表，其中的内容就是一组名/值对，值可以是数据或者函数。而数组是一个有序集合，为了保证元素排列有序，相比 Object 来说会占用更多的内存空间。

Object

freeze

defineProperty

seal

原创精选 2022-01-03 14:33:10 1726 阅读

JavaScript 数组方法 .map() 的 5 个使用场景#yyds干货盘点#

.map() 函数是 JavaScript 数组结构中很实用的一个方法之一，其通过调用回调函数创建一个新数组。该函数访问调用数组中的每个元素。可以将 map() 方法视为经过一个循环并在回调函数中编写语句（格式化、数据处理）以构造一个新数组。

数组

回调函数

对象数组

map

原创精选 2021-12-19 13:05:39 986 阅读 yyds干货盘点

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

DevPoint:WEB开发技术点

JavaScript 对象管家 Proxy

简介TS 的 class 构造函数 constructor 方法

JavaScript 中获取数组最后一个元素3种方法及性能

在 JavaScript 中编写Go式错误处理的async/await

requestVideoFrameCallback() 简单实例

浏览器视频帧操作方法 requestVideoFrameCallback() 简介

使用 ServiceWorker 提高性能

JavaScript 设计模式之代理模式

了解 Vue 生命周期钩子

Vue 组件如何在设置 Props

如何在 JavaScript 中让代码更加精简

VUE创建视频流应用

创建 Node.js 视频流应用之后端

【CSS Master】选择器四种基本类型#yyds干货盘点#

JavaScript数据结构之Number#yyds干货盘点#

JavaScript 数据结构之 Set#yyds干货盘点#

5 个可以拓展全栈技能的开源项目

使用 React 和 Next.js 构建博客

2021 年 6 个 GitHub 推荐前端项目

Three.js 入门指南

JavaScript数据结构之Object

JavaScript 数组方法 .map() 的 5 个使用场景#yyds干货盘点#

欢迎