- 博客(216)
- 收藏
- 关注
RSS订阅原创 【QML】用 Canvas(QQuickImageProvider) 显示图片
【代码】【QML】用 Canvas(QQuickImageProvider) 显示图片。
2024-06-23 17:56:47
440
原创 【QML】用 Image(QQuickPaintedItem) 显示图片
大体功能：频繁地往界面推送图片，帧率达到视频效果。捕获画布上的鼠标事件和键盘事件。代码如下：// DrawImageInQQuickPaintedItem.pro 代码如下：QT += quick# You can make your code fail to compile if it uses deprecated APIs.# In order to do so, uncomment the following line.#DEFINES += QT_DISABLE_DE
2024-06-23 17:55:27
730
原创 【React】《React 学习手册 (第2版) 》笔记-汇总
Array.reduceRight 的作用与 Array.reduce 相同，只不过不从数组开头开始归约，而是从数组末尾开始。把数组转换成对象。
2024-06-20 00:30:00
1097
原创 【React】《React 学习手册 (第2版) 》笔记-Chapter12-React 服务器端渲染
这个组件可以直接在浏览器渲染，也可以捕获输出的 HTML 字符串，在其他环境中渲染。我们可以构建同构应用，在不同的平台中渲染组件，还可以通过一定的架构方式，跨多个平台全局重用 JavaScript 代码。我们伺服 Create React App 生成的 build 文件夹，在浏览器中运行 HTML，通过 script.js 文件加载所需的 JavaScript 代码。有了 Node.js，我们可以在其他应用，例如服务器端应用、CLI 应用，甚至是原生应用中重用为浏览器编写的代码。
2024-06-20 00:15:00
897
原创 【React】《React 学习手册 (第2版) 》笔记-Chapter11-React Router
嵌套路由时，若想显示嵌套内的组件（比如上面的 History），我们要使用 React Router DOM 的另一个特性：Outlet 组件。Router 组件只能使用一次，要路由的组件都嵌套在这个组件中。所有 Route 组件都嵌套在 Routes 组件中，根据浏览器中的当前地址选择渲染哪个组件。Router 组件把当前地址的有关信息传给内部嵌套的子组件。要渲染的各个路由嵌套在名为 Routes 的组件中。路由器的作用是为网站中的各部分设置路由。一个路由就是一个端点，即可在浏览器的地址栏中输入的地址。
2024-06-19 00:30:00
1003
原创 【React】《React 学习手册 (第2版) 》笔记-Chapter10-React 测试
对 React 项目来说，绝对应该安装 eslint-plugin-react-hooks 插件（https://reactjs.org/docs/hooks-rules.html），实施 React Hooks 相关的规则。开源的 TypeScript 是 JavaScript 的超集，为 JavaScript 语言添加了一些额外的特性。我们将使用一个名为 eslint-plugin-react（https://www.npmjs.com/package/eslint-plugin-react）的插件。
2024-06-19 00:15:00
988
原创 【React】《React 学习手册 (第2版) 》笔记-Chapter9-Suspense
只不过，ErrorBoundary 组件在出现错误时回落到一个错误消息，而 Suspense 组件在惰性加载组件时渲染一个消息，提示正在加载中。发生变化时，React 以 JavaScript 对象的形式创建一份组件树副本，找出组件树中需要改动的部分，只改动那些部分。创建兼容 Suspense 的数据源只需要一个 promise，因此我们可以定义一个函数，接受一个 promise 为参数，返回一个兼容 Suspense 的数据源。通常，无穷循环并不是我们想要的效果，在 React 中也是如此。
2024-06-18 07:30:00
1408
原创 【React】《React 学习手册 (第2版) 》笔记-Chapter8-处理数据
倘若在请求的过程中有什么地方出错了，那就可以说 HTTP 请求失败，或者 promise 被拒了。在 Google Chrome 中如果想限制网络速度，单击“Online”旁边的箭头，在打开的菜单中，你可以选择不同的速度，选择“Fast 3G”和“Slow 3G”对网络请求的速度限制较大。前面的例子之所以发送瀑布式请求，是因为组件是一个套一个渲染的，前一个组件未渲染之前不能发起下一个请求。在用户滚动界面的过程中，我们要消除用户已经看过的结果，并渲染位于屏幕范围以外的新结果，随时准备展示。
2024-06-18 07:15:00
1782
原创 【React】《React 学习手册 (第2版) 》笔记-Chapter7-使用钩子增强组件
多数情况下，你需要的是 useEffect，但是如果要实现的效果对浏览器绘制很重要（屏幕上 UI 元素的外观或位置），那就要使用 useLayoutEffect。由于每次渲染都新声明一个数组，因此在 JavaScript 看来，words 是有变化的，所以每次都会调用“fresh render”效应。调用钩子后，React 在一个数组中保存钩子的值，以便跟踪值。新值，新渲染，新效应。我们知道，渲染始终发生在 useEffect 之前，渲染在前，然后各个效应按顺序运行，而且效应可以访问渲染后所有值。
2024-06-17 07:30:00
685
原创 【React】《React 学习手册 (第2版) 》笔记-Chapter6-React 状态管理
上下文供应组件可以把对象放入上下文，但是它自己无法修改上下文中的值，需要父级组件的协助。下面例子中，onSelect 属性是一个函数，这个属性的默认值是 f => f，这是一个虚假函数，什么也不做，只是返回传入的参数。在 React 中使用上下文，首先要把数据放入上下文供应组件，并把供应组件添加到组件树中。在 React 的早期版本中，把状态集中管理放在组件树的根部是一个重要的模式，但是在复杂的应用中集中于组件树的根部维护状态不是一件容易的事。渲染上下文供应组件的有状态的组件是一个自定义的供应组件。
2024-06-17 07:15:00
802
原创 【React】《React 学习手册 (第2版) 》笔记-Chapter5-在 React 中使用 JSX
使用 Babel 的方式有很多种，最容易上手的是直接在 HTML 中通过 CDN 引入 Babel，编译类型为“text/babel”的脚本块中的代码。JSX 是 JavaScript 中的 JS 和 XML 中的 X 的综合体，是对 JavaScript 的扩展，使用一种基于标签的句法直接在 JavaScript 代码中定义 React 元素。然而，这样会导致创建很多非必需的标签，产生很多没什么用的容器。在 JSX 中，元素的类型通过标签指定，标签的属性表示元素的属性，子元素添加在起始和结束标签之间。
2024-06-16 08:44:12
794
原创 【React】《React 学习手册 (第2版) 》笔记-Chapter4-React 运行机制
浏览器 DOM 由 DOM 元素组成，类似地，React DOM 由 React 元素组成。React 元素是对真正的 DOM 元素的描述。换句话说，React 元素是如何创建浏览器 DOM 的命令。可以把其他 React 元素渲染为子元素，创建一个元素树。在 React 中，组件（component）方便重用相同的结构，只需在结构中填充不同的数据即可。在 React 16 之前的版本中，只能在 DOM 中渲染一个元素。React 应用是由一系列 React 元素构成的树状结构，一切都发端于一个根元素。
2024-06-16 08:42:16
1082
原创 【React】《React 学习手册 (第2版) 》笔记-Chapter3-JavaScript 函数式编程
Array.reduceRight 的作用与 Array.reduce 相同，只不过不从数组开头开始归约，而是从数组末尾开始。把数组转换成对象。
2024-06-15 21:41:14
782
原创 【React】《React 学习手册 (第2版) 》笔记-Chapter2-JavaScript 新特性
这意味着，你可以在自己的源码中使用这些语句，Babel 知道在何处寻找你要使用的模块，把找到的模块添加到编译得到的 JavaScript 代码中。此时，我们不等待 promise 成功处理后返回结果再调用一系列 then 函数了，而是让异步函数暂停执行函数中的代码，直到 promise 处理成功。kangax 编辑的兼容表（http://kangax.github.io/compat-table/esnext）是一个很好的参考资源，可以查明最新的 JavaScript 特性在各浏览器中的支持程度。
2024-06-15 21:39:29
921
原创 【React】《React 学习手册 (第2版) 》笔记-Chapter1-初识 React
这些工具可通过扩展 Chrome 和 Firefox 中安装，可作为 Safari、IE 和 React Native 的独立应用程序使用。借助开发者工具可以审查 React 组件树、查看属性和状态详情，甚至还可以判断哪些线上网址使用的是 React。在含有 package.json 文件的文件夹中执行 npm install 命令将安装项目中列出的所有包。在 package.json 文件中提供具体的版本信息，以便安装各个包的正确版本。凡是含有 yarn.lock 文件的项目，使用的就是 Yarn。
2024-06-15 21:37:48
520
原创 【JS】Chapter15-高阶技巧
相同点:都可以改变函数内部的this指向.区别点:call 和 apply 会调用函数, 并且改变函数内部this指向.call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2…形式，apply 必须数组形式[arg]bind 不会调用函数, 可以改变函数内部this指向.主要应用场景:call 调用函数并且可以传递参数apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值。
2023-11-22 23:00:00
623
原创 【JS】Chapter14-深入面向对象
面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。面向对象是以对象功能来划分问题，而不是步骤。在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。面向对象的特性：封装性继承性多态性。
2023-11-21 23:00:00
448
原创 【JS】Chapter13-构造函数&数据常用函数
推荐使用字面量方式声明对象，而不是 Object 构造函数。Object.keys 静态方法获取对象中所有属性（键）Object.values 静态方法获取对象中所有属性值。Object. assign 静态方法常用于对象拷贝。Object 是内置的构造函数，用于创建普通对象。
2023-11-20 23:00:00
622
原创 【JS】Chapter12-作用域&解构&箭头函数
垃圾回收机制(Garbage Collection) 简称 GCJS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。正因为垃圾回收器的存在，许多人认为JS不用太关心内存管理的问题但如果不了解JS的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况不再用到的内存，没有及时释放，就叫做内存泄漏。
2023-11-10 23:00:00
345
原创 【JS】Chapter11-正则&阶段案例
正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。通常用来查找、替换那些符合正则表达式的文本。正则表达式在 JavaScript 中的使用场景：例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)比如用户名要求用户小写英文字母,数字,下划线或者短横线组成，并且用户名长度为 3~16位:过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。
2023-11-09 23:00:00
1125
原创 【JS】Chapter10-Bom 操作
为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。- 数据存储在用户浏览器中- 设置、读取方便、甚至页面刷新不丢失数据- 容量较大，sessionStorage和localStorage约 5M 左右- 常见的使用场景：- https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失。
2023-11-08 23:00:00
290
原创 【JS】Chapter9-Dom 节点&移动端滑动
touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。使用场景：如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成。
2023-11-07 23:00:00
229
原创 【JS】Chapter8-Dom 事件进阶
页面加载事件有哪两个？如何添加？load 事件监听整个页面资源给 window 加给 document 加无需等待样式表、图像等完全加。
2023-11-06 23:00:00
226
原创 【JS】Chapter7-Dom 事件基础
事件监听三要素：事件源：那个dom元素被事件触发了，要获取dom元素事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等事件调用的函数：要做什么事例子：注意：事件类型要加引号函数是点击之后再去执行，每次点击都会执行一次1.2 拓展阅读——事件监听版本DOM L0事件源.on事件 = function() { }DOM L2事件源.addEventListener(事件，事件处理函数)区别：on方式会被覆盖，addEv
2023-11-02 22:00:00
156
原创 【JS】Chapter6-Dom 获取&属性操作
DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能DOM作用开发网页内容特效和实现用户交互标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如：disabled、checked、selected自定义属性：在html5中推出来了专门的data-自定义属性在标签上一律以data-开头。
2023-11-01 22:00:00
205
原创 【JS】Chapter5-对象
属性名可以使用 “” 或 ‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等。数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。对象本质是无序的数据集合, 操作数据无非就是 增 删 改 查 语法。JavaScript内部提供的对象，包含各种属性和方法给开发者调用。属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔。属性就是依附在对象上的变量（外面是变量，对象内是属性）多个属性之间使用英文 , 分隔。
2023-10-31 22:00:00
103
原创 【JS】Chapter4-函数
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。全局作用域（全局有效）：作用于所有代码执行的环境(整个 script 标签内部) 或者一个独立的 js 文件。局部作用域（局部有效）：作用于函数内的代码环境，就是局部作用域。运算结果：无论 && 还是 ||，运算结果都是最后被执行的表达式值，一般用在变量赋值。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。作用域链：采取就近原则的方式来查找变量最终的值。
2023-10-30 22:00:00
59
原创 【JS】Chapter2-流程控制
众多的 JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符。多分支if语法：（使用场景：适合于有多个结果的时候， 比如学习成绩可以分为：优 良 中 差）== 是判断，只要求值相等，不要求数据类型一样即可返回true。以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构。=== 是全等，要求值和数据类型都一样返回的才是true。有的时候要根据条件选择执行代码，这种就叫分支结构。开发中判断是否相等，强烈推荐使用 ===自增运算符的用法：前置自增和后置自增。
2023-10-23 22:00:00
60
原创 【JS】Chapter1-基础语法
JavaScript（是什么？是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。作用（做什么？– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)– 服务端编程 (node.js)JavaScript的组成（有什么？规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等。Web APIs :DOM：操作文档，比如对页面元素进行移动、大小、添加删除等操作。
2023-10-22 21:07:50
73
原创 【Mobile】Chapter6-bilibili 项目
目标：能够使用 vw 单位设置网页元素的尺寸。相对单位。相对视口的尺寸计算结果。1vw = 1/100 视口宽度1vh = 1/100 视口高度。
2023-07-21 20:00:00
129
原创 【Mobile】Chapter5-黑马面面布局开发
最后，如果提交网站，你不愿意用 git 提交，可以直接找到仓库，里面有文件，选择上传本地文件即可。但是，1个小时内只能上传 20 个以内的文件。git 可以把我们的本地网站提交上传到远程仓库（码云 gitee）里面，类似以前的 ftp。官网地址：https://www.swiper.com.cn。准备工作：需要下载git软件、需要码云注册账号。前端设计师可以直接摹客或蓝湖测量取值。小技巧：如何批量下载全部字体图标呢？码云，就是远程仓库，类似服务器。
2023-07-21 19:45:00
121
原创 【Mobile】Chapter4-移动端 WEB 开发之响应式布局
Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。中文官网：http://www.bootcss.com/官网：http://getbootstrap.com/推荐使用：http://bootstrap.css88.com/框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。
2023-07-21 19:30:00
265
原创 【Mobile】Chapter3-移动 WEB 开发之 rem 适配布局
媒体查询（Media Query）是 CSS3 的新语法。使用@media查询，可以针对不同的媒体类型定义不同的样式。@media可以针对不同的屏幕尺寸设置不同的样式。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。目前针对很多苹果手机、Android 手机、平板等设备都用得到多媒体查询。Less（Leaner Style Sheets 的缩写）是一门 CSS 扩展语言，也称为 CSS 预处理器。
2023-07-21 19:15:00
110
原创 【Mobile】Chapter2-移动 WEB 开发之 flex 布局
数值越小，排列越靠前，默认为0。注意：和z-index不一样。.item {
2023-07-21 19:00:00
86
原创 【Mobile】Chapter1-移动 WEB 开发之流式布局
移动端浏览器我们主要对 webkit 内核进行兼容。我们现在开发的移动端主要针对手机端开发。现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一。学会用谷歌浏览器模拟手机界面以及调试。视口就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口和理想视口。我们移动端布局想要的是理想视口，就是手机屏幕有多宽，我们的布局视口就有多宽。想要理想视口，我们需要给我们的移动端页面添加 meta 视口标签。现在市场常见的移动端开发有单独制作移动端页面和响应式页面两种方案。现在市场。
2023-06-24 19:52:07
259
1
原创 【CSS】Chapter9-CSS3 其他新特性
转换 transform，我们简单理解就是变形，有 2D 和 3D 之分。我们暂且学了三个，分别是位移、旋转和缩放。2D 移动 translate(x,y) 最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的。可以分开写，比如 translateX(x) 和 translateY(y)。2D 旋转 rotate(度数) 可以实现旋转元素，度数的单位是deg。2D 缩放 scale(x,y) 里面参数是数字，不跟单位，可以是小数，最大的优势是不影响其他盒子。
2023-06-05 22:00:00
120
原创 【CSS】Chapter8-品优购项目
SEO（Search Engine Optimization），汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO 的目的是对网站进行深度的优化，从而帮助网站获得免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备。注意：一般稳定的服务器都是需要收费的。
2023-06-05 21:45:00
115
原创 【CSS】Chapter7-HTML5 与 CSS3 提高
音频标签和视频标签使用方式基本一致。浏览器支持情况不同。谷歌浏览器把音频和视频自动播放禁止了。我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过 JavaScript 解决）。视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性。
2023-06-05 21:30:00
143
原创 【CSS】Chapter6-CSS 高级技巧
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites. CSS 雪碧）。不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对 HTML 文本呈现的差异，照顾浏览器的兼容，我们需要对 CSS 初始化。网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。
2023-06-05 21:15:00
96
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人