zhcexo's blog

zhcexo's blog

yet another fe blog

学习Vuex源码前的准备——变量的解构赋值
继续第二章,变量的解构赋值。 什么是解构赋值ES6 允许按照一定的模式,从数组和对象中提取值,这种方式被称为解构(Destructuring)。 数组的解构赋值基本用法以前为变量赋值,只能直接指定值,例如: 123let a = 1;let b = 2;let c = 3; 但是解构赋值允许这样写: 1let [a, b, c] = [1, 2, 3]; 意义就跟上面一样了,为 a,b,c 分别赋值。 本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予相应的值。以下是更多例子: 1234567891011121314151617181920let [foo, ...
学习Vuex源码前的准备——数组的扩展运算符
试了一下 Vue,然后也学习了一下 Vuex,发现 Vuex 的源代码好像不长,就想看看试试。不过由于是用 ES6+ 写的,与传统的写法有点不同,所以如果没有看过 ES6+,那么有必要了解一些必备的知识。 数组的扩展运算符扩展运算符是三个点 ...,用于将一个数组转为用逗号分隔的参数序列,它主要用于函数调用。 要注意上面提到的,是转化为参数序列,并不是单单用于数组拆解的,所以如果你打开 DevTools 的 console,在里面输入 ...[1, 2, 3],那么你不会得到 1,2,3,而是会得到一个错误:Uncaught SyntaxError: Unexpected token ....
cssnano压缩了CSS动画中keyframes的名字
最近在迁移一些老代码,移动端有一个 loading 动画是用 CSS3 写的,正常得不得了。可是把它集成到 webpack 使用的 scss 里之后,动画效果就丢掉了。找到 scss 转换出来的 css,查找出问题的代码,发现里面的 @keyframes bouncedelay 变成了 @keyframes a,查看了一下 webpack 的配置文件,把问题原因锁定到 cssnano 上。 首先是找到了 cssnano 的官网,配置项很多,感觉一个个看下来太浪费时间,直接就找问题本身。于是乎在 github 上找到了一个 issue,按别人提供的方法,果然解决了问题。 修改 webpac...
最近尝试Vue遇到的坑:安装bcrypt和命令行大小写错误提示
开门见山—— 关于 Vue 的vue-cli我看的教材上,用的 vue-cli,以前的安装方式就是 npm install -g vue-cli,但是新版本变成了 npm install -g @vue/cli。 其实官方的文档有说,但是我没有注意而已……老版本的 vue-cli 是 v2 版本,新版的 @vue/cli 是 v3 版本。 npm run dev 时遇到的警告提示另一个问题是,使用 vue init 建立新项目之后,在命令行中运行 npm run dev 居然出了黄色的警告提示:There are multiple modules with names that only...
为nginx配置vhosts(Windows开发环境)
公司开发了自己的页面渲染系统,而且涉及需要迁移的站点非常多,所以需要在开发中配置一些虚拟主机。以前玩的都是 Apache,但是后端推荐使用比较轻量的 nginx,所以扒了一下 nginx 的 vhosts 的配置方法。 首先,下载 nginx 的可执行文件,是个压缩文件,解压之后,放到一个容易访问的目录,以下用 nginx_dir 代替。ngnix 的默认配置文件是 nginx_dir/conf/nginx.conf。 其次,在 nginx_dir/conf/ 下新建一个目录,叫 vhosts,并且在 nginx_dir/conf/vhosts/ 下新建一个文件,名为 vhosts.co...
一些数组方法的备忘
forEachforEach() 方法对数据的每一个元素执行一次提供的函数 语法1array.forEach(callback (currentValue, index, array) {}[, thisArg]); callback - 为数组中每个元素执行的函数,接收三个参数 currentVale - callback 的第一个参数,当前正处理的元素 index - 可选参数,callback 的第二个参数,当前正处理的元素的索引 array - 可选参数,callback 的第三个参数,是正在处理的数组 thisArg - 可选参数,当执行回调函数时用作 t...
安装Simple Obfs
非常不爽,不知道最近 WALL 是做了什么升级,我的 55 挂了,使用 chacha20-ietf-poly1305 都不行,之前还用着挺好的。无奈只好又寻方法,找到了 Simple Obfs。 服务端配置以下命令均在 root 权限下执行,所以无 sudo 废话不多说,先安装: 12345678apt-get install --no-install-recommends build-essential autoconf libtool libssl-dev libpcre3-dev libev-dev asciidoc xmlto automakegit clone https://...
Grid 布局完全指南
Grid 布局是 CSS 中最强大的布局方式。它是一个二维系统,也就是说,它能同时处理行和列,而不像 flexbox 这样是一个一维系统。使用 Grid 布局方式可以同时将 CSS 规则作用于父元素(成为 Grid Container)和子元素(成为 Grid Items)。 介绍CSS Grid Layout(又叫做 Grid),是一个二维的、基于网格的布局系统,目标是完全改变我们基于网格设计的用户界面。CSS 已经常用于 web 页面的布局,但并不是总做得非常好。开始,我们使用表格 tables 布局,然后使用浮动 floats,定位 position 和 inline-block,...
Flexbox 完全指南
背景知识Flexbox Layout (Flexible Box) 模式用于提供一个更有效率的布局途径,让容器(container) 中的子元素(items) 在尺寸未知或者动态变化的时候,也能对齐和分配项目之间的空白,因为称作 flex (弹性)。 Flex 布局的主要思想是让容器能够改变里面项目的宽度/高度(或者顺序),以便用最佳方式填充可用空间(大多用来适应各种不同的设备和屏幕尺寸)。flex 容器能让里面的子元素展示以适应可用空间,或者让它们收缩以防止溢出。 更重要的是,flexbox 的布局方式与常规布局(比如 block 就是基于垂直方向的,而 inline 是基于水平方向的...
更新Ubuntu以及更新SS以支持新的加密方法
遇到的问题每次用 SSH 的方式登入服务器的时候,都会提示如下信息: 12345678Welcome to Ubuntu *.*.* LTS (GNU/Linux *.*.*-*-generic x86_64) * Documentation: https://help.ubuntu.com/ ……13 packages can be updated.10 updates are security updates. 字面提示是有 13 个包可以升级,其中 10 个是安全更新。 事实上 Ubuntu 更新还是挺容易的,因为有 apt-get,不过更新完之后,还是会提示一些安全更新没做完,...
avatar
zhcexo
I'm not chasing the wind