JS 原生对象与数组拷贝

浅拷贝单层对象

1
2
let obj = { id: 1, title: "1" }
let copyOfObj = Object.assign({}, obj)

深拷贝多层对象

1
2
3
4
5
6
7
let obj = {
id: 1,
title: "1",
tag: ['js', 'javascript'],
category: { id: 1001, title: 'frontend' }
}
let copyOfObj = JSON.parse(JSON.stringify(obj))

浅拷贝简单类型数组

1
2
let arr = [1, 2, 3]
let copyOfArr = [...arr]

深拷贝单层对象组成的数组

1
2
3
4
5
6
7
let arr = [
{ id: 1, title: "1" },
{ id: 2, title: "2" },
{ id: 3, title: "3" }
]
let copyOfArr1 = arr.map((item) => Object.assign({}, item))
let copyOfArr2 = JSON.parse(JSON.stringify(arr))

深拷贝多层对象组成的数组

1
2
3
4
5
6
7
let arr = [
{ id: 1, title: "1", subObj: { name: 'subObj1' } },
{ id: 2, title: "2", subObj: { name: 'subObj2' } },
{ id: 3, title: "3", subObj: { name: 'subObj3' } }
]
let copyOfArr1 = arr.map((item) => JSON.parse(JSON.stringify(item)))
let copyOfArr2 = JSON.parse(JSON.stringify(arr))

总结

不考虑性能的情况下,JSON.parse(JSON.stringify(value))是最简最万能的拷贝。

直接操作 Vue data 中不存在的属性导致的 v-model 绑定异常问题

直接操作 Vue data 中不存在的属性导致的 v-model 绑定异常问题

初学Vue遇到的问题,尝试了几个小时才搞明白,大佬应该一眼就能看出什么问题吧……

需要注意,不要直接在JS中操作一个Vue data对象中不存在的属性,如果同时有通过v-model绑定到该对象的不存在的属性时,会出现诡异的行为表现,console中不会报出任何 warnerror

需求是,实现三个复选框,第一个复选框初始为选中状态,一开始写出来是这样的——

HTML
1
2
3
4
5
<div id="app" style="margin: 10px;">
<van-checkbox v-for="box in checkboxes" :key="box.id" v-model="box.selected">
复选框 {{ box.title }}
</van-checkbox>
</div>
JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
new Vue({
el: '#app',
data () {
return {
checkboxes: [
{ id: 1, title: 'a' },
{ id: 2, title: 'b' },
{ id: 3, title: 'c' }
]
}
},
created () {
this.checkboxes[0].selected = true
}
})

试下效果:

See the Pen vue-v-model-not-work by iMaeGoo (@iMaeGoo) on CodePen.

复选框a的表现显然是异常的,点击不能成功地切换选中状态,而在点击之后再点击其他复选框,才会“有延迟地”切换状态。

阅读更多
CSS 类似 iOS 的毛玻璃动态模糊效果

CSS 类似 iOS 的毛玻璃动态模糊效果

提到网页毛玻璃效果,总结下来有以下2种:

  1. 模糊元素本身
  2. 模糊元素后面的内容

早在之前,1就已经可以通过 CSS3 filter 属性实现,而2一直没有一个好的解决方案。对1的运用,也可以达到2的效果,通过模糊图片的一部分,就可以实现类似 bilibili 导航栏的模糊背景效果 ↓

这样实现的前提是,我们的背景是一个静态的,单一的图片,那么如果我们需要模糊的背景比较复杂呢?仔细观察QQ右栏的标题栏,和下方的应用 Dock,都是 iOS 常见的毛玻璃叠加层效果 ↓

显然模糊元素本身并不能解决所有场景的问题。

阅读更多
小米 MIUI 10 锁屏画报原图批量提取
纯本地搭建 EFK 管理远程服务器日志

纯本地搭建 EFK 管理远程服务器日志

项目staging环境日志难以搜索,计划搭建EFK管理日志,但是EFK内存消耗太大,再新增云服务器不划算,打算搭建在本地(16G内存)。

什么是 EFK

EFK不是一个软件,而是一套解决方案,并且都是开源软件,其中 ELasticsearch 负责日志保存和搜索,FileBeat 负责收集日志,Kibana 负责界面。

  1. Elasticsearch
    Elasticsearch是个开源分布式搜索引擎,提供搜集、分析、存储数据三大功能。它的特点有:分布式,零配置,自动发现,索引自动分片,索引副本机制,restful风格接口,多数据源,自动搜索负载等。
  2. FileBeat
    Filebeat 隶属于 Beats,搜集日志数据并上载到 ElasticsearchLogstashRedis 等平台。
  3. Kibana
    Kibana 提供日志分析的友好 Web 界面,可以帮助汇总、分析和搜索重要数据日志。

环境现状

  1. 本地环境:Windows 10,Intel(R) Core(TM) i5-7500 CPU,内存 16G
  2. 远程环境:SUSE Linux Enterprise Server 11,可用内存不足 1G
  3. 本地可以启虚拟机,但没钱买额外的云服务器。

最初想法

目前有3种思路:

  1. 本地启动Elasticsearch、Kibana、Filebeat,服务器启动FTP,并映射到本地网络驱动器,Filebeat配置从网络驱动器读取log。
  2. 本地启动Elasticsearch、Kibana,用反向代理工具FRP暴露Elasticsearch的9200端口到公网(注意配置鉴权),远程启动Filebeat,输出到本地的Elasticsearch。
  3. 本地启动Elasticsearch、Kibana,Logstash,远程启动Filebeat、Redis,远程的Filebeat输出到Redis,本地的Logstash从Redis上读取,转发给Elasticsearch。
阅读更多
Vagrant 修改 box 保存位置 & 虚拟机位置到非系统盘

Node.js 实现 HTTP 访问日志

越来越咸,两个月没发文章了,刚刚换项目了,开始学一些新的知识。
近来调试 webhook 和 http callback 比较多,想要使用 Node.js 写一个接收所有 HTTP 请求,并把请求头和请求体写进log,返回 200 OK 的 service。

其实就是简单的 access.log 啦。
其实就是刚学习 Node.js 写的 demo 啦。
啊这是很简单你不要拆穿啦。

这是输出的 log 的样子,优化了可读性,时间、method、path、URL参数(Query)、请求头(Header)、请求体(Body)都详细记录了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
info: 2019-07-25 18:04:36
POST /v1.0/standard
Query:
search: keyword
Header:
cache-control: no-cache
postman-token: f4103067-4b07-447d-9fab-f09a75b6ddda
content-type: application/json
user-agent: PostmanRuntime/3.0.11-hotfix.2
accept: */*
host: localhost:4000
accept-encoding: gzip, deflate
content-length: 209
connection: keep-alive
Body:
appId: XXX
data:
userId: 123
requestId: 456
timestamp: 0
阅读更多
负载均衡:ELB, ALB, NLB, CLB

负载均衡:ELB, ALB, NLB, CLB

负载均衡的作用

对多台云服务器进行流量分发的服务。负载均衡可以通过流量分发扩展应用系统对外的服务能力,通过消除单点故障提升应用系统的可用性。

  1. 提高可用性和访问速度
    在单个可用区或多个可用区内的多个目标之间自动分配流量。
  2. 运行状况检查
    检测无法正常运行的目标、停止向它们发送流量,然后将负载分散到剩余的正常运行的目标上。
  3. 安全性功能
    创建和管理与负载均衡器关联的安全组,以提供更多联网和安全选项。
  4. TLS 终止
    提供集成化证书管理和 SSL/TLS 解密,可以灵活地集中管理负载均衡器的 SSL 设置,并从应用程序上卸载 CPU 密集型工作。
阅读更多
XSS, CSRF, CRLF, SQL注入学习笔记

XSS, CSRF, CRLF, SQL注入学习笔记

XSS, CSRF, CRLF, SQL注入都是历史悠久的四种攻击方式,因为参数化查询已经成了普遍用法,我们已经离SQL注入很远了,但是,XSS,CSRF,CRLF却没有远离我们。

本文以初学者角度探讨四种Web攻击以及预防方式,是个人基于对多种Web漏洞的学习总结,不承诺内容规范。

阅读更多