黑山老妖橙-CSDN博客

原创常见图片分类及适用场景

图片优化–质量与性能的博弈无论是作者还是《高性能网站建设指南》的作者，都认为图片的优化优先级高于js和css的优先级，因为这是用户可感知的。图片压缩我们通常会选择压缩图片的体积来减少网络加载时长，但一般会牺牲一些图片成像效果。目前主要的图片分类有JPEG/JPG、PNG、WebP、Base64、SVGJPEG/JPG关键词：有损压缩、体积小、加载快、不支持透明JPG 适用于呈现色彩丰富的图片，在我们日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。当在处理颜色对比强烈

2021-11-12 16:17:44 4744

原创《前端serverless 面向全栈的无服务器架构实战》读书笔记

第1章什么是severless什么是NoOps利用自动化运维代替手工运维模式什么是severless开发者无需关注服务器资源配置情况、部署情况、操作系统以及依赖软件等在内等所有细节，这一切都由平台完成，开发者只需要专注于业务实现。serverless是指在应用的构建环节或应用环节都无需对服务器进行操作云原生计算基金会CNCF2015年谷歌用go语言重构了内部用于容器编排的项目也就是后来的k8s。随着k8s的发布，谷歌与linux基金会合作成立了cncf（cloud native comput

2021-09-13 23:46:32 470

原创 vue-router params与query使用及区别

前置知识url的语法大多数的url都是由9个部分组成<scheme>://<user>:<password>@<host>:<port>/<path><params>?<query>#<frag>scheme方案名称即协议名称,表示用哪种协议访问服务器，如http、httpsuser用户：某些方案访问资源时需要的用户名，有些服务器要求输入用户名密码才会允许用户访问数据，如ftppass

2021-08-15 21:29:13 1146

原创 vue-router导航守卫全解析

导航守卫vue-router实例方法提供了守卫导航的方法，可以将我们的代码逻辑植入到路由导航过程中。主要分为全局、单个路由共享、组件级全局router.beforeEach()作用：导航前置守卫在路由跳转之前进行判断和拦截，一般用来做一些进入页面的限制，比如未登录不能进入某些页面当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。参数to:Route对象，即将要进入的目标from:Route，当前要离开的路由

2021-08-13 20:39:05 563 2

原创 MIME Type 媒体类型

媒体类型MIME type服务器可以存储的资源类型多种多样如音频、视频、图片、ppt、excel、网页等，那浏览器怎么知道不同的类型怎么处理呢？这种时候需要服务器和客户端配合完成。首先是服务器通过http协议仔细的给每种要传输的对象都打上名为MIME type的数据格式标签，用它来描述并标记多媒体内容即标注是哪种类型的资源并将结果通过Content-Type 追加到响应头中。客户端根据类型进行不同的处理。背景知识MIME类型最初是为多媒体电子邮件开发的，目前在HTTP和其他几种需要描述数据对象格式和

2021-06-06 20:57:50 928

原创利用nodejs实现石头剪刀布游戏

需求用户在执行的时候输入‘石头’、‘剪刀’、‘布’，跟系统随机生成的‘石头’、‘剪刀’、‘布’进行比较，最终判断输赢。代码实现新建一个index.js文件利用nodejs全局变量process中的argv来获得用户的输入，但下标0和下标1分别代表node.exe所在位置和执行文件所在位置输入如下代码var userInput = process.argv[process.argv.length-1]var random = Math.random()*3 //产生一个0-3之间的随机数let

2021-05-24 19:27:23 418 1

原创模拟实现发布订阅者

发布订阅定义了对象间一对多的问题发布订阅的核心组成因为有了消息调度中心，实现发布者与订阅者的解耦。订阅者把自己想要监听的事件注册到调度中心，发布者触发事件的时候会通知调度中心，调度中心通知监听此事件的订阅者进行回调执行发布订阅与观察者模式的区别在哪里？发布订阅者模式中存在调度中心，观察者模式中没有调度中心当状态发生改变时，发布订阅模式无须主动通知，由调度中心通知订阅者模拟一个发布订阅如果我们自己想要实现发布订阅，应该考虑哪些要素？要有一个缓存队列，存放订阅者信息 :ev

2021-05-19 09:18:26 127

原创 Nodejs之CommonJS规范（一）

Commonjs规范关于CommonJS规范诞生的目的就是为了弥补浏览器没有模块化缺陷CommonJS是语言层面的规范，是一个超集，当前主要用于NodejsCommonJS规范规定模块化分为引入（通过rrquire导入其他模块）、定义（任意一个文件就是一个模块，具有独立作用域）、标识符（将模块ID传入require实现目标模块定位）三个部分module属性任意js文件就是一个模块，可以使用module属性id:返回模块标识符，一般是一个绝对路径filename:返回文件模块的绝

2021-05-12 21:11:47 333

原创 Nodejs之fs文件操作API

fs是内置的核心模块，提供文件系统操作的APIfs模块结构FS基本操作类FS常用API既然讲到了文件系统，就先介绍一下关于系统和文件的相关知识权限位：在当前操作系统内，不同的用户角色对当前文件能够执行的不同操作文件权限分为三种：r:读权限,数字表示4w：写权限,数字表示2x：执行权限,数字表示1操作系统将用户分为了3类文件所有者，一般都是当前用户文件所属组：当前用户的家人其他用户：如访客关于文件权限问题如777代表的意义等，可以参考另一篇博客Nodej

2021-05-07 19:10:34 376 1

原创 linux文件和目录的权限

1.文件权限操作系统将文件或目录权限分为三种：r：读权限,数字表示4 w：写权限,数字表示2 x：执行权限,数字表示1数字4、2、1分别表示读、写、执行权限rwx = 4 + 2 + 1 = 7 (可读可写可运行）rw = 4 + 2 = 6 （可读可写不可运行）rx = 4 +1 = 5 （可读可运行不可写）操作系统将用户分为了3类文件所有者，一般都是当前用户文件所属组：当前用户的家人也就是同组用户其他用户：如访客最高权限777:(4+2+1) (4..

2021-05-07 19:03:18 1266

原创 Nodejs之Buffer静态方法concat、isBuffer

concat()作用：将多个buffer拼接成一个新的buffer语法Buffer.concat(list[, totalLength])参数list:用于合并的buffer对象数组totalLength:指定合并buffer对象的总长度实例let buf = Buffer.from('今天有沙尘暴')let buf2 = Buffer.from('20210506')console.log(Buffer.concat([buf,buf2],6)) //<Buffer e4

2021-05-07 09:31:17 544

原创 Nodejs之Buffer实例方法toString、indexOf、copy

toString():从buffer中提取数据语法buf.toString([encoding[,start[,end]]])参数encoding:使用的编码，默认utf-8start:指定开始读取的索引位置，默认为0end:结束位置，默认为缓冲区的末尾实例let buf = Buffer.from('今天有沙尘暴')console.log(buf.toString()) //今天有沙尘暴console.log(buf.toString('utf-8'))//今天有沙尘暴con

2021-05-06 21:01:46 1410

原创 Nodejs之Buffer实例方法fill、write

fill():使用数据填充buffer基础用法：let a = Buffer.alloc(3)a.fill('123')console.log(a.toString()) //123如果buffer长度大于内容，则会反复填充let a = Buffer.alloc(7)a.fill('123')console.log(a.toString()) //1231231如果buffer长度小于内容长度，则填满即可let a = Buffer.alloc(6)a.fill('12345.

2021-05-06 19:47:43 507

原创前端性能优化入门篇

性能优化思考：1、为什么会学前端性能优化？因为性能优化是面试必考题，但面试官更关注的是在什么样的场景下，遇到了什么性能问题，围绕什么样的性能指标，采取了哪些性能优化手段，取得了什么样的结果2、前端性能监控平台，能够直接判断出当前性能数据有没有问题，然后提示出问题是在前端、后端、还是在网络层3、职业发展问题：当我们成长为高级工程师时，要选择继续深入的方向，一般的方向有2个。前端工程化方向（编译打包发布流程、物料中心、组件化）体验领域（性能优化方向）4、学习前端性能优化的难点：资料繁杂但不成

2021-04-16 17:06:05 134

原创 vue+element分页数据生成排名

背景项目采用vue+element，其中有一个table数据采用后端分页形式，但需要展示一个排名，后端未返回需前端处理。实现思路排名是由页码pageNum+序号index组合生成的，第一页数据，采用序号+1即可，但第一页index为9的数据排名为10，当序号为9时采用页码+0第二页数据，采用页码-1+序号+1即可比如11、12、13，但第二页index为9的数据排名为20，当序号为9时采用页码+0总结来看，逻辑应该为如下：如果序号为9，则返回页码pageNum+‘0’如果序号不为9且

2021-03-11 00:25:55 1650 2

原创 vscode自动生成项目目录结构

在博客中经常看到目录结构如下：project-tree├─ .git├─ .gitignore├─ .vscodeignore├─ images├─ node_modules├─ src│ ├─ config.ts│ ├─ index.ts│ └─ utils.ts├─ tsconfig.json├─ tslint.json└─ webpack.config.js应该如何生成呢？步骤如下：vscode安装插件，project-tree安装之后按ctrl+shift+

2021-02-22 22:31:40 9190 1

原创 vue3.0介绍

vue3.0源码组织方式与vue2.x版本相比，vue3.0的变化如下：源码组织方式的变化，全部采用ts编写，采用monorepo将独立功能提取到不同包中增加CompositionApi，90%以上的api兼容2.x,解决2.x版本中开发大型项目中超大组件过大不好拆分重用的问题性能提升，重写了虚拟dom、同时使用proxy重写响应式采用vite打包工具，在开发阶段不需打包便可直接运行项目源代码组织方式采用ts重写，帮我们进行类型检查使用monorepo管理项目结构，一个源代码分为不同的

2021-02-16 15:42:41 1807

原创 vue 处理组件边界情况

在vue文档中有处理组件边界情况的api:$root:存储到根实例中parent/parent/parent/children，可以访问父组件、子组件的属性，也可以进行修改$refs：可以访问子组件依赖注入provide/inject$root我们在创建vue实例的时候可以将数据挂载到根节点```//main.jsnew Vue({ render: h => h(App), data: { title: '根实例 - Root' }, methods:

2020-11-06 14:11:41 373

原创工作流开源库 Activiti/Flowable/Bpmn.js 对比

前言讲工作流其实离不开BPMN，那BPMN是什么呢？什么是BPMN在Activiti工作流中用到了一个BPMN的文件，主要是用来描述业务流程的基本的符号，利用各个组件能够组成一个业务流程图，整个业务也是根据这个图来走的，其实用xml格式打开，就是一个xml文件。BPMN是一套标准，BPMN的主要目标是提供一些被所有业务用户容易理解的符号，从创建流程轮廓的业务分析到这些流程的实现，直到最终用户的管理监控。BPMN基础业务流程图由一系列的图形化元素组成。这些元素简化了模型的开发，且业务分析者看上去非

2020-11-03 20:35:49 4210

原创 flowable 中文文档

flowable 中文文档地址：https://tkjohn.github.io/flowable-userguide/#_introduction

2020-11-03 15:17:10 11130 1

原创初始化nuxt.js应用的方式

运行 create-nuxt-app从头开始新建项目新建文件夹rend并在vscode打开npm init -y 初始化package.jsonnpm i nuxt 安装nuxtpackage.json中scripts增加"dev":“nuxt”在项目下新建pages文件夹，里面新建index.vue<template> <h1>hello nuxt</h1></template><script> expo..

2020-10-20 14:59:04 243

原创服务端渲染、客户端渲染、同构渲染相关简介

什么是渲染把【数据】+【模板】拼接到一起传统的服务端渲染最早的web页面渲染都是在服务端进行的，也就是服务端在运行过程中将数据+模块拼接到一起，然后返回html给客户端，客户端直接展示就行。流程图如下：服务端渲染的缺点：前后端代码完全耦合在一块，不利于开发和维护前端没有足够的发挥空间服务端压力大用户体验一般，用户需要刷新才能重新获取数据客户端渲染因为服务器渲染存在上述问题，且伴随着ajax的产生，使得我们可以动态获取数据。我们现在常见的SPA单页面如Vue\React采用的都

2020-10-20 14:47:46 249

原创 Nuxt.js 静态部署到gitee pages

Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署和静态应用部署。本次先讲一下如何静态部署。Nuxt.js 可依据路由配置将应用静态化，使得我们可以将应用部署至任何一个静态站点主机服务商。下面就以将代码提交到gitee且可以访问pages页面为例。假设你的nuxt.js项目开发已经完成将"generate": "nuxt generate"加入到package.json中的script执行 npm run generate，完成后会生成一个dist文件夹我们将源

2020-10-20 14:23:40 662

原创同一端口有2个前端应用应该如何配置nginx.conf

需求：业务系统中有2种完全不同角色，页面没有相同模块拆分成了2个应用A和B，但后端是同一个后端，部署的时候要求A和B在同一端口下。问：如何配置nginx首先我们将A、B前端包放到/opt/app/jhscf/deploy/html下，这样html就有2个文件夹，A和B然后找到nginx.conf文件，利用vim打开并编辑server { listen 8001; server_name localhost; charse tutf-8

2020-09-24 16:13:58 1731

原创大于1的正整数正则表达式

^[1-9][0-9]*$ 大于0的正整数^(([1-9]\d+)|([2-9]))$ 大于1的正整数

2020-09-24 14:54:38 7642 1

原创 vue 全局组件与局部组件的注册方式及适用场景

组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等。不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板data必须是一个函数，不再是一个对象。全局组件全局组件的概念组件在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。使用方式为<组件名></组件名>全局组件注册方式Vue.component('组.

2020-09-15 20:45:18 1205

原创 github git fork与clone有什么区别及使用场景

git clonegit clone xx 是我们比较熟悉的操作,它类似于Download功能，可以理解为将云端代码下载到我们自己电脑的本地。正常的话需要我们本机安装了git，然后使用git clone [仓库地址] 即可将制定仓库地址代码下载到我们本机。git fork我们在github上打开别人的项目，右上角会有一个fork及fork的人数。如下图：watch 就类似于关注，后续项目有任何更新都会通知你，如果设置了邮件还会邮件通知觉得比较好的项目可以通过star进行收藏，并且收藏的同时也

2020-08-21 09:19:14 14983

原创 IE浏览器 new Date(“XXXX-XX-XX“) 结果为invalid date或NaN

背景最近在做IE兼容的时候遇到了一个问题，前端界面的时间显示为NAN-NAN-NAN NAN:NAN-NAN，后端返回的是一个字符串日期"2020-07-30 13:00:00"，在谷歌、火狐浏览器都显示没有问题的，那么IE的问题在哪里呢？最主要的问题在于我们new Date(“xxxx-xx-xx xx:xx:xx”)时会转换为invalid date，是因为在ie中不支持-时间。解决方案var date = ‘2020-08-09 12:00:00’date =new Date(data.re

2020-08-20 17:36:00 1237 1

原创 vue/react项目 IE兼容常见问题及解决方案

我们用vue或者react开发完的项目，默认对ie的支持都很不友好，虽然是ie不友好。整理了以下常用的问题及解决方案，用来记录一下~“Map”未定义、对象不支持“startsWith”属性或方法、 “Symbol”未定义、“Set”未定义问题1： “Map”未定义、对象不支持“startsWith”属性或方法、 “Symbol”未定义、“Set”未定义，都是说ie对es的新标准兼容存在问题，可以安装babel-polyfill进行转换成ie可支持的方法。解决方案为：安装babel-polyfi

2020-08-13 21:11:42 1465

原创渗透测试原则及流程

什么是渗透测试渗透测试是可以帮助用户对目前自己的网络、系统、应用的缺陷有相对直观的认识和了解。渗透测试尽可能地以黑客视角对用户网络安全性进行检查，对目标网络、系统和应用的安全性作深入的探测，发现系统最脆弱的环节的过程。渗透测试能够直观的让管理人员知道自己网络所面临的问题。渗透测试原则稳定性原则稳定性原则是指渗透测试工作应该在能够确保信息系统持续稳定运行的前提下进行。通过合理的选择测试工具、测试方法和测试时间，将渗透测试对系统正常运行的影响降到最小。可控性原则可控性原则是指渗透测试工作应该

2020-08-13 21:00:34 1929

原创 snabbdom的基本使用

前言我们上一篇博客中介绍了虚拟DOM的基本概念及常见类库，其中常见类库有2中，snabbdom和virtual-dom，而snabbdom是vue2.x版本中所使用的，所以我们这片文章就主要来记录一下snabbdom的基本使用。创建项目打包工具为了方便使用比较简单的parcel创建项目并安装parcel mkdir snabb-demo // 在工作目录下建立snabb-demo子目录 cd snabb-demo //进入snabb-demo 目录 yarn ini

2020-08-11 21:32:16 4846 6

原创什么是虚拟DOM

什么是虚拟DOM？virtual DOM 虚拟DOM，用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。虚拟 dom 是相对于浏览器所渲染出来的真实 dom而言的，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），

2020-08-11 20:25:12 31214 6

原创 vue-cli3 如何打包成zip压缩文件

前言目前在我司，采用前后分离的方式开发，这就会面临一个问题。那就是部署到服务器时如何部署？我们之前的方式是:执行打包命令生成文件夹-> 将文件压缩成zip -> 将zip上传至服务器 ->解压缩 -> 重启服务。在测试阶段每天都要回归bug，所以每天都要重复执行上述操作。有没有更自动化一些的方式来实现呢？就有了自动化部署，但我在研究自动化部署前，其实我是想在打包的时候自动生成zip文件，然后本地的脚本读取zip并上传至服务器，还有一种思路就是上传脚本可以进行打包压缩zip等。因为

2020-08-06 15:10:32 3045

原创垃圾回收算法及V8引擎的回收思想

题记内容来源文章内容输出来源：拉勾教育大前端高薪训练营一期当前阶段的学习心得我算是一个工作年限比较久的前端了，刚毕业时从事销售工作，后来在2015年想要从事脚踏实地的工作，便选择转行互联网。当时转行时我和我同学选择了不同的道路，她选择参加ios培训而我选择自学。刚入行时因为没有经验，所以拿着月薪1.5K的薪水做着很繁杂的工作，前端、php、测试、产品、需求都ok。但没有一个是我最擅长。忙碌的生活让我逐渐意识到我或许走的不会很长久，我在2017年惊醒便放弃了天津的2K薪资来到了北京。北京公司是个小公司

2020-08-06 01:06:18 377

原创前端模块化，有这一篇就够了(上)

题记内容来源文章内容输出来源：拉勾教育大前端高薪训练营一期当前阶段的学习心得我算是一个工作年限比较久的前端了，刚毕业时从事销售工作，后来在2015年想要从事脚踏实地的工作，便选择转行互联网。当时转行时我和我同学选择了不同的道路，她选择参加ios培训而我选择自学。刚入行时因为没有经验，所以拿着月薪1.5K的薪水做着很繁杂的工作，前端、php、测试、产品、需求都ok。但没有一个是我最擅长。忙碌的生活让我逐渐意识到我或许走的不会很长久，我在2017年惊醒便放弃了天津的2K薪资来到了北京。北京公司是个小公司

2020-08-05 23:20:39 735

原创如何完成基础的前端自动化部署

前言其实自动化部署的方式比较多，jenkins、git hook等，前者个人觉得有点重，后者还没时间仔细学习，目前先采用了插件完成了此功能。后续会再研究git hook。插件地址https://github.com/HEJIN2016/auto-deploy.git说明：所有的配置按照作者的说明文档操作即可。他的思路是你执行node autoDeploy.js 会自动帮你执行npm run build命令，生成dist文件夹并压缩成zip，传到服务器解压缩并删除服务器的压缩包，再删除本地的zip压缩

2020-08-05 21:50:27 442

空空如也

空空如也