innagine-CSDN博客

原创基于Electron和Vue3桌面版图片压缩应用(内附源码)

基于Electron和Vue3桌面版图片压缩应用(内附源码)一、效果展示1.图片压缩2.转换成PNG3.转换成JPG二、Electronelectron可以使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序，我们熟悉的Visual Studio Code也是通常electron构建的electron 核心分为主进程和渲染进程：渲染进程负责页面展示主进程负责与系统交互对于图片压缩功能的实现，用户在页面批量选择图片，发送图片路径给主进程，主进程压缩图片并

2021-07-16 00:18:19 975 9

原创 typescript基础知识：装饰器使用

一、装饰器1.概念装饰器让程序员可以编写元信息以内省代码。装饰器的最佳使用场景是横切关注点——面向切面编程。面向切面编程（AOP）是一种编程范式，它允许我们分离横切关注点，藉此达到增加模块化程度的目标。它可以在不修改代码自身的前提下，给已有代码增加额外的行为（通知）。装饰器是一种特殊的声明，可附加在类、方法、访问器、属性、参数声明上。通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。2.相关表现装饰器使用 @expression 的形式，其中 ex.

2021-07-14 01:28:36 726 2

原创 TypeScript基础知识：类（Class）

1 类的属性与方法在面向对象语言中，类是一种面向对象计算机编程语言的构造，是创建对象的蓝图，描述了所创建的对象共同的属性和方法。在 TypeScript 中，我们可以通过 Class 关键字来定义一个类：class Greeter { // 静态属性 static cname: string = "Greeter"; // 成员属性 greeting: string; // 构造函数 - 执行初始化操作 constructor(message: string) { .

2021-07-13 01:23:39 674 4

原创 typescript基础知识：联合类型和类型守卫

在文章的开头，笔者再次提醒小伙伴们，因为typescript是JavaScript的超集，所以说在掌握一定基础的JavaScript知识，学习typescript才会事半功倍噢。本次我们将会讲述联合类型和类型守卫，在上一篇的推文中，有涉及到相关的概念，但是我们并没有深入。在本篇推文中，我们将会将知识点掰碎了，然后慢慢分析品尝。一、守卫类型类型保护是可执行运行时检查的一种表达式，用于确保该类型在一定的范围内。换句话说，类型保护可以保证一个字符串是一个字符串，尽管它的值也可以是一个数值。类型保护与特性.

2021-07-12 23:45:40 600 2

原创 typescript基础知识：接口与类型别名

一、接口（interface）在以往的面向对象语言中，例如Java，接口是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类去实现。TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。1.对象的形状interface Person { name: string; age: number;}let alan: Person = { name: "alan", age: 18,};.

2021-07-12 23:41:26 1200 6

原创 Typescript基础知识：断言使用

1. 类型断言有时候你会遇到这样的情况，你会比 TypeScript 更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。类型断言有两种形式：“尖括号” 语法let someValue: any = "前端收割机";let strLength: number = (<string>someValue).length;as 语法let someValue: any = "前端收割机";let strLength: number.

2021-07-12 23:37:24 2529 4

原创 typescript基础知识：泛型使用

要创建一致的定义良好的 API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。设计泛型的关键目的是在成员之间提供有意义的约束，这些成员可以是：类的实例成员、类的方法、函数参数和函数返回值。泛型（Generics）是允许同一个函数接受不同类型参数的一种模板。相比于使用 any 类型，使.

2021-07-12 23:31:23 535 2

原创 TypeScript基础知识：函数使用

本次推文介绍的内容是typescript函数，在此并以JavaScript函数作为对比。1. TypeScript 函数与 JavaScript 函数的区别TypeScriptJavaScript含有类型无类型箭头函数箭头函数（ES2015）函数类型无函数类型必填和可选参数所有参数都是可选的默认参数默认参数剩余参数剩余参数函数重载无函数重载2. 函数类型// 方式一let IdGenerator: (chars: str.

2021-07-12 23:26:33 947 4

原创 typescript知识基础：基础类型

本期系列推文将会推进TypeScript的学习，其实我们不难看出TypeScript是JavaScript的超集，也就是说：typescript是对于JavaScript的扩展，为JavaScript添加了类型系统。优势：类型化思维方式，使得开发更加严谨，提前发现错误，减少改Bug时间类型系统提高了代码的可读性，并使维护和重构代码更加容易补充了接口（interface）、枚举（Enum）、元组（Tuple）等开发大型应用时JavaScript缺失的功能一、运行TypeScript安装(.

2021-07-12 23:18:16 403 4

原创算法基础：排序算法（2）

一、回顾首先，让我们再回顾一遍，各种排序算法的特性上一期，我们的推文已经讲述了冒泡排序、希尔排序、归并排序。本篇文章我们将继续讲述其他排序。二、排序算法1.插入排序插入排序（Insertion Sort）的过程就像我们排序扑克牌一样（从左到右，从小到大）。开始时我们左手为空，然后我们从桌子上拿起一张牌并将它插入到左手中正确的位置，为了找到这个位置，我们将这张牌与左手中从右向左的每张牌进行比较，直到找到比它小或相等的牌的后面。与排序扑克牌类似插入排序的原理是：将数组中的数据分为两个区间，已排序.

2021-04-16 00:21:11 129

原创 JavaScript基础：手写实现JSON.stringify和JSON.parse

一、概念1.JSON.stringifyJSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。JSON.stringify(value[, replacer [, space]])Boolean | Number| String 类型会自动转换成对应的原始值。undefined、任意函数以及symbol，会被忽.

2021-04-12 00:44:40 1573 2

原创 JavaScript基础：手写实现typeof与instanceof

一、概念1. typeof是一个运算符，有2种使用方式：typeof(表达式)和typeof 变量名，第一种是对表达式做运算，第二种是对变量做运算。typeof 操作符返回一个字符串，表示未经计算的操作数的类型。可能的返回值：“undefined”“object”“boolean”“number”“bigint”“string”“symbol”“function”注意：typeof null === 'object';查阅了相关的资料,其实这个是一个历史遗留的bug，在 j.

2021-04-08 23:34:18 1013

原创 JavaScript基础：手写实现JSONP

一、原理jsonp的核心原理是利用script标签没有同源限制的方式，可以发送跨域的get请求（只能发送get请求）。script标签中的src属性将请求参数和当前请求的回调函数名拼接在链接上。最终由服务端接收到请求之后拼接成前端可执行的字符串的形式返回。这个结果字符串最终会在前端的script标签中解析并执行。利用<script>标签没有跨域限制的漏洞,网页可以得到从其他来源动态产生的JSON数据。JSONP请求一定需要对方的服务器做支持才可以。JSONP和AJAX对比： JSONP.

2021-04-07 00:41:50 5248 15

原创 JavaScript基础：手写EventEmitter

一、概念1.EventEmitterEventEmitter （事件派发器）是 Node.js 的核心模块 events 中的类，用于对 Node.js 中的事件进行统一管理，用 events 特定的 API 对事件进行添加、触发和移除等等，EventEmitter 的核心就是事件触发与事件监听器功能的封装。简而言之，EventEmitter就是一个典型的发布订阅模式，实现了事件调度中心。javascript中常被提及的「发布订阅模式」，在面试的过程中，面试官往往会让你通过手写EventEmitt.

2021-04-02 01:26:50 1232 1

原创 JavaScript基础：手写数组去重函数

一、概念数组去重：去除数组中相同的元素，确保数组中的每一个元素都是独一无二的。二、实现首先，我们首先约定将数组去重函数命名为unique，然后将方法添加到Array.prototype上。这样我们的每一个数组对象都可以调用到此方法了。1.双重循环版本一：基本思路：每存储一个新元素，遍历新数组是否含有该元素。Array.prototype.unique = function () { const newArray = []; // 去重后新数组存放处 let isRepeat; // .

2021-04-01 01:24:43 2309 2

原创 JavaScript基础：手写浅拷贝与深拷贝

一、概念1.浅拷贝（浅克隆）创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址中的值，就会影响到另一个对象。2.深拷贝（深克隆）将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。二、实现1.浅拷贝创建一个新的对象，遍历需要克隆的对象，将需要克隆对象的属性依次添加到新对象上，然后返回。function clo.

2021-03-30 12:40:31 1466 5

原创 JavaScript基础：手写实现函数组合（compose）

一、概念compose 是函数式编程中很重要的函数之一，因为其巧妙的设计而被广泛使用。compose 函数的作用就是组合函数的，将函数串联起来执行，将多个函数组合起来，一个函数的输出结果是另一个函数的输入参数，一旦第一个函数开始执行，就会像多米诺骨牌一样推导执行了。组合的概念是非常直观的，并不是函数式编程独有的，在我们生活中或者前端开发中处处可见。比如我们现在流行的 SPA (单页面应用)，都会有组件的概念，为什么要有组件的概念呢，因为它的目的就是想让你把一些通用的功能或者元素组合抽象成可重用的组.

2021-03-29 00:26:40 2094

原创 JavaScript基础：手写数组扁平化flat方法

本次推文将会带领大家通过手写来达到模拟数组拍平（扁平化） flat 方法实现。在一些大厂的面试中，flat方法的实现往往是一道比较基础的面试题，通常出现在笔试或者第一轮面试当中，主要考察基本的手写代码的能力。首先我们先来回顾一下flat方法概念。一、概念1.数组扁平化方法 Array.prototype.flat() 也叫数组拍平、数组拉平、数组降维。const arr = [1,[2,3],[4,[5,[6]],7]];// 不传参数时，默认“拉平”一层arr.flat() // [1,.

2021-03-26 01:00:50 3145 3

原创 JavaScript基础：手写Promise(2)

书接上回，本次推文将会继续讲解Promise的开发，以提高异步编程的能力。一、回顾上次推文代码回顾：class MyPromise{ static PENDING = 'pending'; static FULFILLED = 'fulfilled'; static REJECTED = 'rejected'; constructor(executor){ this.status = MyPromise.PENDING; this.value = nul.

2021-03-24 00:28:44 231 5

原创 JavaScript基础：手写Promise（1）

一、构建本次推文将会手写开发Promise实现，提升异步编程的能力。首先声明定义类并声明Promise状态与值，有以下几个细节需要注意。executor为执行者当执行者出现异常时触发拒绝状态使用静态属性保存状态值状态只能改变一次，所以在resolve与reject添加条件判断因为 resolve或rejected方法在executor中调用，作用域也是executor作用域，这会造成this指向window，现在我们使用的是class定义，this为undefinedclass MyP.

2021-03-22 22:39:18 188 2

原创 JavaScript基础：元素在可视区域中

偏移量偏移量概念公式offsetHeight元素在垂直方向上占用的空间大小，以像素为单位。包括元素的高度、(可见的) 水平滚动条的高度、上下边框高度offsetHeght = content + padding + border + scrollXoffsetWidth元素在水平方向上占用的空间大小，以像素为单位。包括元素的宽度、(可见的)垂直滚动条的宽度、左右边框宽度offsetWidth = content + padding + border + scrollY.

2021-03-19 11:00:01 2240 3

原创 JavaScript基础：Javascript操作DOM

前端开发始终绕不过的就是操作DOM，在Vue，Angular，React等框架出现后，我们通过操作数据来控制DOM（绝大多数时候），越来越少的去直接操作DOM。但是并不是所有时候都一定要引入这些库，对于基础的JS操作DOM的方法，还是需要掌握的。一、查询1.按照ID查询document.getElementById(id) // 兼容最好这个接口很简单，根据元素id返回元素，返回值是Element类型，如果不存在该元素，则返回null。语法：const mainDom = document.

2021-03-19 10:29:40 847

原创数据库基础：IndexedDB

一、概述本文通过对IndexedDB的使用方法和使用场景进行相关介绍，对常见的问题进行解答。二、原因：开发者需要在本地进行永久存储当我们进行一些较大的SPA页面开发时，我们会需要进行一些数据的本地存储。当数据量不大时，我们可以通过SessionStorage或者LocalStorage来进行存储，但是当数据量较大，或符合一定的规范时，我们可以使用数据库来进行数据的存储。在浏览器提供的数据库中，共有web sql和IndexedDB两种。相较于HTML5已经废弃的web sql来说，更推荐大家使用.

2021-03-19 10:22:29 1443 3

原创 CSS基础： CSS 书写规范

CSS 书写顺序位置属性（position，top，right，z-index，display，float等）大小（width，height，padding，margin）文字系列（font，line-height，letter-spacing，color-text-align等）背景（background，border等）文本属性（text-align，vertical-align，text-wrap 等）其他（animation，transition等）目的：减少浏览器 refl.

2021-03-15 00:00:01 612 2

原创跨域处理：跨域资源共享（CORS）

CORS原理解析CORS需要浏览器和后端同时支持。IE8和 IE9需要通过 XDomainRequest来实现。浏览器会自动进行 CORS通信,实现CORS通信的关键是后端。只要后端实现了CORS,实现了跨域。服务端设置 Access-Control-Allow-Origin 就可以开启CORS。该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源。通过这种方式解决跨域问题的话,会在发送请求时出现两种情况,分别为简单请求和复杂请求。1.简单请求允许的方法之一：G.

2021-03-10 11:45:24 330 1

原创前端优化：图片优化

基本概念图片的类型平时比较常见的图片类型有：jpg 、jpeg、png、svg、bmp、gif、webpjpg优点： jpg 是一种有损的基于直接色的图片格式。由于采用直接色，jpg 可使用的颜色有 1600w 之多，而人眼识别的颜色数量大约只有 1w 多种，因此 jpg 非常适合色彩丰富图片、渐变色。jpg 有损压缩移除肉眼无法识别的图片细节后，可以将图片的尺寸大幅度地减小缺点： jpg 不适合 icon、logo ，因为相比 gif / png-8 ，它在文件大小上丝毫没有优势应用场景： .

2021-03-08 22:43:33 1453

原创 JavaScript基础：正则表达式的简单规则

一、正则表达式是什么正则表达式是用于匹配字符串中字符组合的模式，即实现对字符串中的信息进行查找、替换和提取操作。单个字符最简单的正则表达式可以由简单的数字和字母组成，没有特殊的语义，纯粹就是一一对应的关系。如想在’apple’这个单词里找到‘a’这个字符，就直接用/a/这个正则就可以了。但是如果想要匹配特殊字符的话，就得请出我们第一个元字符**\**，它是转义字符字符，顾名思义，就是让其后续的字符失去其本来的含义。举个例子：我想匹配*这个符号，由于*这个符号本身是个特殊字符，所以我要利用转.

2021-03-05 12:28:04 759

原创前端优化：前端性能优化方法

一、结构优化1.gzip压缩gzip 压缩效率非常高，通常可以达到 70% 的压缩率。//npm i -D compression-webpack-pluginconfigureWebpack: config => { const CompressionPlugin = require('compression-webpack-plugin') config.plugins.push(new CompressionPlugin())}2.预渲染服务端渲染（SSR）简.

2021-03-05 11:04:46 3709 3

原创 JavaScript基础：this 指向问题

一、常见错误理解this是指向自身吗？特别是在函数中使用 this 的时候，this 是指的所在的这个函数对象吗？看下面示例：function test() { console.log(this.name)}test.name='aaaa'test() // ''输出的是空字符串，因为此时 this 指向的是 window ，所以 this 并不是指向自身this指向函数的作用域吗？ function test() { var name = 'bbbbb' conso.

2021-03-05 10:56:32 968 4

原创 Javascript基础：隐式类型转换

前言众所周知 javascript 是一种弱类型语言。强类型和弱类型主要是在变量类型处理的角度进行分类的。强类型是一旦指定数据类型，如果不经过强制转换，那么将永远是指定的这个类型。js 中无法声明数据类型，变量类型是根据实际值决定的，由编译器自动调用转换函数进行转换，这种方式称之为隐式转换，今天我们就来聊聊数据类型是如何隐式转换的吧！小试牛刀可能很多小伙伴都知道 JS隐式转换，但你是否真的懂它了呢？下面来试试吧！！定义一个变量 a ，使得下面的表达式结果为 true a == 1 &am.

2021-02-22 23:08:12 2460 4

原创 Javascript基础：阐述一下GitFlow（git工作流）

1. git工作流GitFlow是由Vincent Driessen 提出的一个 git 操作流程标准。包含如下几个关键分支：名称说明master主分支develop主开发分支，包含确定即将开发的代码feature新功能分支，一般一个新功能对应一个分支，对于功能的拆分需要比较合理，以避免后面一些不必要的代码冲突release发布分支，发布时候用的分支，一般测试时候发现的BUG在这个分支进行修复hotfixhotfix分支，紧急修复BUG的时候使用的

2021-02-22 13:19:35 272

原创 Javascript基础：代理器（proxy）

一、proxy的概念Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。var proxy = new Proxy(target, handler); //target为目标对象，handler参数也是一个对象，用来定制拦截行为。定义一个拦截读取.

2021-02-02 09:26:33 2342 2

原创 JavaScript基础：Iterator概念及用法

一、由来及意义Javascript中表示“集合”的数据结构，主要是 Array、Object、Map、Set 这四种数据集合，除此之外，它们相互之间还可以组合使用，例如Array的成员是Map，Map的成员是Object等。因此Javascript的需要一种统一的接口机制，来处理所有不同的数据结构。遍历器（Iterator）就是这样一种机制。它是一种接口，可以为各种不同的数据结构提供一种访问机制（访问接口），任何数据结构部署Iterator接口，就可以完成该数据解构成员的遍历操作（Iterator 接.

2021-01-25 16:13:28 3883 11

空空如也

空空如也