凉音、-CSDN博客

原创 js监听元素尺寸变化

上代码：/** * @description 监听元素尺寸变化 * @author: hruomei * @update * @date: 2021-07-22 11:29:40 */export default class ResizeObserver { constructor() {} static handleResize(e) { const trigger = e.target.__resizeTrigger__; if .

2021-07-22 13:04:49 2732 3

原创 Electron log4js 配置

桌面应用开发中需要借助日志帮助我们去分析一些异常情况，log4js是很好的日志库安装cnpm install log4js --save配置import log4js from 'log4js'import path from 'path'import { app} from 'electron'// 日志文件的输出路径，这里我们选择userData path下的logs// 在我的电脑上是C:\Users\xxx\AppData\Roaming\myAp..

2021-06-23 09:36:10 1788

原创按位与、按位或、异或

按位与运算符（&）参加运算的两个数，按二进制位进行“与”运算。运算规则：只有两个数的二进制同时为1，结果才为1，否则为0。（负数按补码形式参加按位与运算）即 0 & 0= 0 ，0 & 1= 0，1 & 0= 0， 1 & 1= 1。例：3 &5即 00000011 & 00000101 = 00000001 ，所以 3 & 5的值为1。按位或运算符（|）参加运算的两个数，按二进制位进行“或”运算。运算规则：参...

2021-05-09 12:28:54 385

原创 express 搭建前端服务器（放弃IIS和nginx吧！！麻烦）

首先装个expresscnpm i express -g这里直接用cnpm，快一些，如果没有，可以直接用npm新建一个文件夹，文件夹下新建index.js，和public文件夹用于存放资源代码，如图在index.js中粘贴以下代码const express = require('express');const path = require('path');const fs = require('fs');const app = express();...

2021-03-25 10:41:24 325

原创解决元素隐式具有 “any“ 类型，因为类型为 “string“ 的表达式不能用于索引类型 “Object“。在类型 “Object“ 上找不到具有类型为 “string“ 的参数的索引签名

错误如图错误代码如下解决此问题的函数export function isValidKey(key: string | number | symbol, object: object): key is keyof typeof object { return key in object;}运用

2021-03-12 09:13:39 10196

原创 node concurrently模块同时运行多个命令

同时运行多个命令。比如：npm run watch-js & npm run watch-less但比这种方式要更好一些。它也适用于Windows。你可以调整npm脚本达到跨平台运行的效果。安装这个工具是使用nodejs写的，但是可以用来运行任何命令你可以选择全局安装npm install -g concurrently也可以局部安装npm install concurrently --save-dev用法请记住用引号将每个单独的命令括起..

2021-03-09 17:24:18 1545

原创 node rimraf模块递归删除文件夹内容

使用webpack build文件项目时每次都会生成一个dist目录，有时需要把dist目录里的所以旧文件全部删掉，除了可以使用rm -rf /dist/命令删除外，还可以使用rimraf /dist/命令rimraf的作用：以包的形式包装rm -rf命令，用来删除文件和文件夹的，不管文件夹是否为空，都可删除局部安装：npm install rimraf --save-dev全局安装：npm install rimraf -g使用：rimraf <path> [<pa.

2021-03-09 17:06:57 590

原创 js 判断元素是否在指定元素的可视区内

函数export const isInContainer = (el, container) => { if (!el || !container) return false; const elRect = el.getBoundingClientRect(); let containerRect; if ([window, document, document.documentElement, null, undefined].includes(conta.

2021-02-02 11:51:20 543

原创 electron 从剪贴板读取图片并显示

以下示例代码基于vue首先，我们在data中定义几个变量data() { return { showclipboardImage: false, // 是否显示图片 pasteImageData: '', // 图片base64资源 imageQuality: 1 // 图片质量，用于压缩 }}然后，我们需要定义template<input ref="inp...

2021-01-18 10:39:37 1449 1

原创 ES6 Promise 编写一个等待函数

// 等待timeSpan毫秒后执行resolve方法，且不会阻塞js执行线程export async function wait(timeSpan = 600) { return new Promise(resolve => { setTimeout(resolve, timeSpan); })}此方法接收一个等待时长参数（默认600毫秒），返回一个Promise对象，等待时长到期后将执行Promise的resolve方法。此方法是一个很好的执行流程控制工具.

2021-01-14 11:39:43 927 1

原创 JS 判断某容器内的图片全部加载完毕

有时候在做聊天等功能的时候，需要监听所有图片加载完成的事件并将页面滚动至底部，以下是实现代码// 等待所有图片加载完成后滚动到底部getImgLoadEd(callback) { // 查询容器下所有图片 let images = document.getElementById('chatContentInner').querySelectorAll('.chat-img'); // Array.prototype.slice.call将images类数组转换成合法

2020-12-08 10:02:01 2648

原创利用 Vue.extend写一个全局toast提示

此人很懒，就不写文字描述了，这篇文章是基于饿了么的message提示框做的一个修改，请悉知效果：话不多说，上代码toast.vue<template> <transition name="ilink-toast-fade" @after-leave="handleA..

2020-12-04 09:30:40 194

原创 vue项目webpack构建优化-提取公共依赖库dll

背景目前前端发展已经到了一个工程化比较成熟的阶段，前端的职责也越来越重，大多数的开发者选择使用webpack构建项目。当我们的项目越来越大，依赖包越来越多，那么构建速度会非常慢。解决方案我们可以将固定的依赖包（如vue,element-ui,axios等）抽离出来，不在每次启动项目时重新构建。这一操作我们可以借鉴webpack新出的dll这个概念。Dll这个概念应该是借鉴了Windows系统的dll。一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的。..

2020-11-02 18:01:27 1380 1

原创 webpack构建内存溢出解决方案

关于vue项目构建Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory的解决方案原因node中通过javascript使用内存时只能使用部分内存（64位系统下约为1.4 GB，32位系统下约为0.7 GB），这就是我们编译项目时为什么会出现内存泄露了。解决方案查看安装的node的版本node -v8.0以上的版本通过设置NODE_OPTIONS环境.

2020-11-02 17:20:05 2319 1

原创 JS编写防抖和节流函数

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。一个例子通常，我们想要监听窗口的滚动事件，去做一些处理，我们可以直接为元素绑定onscroll事件，下面我们编写一个例子，来观察滚动事件触发的频率<!DOCTYPE html><html lang="en"> <head> <meta charset="utf.

2020-10-29 14:11:10 714

原创 vue项目 require.context的应用

通常，我们在引入并注册组件时，会选择这样做这种做法看似没有问题，组件少的时候其实并不会显得麻烦和累赘，但是当组件不断增多，这种写法就显得有点“傻”。我们可以用require.context解决这个问题require.context(directory, useSubdirectories = true, regExp = /^\.\/.*$/, mode = 'sync');directory: 要查找的文件路径useSubdirectories: 是否查找子目录regE.

2020-10-27 09:50:46 611

原创 ES7编写常用的decorator装饰器，如日志，自动发布事件，只读属性等

/** * @description 常用的修饰器 * @author: hruomei * @update * @date: 2020-10-19 10:12:17 */function isDescriptor(desc) { if (!desc || !desc.hasOwnProperty) { return false; } const keys = ['value', 'initializer', 'get', 'set']; .

2020-10-26 17:19:33 191

原创 vue 全屏组件

第一步，安装依赖安装screenfull.js依赖包npm install screenfull -S第二步，添加组件图标，样式等内容可以根据自己需求改<template> <span :class="isFullscreen ? 'ilink-icon-tuichuquanping' : 'ilink-icon-quanping'" @click="handleClick"> </span></template&gt.

2020-10-22 15:01:27 276

原创 vscode 使用decorator装饰器报错解决方案

搜索：problems.decorations.enabled搜索：javascript.implicitProjectConfig.experimentalDecorators以上，报错就消失了

2020-10-19 10:41:04 1914 1

原创利用节流+css动画优化窗口拖动onmousemove事件

本文需要实现点击拖动元素时，元素在指定元素窗口内拖动，不能超出窗口，并且做节流优化避免事件触发太多次导致的性能问题，css动画使元素移动更流畅，上代码我们的元素<div id="app"> <div id="moveBox" :style="{'left': position.left, 'top': position.top}" @mousedown="handleMouseDown"></div></div>样式#mov.

2020-10-13 21:01:29 815

原创 electron-vue项目自动更新解决方案（附代码）

electron-vue的创建过程这里不再赘述。相信已经搜索到这篇文章的你，已经完成了这个过程，下面我们进入正题前言如果您的electron版本还是2.xx版本，需要更新electron版本，更新方式戳这里https://blog.csdn.net/weixin_43272648/article/details/104339699第一步，安装electron-updater依赖npminstallelectron-updater--save第二步，配置packa...

2020-08-27 15:04:10 2275 5

原创 Javascript 与 Sass 共享变量解决方案

随着大型单页应用程序的兴起，Javascript和CSS越来越紧密地交织在一起。通常情况下，我们会在js与scss中分别维护两份变量。然而，在开发过程中有时会只更新一处而忘记维护另一份配置变量，并最终导致令人沮丧的bug。幸运的是，有了webpack和CSS模块，就可以解决这个问题。在这篇博客文章中，我们将探讨如何在脚本和样式之间共享变量。如果你使用的是vue-cli，可以省略以下两步第一步，安装依赖npm install sass-loader node-sass webpa..

2020-08-27 14:11:58 1397

原创 electron 创建单例应用

本文是为了解决多次双击应用图标时创建多个应用实例的问题达到的效果：每次双击应用或打开应用时，不会创建多个实例，而是激活已经打开的主窗体。实际上这种方案并不是只创建一个实例，而是在窗体打开时判断如果已经存在实例，则激活已经打开的示例并退出当前打开的示例，效果上就是只有一个实例上代码// 实现单例，在启动第二个实例后，激活主窗口，然后退出第二个实例const shouldQuit = app.makeSingleInstance(() => { if (mainWindow)

2020-08-25 16:09:59 1222

原创手写promise，实现一个简易的promise

文案没编辑好，先上代码吧const isFunction = variable => typeof variable === 'function'// 定义Promise的三种常量const PENDING = 'PENDING'const FULFILLED = 'FULFILLED'const REJECTED = 'REJECTED'class MyPromise { constructor(handle) { this._status = PENDING // 当前状

2020-08-24 14:42:57 287

原创 electron el-tooltip组件不显示的解决方案

在22行的whiteListedModules中添加“element-ui”，重新npm run dev编译，问题就可以得到解决原因这里的externals意思是：externals配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于那些存在于用户环境(consumer's environment)中的依赖。此功能通常对library 开发人员来说是最有用的，然而也会有各种各样的应用程序用到它。防止将某些import的包(pa...

2020-08-21 10:22:13 1774 2

原创 electron-vue 使用sass全局样式变量实现统一主题色

安装sass-resources-loader包npm install --save-dev sass-resources-loader修改webpack.renderer.config.js配置找到.electron-vue/webpack.renderer.config.js，在module.rules下的sass-loader后添加以下内容{ loader: 'sass-resources-loader', options: { resources: path.

2020-08-20 18:04:20 900

原创 vue项目包装成electron桌面应用（超简单！！只需四步）

准备工作1、安装nodejs2、配置淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org3、安装git以上都是前端工程师基本的操作了这里不赘述，不清楚的百度即可1、全局安装electron及electron-packager全局安装electron ; 全局安装electron-packager，用于打exe包cnpm install electron -gcnpm install .

2020-08-18 10:38:04 1280 1

原创 nprogress页面加载进度条

安装npm install --save nprogress使用NProgress.start(); // 开始NProgress.done(); // 结束在vue项目路由中使用import Vue from 'vue'import VueRouter from 'vue-router'// 引入nprogressimport NProgress from 'nprogress'import 'nprogress/nprogress.css' // 这个样..

2020-08-10 12:02:14 143

原创 uni-app 图片(文件) 本地存储解决方案

我们时长有这样的需求，文件或图片每一次都从远端下载，导致离线状态页面空白，或者耗费带宽和时间太多导致的用户体验差，因此，我们需要一种方案去解决这样的问题已经下载的文件或图片等资源，直接从从设备本地获取而不是从远端下载解决思路1、封装一个获取文件路径的函数，假如文件已经存在本地，则取本地路径，否则下载并返回下载路径2、函数需要两个参数，一个是文件的下载路径，一个是与文件相关联的id，用来做文件与下载路径之间的关联3、h5不支持文件存储，所以我们需要做条件编译4、做一些异常的..

2020-07-24 16:14:13 4054

原创 uni-app nvue项目使用iconfont字体图标

首先，选择自己想要的图标，添加至自己的项目，具体教程就不出了，相信能搜这个解决方案的人都会，iconfont官网戳这里请一定要仔细看备注内容~~远程ttf文件方式复制如下地址，补上前面补上https: 完整的地址为：https://at.alicdn.com/t/font_1911079_a4go6gdw4y6.ttfnvue页面代码，看备注哦~<template> <view class="main-wrapper"> <!--...

2020-07-23 19:33:28 2966 3

原创 nodejs base64 编码/解码图片或文本

文本操作很简单const encodeString = Buffer.from('Hello World').toString('base64');const deCodeString = Buffer.from(encodeString, 'base64').toString('utf-8');console.log('base64编码字符串', encodeString); // SGVsbG8gV29ybGQ=console.log('base64解码字符串', deCodeString

2020-07-09 14:40:57 1072

原创 uni-app nvue 阻止事件冒泡 .stop 修饰符不生效的解决方案

如下图，在事件绑定是使用了.stop事件修饰符，在H5，小程序，普通app项目中起作用，但在nvue项目中无效解决方案：在事件中添加条件编译即可// #ifdef APP-NVUEe.stopPropagation()// #endif

2020-07-08 14:41:12 6647 3

原创 express项目 apidoc 自动生成文档简洁教程

本文是关于apidoc的配置教程，具体的参数请参考官方网站全局安装apidocnpm i apidoc -g配置api-doc方式1：根目录添加apidoc.json（推荐），apidoc.json内容如下，具体属性请参考{ "name": "user-service", "version": "1.0.0", "description": "用户服务API文档", "title": "user-service API Doc", ..

2020-07-01 14:55:14 1174 1

原创 vue-cli 3 全局引入scss变量

1、安装sass-resources-loadernpm install sass-resources-loader -S2、在根路径下（package.json同级）新建vue.config.js（如果已经存在，则不用新建）vue.config.jsmodule.exports = { chainWebpack: config => { const oneOfsMap = config.module.rule('scss').oneOfs.store oneO

2020-06-01 15:05:37 968

原创 Node自动重启工具 nodemon（一看就会）

我们在做node开发时，每一次修改文件，都需要ctrl+c退出，重新执行node xxx文件。现在，我们可以使用nodemon这个工具，它是一款非常实用的工具，用来监控你 node.js 源代码的任何变化和自动重启你的服务器。安装npm install -g nodemonnodemon将全局安装到您的系统路径。使用nodemon app.js会出现以下界面，表示启动成功我们也可以在package.json中配置脚本，就可以通过“npm run xxx”运行，比如

2020-05-29 17:09:40 524

原创 MongoDB 数据库创建删除、表（集合）创建删除、数据增删改查常用语句

MongoDb的安装与使用教程请参考我上一篇文章：NoSql、MongoDb 数据库介绍及MongoDb安装、使用1、开启mongodb服务打开cmd，输入net start MongoDb，启动成功后，输入mongo连接服务注意：如果出现“发生系统错误5”“拒绝访问”字样，极有可能是没有以管理员身份运行cmd,此时关掉窗口，重新以管理员身份运行即可输入show dbs即可查看所有数据库2、创建数据库使用数据库、创建数据库use student如...

2020-05-27 15:03:30 2172

原创 NoSql、MongoDb 数据库介绍及MongoDb安装、使用

1、数据库和文件的主要区别数据库有数据库表、行和列的概念，让我们存储操作数据更方便数据库提供了非常方便的接口，可以让 nodejs、php java .net 很方便的实现增加修改删除功能2、NoSql2.1 NoSQL 介绍由于互联网的迅速发展，云计算与 Web2.0。这样大量的交互给数据库提出了更高的性能要求，传统的数据库（本文泛指 SQL 数据库），即关系数据库虽然具备良好的事物管理，但在处理大量数据的应用时很难在性能上满足设计要求。NoSQL 就是主要为了解决当下大量高并.

2020-05-27 12:16:33 473

原创数据访问对象模式-前端封装本地数据存储类

数据访问对象模式（Data access object-DAO）:抽象和封装对数据源的访问和存储，DAO通过对数据源链接的管理方便对数据的访问和存储。假设我们有一个功能需要本地存取数据实现而非调用后台接口，这个功能并不难，但存在以下问题数据很可能会覆盖他人的数据或被其他人员覆盖添加一条数据需要做各个浏览器的兼容无法知道数据存取的状态成功、失败、过期等更多一系列的问题那么，有什么办法可以让每个人方便的管理自己的本地存储库呢？...

2020-05-22 14:51:26 357

原创浅析javascript代理模式-事件绑定与内存泄漏

代理模式（Entrust）：多个对象接收并处理同一请求，他们将请求委托给另一个对象统一处理请求。在开发中我们可以利用委托模式做事件绑定以及防止内存泄露举个栗子，有一个日期列表，当用户点击日期格子的时候将格子的背景色变成灰色首先我们先看下面这一种方式var ul = document.getElementById('container'), li = document.getElementsByName('li'), i = li.length - 1; for(; i &gt.

2020-05-21 21:24:41 361

原创浅析javascript观察者模式（发布-订阅模式）与应用

观察者模式（Observer）:又称作发布-订阅模式或消息机制，定义了一种依赖关系，解决了主体对象与观察者之间功能的耦合。发布订阅模式可以解决主体对象与观察者之间功能的耦合。举个栗子，一架飞机要从沈阳飞到香港，当经过北京中转站时，需要向卫星发送位置信息，卫星接收到飞机的位置信息后将消息保存在消息容器中，向订阅了飞机信息的北京站和香港站发送信息，两个站点接收到飞机的消息并做相应的处理以避免飞机事故的发生当飞机已经离开北京中转站，北京中转站就不需要再接收飞机的位置信息，因此北京中转站可以取消订阅

2020-05-21 17:56:18 424

空空如也

空空如也