多云转晴ing-CSDN博客

原创 Electron 中创建透明窗口

在开发 Electron 应用时，可能需要创建完全透明的窗口，比如我们要做一个屏幕内容共享的功能，在特定矩形区域内的内容才会被共享出来，而这个区域是一个透明且可被穿透的区域。首先我们需要再主进程上创建一个矩形窗口共享区域的窗口一定是透明的、可移动的、并且没有边框、可调整大小，但不能最小化和最大化，也不能进入全屏状态，窗口也不能在程序坞中关闭。

2023-12-17 16:33:32 2321

构造一个二叉树：class Tree{ constructor(node){ this.node = node; this.left = null; this.right = null; }}1. 前序遍历前序遍历首先访问根结点然后遍历左子树，最后遍历右子树。preOrder(callback){ // 前序遍历 callback(this.value); if(this.left !== null){

2020-10-20 16:26:49 243

原创 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

2020-10-07 09:13:50 446

原创小程序开发入门

配置 tabBartabBar 相当于路由，最少配置两个，每个配置项会匹配一个 page，配置后会在页面底部生成导航菜单。当点击下方的导航时，会跳转到对应的页面。"tabBar": { "selectedColor": "#d81e06", "color": "#515151", "list": [ { "pagePath": "pages/playlist/playlist", "text": "音乐", "iconPath": "im

2020-09-28 21:23:15 420

原创 webpack配置 react + ts 项目热替换功能

使用 webpack 配置项目坑是真多呀！搞了一下午才把坑填完，最后得出结论：遇到坑就到 npm 官网，看官方文档，使用搜索引擎看别人的填坑经历很多时候不一定能解决问题，遇到问题还是去 npm 或者 GitHub 上比较快啊。。这篇文章分享一下我遇到的两个坑~react + ts 项目配置热替换首先配置 webpack 和 tsconfig。React 使用热更替官方推荐下载 react-hot-loader 这个包，使用时需要先下载。webpack 配置如下：const { HotModuleRep

2020-08-22 16:55:14 589

原创使用 CentOS 7 部署前端项目

购买服务器以腾讯云为例，如果是 25 岁以下，可以免学生认证，使用校园优惠套餐。购买地址：云 + 校园本文以 CentOS 为例，购买后，会初始化 root 密码，就可以使用云服务器了！配置服务器购买之后就可以使用 root 用户名和腾讯云提供的初始密码登录到云服务中。可以使用官网在线终端命令行程序操作，也可以使用 Xshell 或者 git 登录服务器，使用时需要先下载。本文以 git 为例。输入以下命令登录：ssh root@IP地址然后输入密码，就登陆到云服务中了。默认的 root

2020-08-15 09:24:37 1818

原创手动实现Promise/A+（二）：实现promsie中的其它方法

Promise 的其他 API 实现then 方法基本就是 promise 的全部内容，至于 catch、resolve、reject 等方法都是在原有的基础上做的扩展或者封装，这些方法并不算是 promise 的核心。下面就一一实现这些方法。catchcatch 是 promise 实例上的方法，添加一个拒绝态的回调到当前 promise，然后返回一个新的 promise。实现如下：catch(errCbs){ return this.then(null, errCbs);}reso

2020-08-08 19:28:33 171

原创手动实现Promise/A+（一）：实现 then 方法

promise 如今已经深度融入前端开发技术当中，很多模块内部都依赖 promise，使用 promise 可以很好的解决异步回调问题。promise 内部有三种状态：预备态（pending）、成功态（fulfilled）和失败态（rejected）。初始状态是 pending，当操作完成时会变成成功态，如果操作出现异常而终止时它会变成失败状态（或拒绝态）。一旦 promise 被履行或者被拒绝，它就不可逆转，即不能从成功态再变回其他状态，状态之间不能再相互转换。此时的 promise 可以认为是完成状态

2020-08-08 19:26:34 973

原创 webpack使用笔记（六）优化项目

webpack-merge使用 webpack-merge 插件可以让不同环境的 webpack 配置分别写在不同的文件里。在配置 webpack 时可以将开发环境和生产环节相同的配置项提取出来，写在一个单独的文件中，这样做可以更好的管理项目配置。// 提取出 webpack-base文件module.exports = { // ....}// webpack-config-dev.js 文件const { merge } = require('webpack-merge');co

2020-08-01 09:35:56 404

原创 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

2020-07-30 17:36:07 571

原创 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 标签中。因

2020-07-30 10:16:19 1481 1

原创 webpack使用笔记（三）配置devServer

配置 devServer 之前需要先下载yarn add webpack-dev-server -D下载好之后，就可以在 webpack 配置项中去配置 webpack-dev-server 啦。devServer 的配置项很多，这里只对使用比较多的配置项做一下介绍。devServer 的配置应该是在开发环境下进行。下面是一个简单的配置内容：if(isDev){ // 如果是开发环境 config.devServer = { // 设置 host（默认就是 loc

2020-07-30 09:38:27 1080

原创 webpack使用笔记（二）loader的使用

module 配置项在 module 中主要配置 loader，loader 是模块转换器，比如把 sass 转成 css。配置了相关资源的 loader，我们就可以直接在程序中用 import 的方式引入非 js 资源。loader 能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中。需要下载的 loader 以及作用：babel-loader：解析 JavaScript，包括 js 的新特性、新语法；css-loader：处理 css 语法，比如 @imp

2020-07-29 22:34:55 671

原创 webpack使用笔记（一）基础配置

webpack 是一个现代 JavaScript 应用程序的静态模块打包器，已经成为前端开发不可或缺的工具。特别是在开发大型项目时，项目太大，文件过多导致难以维护，webpack 为我们提供了很好的帮助。首先，配置 webpack，大致的骨架是这样的，这是最基本的配置内容：{ entry: "", // 入口配置 mode: 'development', // 环境配置 output: {}, // 打包输出配置 module: {},

2020-07-29 20:25:51 460

原创事件对象和事件冒泡、捕获机制

冒泡与捕获事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。再点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它；然后，它移动到<html>中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素；而冒泡与捕获恰恰相反：浏览器

2020-07-27 10:23:32 468

原创 HTTP 缓存

HTTP 缓存不是必须的，但重用缓存的资源通常是必要的。它可以减少服务器的压力，如果不使用缓存，每次发起请求都要求服务器发送相应数据，很多时候服务器发来的内容并没有发生变化，就会“浪费”服务器带宽。可以在客户端设置缓存，给缓存加上过期时间，如果期限没到就是用本地缓存的内容。然而常见的 HTTP 缓存只能存储 GET 响应，对于其他类型的响应则无能为力。缓存的头部HTTP 相关的缓存头部一般有：Cache-Control 通用的首部，它是缓存控制字段；Expires 响应首部，代表资源过期时间；L

2020-07-26 11:14:07 171

原创 HTTP知识点汇总

1. HTTP 的特点简单，HTTP 大体上还是被设计得简单易读。HTTP 报文能够被人读懂，还允许简单测试，降低了门槛，对新人很友好。可扩展，只要服务端和客户端就新 headers 达成语义一致，新功能就可以被轻松加入进来，可见 HTTP 的灵活性很好；无状态，在同一个连接中，两个执行成功的请求之间是没有关系的。而使用 HTTP的头部扩展，HTTP Cookies 能创建有状态的会话，就可以解决这个问题；通过请求和响应的交换达成通信。请求由客户端发出，而服务器端回复响应；可靠传输，底层依托 T

2020-07-26 11:04:37 247

原创跨站请求伪造（CSRF）与点击劫持攻击与防御

跨站请求伪造（Cross-site request forgery）简称为 CSRF。这种攻击方式很奇特，它是伪造用户的请求发动攻击的，在 CSRF 攻击过程中，用户往往在不知情的情况下构造了网络请求。CSRF攻击者往往是利用 Cookie 进行的请求伪造，比如一个 A 站点，它有一个评论功能：<body>  <form class="wrapper" actio

2020-07-26 11:00:13 778

原创 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

2020-07-25 20:35:01 1444

原创 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 的桥接器。下面是他的使用方式

2020-07-25 16:40:35 1465

原创 React setState

setState 是同步更新还是异步更新？多次调用 setState 函数，React 会不会进行合并操作？首先是第一个问题，答：setState 有时是同步更新的，而有却是异步更新。一般情况下，setState 基本是异步更新，例如：// handleClick 是一个事件函数// 当点击按钮时，count 就会 +1handleClick () { this.setState({ count: this.state.count + 1 }); //.

2020-07-25 16:30:35 222

原创 React 使用技巧：useReducer、immer库和 Formik工具库

1. 使用 useReducer hookuseReducer 是 useState 的替代品，它可以更好的管理组件的状态。useReudcer 的格式：import { useReducer } from "react";let [state, dispatch] = useReducer(reducer, initialArg, init);各个变量的含义：state 拿到状态数据；dispatch 派发 action 的函数；reducer 我们自己编写的 reducer 函数；

2020-07-25 16:24:59 1878

原创 React 代码复用：HOC、render props 和自定义 Hook

如何自己编写一个 react hook？react 允许我们自己编写 Hook。场景我们有几个组件，它们都要先进行 ajax 请求，获取到数据，然后把数据渲染到页面上。总体代码：class App extends Component{ state = { isLaoded: false, data: null } componentDidMount(){ // 发起网络请求 axios.get("/api/frui

2020-07-25 16:21:13 629

原创 react学习笔记

React 优化组件1. shouldComponentUpdate使用 shouldComponentUpdate 生命周期函数（简称 SCU）可以优化 React 组件。SCU 可以让我们自己控制组件是否进行渲染。它返回一个布尔值，true 代表重新渲染，false 代表不渲染。默认 SCU 返回 ture。即：父组件更新会连带着子组件也更新，有时候重新渲染子组件并没有必要。使用 SCU 可以优化组件渲染。shouldComponentUpdate(nextProps, nextState) {

2020-07-25 16:16:39 237

原创实现一个简单的 Redux 功能库

首先简单说一下 Redux 在 React 项目中的用法。Redux 和 React 之间并没有什么关系，脱离了 React，Redux 也可以与其它的 js 库（甚至是原生 js）搭配使用，Redux 只是一个状态管理库，但它与 React 搭配使用时却很好用，使开发 React 应用更加简介。这里实现一个简单的计数器功能，当鼠标点击按钮时数字就会加一。使用 React-Hooks 写一个 App 组件用来实现该功能：import React,{ useState } from "react";fu

2020-07-25 11:20:17 207

原创 react-router 使用教程

react-router 使用react-router 可以创建单页应用。可以将组件映射到路由上，将对应的组件渲染到想要渲染的位置（根据路径的变化重新渲染组件）。React 路由的两种方式：HashRouter 利用 hash 实现路由的切换（a 标签中的锚 #）；BrowserRouter 利用 H5 API 实现路由的切换；原始的浏览器 API 可以使用 window.location.hash 来获取哈希。使用 hashchange 来监听 url 哈希的变化：<a href=

2020-07-25 11:09:59 1379

原创 Vue生命周期与性能优化

生命周期beforeCreate 在 Vue 实例初始化之后，数据观测（data observer）之前被调用；created 实例已创建完成之后被调用。在这一步，实例已完成这几个配置：数据观测、属性和方法的运算、watch/event 事件回调。这里还没有 $el；beforeMount 在挂在开始之前被调用，相关的 render 函数首次被调用；mounted el 被创建的 vm.$el 替换，并挂载到实例上去之后调用这个钩子；brforeUpdate 数据更新时调用，发生在虚拟 DOM

2020-07-25 10:44:26 626

原创深入Vue内部原理（三）：Diff算法

虚拟 DOM 出现的背景：在 jQuery 时代，可以自行控制 DOM 操作的时机，手动调整，但是当项目很大时，操作 DOM 的复杂度就会上来，DOM 操作会很耗费性能，操作 DOM 就还需要考虑优化 DOM 操作，提升性能。《高性能JavaScript》这本书中说，把 DOM 和 JavaScript 各自想象成一个岛屿，它们之间用收费桥梁连接。操作 DOM 后需要经过跨流程通信和渲染线程触发的重新渲染（重绘或者重排），在开发中，应尽量减少操作 DOM。而虚拟 DOM 出现后，更新 DOM 交给框架处理。

2020-07-25 10:40:01 596

原创深入Vue内部原理（二）：异步渲染

如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，为了性能考虑，Vue 会在本轮数据更新后，再异步去更新视图。Vue 内部会汇总 data 的修改，然后一次性更新视图，这样做是为了减少 DOM 操作次数，提高性能。通过 Vue 中的 $nextTick 函数也可以看出是异步更新。在数据更新后，如果我们要拿到更新后的 DOM 状态，应该使用 $nextTick 函数，比如使用数据把 li 列表增加了，想要获取到增加后的 li 元素数目，可以这么做：methods: { add (ite

2020-07-25 10:35:38 1088

原创深入Vue内部原理（一）：响应式原理

Vue 主要包括三大部分：响应式、模板编译和虚拟 DOM。MVVM 模型MVVM 是 Model-View-ViewModel 的简写。MVVM 用数据驱动视图。传统组件（如 asp、jsp、php）只是静态渲染，更新时还要依赖于操作 DOM。传统组件遵循 MVC 模型，即模型（Model）-视图（View）-控制器（Controller）。MVC 模式下，后端使用数据（Model部分）填充 HTML 模板，前端（View部分）访问不同的路由时展示不同的视图，这些视图都是后端已经渲染好的 HTML 文档

2020-07-25 10:33:14 221

原创 Vue 学习笔记

1. 自定义事件Vue 实例内部已经实现发布订阅功能，直接用即可。当任意的两个组件想要通信时，可以利用自定义事件做到。加入 A 组件想给 B 组件传送数据。A 组件可以这么写：<template> <h2 @mouseenter="change('Hello!')">组件A</h2></template><script>import event from '../event';export default { name

2020-07-25 10:26:34 313

原创四个好用的DOM API

1. classList.contains这个方法可以判断某个元素节点是否有某个 class 类名，返回布尔值。比如：// div 元素是否有 wrapper 类名div.classList.contains("wrapper"); 封装：function hasClassName(el, className){ return el.classList.contains(className);}node.contains除了 classList.contains 方法之外，还有

2020-07-25 10:20:51 309

原创表单验证属性

几个常见的表单约束属性：pattern 给输入框指定正则表达式，用户输入的 value 必须匹配正则表达式才可验证通过；maxlength 用户可以输入文本输入框中的最大字符；minlength 用户可以输入文本输入框中的最小字符数；required 表示这个表单控件的值不能为空；min 对于 type=“number” 的表单而言，小于指定的 min 值则无效；max 对于 type=“number” 的表单而言，大于指定的 max 值则无效；然后是两个有用的伪类，伪类可用于设置表单元素

2020-07-25 10:15:56 1944

原创 File、Blob、ArrayBuffer 相互转换

假如后端传过来一个 a.jpg 图片文件，但这个文件的数据类型是 ArrayBuffer，想要用 URL.createObjectURL 展示图片，如何做到？createObjectURL 函数的参数是 File 对象、Blob 对象或者 MediaSource 对象。因此就要将 ArrayBuffer 转成这三者中的其一类型。ArrayBuffer、File 相互转换ArrayBuffer 转成 File 直接调用 new File 构造函数即可：function bufToFile(buf,

2020-07-25 10:06:06 15737 4

原创响应式设计技术概览

什么是响应式开发在移动互联网日益成熟的时候，桌面浏览器上开发的网页已经不能满足移动端设备上的展示和阅读。在响应式流行之前，通常的做法是对移动端单独开发一套特定的版本，但是，如果移动端设备越来越多的时候开发成本会比较大，因为需要做所有屏幕的适配。响应式开发的目的就是：一个网站能兼容多种终端。实现不同屏幕分辨率的终端上浏览网页时有不同的展示方式，通过响应式设计能使网站在不同终端上有更好的浏览阅读体验。响应式开发的技术媒体查询（@media）；bootstrap；CSS 单位（rem、vh、vw、e

2020-07-25 10:03:30 1862

原创发布订阅模式以及 EventEmitter 类的实现

在前端开发中，经常会使用到发布订阅模式，发布订阅模式也被称为观察者模式。最常见的发布订阅模式莫过于给 DOM 绑定事件，当点击一个按钮或者鼠标移动到某个元素上就会触发事件监听函数，然后弹出一个文本框或者改变元素样式。div.addEventListener("click", () => { alert("Hello!");});div 元素相当于一个订阅者，他会告诉浏览器（发布者），他要订阅一个 click 事件，这个事件会弹出一个提示框。当用户点击 div 元素时，浏览器就会“发布”

2020-05-23 12:08:41 1194

原创放大镜原理

在浏览各大网购网站时（淘宝、京东等），图片放大效果是常见的一个功能。实现思路鼠标移入小图片时，放大的图片区域会显示出来，同时小图片上有一个提示被放大的区域；当移出小图片时，放大的图片隐藏，提示区域也被隐藏；在移动过程中提示框也会跟着鼠标进行移动。相关技术鼠标事件；背景图片样式；元素的尺寸属性和数学计算；HTML 骨架<div id="main"> <div class="wrapper"> <!-- 小图和提示被放大的区域

2020-05-17 16:58:30 1054

原创 PWA 入门教程

PWA渐进式 web 应用 (Progressive web apps) 简称为 PWA。它可以给用户原生应用的体验。之所以称为“渐进式”，是因为给网站架设 PWA 并不影响原有的网页（或者说不需要代码层面的重构），这是一个独立的功能，你可以选择性添加该功能。PWA 的主要作用：可以让网站安装到设备的主屏幕上，就像用户在 APP 商店下载应用后这个应用的图标会放在桌面上。PWA 不需要用户通过应用商店进行下载，当你访问某个站点时，该站点如果支持 PWA，它会提示你可以将这个站点添加到桌面上。PWA

2020-05-09 09:45:30 2791 1

原创 meta 标签知多少

meta 标签提供该页面的一些信息，比如针对搜索引擎和更新频度的描述和关键词，它还可以控制页面缓冲、响应式窗口等，定义 meta 标签有利于网站 SEO（有利于搜索引擎访问），对于响应式窗口也起着作用，因此 meta 标签是 HTML 中很重要的一个标签。在生成默认的 HTML 文档结构时，通常会有两个 meta 标签：<head> <meta charset="UTF...

2020-05-06 09:45:26 772

原创用 canvas 操作图片像素

canvas 像素操作在 canvas 中可以使用 context.drawImage(image,dx,dy) 方法将图片绘制在 canvas 上。将图片绘制上去后，还可以使用 context.getImageData(sx, sy, sw, sh) 方法获取 canvas 区域隐含的像素数据，该方法返回一个 ImageData 对象，里面包含的是 canvas 像素信息。getImageD...

2020-05-02 20:55:45 2474

空空如也

空空如也