【部署】如何用心仪的域名访问博客？记录上线过程
经过大半个月的折腾，看到自己的博客成功上线并能够访问，感到非常欣喜。尽管之前写过类似的文章，但貌似不见了，因此我决定重新写一篇，作为总结，并顺便为博客注入新的活力。
写在之前：
说明一下，我已经完成了 Github/Gitee Pages 和 Hexo 等搭建工作，因此不会再详细描述这些步骤。最初，我的博客是为了分享给家人和朋友看的，由于他们可能没有梯子等工具，因此如果网站加载速度缓慢，会严重影响他们对网站的评价。（我正好也准备面试性能优化这方面的知识，可以在后面展开讨论，但在这篇文章中就不详述了。）
接下来，我将总结一下，我是如何从零开始搭建博客的。
准备工作选择并购买服务器首先打开浏览器，进入搜索引擎，输入：“云服务器选择 -广告 -推广”，进行比价。因为之前我购买域名和服务器时使用的是阿里云，所以这次我也继续选择了它。
如何选择？
在选择云服务器时，对于个人开发者来说，最重要的是价格便宜且性价比高。通常来说，2 核 2G 的云服务器，一年大约 200 元左右是可以接受的。这里就不多说了，选择的原则是服务器距离自己的地理位置较近，配置适中，价格可以接受。
你需要知道 ...
【Hexo】2024新博客启动~记录搭建的过程
搭建环境用的是Hexo，按着官方文档来就好了，最好的例子就是文档啦。当然写博客的话，是为了记录一些需要留意的地方
开发环境
Nodejs: 12.16.0
npm: 6.13.4
hexo: 6.3.0
hexo-cli: 4.3.1 直接hexo init 即可
hexo-theme-butterfly: 4.12.0
一定要看是否安装完对应依赖，大部分看似复杂的问题基本都是不经意的小地方造成。说多了都是泪
关于路径问题_config.yml 中 需注意下面几项，根据需要改成自己用的路径即可，便于归类可用中文路径（传服务器可能遇到转义的坑注意下就好）
123456789# Directorysource_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir: :langskip_render:
踩坑1 最好不要改动tags、categories、archives 这三项的路径配置。某些插件 ...
【总结】2023年底面临的危机及一些反思
吐槽（为什么又开始写博客了）
2016年毕业，恰逢互联网的蓬勃发展，我选择了前端岗位。那时，技术更新速度惊人，从jQuery的面向对象开发模式逐渐过渡到利用现代构建工具、React、Vue等框架实现高效开发。为了不断迎接新的挑战，我始终不停地学习。 随着工作逐渐稳定，我将更多的重心放在了生活和家庭上，这是理所应当的事情。我曾认为中年危机只存在于段子中，与我尚有一段距离，然而却发现它悄然降临，带来了无尽的焦虑和大数据带来的各种烦恼和负能量。对此，我感到抗拒和迷茫。在短暂的自我调整中，我偶然翻阅了之前看了一半的《学习产品思维》，受益匪浅。 因此，我决定写下这篇博客，以此吹响“反击”的号角。
运用产品思维的一个好处就是可以跳脱当前，站在一个客观的角度俯瞰全局，在此就预设一个命题来进行思考——如何看待当下的失业危机，该怎样调整和应对？
明确目的解决焦虑，设定目标焦虑无非是不知道做什么，对自己能力的不自信，从而产生的一种大众跟随情绪。但自从学完了产品思维后，不良情绪逐渐消散。设定了许许多许的可完成的目标，那还有什么理由停留不前呢？
接受现实，坦然面对首先要处理的是年底前（元旦后可能还会有 ...
【Node】学习stream模块
正好读到了相关的文章推送，正巧也把之前看到的和弄了一小半的资料整理一下。- - node的学习又再此开启
stream的基本概念和常用API概述让数据流动起来。数据从原来的source流向dest，要像水一样，慢慢的一点一点通过一个管道流过去。stream并不是node.js独有的概念，而是一个操作系统最基本的操作方式，只不过node.js有API支持这种操作方式。linux命令的|就是stream，因此所有server端语言都应该实现stream的API。
为何要使用stream例子，在线播放视频。一点一点从服务端将视频流动到本地播放器，一边流动一边播放，直到播放完成。
12345678910var http = require('http')var fs = require('fs')var path = require('path')var server = http.createServer(function(req, res) { var fileName = path.resolve(__dir ...
【学习】前端存储之Cookie、Session
Cookie定义Cookie 是一小段文本信息，伴随着用户请求和页面在 Web 服务器和浏览器之间传递。Cookie 包含每次用户访问站点时 Web 应用程序都可以读取的信息。
例如，如果在用户请求站点中的页面时应用程序发送给该用户的不仅仅是一个页面，还有一个包含日期和时间的 Cookie，用户的浏览器在获得页面的同时还获得了该 Cookie，并将它存储在用户硬盘上的某个文件夹中。
以后，如果该用户再次请求您站点中的页面，当该用户输入 URL 时，浏览器便会在本地硬盘上查找与该 URL 关联的 Cookie。如果该 Cookie 存在，浏览器便将该 Cookie 与页请求一起发送到您的站点。然后，应用程序便可以确定该用户上次访问站点的日期和时间。您可以使用这些信息向用户显示一条消息，也可以检查到期日期。
Cookie 与网站关联，而不是与特定的页面关联。因此，无论用户请求站点中的哪一个页面，浏览器和服务器都将交换 Cookie 信息。用户访问不同站点时，各个站点都可能会向用户的浏览器发送一个 Cookie；浏览器会分别存储所有 Cookie。
Cookie 帮助网站存储有关访问者的 ...
【数据结构】栈、队列、链表及其区别
写这篇是因为之前在群里看到小伙伴在讨论算法相关知识，对于前端来说，这块也是很重要嘛，正好把之前没看完的那本电子书，《学习JavaScript数据结构与算法》复习下~
栈数据结构栈是一种遵从后进先出(LIFO, Last in First out)原则的有序集合。新添加的或待删除的元素都保存在栈的同一端，称作栈顶，另一端叫作栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底。
我们只是用ES6的简化语法把Stack函数转换成类。但变量items却是公共的，ES6的类是基于原型的，虽然基于原型的类比基于函数的类更节省内存，也更适合创建多个实例，却不能够声明私有属性或方法，而且，在这种情况下，我们希望Stack类的用户只能访问暴露给类的方法，否则就有可能从栈的中间移除元素（因为我们用数组来存储其值）
以下是ES6方法，创建私有属性的方式：
用ES6的限定作用域Symbol实现类
12345678let _items = Symbol();class Stack { constructor() { this[_items] = []; } ...
【JS】脚本错误及错误捕获
从脚本错误开始，了解脚本为什么会报错以及抛出错误，最后介绍了用window.onerror、try catch捕获错误。
什么是脚本错误如果您以前使用过JavaScript onerror事件做过任何工作，您可能会遇到以下情况：
“Script error.”
“脚本错误”是当错误源自从不同来源（不同域，端口或协议）提供的JavaScript文件时，浏览器发送到onerror回调的内容。这很痛苦，因为即使出现错误，您也不知道错误是什么，也不知道它来自哪个代码。这就是window.onerror的全部目的 - 深入了解应用程序中未捕获的错误。
产生原因：跨源脚本为了更好地了解正在发生的事情，请考虑以下示例HTML文档，假设从http://example.com/test提供：
123456789101112131415<!doctype html><html><head> <title>example.com/test</title></head><body> <script src=& ...
【JS】理解跨域及相关解决方案
写这篇一是为复习，二来是有个良好的总结。对于知识点的理解总是一知半解，不深入，这篇希望在此基础上不断深化加深印象和理解。
什么是跨域
A cross-domain solution (CDS) is a means of information assurance that provides the ability to manually or automatically access or transfer between two or more differing security domains.
解决两个安全域之间的信息传递，这个就叫做CDS——跨域解决方案。跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
为什么需要跨域浏览器有同源策略限制。
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非 ...
【JS】应用正则表达式（一）
最近因工作用到了，顺便查看了一些关于正则的博客，确实非常使用。学好正则看来是以后的一个必选项，趁着最近时间挺充裕的，于是系统的入门了一下，也算是能手写几个简单的正则来匹配规则了。
子字符串匹配和替换如果只想知道某个字符串是否包含在一个更大的字符串中，下面的 String.prototype 方法就可以实现：
123456789101112const input = 'As I was going to Saint Ives'input.startsWith('As') // trueinput.endsWith('Ives') // trueinput.startsWith('going', 9) // true - 从下标9开始数input.endsWith('going', 14) // true - 将下标14当作字符串结尾input.includes('going') // trueinput.includes('going', 1 ...
【JS】变量声明与赋值，引用、值传递与对象拷贝
夯实基础系列。虽然想整理之前测试相关的东西，不过最近看书有讲到这个，遂将之前收藏的博客、文章结合书里的讲解做了一些整理和例子来加深这块的印象。（今天也才把测试的看了没来得及整理）
ES6 为我们引入了 let 与 const 两种新的变量声明关键字，同时也引入了块作用域；本文首先介绍 ES6 中常用的三种变量声明方式，然后讨论了 JavaScript 按值传递的特性以及多种的赋值方式，最后介绍了复合类型拷贝的技巧
变量声明在 JavaScript 中，基本的变量声明可以用 var 方式；JavaScript 允许省略 var，直接对未声明的变量赋值。也就是说，var a = 1 与 a = 1，这两条语句的效果相同。但是由于这样的做法很容易不知不觉地创建全局变量（尤其是在函数内部），所以建议总是使用 var 命令声明变量。在 ES6 中，对于变量声明的方式进行了扩展，引入了 let 与 const。var 与 let 两个关键字创建变量的区别在于， var 声明的变量作用域是最近的函数块；而 let 声明的变量作用域是最近的闭合块，往往会小于函数块。另一方面 ...
【设计模式】从订阅发布模式说起
先扯点闲话。一时兴起，遂决定之后采用这个前缀来写这个十多篇的系列总结了。在之前的学习和博客整理中，感觉都挺没方向，很散乱。除了看书的总结外，其他时候都是零碎性地学习，我想，若能系统性地带着目的去散落这些点，再类似依赖收集一样把这些零碎的东西汇总整理出来，那应该也挺不错的~
这周的复习知识点主要是以下几方面：
设计模式之发布订阅/观察者模式
事件相关，事件、模型、处理机制
Ajax
异步
我将这些点梳理到了脑图中，并作了一些批注，感觉一边整理了知识点，也让自己有了一个整体的脉络和方向感，树越分散也就是所谓的深度，让树更深也就是知识的深度。
从设计原则说起一个优秀的程序员通常由其操作技能、知识水平，经验层力和能力四个方面组成。这些原则，也就是巨人的肩膀，总结而出流传至今，每一个程序员都应该了解，运用于开发和生活中。
要我来说的话就是，先去了解，知道有这些东西，也许不能马上运用到实际项目中，但当我们遇到困难时，就可以回顾一下图里的各原则，结合以下经验：
粗浅地了解这些原则
在（公司或开源）项目中观察或总结他人或自己的设计
实践、回顾，再总结
总结后再回到第1步 ...
【TS】使用vuex-class
vuex-class是vue-class-component作者写的，质量有保证。且目前这类的库也不多，用法和之前的vue-property-decorator差不多，主要是通过装饰器模式，一来支持ts里的vuex，二来减少冗余的代码量。
demo我们直接来看官方的例子就好，引入相关依赖
123456789101112131415161718192021222324252627282930313233343536import Vue from 'vue'import Component from 'vue-class-component'import { State, Getter, Action, Mutation, namespace} from 'vuex-class'const someModule = namespace('path/to/module')@Componentexport class MyComp extends Vue { @St ...
【TS】装饰模式与vue-property-decorator
在用typescript时，vue-property-decorator 是在 vue-class-component 上增强了更多的结合 Vue 特性的装饰器，新增了这 7 个装饰器：
@Emit
@Inject
@Model
@Prop
@Provide
@Watch
@Component (从 vue-class-component 继承)
源码也就200来行，于是就有信心来慢慢读了
为什么需要vue-class-component？ 在typescript里写vue 每次都需要写很多额外的形式代码：
而装饰器就是解决这些冗余代码的（实质上并没有减少，只是用一层函数包装了，后面有源码会讲解）
可自行了解一下装饰模式
AOP 面向切面编程示例：
首先创建一个普通的Man类，它的抵御值 2，攻击力为 3，血量为 3；
然后我们让其带上钢铁侠的盔甲，这样他的抵御力增加 100，变成 102；
让其带上光束手套，攻击力增加 50，变成 53；
最后让他增加“飞行”能力
12345678910111213141516171819class Man { const ...
【TS】vue与typescript集成
一直想找个机会试试typescript，正好看到一个小项目练手，于是直接开始吧
正文分两部分：
vue与ts集成
项目实战
转自Vue-TypeScript-DpApp-DemoVue + TypeScript 新项目起手式
Vue与TypeScript集成相关配置此demo就是用了 typescript 改的~~ https://github.com/Fridolph/colorful-gallery.git
vue init SimonZhangITer/vue-typescript-template <project-name>
npm i ts-loader -D
使用别人造好轮子就好。当然，我们还是要看看前人踩了哪些坑
配置rules接着在Webpack的module.rules里面添加对ts的支持
12345678910111213141516171819{ test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig},{ t ...
【Next】一次掌握ES6到ES8新增功能
转自 https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e作者 rajaraodv感觉挺好的，就搬过来了，很多代码值得敲一遍多多回顾理解
ArrayArray.prototype.includes找到数组中是否包含某项，直接返回布尔值（能找到NaN）
123456789101112const arr = [1,2,3,4,NaN]// 之前if (arr.indexOf(3) >= 0) { console.log(true)}// 推荐if (arr.includes(3)) { console.log(true)}// ps: includes还可以用来判断是否包含NaNarr.includes(NaN) // truearr.indexOf(NaN) // -1
Object1. Object.values()这个还好，我们已经在使用了，原来还是es ...
【学习】服务端渲染框架Nuxt入门
对着官方文档一顿敲= = 看官方文档就好，很简单，相比Vue和React那坑爹的服务端渲染配置，Nuxt简直是良心多了，配置灵活，最重要的是简单！！！于是近期会把 我的个人站首页用nuxt重（折腾）构一番，敬请期待~
NuxtNuxt.js（后文Nuxt）是基于Vue.js的通用应用框架
通过对客户端/服务端基础架构的抽象组织，Nuxt主要关注的是应用的UI渲染。其预设了利用Vue开发服务端渲染的应用所需要的各种配置。作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。
基本介绍如何运作vue2+ vue-router vuex vue-meta以及webpack、vue-loader、babel-loader来处理代码的自动化构建工作
特性
基于Vue
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态服务文件
ES6+语法支持
打包和压缩JS/CSS
HTML头部标签管理
本地开发支持热加载
集成ESLint
支持样式预处理
下图阐 ...
【JS】函数柯里化
柯里化 curring 是把接收多个参数的函数变换成接收一个单一参数（最初函数的第一个参数）的函数，并且返回接收余下参数并且返回结果的新函数的技术。
柯里化 -> 部分求值，返回接收剩余参数且返回结果的新函数。
特点：
参数复用 - 复用最初函数的第一个参数
提前返回 - 返回接收余下的参数且返回结果的新函数
延迟执行 - 返回新函数，等待执行
应用
兼容浏览器事件监听方法
性能优化：防抖和节流
兼容低版本IE bind方法等
事件监听1234567var addEvent = function(elm, type, fn, isCapture) { if (window.addEventListener) { elm.addEventListner(type, fn, isCapture) } else if (window.attachEvent) { elm.attachEvent('on' + type, fn) }}
当我们调用addEvent方法时，都会执行if ...
【Vue】理解Vue生命周期
早上刷手机在思否上看到 闰土大叔的这篇如何解释vue的生命周期才能令XXX满意？，觉得挺好就老套路了。当然，看别人的文章，在此基础上注释，添加自己的东西，才有写博客的价值，希望能站在大佬的肩膀上往前走得更快吧！
这张图肯定是必上的，说得相当详尽和清楚了。
在理解上，一直觉得Vue生命周期就是四个阶段 创建 -> 挂载 -> 更新 -> 销毁，每个阶段对应2个钩子函数 beforeCreate created ， 带 before 和 ed 的，同时也写过demo，无非就是以下： https://jsfiddle.net/0dzvcf4d/10495/ 可看下官网的例子
12345678910111213141516171819202122232425262728293031323334353637383940414243444546var vm = new Vue({ el: '#editor', data: { input: '# hello' }, computed: &# ...
【Vue】实现原生双向绑定
逛掘金看到篇讲Vue双向绑定的文章，很不错，就拿过来了，里面的代码抄了一遍，当然不是初抄啦，加入我自己的理解和总结。虽然看了几次这类文章，但真不嫌多，温故而知新嘛。
原理Vue的双向绑定通过 Object对象的defineProperty属性，重写data的set和get函数来实现。
简单实现
1234567<div id="app"> <form> <input type="text" v-model="number"> <button type="button" v-click="increment">增加</button> </form> <h3 v-bind="number"></h3></div>
一个input，使用v-model指令
一个button，使用v-click指令
一个h3，使用v-bind指令。
通过类 ...
【解决方案】移动端布局解决hotcss
号称移动端布局终极解决方案。其实现非常简洁，但功能却不是盖的。在最近准备做的一个项目中会用到该解决方案，知根知底最好的办法便是学习官方文档和敲源码了。嗯，感觉这法还好，于是废话不多说，开始正文吧
官方文档hotcss 官网称这是一个移动端布局开发的解决方案，使用动态HTML根字体大小和动态viewport scale。之前有一篇很火的讲述移动端布局的，介绍了淘宝、网易几家大厂的实现方式，这里的不同也就是在这个动态viewport scale上了吧。
其优势在于：
保证不同设备下的统一视觉体验。
不需要你再手动设置viewport，根据当前环境计算出最适合的viewport。
支持任意尺寸的设计图，不局限于特定尺寸的设计图。
支持单一项目，多种设计图尺寸，专为解决大型，长周期项目。
提供px2rem转换方法，CSS布局，零成本转换，原始值不丢失。
有效解决移动端真实1像素问题。
用法
直接引入
<script src="/path/to/hotcss.js"></script>
css写法推荐使用scss来编写css，在scss文 ...