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 锁屏画报原图批量提取

小米 MIUI 10 锁屏画报原图批量提取

  1. 需要 ROOT 权限
  2. 用 ES、MT、RE 等类型的文件管理器复制以下目录到内部存储
    /data/data/com.mfashiongallery.emag/files/img_cache/
  3. 将复制出来的文件批量重命名,添加 jpg 后缀
纯本地搭建 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。
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×