- 博客(34)
- 收藏
- 关注
RSS订阅原创 前端图片优化相关知识点
目录不同格式图片的应用场景JPEGPNGGIFWebp图片优化，提高加载速度压缩图片的工具图片尺寸随网络环境变化响应式图片逐步加载图像其他优化点在服务器端进行自动优化图片服务器自动优化解密不同格式图片的应用场景JPEG栅格图形，常用扩展名：jpg、jpeg、jpe。不适合线条图形和文字、图标。适合颜色丰富的照片、色彩图大焦点图、banner图，结构不规则的图形。PNG栅格图形，文件比jpeg或gif大，但是它非常好的保留了图像质量。支持Alpha通道的半透明和透明特性。最高支持24位彩色
2022-01-06 11:03:49
529
原创 git实用指令笔记
拉取代码到本地git clone https://github.com/….git 在本地目录中创建新的 Git 仓库1.进入到改目录下打开命令行编辑工具2.输入以下指令git init查看文件在工作区,暂存区的状态git status把目录内有变化的文件提交到暂存区把目录所有的变化提交到暂存区，包括新文件git add .把目录所有的变化提交到暂存区，不包括新文件git add -u你也可以只添加部分文件内容到暂存区git add [file1] [file2]
2021-06-30 00:07:43
270
原创 记录我的vscode常用插件（前端）
翻译(英汉词典)如标题意思，选中需要翻译的内容，翻译结果会在右下角展示Auto Close Tag自动添加闭合html标签Auto Rename Tag自动重命名对应html标签Beautify格式化代码Bracket Pair Colorizer 2使用不同颜色显示括号Chinese (Simplified) Language Pack for Visual Studio Code简体中文CodeMetric圈复杂度分析工具CSS Peek跳转class定义ESLint
2021-05-19 11:06:14
446
原创 谷歌身份验证器插件以及基于utools的otp快捷使用
谷歌身份验证器下载谷歌身份验证器的插件下载地址链接：https://pan.baidu.com/s/1zLpl81xm-MPfUYCBq6NhiA码：2quy加载插件打开谷歌浏览器打开以下地址chrome://extensions/把上面下载好的插件拖入到浏览器页面即可如果提示程序包无效则：1.先把crx文件解压出来2.打开谷歌浏览器上面输入的地址右上角点击开发者模式3.然后点击弹出栏的加载已解压的扩展程序选择刚刚解压出来的文件夹即可使用1.点击浏览器的谷歌身份验证器插件点击笔
2021-03-05 22:48:58
4085
2
原创 让vscode正确识别webpack alias路径的方法
一般的相对路径引入依赖文件, vscode能够正确识别, 做出智能提示. 但是有时候项目目录层级太深, 写相对路径很长, 非常容易出错, 所以一般我们会在webpack中配置alias, 使用短名来减少路径层级.如: import { getUsers } from '@/services/users'但是vscode并不认识@, 所以就不会提示后面的文件提示解决办法就是 在项目根目录下添加一个jsconfig.json的文件, 配置如下{ "compilerOptions": { "b
2021-03-05 22:23:21
1344
原创 git中LF和CRLF的转换
1、换行符在不同的操作系统中的表示首先，要理解的一点是，对于不同的操作系统，对于换行符的表示是不一样的，也就是说在编辑一个文件时，当我们敲下一个回车键的时候，对于不同的操作系统保存到文件中的换行符是不一样的。如下表所示CR: 表示回车 \rLF: 表示换行 \nCRLF: 表示回车换行 \r\n敲入回车键，在不同操作系统保存到文件中的值：windows: 使用的是 CRLF ===> 即 \r\n , 文件中保存的是 \r\nLinux\Unix: 使用的是 LF ===> 即
2021-03-04 23:15:49
8103
原创 web端用svg+css+js实现一个渐变色进度圆环
效果图单向进度图双向进度图实现步骤先画一圆环<svg xmlns="http://www.w3.org/2000/svg" style="width:100px; height:200px" viewBox="0 0 200 200"> <circle cx="50%" cy="50%" r="50" stroke-width="10" stroke="#5e5e5e" fill="none"></circle> </svg>注：如
2020-12-01 10:58:31
2423
原创 nuxt模板的创建及使用（koa、sass）
概念Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架。Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。特性基于 Vue.js自动代码分层服务端渲染强大的路由功能，支持异步数据ES2015+ 语法支持打包和压缩 JS 和 CSSHTML 头部标签管理本地开发支持热加载集成 ESLint支持各种样式预处理器： SASS、LESS、 Stylus 等等支持 HTTP/2 推送流程图模板安装
2020-07-23 14:49:21
1585
2
原创 基于koa的mongoose（mongodb、robo 3T、mongoose）、redis使用
目录mongdb概念安装运行RoBo 3T（可视化数据库管理工具）安装连接数据库mongoose概念理解安装连接操作（增删改查）redis概念安装启动服务（运行）连接redis（koa-redis、koa-generic-session）操作相关连接汇总mongdb概念MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象。字段值可以包含其他文档，数组及文档数组。安装mongdb点击上面链接打开进入下载对应系统的安装包
2020-07-17 18:12:50
444
原创 Proxy和Reflect
Proxy作用：用于修改某些操作的默认行为，等同于在语言层面做出修改理解：在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。var proxy = new Proxy(target, handler);Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行
2020-07-14 11:47:20
153
原创 Set、WeakSet 和 Map、WeakMap 数据结构总结
Set类似于数组，但是成员的值都是唯一的，没有重复的值。用途：可去除数组重复成员或去除字符串重复字符、实现并集（Union）、交集（Intersect）和差集（Difference）。注意：向 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（===），主要的区别是向 Set 加入值时认为NaN等于自身，而精确相等运算符认为NaN不等于自身。若以set.ad
2020-07-13 17:08:27
186
原创 prototype原型和隐式原型__proto__
目录prototype原型隐式原型__proto__prototype原型在讲解prototype原型前，先说说函数，函数也是一种对象。他也是属性的集合，你也可以对函数进行自定义属性。函数默认就有一个属性——prototype。对，每个函数都有一个属性叫做prototype。它的含义是函数的原型对象，也就是用这个构造函数创建的实例的原型对象prototype的属性值是一个对象（属性的集合，再次强调！），默认的只有一个叫做constructor的属性，指向这个函数本身。constructor属性是对
2020-07-09 14:51:30
290
原创 typeof 和 instanceof 区别
用法typeof运算符console.log(typeof x); // undefinedconsole.log(typeof 4); // numberconsole.log(typeof 'abc'); // stringconsole.log(typeof true); // booleanconsole.log(typeof function () {}); //functionconsole.log(typeof [1, 'a', true]); //objec
2020-07-06 15:08:02
440
原创 前端使用google-protobuf传输数据
google-protobuf理解安装与使用理解protoBuf（下面简称PB）全称Protocol Buffers，由Google公司开发出来且其内部广泛使用，对比其它的编解码框架，有如下几个优点：跨语言支持，如Java、C++、Python、js等编码后消息更小，因此，更有利于网络传输和本地存储，当然，性能也很强大不同版本协议的数据结构前向兼容以我个人站在前端的角度去看，pb虽...
2020-04-10 23:45:21
1176
1
原创 前端对加密算法（不可逆加密、对称加密、非对称加密）的应用及理解（MD5、sha-1、crypto-js、AES、RSA、curve25519-js）
加密算法不可逆加密理解MD5安装及使用SHA-1安装及使用MD5与SHA-1的区别对称加密理解crypto-js安装及使用WordArray (An array of 32-bit words.)1.1 ： 初始化1.2 ： WordArray 对象 —>16进制字符串1.3 ： 16进制字符串 —>WordArray对象1.4 ： WordArray对象—>utf8字符串1.5...
2020-04-06 22:19:34
2538
1
原创 基于indexDB的Dexie数据库
什么是Dexie？A Minimalistic Wrapper for IndexedDB这是官网的一句话翻译过来就是IndexedDB 的一个最小化包装Dexie使用本机IndexedDB API解决了三个主要问题：模棱两可的错误处理不好查询代码复杂性有使用过indexDB的同学就知道其查询语句的麻烦特别是多条件查询的时候这是Dexie的官网https://dexie.org...
2020-03-25 23:35:59
16077
1
原创 创建一个electron-vue项目
框架选择这里先附上 electron的文档，里面有很多api开发的时候都会用到，所以最好先预览一遍，查看官网大致有哪一些功能，有助于你更快的去解决问题。当初我在网上选择框架的时候找到了 vue-cli-plugin-electron-builder 和 simulatedgreg/electron-vue 这两款框架。我后来选择了vue-cli-plugin-electron-builder...
2020-02-01 21:08:19
1466
转载 javascript 复合赋值运算符和按位操作符
名字简写的操作符含义赋值(Assignment)x = yx = y加法赋值(Addition assignment)x += yx = x + y减法赋值(Subtraction assignment)x -= yx = x - y乘法赋值(Multiplication assignment)x *= yx = x * y除法赋值(D...
2019-07-11 17:07:03
860
原创 javascript中call()、apply()、bind()的用法
引例//例1var name = '张三', age = 18;var obj = { name:'李四', objAge: this.age, //注意这行代码 F:function(){ console.log( this.name , this.age , this.objAge); }} obj.objAge //18 obj.F(); // 李四 undefi...
2019-07-10 17:23:05
276
原创 JavaScript中String对象的一些常用API详解
目录String 对象方法charAt()charCodeAt()fromCharCode()concat()indexOf()lastIndexOf()includes()match()repeat()replace()search()split()startsWith()slice()substr()substring()slice,substr和substring的区别trim()toLow...
2019-07-02 16:53:30
693
原创 JavaScript中Math对象的一些常用API详解
目录对象属性对象方法abs(x)acos(x)asin(x)atan(x)atan2(y,x)cos(x)sin(x)tan(x)exp(x)pow(x,y)sqrt(x)log(x)ceil(x)floor(x)round(x)random()max(x,y,z,...,n)min(x,y,z,...,n)对象属性属性描述E返回算术常量 e，即自然对数的底数（约等于2....
2019-07-02 10:34:44
775
原创 JavaScript中Date对象的一些常用API详解
目录Date 对象getFullYear()getMonth()getDate()getDay()getHours()getMinutes()getSeconds()getMilliseconds()根据世界时间设置时间getTime()parse()toDateString()toTimeString()toISOString()toJSON()根据本地时间格式toLocaleDateStrin...
2019-07-01 15:19:33
717
转载 关于.eslintrc.js的一些检查配置
配置参数rules: { "规则名": [规则值, 规则配置]}规则值："off"或者0 //关闭规则关闭"warn"或者1 //在打开的规则作为警告（不影响退出代码）"error"或者2 //把规则作为一个错误（退出代码触发时为1）常见规则列表module.exports = { root: true, env: { node: tr...
2019-06-27 14:52:56
2428
原创 JavaScript中Array 对象的一些常用API详解
concat()描述：连接两个或更多的数组，并返回结果。用法array1.concat(array2,array3,...,arrayX)参数描述array2, array3, …, arrayX必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。例子var a= [222, 11];var b= [33, 4, 5];var c= [6];...
2019-06-25 22:31:35
1508
转载 js实现汉字转拼音（解决首字母排序问题）
实现思路汉字有21个声母：b, p, m, f, d, t, n, l, g, k, h, j, q, x, zh, ch, sh, r, z, c, s有韵母24个，其中单韵母有6个：a, o, e, i, u, v, 复韵母有18个：ai , ei, ui , ao, ou, iu , ie, ve, er, an , en , in, un , vn , ang, eng, ...
2019-05-20 14:11:57
4909
1
原创 koa2+koa-router以及koa脚手架的使用（koa-generator）
Koa2基础安装1.初始化项目npm init -y//-y是初始项目默认所有都是yes，若想另外设置可以直接npm init2.安装koa2npm i koa --save基础用法1.在文件目录下新建一个index.js，然后写下如下代码：const Koa = require('koa')const app = new Koa()app.use( async(ctx...
2019-05-14 18:16:23
3596
原创 js知识点(一)内置类型、Typeof、类型转换
内置类型JS 中分为七种内置类型又分为两大类型：基本类型和对象（Object）。基本类型有六种： null，undefined，boolean，number，string， symbol（ES6引入的原始数据类型）。numberJS 的数字类型是浮点类型，并且浮点类型基于 IEEE 754标准实现，在使用中会遇到某些 Bug。如var num1 = 0.1; var n...
2019-04-28 17:28:27
294
转载 javascript小技巧
1.过滤唯一值Set类型是在ES6中新增的，它类似于数组，但是成员的值都是唯一的，没有重复的值。结合扩展运算符（…）我们可以创建一个新的数组，达到过滤原数组重复值的功能。const array = [1, 2, 3, 3, 4, 4, 4, 5, 1, 2, 7, 6];const uniqueArray = [...new Set(array)];console.log(uniqueAr...
2019-04-23 15:50:39
73
原创 jq实现点击导航栏滚动到对应位置（锚点跳转滑动效果）和导航栏菜单项随页面滚动而变化
点击导航栏滚动到对应位置（延迟效果）1.跳转实现<div id="a"></div><a href="#a">跳转</a>如上图两行代码便可实现a标签‘#’后面跟对应的id值2.锚点跳转滑动效果<style>.btn{ position:fixed; right:10%; top:20%;}.btn a{ di...
2019-04-18 11:40:58
14115
10
原创 git 拉取代码库的项目到本地（window系统）
一.下载git工具先从官网下载git工具二.拉取远程代码在本地需要存放项目代码的地方右键点击git bash here去github上找到自己需要拉取的项目地址,复制在命令行输入 git clone https://github.com/….git //地址为上面copy的地址 三.查看本地分支和远程分支1.打开刚刚拉取下来的项目目录右键git bash here2.g...
2019-04-13 00:32:26
58068
原创 Gulp4.0构建html项目
Gulp4.0 构建html+sass+js项目Gulp介绍Gulp使用了node.js的流控制系统，使其（Gulp）构建更快，因为它不需要将临时文件/文件夹写入磁盘。Gulp允许你去指定你的源文件是哪些，然后用管道的方式传输你的源文件到一堆的插件中进行编译，最后得出你想要的结果。我们要修改编译、合并或者压缩的文件都放在一起，然后通过管道流，管道流里面含有多种的插件，这些插件会按照你指定的...
2019-04-10 15:32:57
1606
原创 TypeScript基础知识
TypeScript基础知识前言什么是typescriptTypeScript和JavaScript的对比开发环境的安装（window系统）变量类型NaNenum 类型any类型TypeScript的函数定义函数形参和实参TypeScript语言中的函数参数三种函数的定义方式函数声明法函数表达式法箭头函数函数中变量的作用域认识全局变量和局部变量let关键字变量的作用域引用类型-数组初识引用类型声明...
2019-04-03 23:17:46
738
转载 jQuery.lazyload详解
jQuery.lazyload详解<script type="text/javascript" src="./js/jquery.lazyload.js"></script> <script type="text/javascript"> $(function() { $("img").lazyload({ effect : "fadeIn" ...
2019-04-03 11:33:36
315
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人