简易版腾讯文档开发记录
前言为熟悉腾讯文档前端技术栈,决定做一个腾讯文档中PPT模块的简易版. 需求分析主要实现以下几点功能 新建,删除PPT页 文字编辑,图形编辑,图片插入 播放 技术选型 Electron:用Web技术开发桌面端应用的框架 React: UI框架 electron-vite:脚手架 React-konva, Konva: 2DCanvas工具 开发流程搭建项目1pnpm create @quick-start/electron 安装React-devtools使用electron-devtools-installer 官网 1pnpm add electron-devtools-installer -D 初步UI 一个工具栏 文字 画笔 橡皮 正方形 圆 插入图片 一个侧边栏 显示多个画布,可以拖动排序和点击切换 一个画布
React和Electron快速上手
React概览 如何创建和嵌套组件 如何添加标签和样式 如何显示数据 如何渲染条件和列表 如何对事件做出响应并更新界面 如何在组件间共享数据 创建和嵌套组件React应用程序是由组件组成的.一个组件是UI(用户界面)的一部分,它拥有自己的逻辑和外观.组件可以小到一个按钮,也可以大到整个页面. React组件是返回标签的JavaScript函数: 12345function MyButton() { return ( <button>我是一个按钮</button> )} 至此,你已经声明了MyButton,现在把它嵌套在另一个组件中: 12345678export default function MyApp() { return ( <div> <h1>欢迎来到我的应用</h1> <MyButton /> ...
腾讯文档面试准备
...
排序算法和查找算法
排序什么是排序排序(Sort), 就是重新排列表中的元素,使表中的元素满足按关键字有序的过程. 输入: n各记录$R_1, R2, … R_n$,对应的关键字为$k_1, k_2, … , k_n$ 输出: 输入序列的一个重排$R_1^{‘},R_2^{‘},…,R_n^{‘},$,使得有$k_1^{‘}<k_2^{‘}<,,,<k_n^{‘}$(也可以递减) 算法的稳定性关键字相同的元素相对位置排序后不变,称之为稳定. 分类 内部排序: 数据都在内存中—>关注时间复杂度,空间复杂度 外部排序: 数据太多,无法全部被存入内存—>...
原理分析
Vue原理虚拟DOM 面试题:请你阐述一下对vue虚拟dom的理解 什么是虚拟DOM? 虚拟DOM本质上就是一个普通的JS对象,用于描述视图的界面结构 在vue中,每个组件都有一个render函数,每个render函数都会返回一个虚拟DOM树,这也就意味着每个组件都对应一棵虚拟DOM树. 没有render函数,就找template,没有template就找el,把el.outerHTML作为template(就是一个字符串),然后将template编译成render函数. 如果有render函数,就直接使用render函数,每一个render函数都返回一个虚拟DOM(JS对象); 1234567891011121314151617181920212223new Vue({ el: '#app', data: { title: 'Hello Vue', }, render(h) { // 目标:创建虚拟DOM:这个组件到底要显示啥 //...
OPPO24秋
考情分析逐题解析1. 执行以下程序,对于①②式能否在a标签上实现效果,下列说法正确的是1234567891011121314151617181920212223242526<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; text-decoration: none; /* ① */ font-size: 12px; /* ② */ } ...
联想22秋招
考情分析1. 表达式12%7的结果是 JavaScript运算符,%表示求余数 2. var num=0; num+=!num || 3;,运行以上程序后,num的值为 布尔上下文, 逻辑运算符,运算优先级,加法运算符. 首先声明num=0;0在布尔上下文中是假值,!是取非运算符,所以!num的值是true. ||是逻辑或运算符,它的规则是如果前者在布尔上下文中是真值,直接返回前者,不再进行后者的运算. 所以!num || 3的结果是true num += true,就是num = num + true 在JavaScript中+是两种不同运算的重载: 数字加法 字符串连接 它首先它首先将两个操作数强制转换为基本类型。然后，检查两个操作数的类型： 如果有一方是字符串,另一方则会被转换为字符串，并且将它们连接起来。 如果双方都是 BigInt，则执行 BigInt 加法。如果一方是 BigInt 而另一方不是，会抛出 TypeError。 否则,双方都会被转换为数字，执行数字加法。 在num = num +...
CSS补充
属性值的计算过程 每一个元素,所有的CSS属性都要有值. 确定声明值找到没有冲突的样式,直接作为计算后的样式. 层叠1. 比较重要性重要性从高到低: 带有!important的默认样式 带有important的作者样式 作者样式 默认样式 2. 比较特殊性对每个样式分别计数 style id 属性,类,伪类 元素,伪元素 内联: 1否则: 0 id选择器的数量 属性,类,伪类的数量 元素,伪元素的数量 3. 比较源次序源码中靠后的覆盖靠前的 继承对仍然没有值的属性,若可以继承,则使用继承. 使用默认值对仍然没有值的属性,直接使用默认值 应用 重置样式表 书写一些样式,重置浏览器默认样式 常见的重置样式表: normalize.css reset.css meyer.css 爱恨法则 link > visited > hover > active 123456789101112131415a:link { color: green;}a:visited { color:...
浅析webpack和vite
前言webpack和vite使我们在前端工程化中最常使用的两个工具. 那么它们到底有什么区别? 我们在开发时又应该如何选择呢? 本文首先对webpack和vite进行了简单的介绍,然后分别从核心设计理念,开发服务器,构建机制,生态系统,配置复杂度,性能优化,适用场景,社区与生态八个方面分析了webpack和vite的区别,最后总结了它们的核心差异以及选择建议. 一、核心设计理念 维度 webpack vite 构建目标 面向所有项目(兼容传统与现代) 专为现代浏览器优化的开发体验 核心思想 Bundle-based(打包所有资源) Native...