Script 标签引入 Monaco Editor

将 monaco-editor 下载到本地，地址：https://microsoft.github.io/monaco-editor/目录结构：代码示例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./monaco-editor-0.50.0/package/min/vs/editor/editor.main.css"> </head> <body> <div id=&quo

技术 · 07-29

Shadow DOM：Web 组件的封装与控制

介绍Shadow DOM 是 Web 组件规范的一部分，它允许将封装的“影子” DOM 树附加到常规 DOM 树中的元素。影子 DOM 封装了 DOM 和样式，使开发人员可以控制这些元素，而不会与页面上的其他代码或样式发生冲突。术语影子宿主（Shadow host）：影子 DOM 附加到的常规 DOM 节点。影子树（Shadow tree）：影子 DOM 内部的 DOM 树。影子边界（Shadow boundary）：影子 DOM 终止，常规 DOM 开始的地方。影子根（Shadow root）：影子树的根节点。创建 Shadow DOMconst host = document.querySelector('#host') // 创建一个 Shandow DOM 元素 const shadow = host.attachShadow({mode: 'open'}) const span = document.createElement('span') span.textContent = 'Hello World' // 向 Shadow DOM 元素内填充内容 shadow.a

技术 · 06-23
Shadow DOM：Web 组件的封装与控制

JavaScript 中 call、apply 和 bind 方法详解及使用示例

call函数调用时动态的改变函数的上下文，从而指定函数体内部 this 的指向。语法：function.call(context, arg1, arg2, ...)示例：const obj = { name: '小明', greeting: function(text) { console.log(`${text}, ${this.name}!`) } } obj.greeting('你好'); // 输出：你好, 小明! const person = { name: '小红' } obj.greeting.call(person, '你好'); // 输出：你好, 小红!这里将 obj.greeting 方法中的 this 绑定到 person 对象上，因此对应的读取 person 中的 name。applyapply 和 call 一样也是函数调用时动态的改变函数的上下文，从而指定函数体内部 this 的指向。唯一不同的地方是是参数形式不同，capply 需要通过数组的方式进行传递。语法：function.apply(conte

技术 · 03-04

JavaScript API：深入了解 FileReader 对象：使用示例、属性、方法和事件详解

简介FileReader 对象提供了读取文件内容的，它允许网页通过异步方式读取用户计算机上的文件内容。属性error在读取文件的过程中发生错误时，该属性包含一个错误对象。readyState表示 FileReader 状态的数字，表示以下值之一：0 (EMPTY)：尚未初始化。1 (LOADING)：正在读取。2 (DONE)：已完成读取。result返回读取文件的 ArrayBuffer、Blob、DataURL 或 Text 格式。方法abort()取消读取操作。在返回时，readyState 属性为 DONE。readAsArrayBuffer(blob)开始读取指定的 Blob 中的内容。一旦完成，result 属性中就包含一个 ArrayBuffer 对象。readAsBinaryString(blob) 【已弃用】开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含所读取文件的原始二进制数据。readAsDataURL(blob)开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的 Base64 字符串

技术 · 03-01

创建响应式网页：使用JavaScript进行设备检测和跳转

在当前移动互联网时代，用户访问网站已经成为了多平台多设备混合的环境。因此，为了提供更好的用户体验，许多网站会根据用户设备和屏幕尺寸的不同，在 PC 端和移动端之间进行自动跳转。本文将介绍如何使用 JavaScript 来检测用户设备和尺寸，并根据检测结果进行相应的跳转。1.使用 navigator.userAgent 检测用户设备类型：使用 navigator.userAgent 属性可以获取用户浏览器提供的标识字符串，从而判断用户设备类型。例如，可以检测是否包含 “Mobile” 字符串来判断是否是移动设备。示例代码：function isMobileDevice() { return /Mobile/.test(navigator.userAgent); }2.使用 window.innerWidth 和 window.innerHeight 检测屏幕尺寸：使用 window.innerWidth 和 window.innerHeight 属性可以获取用户屏幕的可见宽度和高度，从而判断屏幕尺寸。例如，可以判断可见宽度是否小于某个阈值来判断是否是移动设备。示例代码：functio

技术 · 01-09
2023 - 2024 a博客-个人博客-技术分享. All Rights Reserved.
Theme Jasmine by Kent Liao