- 博客(84)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Qt6播放音频文件
Qt6中已经没有QSound类，播放音频需要使用QSoundEffect类首先在.pro文件中添加multimedia模块使用方法：#include <QSoundEffect>QSoundEffect * startSound = new QSoundEffect(this);startSound->setSource(QUrl::fromLocalFile(":/res/TapButtonSound.wav"));startSound->play();尤其需要注
2022-03-20 19:27:47
4178
10
原创 npm安装github包
背景之前有个需求要做一个无线滚动的列表，于是使用了react-infinite-scroll-component需要让列表能够自动滚动并自动加载数据，设置为每100毫秒加载一条新数据并自动滚动到底部。发现实现起来跟期望有差异，列表并没有按照1秒加载10条数据的速度加载，实际要略慢些。通过分析react-infinite-scroll-component源码发现这个组件在监听滚动时有个默认的150毫秒的节流操作：我想取消掉这个默认的节流行为。fork代码仓库修改fork后的仓库地址为该组件新增
2022-03-19 14:56:06
2909
原创 Flutter集成Rust
前言上一篇博客中详细介绍了在Dart中如何通过FFI机制调用Rust的函数，并实现了Dart播放音乐的功能。本文在其基础上介绍如何在Flutter中调用Rust。难点由Rust编译成的动态库需要打包到Flutter应用的目录下，否则会导致找不到动态库。因此相比上篇博客，多了一步配置动态库的操作。新建Flutter项目flutter create flutter_ffi此时运行flutter run你就可以看到flutter的初始界面：我们下面要做的就是点击➕按钮时除了让数字加一之外，同时去
2022-03-13 10:19:37
4972
1
原创 在Dart中使用FFI调用Rust函数
什么是FFI外部函数接口 (FFI) 是一种机制，通过该机制，以一种编程语言编写的程序可以调用以另一种编程语言编写的服务。当你需要额外的速度🚀或需要使用其他语言的库时，应用FFI会很方便。为什么需要FFIDart是Flutter底层的语言，Dart引入FFI机制很大程度上是为了帮Flutter在桌面开发领域铺路。假设你像我一样是一个懒惰的程序员，并且你现在需要一个库来在你的计算机上播放音乐/音频。不幸的是，Flutter/Dart 中不存在这样的东西，因为它是一个相对年轻的生态系统（语言实际上并不那
2022-03-12 11:41:58
4203
原创 快速打包React+Electron项目
背景上一篇博客介绍了如何快速搭建React + Electron的开发环境，简单应用开发完毕后需要打包成应用程序，比如你需要把你开发的App发给其他人使用。下面基于上一篇博客内容进一步介绍如何打包：打包React项目首先修改main.js因为现在你要将react项目打包在build文件夹下面，所以加载应用处改成如下：// 加载应用----react 打包mainWindow.loadURL(url.format({ pathname: path.join(__dirname, './bui
2022-03-04 10:18:33
1317
2
原创 三分钟搭建React + Electron开发环境
三分钟搭建React + Electron开发环境背景创建React项目添加Electron包相关配置项目根目录下新建main.js配置package.json启动electron启动效果背景先前的博客中介绍过怎么通过Webpack搭建React的开发环境，自己搭建需要很多的手动配置工作。当需要快速开发一个简单的React应用时，推荐使用create-react-app快速生成React的开发环境。怎么快速搭建一个Electron环境是简单的，但是搭一个React + Electron的环境是略微有
2022-03-03 10:23:24
1488
1
原创 electron实现简单应用番茄钟
package.json{ "name": "electron-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron ." }, "keywords": [], "author": "",
2021-10-23 14:45:58
321
原创 实现对预检请求的跨域（踩坑）
写在前面由于这篇博客承接自我的上一篇博客，因此在看这篇博客之前先看我的上一篇博客哦～问题的由来前几天我写了篇记录前端实现跨域的操作并成功实现了跨域（通过代理为响应头添加允许跨域的字段），今天突然发现不work了，又报了跨域的错误，报错信息如下：在Crome中查看预检请求关于简单请求、复杂请求，以及预检请求（OPTIONS）的由来网上有很多介绍性的文章，在此不再赘述。一言以蔽之，是因为我们获取token的post请求设置了content-type: application/json的头部字段引起了
2021-09-06 21:26:38
4102
原创 设计模式——JavaScript实现单例模式
单例模式的定义保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。适用场景一个单一对象。比如：弹窗，无论点击多少次，弹窗只应该被创建一次。js代码class CreateUser { constructor(name) { this.name = name; this.getName(); } getName() {
2020-08-12 11:02:26
212
原创 刷题——二叉树的镜像（翻转二叉树）
题目描述请完成一个函数，输入一个二叉树，该函数输出它的镜像。例如输入：镜像输出：js代码/** * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; * this.left = this.right = null; * } *//** * @param {TreeNode} root * @return {TreeNode} */var mirro
2020-08-03 08:36:48
237
原创 刷题——Leetcode98 验证二叉搜索树
题目描述给定一个二叉树，判断其是否是一个有效的二叉搜索树。假设一个二叉搜索树具有如下特征：节点的左子树只包含小于当前节点的数。节点的右子树只包含大于当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。分析可以用二叉树的中序遍历解这道题，由于中序遍历顺序刚好是左-根-右，因此只要中序遍历的结果是升序的，就是二叉搜索树，否则不是二叉搜索树。js代码/** * Definition for a binary tree node. * function TreeNode(val) {
2020-07-25 11:56:26
145
原创 刷题——LeetCode94 二叉树的中序遍历
题目描述给定一个二叉树，返回它的中序遍历。思路分析中序遍历即以左-根-右的顺序访问节点。经典的方法是使用递归，直截了当。我们可以定义一个辅助函数来实现递归。js代码/** * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; * this.left = this.right = null; * } *//** * @param {TreeNode} root
2020-07-23 14:30:43
209
1
原创 刷题——元素计数
题目描述给定一个整数数组arr，计数元素x，使x + 1也在arr。如果在arr中有重复的，分开计数。例1：Input: arr = [1, 2, 3]Output: 2例2：Input: [1, 1, 3, 3, 5, 5, 7, 7]Output: 0例3：Input: [1, 3, 2, 3, 5, 0]Output: 3例4：Input: arr = [1, 1, 2, 2]Output: 2思路分析首先使用字典将数组中的值及其出现的次数按照键值对的形式存储起来，
2020-07-04 08:58:53
112
原创 刷题——字母异位词分组
题目描述给定一个字符串数组，将字母异位词组合在一起。字母异位词指字母相同，但排列不同的字符串。示例：输入：[“eat”, “tea”, “tan”, “ate”, “nat”, “bat”]输出：[[“eat”, “tea”, “ate”],[“tan”, “nat”],[“bat”]]说明：所有输入均为小写字母。不考虑答案输出的顺序。思路分析此题主要考察对字典操作的应用。ES6中引入了MAP数据解构，我们用它来解这道题目。算法流程：确定单词所包含字母组合——搜索是否已在字
2020-06-27 10:51:52
264
原创 刷题——买卖股票的最佳时机
题目描述给定一个数组，它的第i个元素是一支给定股票第i天的价格。设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易（多次买卖一支股票）。注意：你不能同时参与多比交易（你必须在再次购买前出售掉之前的股票）。Example:输入：[7, 1, 5, 3, 6, 4]输出: 7解释：在第2天（股票价格 = 1）的时候买入，在第3天（股票价格 = 5）的时候卖出，这笔交易所能获得利润 = 5 - 1 = 4。随后，在第4天（股票价格 = 3）的时候买入，在第5天（股票价格 = 6
2020-06-26 11:19:48
207
原创 刷题——移动零
题目描述给定一个数组nums，编写一个函数将所有0移动到数组的末尾，同时保持非零元素的相对顺序。Example:Input: [0, 1, 0, 3, 12]Output: [1, 3, 12, 0, 0]要求：不能创建一个新的数组来做操作尽量少的操作次数思路分析我们用js来编写这个函数。要求在原数组上操作，可能我们最先想到的是交换元素位置，但是js的数组提供了很多好用的方法，可以直接拿来用；尽量少的操作次数，要求我们在寻0的时候倒序遍历。简单来说，就是从后往前找0，每当找到一个0
2020-06-25 10:42:24
246
原创 js使用reduce实现组合函数
题目描述/** * 函数组合运行 * 说明：实现一个方法，可将多个函数方法按从左到右的方式组合运行。 * 如`composeFunctions(fn1,fn2,fn3,fn4)`等价于`fn4(fn3(fn2(fn1))`。 * 示例： * const add = x => x + 1; * const multiply = (x, y) => x * y; * const multiplyAdd = composeFunctions(multiply, add);
2020-06-21 11:31:21
1041
原创 ES5和ES6实现每隔一秒打印一个数字
要求隔一秒打印出一个1，再隔一秒打印出个2，再隔1秒打印出个3…废话不多说，直接上代码：ES6for(let i = 1; i <= 10; i++){ setTimeout(function () { console.log(i); }, 1000 * i);}ES5for(var i = 1; i <= 10; i++){ (function (i) { setTimeout(function () {
2020-06-20 12:30:39
1285
原创 移动App-什么是原生开发和混合开发
原生开发（NativeApp）指的是使用IOS、Android官方提供的工具、开发平台、配套语言进行手机App开发的方式。混合开发（HybirdApp）指的是使用前端已有的技术（HTML+CSS+JS），然后再搭配一些相关的打包编译技术，就能够开发出一个手机App，安装到手机中进行使用。...
2020-05-06 08:30:11
708
原创 移动App-什么是前端混合移动App
什么是混合移动App开发苹果上的软件是如何开发出来的？使用的是OC或者Swift语言安卓平台上的软件是如何开发出来的？使用安卓相关的语言开发的：Java，安卓的控件苹果和安卓平台上共有的软件是如何开发出来的？企业招两套开发人员（开发组）前端移动App开发技术提供了开发手机端应用程序的体验。通俗的理解，就是把开发Web网站的技术（HTML+CSS+JS），通过某种方式，移植到移动A...
2020-05-05 08:50:04
300
原创 实现AntDesign组件的按需导入
昨天我们演示了如何为React项目启用AntDesign组件，现在回顾一下，引入方法为：import {DatePicker} from "antd";import "antd/dist/antd.css"虽然我们只用到了DatePicker组件的样式表，但是该方法却全局引入了所有AntDesign组件的样式表。这样做的结果就是将来会打包大量没用的代码。因此我们需要真正地实现按需导入Ant...
2020-05-04 08:05:45
6036
2
原创 为React项目启用AntDesign组件
AntDesign是蚂蚁金服开发的一个UI框架，为开发人员提供了丰富易用的各种组件。下面我们演示在React中使用AntDesign渲染一个时间选择器组件：首先装包：npm i antd -S按需导入组件：import {DatePicker} from "antd";全局导入css：import "antd/dist/antd.css"使用：像使用一般组件那样使用<DatePick...
2020-05-03 06:23:01
277
原创 React中匹配路由参数的方式
模糊匹配默认情况下，路由中的规则是模糊匹配的，如果路由可以部分匹配成功，就会展示这个路由对应的组件。看下面的例子：<Link to="/movie/top250/10">电影</Link><Route path="/movie" component={Movie}></Route>虽然Link标签的to属性与Route标签的path不完全相...
2020-05-02 11:26:55
2044
原创 react-router-dom路由的基本使用
在react中启用路由模块，首先要装包：npm i react-router-dom -S，装完之后在根组件中导入：import {HashRouter, Route, Link} from "react-router-dom"。HashRouter:表示一个路由的根容器，将来，所有路由相关的东西，都要包裹在HashRouter里面，而且，一个网站中，只需要使用一次HashRouter就好了。...
2020-05-01 09:37:36
544
原创 实现js中的new
在实现new方法之前首先我们需要知道在使用new操作符创建对象时发生了什么：创建一个空对象将空对象的隐式原型指向构造函数的显式原型改变构造函数中的this指向并执行构造函数返回这个新对象上面这个过程是针对一般情况的，即构造函数中没有返回值。有时候构造函数中会return一个对象，这个时候我们返回的应该是这个return的对象而不是我们创建的对象。下面给出create()方法的实现：...
2020-04-30 11:30:51
266
原创 实现js中的instanceof
js中的instanceof操作符用来判断某个对象是否是某个构造函数的实例，使用方法为obj instanceof fun，左侧是一个对象，右侧是一个构造函数，如果该对象是构造函数的实例（含继承），则返回true，否则返回false。下面我们来实现一下instanceof：function instance_of(l, r){ // l代表操作符左侧的对象，r代表操作符右侧的构造函数 wh...
2020-04-29 13:41:53
521
原创 TCP拥塞控制
TCP的拥塞控制在某段时间，若对网络中某一资源的需求超过了该资源所能提供的可用部分，网络性能就要变坏。这种情况就叫做拥塞。若出现拥塞而不进行控制，整个网络的吞吐量将随输入负荷的增大而下降。TCP有四种拥塞控制算法，分别是慢开始、拥塞避免、快重传和快恢复。下面介绍这四种拥塞控制算法的基本原理，假定如下条件：数据是单方向传送，而另一个方向只传送确认。接收方总是有足够大的缓存空间，因而...
2020-04-28 18:26:10
234
原创 在项目中为scss或less文件启用模块化
在项目当中我们会用到很多第三方样式表，比如bootstrap，可以发现大多数第三方样式表都是.css文件。而之前我们为.css文件启用了模块化，这就导致我们在使用第三方样式表的时候非常不方便。我们希望不为第三方样式表启用模块化，只对自己写的样式表启用模块化。解决思路是：自己写的样式表都要以.scss结尾，只为.scss结尾的样式表启用模块化。安装bootstrap运行npm i bootstr...
2020-04-26 14:25:54
821
原创 通过local和global设置类名是否被模块化
使用:local()和:global():local()包裹的类名，是被模块化的类名，只能通过className={cssobj.类名}来使用；同时，:local()默认可以不写，在样式表中定义的类名，都是被模块化的类名。:global()包裹的类名，是全局生效的，不会被css-modules控制，使用定义的类名className="类名"举个例子：:global(.title){ ...
2020-04-25 10:35:43
559
原创 使用localIdentName来自定义模块化的类名
从本质上理解CSS模块化怎么来理解CSS模块化？是为CSS添加了作用域吗？不是的！你可以这么理解CSS模块化：CSS模块化其实就是将类名变成键，通过随机生成的值作为真正的类名，从而避免CSS作用域冲突的问题。如果你将系统随机生成的类名赋给引入该CSS文件以外的部分依然是可以生效的。下面来验证这一点：我们首先在控制台打印一下导入的cssobj：{title: "_1_SjtDCiFqhB0kv...
2020-04-24 10:26:20
2375
原创 为普通样式表通过modules参数启用模块化
CSS样式表作用域冲突问题由于CSS没有作用域的概念，因此昨天那种在组件中引入样式表的方法会使得该样式表在整个项目中都生效。如果我们想只让导入的样式表在当前作用域内有效，需要为其启用模块化。CSS启用模块化在webpack.config.js中的css-loader后面追加参数：{ test: /\.css$/, use: ["style-loader", "css-loa...
2020-04-23 10:01:31
175
原创 使用css样式表美化组件
在React中，虽然能够将样式写成js的形式，但这种方法不太方便，写样式最好的方法还是使用css样式表。安装配置css-loader安装cnpm i style-loader css-loader -D配置在webpack.config.js中的module节点下新增rule：{ test: /\.css$/, use: ["style-loader", "css-lo...
2020-04-22 17:51:15
181
原创 配置webpack设置根目录
在项目当中，我们可能正在大量使用相对路径，但是相对路径存在一个明显的问题：当文件目录发生变化时，需要频频修改相对路径。一个比较常见的情形是：在React开发中，我们经常需要导入组件，而组件一般都是放在components目录下。组件的位置一般不会改变，但是需要导入组件的文件的位置可能经常变化。这个时候如果我们使用相对路径，则需要对导入路径进行修改；而如果使用绝对路径，不管当前文件放到哪里都可以正确...
2020-04-21 18:35:31
2512
原创 配置webpack从而在导入组件的时候省略.jsx后缀名
昨天介绍过在index.js中导入组件Hello的方式：import Hello from "./components/Hello.jsx"。如果我们想在导入组件的时候省略.jsx后缀名，可以通过配置webpack实现：在webpack.config.js中增加resolve节点：resolve: { extensions: [".js", ".jsx", ".json"]}...
2020-04-20 10:59:36
1313
原创 将组件抽离为单独的jsx文件
为了对项目中创建的组件更好地管理，我们在src目录下新建components目录，用于存放将来要创建的组件。下面以一个简单的Hello组件为例，演示组件的导出与导入：components目录下的Hello.jsx：import React from "react"function Hello(props){ return <div>Hello,{props.name}&...
2020-04-19 20:42:03
317
简易计算器.html
2020-03-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人