zhcexo's blog

zhcexo's blog

yet another fe blog

学习Vuex源码前的准备——类 Class
ES6 的 class 可以看作是一个语法糖,因为它的绝大部分功能,ES5 都可以做到。新的 class 写法只是让对象原型的写法更清晰、更像面向对象编程的语法而已。 ES5 的写法: 12345678910function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';}var p = new Point(1, 2); ES6 的写法: 12345...
学习Vuex源码前的准备——模块及加载实现
概述在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用模块解决方案。 ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块都只能在运行时确定这些东西。 ES6 模块不是对象,而是通过 export 命令显式指定输出的代码,再通过 import 命令输入。 由于 ES6 模块是编译时加载,使用静态分析成为可能...
学习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,...
avatar
zhcexo
I'm not chasing the wind