Electron 中创建透明窗口 在开发 Electron 应用时，可能需要创建完全透明的窗口，比如我们要做一个屏幕内容共享的功能，在特定矩形区域内的内容才会被共享出来，而这个区域是一个透明且可被穿透的区域。首先我们需要再主进程上创建一个矩形窗口共享区域的窗口一定是透明的、可移动的、并且没有边框、可调整大小，但不能最小化和最大化，也不能进入全屏状态，窗口也不能在程序坞中关闭。
二叉树的四种遍历方式 构造一个二叉树：class Tree{ constructor(node){ this.node = node; this.left = null; this.right = null; }}1. 前序遍历前序遍历首先访问根结点然后遍历左子树，最后遍历右子树。preOrder(callback){ // 前序遍历 callback(this.value); if(this.left !== null){
Git 使用总结 git: 分布式版本控制系统。Git 终端快捷键Git终端命令遵循Linux命令格式。比如 touch、ls 等命令都可以使用。快捷键作用ctrl + a回到行首ctrl + e回到行尾ctrl + l清屏echo "文字" > xxx.txt向xxx.txt文件中写入内容（会被覆盖）VI 编辑器命令使用 vi 文件名 打开文件。保存并退出时，按 Esc + shift + z + z，或者 Esc + :wq!；插入文本时，按字母 i
小程序开发入门 配置 tabBartabBar 相当于路由，最少配置两个，每个配置项会匹配一个 page，配置后会在页面底部生成导航菜单。当点击下方的导航时，会跳转到对应的页面。"tabBar": { "selectedColor": "#d81e06", "color": "#515151", "list": [ { "pagePath": "pages/playlist/playlist", "text": "音乐", "iconPath": "im
webpack配置 react + ts 项目热替换功能 使用 webpack 配置项目坑是真多呀！搞了一下午才把坑填完，最后得出结论：遇到坑就到 npm 官网，看官方文档，使用搜索引擎看别人的填坑经历很多时候不一定能解决问题，遇到问题还是去 npm 或者 GitHub 上比较快啊。。这篇文章分享一下我遇到的两个坑~react + ts 项目配置热替换首先配置 webpack 和 tsconfig。React 使用热更替官方推荐下载 react-hot-loader 这个包，使用时需要先下载。webpack 配置如下：const { HotModuleRep
使用 CentOS 7 部署前端项目 购买服务器以腾讯云为例，如果是 25 岁以下，可以免学生认证，使用校园优惠套餐。购买地址：云 + 校园本文以 CentOS 为例，购买后，会初始化 root 密码，就可以使用云服务器了！配置服务器购买之后就可以使用 root 用户名和腾讯云提供的初始密码登录到云服务中。可以使用官网在线终端命令行程序操作，也可以使用 Xshell 或者 git 登录服务器，使用时需要先下载。本文以 git 为例。输入以下命令登录：ssh root@IP地址然后输入密码，就登陆到云服务中了。默认的 root
手动实现Promise/A+（二）：实现promsie中的其它方法 Promise 的其他 API 实现then 方法基本就是 promise 的全部内容，至于 catch、resolve、reject 等方法都是在原有的基础上做的扩展或者封装，这些方法并不算是 promise 的核心。下面就一一实现这些方法。catchcatch 是 promise 实例上的方法，添加一个拒绝态的回调到当前 promise，然后返回一个新的 promise。实现如下：catch(errCbs){ return this.then(null, errCbs);}reso
手动实现Promise/A+（一）：实现 then 方法 promise 如今已经深度融入前端开发技术当中，很多模块内部都依赖 promise，使用 promise 可以很好的解决异步回调问题。promise 内部有三种状态：预备态（pending）、成功态（fulfilled）和失败态（rejected）。初始状态是 pending，当操作完成时会变成成功态，如果操作出现异常而终止时它会变成失败状态（或拒绝态）。一旦 promise 被履行或者被拒绝，它就不可逆转，即不能从成功态再变回其他状态，状态之间不能再相互转换。此时的 promise 可以认为是完成状态
webpack使用笔记（六）优化项目 webpack-merge使用 webpack-merge 插件可以让不同环境的 webpack 配置分别写在不同的文件里。在配置 webpack 时可以将开发环境和生产环节相同的配置项提取出来，写在一个单独的文件中，这样做可以更好的管理项目配置。// 提取出 webpack-base文件module.exports = { // ....}// webpack-config-dev.js 文件const { merge } = require('webpack-merge');co
webpack使用笔记（五）代码压缩与文件分离 配置完有关 CSS loader 后，还有一个问题，我们不想将 CSS 都插入到 style 标签中，如果 CSS 样式代码很多，会导致生成的 HTML 文件很大，我们希望使用 <link> 标签引入打包后的 CSS 文件（将 CSS 单独提取出来），这时候就要使用一个插件：mini-css-extract-plugin。下载：yarn add mini-css-extract-plugin -D。配置：// webpack.config.dev.jslet MiniCssExtract
webpack使用笔记（四）loader原理与实现 loader 的执行顺序loader 的执行顺序是：从右到左、从下到上。在配置 sass 样式时，需要这么去写 loader：{ test: /\.sass$/, use: ['style-loader','css-loader','sass-loader']}loader 会先执行 sass-loader，让 sass 格式的样式转成 css 格式，然后使用 css-loader 处理的样式中引入的图片路径，最后使用 style-loader 将样式插入到 style 标签中。因
webpack使用笔记（三）配置devServer 配置 devServer 之前需要先下载yarn add webpack-dev-server -D下载好之后，就可以在 webpack 配置项中去配置 webpack-dev-server 啦。devServer 的配置项很多，这里只对使用比较多的配置项做一下介绍。devServer 的配置应该是在开发环境下进行。下面是一个简单的配置内容：if(isDev){ // 如果是开发环境 config.devServer = { // 设置 host（默认就是 loc
webpack使用笔记（二）loader的使用 module 配置项在 module 中主要配置 loader，loader 是模块转换器，比如把 sass 转成 css。配置了相关资源的 loader，我们就可以直接在程序中用 import 的方式引入非 js 资源。loader 能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中。需要下载的 loader 以及作用：babel-loader：解析 JavaScript，包括 js 的新特性、新语法；css-loader：处理 css 语法，比如 @imp
webpack使用笔记（一）基础配置 webpack 是一个现代 JavaScript 应用程序的静态模块打包器，已经成为前端开发不可或缺的工具。特别是在开发大型项目时，项目太大，文件过多导致难以维护，webpack 为我们提供了很好的帮助。首先，配置 webpack，大致的骨架是这样的，这是最基本的配置内容：{ entry: "", // 入口配置 mode: 'development', // 环境配置 output: {}, // 打包输出配置 module: {},
事件对象和事件冒泡、捕获机制 冒泡与捕获事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。再点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它；然后，它移动到<html>中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素；而冒泡与捕获恰恰相反：浏览器
HTTP 缓存 HTTP 缓存不是必须的，但重用缓存的资源通常是必要的。它可以减少服务器的压力，如果不使用缓存，每次发起请求都要求服务器发送相应数据，很多时候服务器发来的内容并没有发生变化，就会“浪费”服务器带宽。可以在客户端设置缓存，给缓存加上过期时间，如果期限没到就是用本地缓存的内容。然而常见的 HTTP 缓存只能存储 GET 响应，对于其他类型的响应则无能为力。缓存的头部HTTP 相关的缓存头部一般有：Cache-Control 通用的首部，它是缓存控制字段；Expires 响应首部，代表资源过期时间；L
HTTP知识点汇总 1. HTTP 的特点简单，HTTP 大体上还是被设计得简单易读。HTTP 报文能够被人读懂，还允许简单测试，降低了门槛，对新人很友好。可扩展，只要服务端和客户端就新 headers 达成语义一致，新功能就可以被轻松加入进来，可见 HTTP 的灵活性很好；无状态，在同一个连接中，两个执行成功的请求之间是没有关系的。而使用 HTTP的头部扩展，HTTP Cookies 能创建有状态的会话，就可以解决这个问题；通过请求和响应的交换达成通信。请求由客户端发出，而服务器端回复响应；可靠传输，底层依托 T
跨站请求伪造（CSRF）与点击劫持攻击与防御 跨站请求伪造（Cross-site request forgery）简称为 CSRF。这种攻击方式很奇特，它是伪造用户的请求发动攻击的，在 CSRF 攻击过程中，用户往往在不知情的情况下构造了网络请求。CSRF攻击者往往是利用 Cookie 进行的请求伪造，比如一个 A 站点，它有一个评论功能：<!-- index.html --><body> <!-- POST请求，用于提交评论 --> <form class="wrapper" actio
React Ref 使用总结 一般会使用 ref 获取 DOM 元素。例如：constructor(){ super(); // 创建 ref this.divRef = React.createRef();}componentDidMount(){ // DOM 元素可以通过 current 属性获得 console.log(this.divRef.current);}render(){ // 使用 ref return <div ref={this.divRef
react-redux 中的 Hook 使用、context、JSX、性能优化以及与 Vue 的对比 redux下图是 Redux 的工作流程图。图中更新数据需要派发 Action，action 进入 dispatch，dispatch 中可能还会触发 action，比如使用 redux-thunk 中间件进行异步请求时，还会派发 action。然后 dispatch 函数会把 action 传递给 reducer 函数，reducer 用于状态的变更，状态变更后引起视图（View）更新。react-reduxreact-redux 是 React 应用和 redux 的桥接器。下面是他的使用方式
关注
