虚世界的博客

与其他开发人员不同的是，前端开发都是在端上游走舞者，直接与用户交流沟通，这就需要前端开发具有更敏锐的交互体验思考，或者能更精准地理解设计师们意图，将最佳的用户体验带给用户。优质的交互体验对于用户来说学习成本应该是极低的，都是非常自然的操作，却可以让用户感到畅快愉悦，甚至惊喜。本文将通过一个看似简单的 poplayer 来分析我在这其中通过思考做的体验优化，获得类似 native 的体验感。 关于 poplayer 是什么，详见 POPLAYER起来HIGH~~ 简单的说下需求，这个弹层希望可以像 native 在商品详情页的弹层一样，从下向上滑出，点击遮罩或按钮时关闭。为了给用户带来更好的体验，我在这个基础上又增加了一些手势和过渡的动画效果，如下图。下面简单的拆分一下动画细节： 页面载入，卡片向上滑入 增加 pan 的手势，卡片跟随手指滑动 随着手指滑动，增加遮罩透明度与卡片阴影变化 增加向上和向下的边界条件的处理 动画与手势的运用这些动画利用 CSS 3 的一些属性再加上手势操作即可完成，这里手势操作我选择了老牌的 HammerJS。 点击超级会员专享，折上95折 ba ...

起因不知道大家是怎样安排自己的日常计划的，我习惯是建立一个仓库，按照年/周记录在 markdown 里，平时这个仓库也写点简单的 demo，目录类似如下： 12345678910111213141516171819202122week├── 2016├── 2017├── 2018│ ├── 20180102.md│ ├── 20180108.md│ ├── 20180115.md│ ├── 20180122.md│ ├── 20180126.md│ ├── ...│ ├── ...│ ├── ...│ ├── 20181007.md│ ├── pixi.md│ ├── schedule.md│ ├── temp.css│ ├── temp.html│ ├── temp.js│ ├── temp.json│ └── temp.md├── package.json└── yarn.lock 当然每个人有自己习惯的方式记录着日常工作与生活。我平时是使用这种方式，当然这个记录里涉及了很多工作上的信息，目前仅在内部的 gitlab ...

简介lottie 是一个可以轻易的给各种 native app 添加高质量动画的类库。可以在 iOS、Android 和 React Native 实时渲染 After Effects 动画，就像使用静态图片一样容易。上图即为 lottie 的 logo。 简单的说，lottie 动画制作的流程是，通过 Bodymovin 扩展将 AE 动画导出为 json 数据，然后再将这个 json 渲染在客户端或者 web 端。如下图： 官网宣传了3个特性： 灵活使用AE的特性 随心所欲控制你的动画 很小的文件体积 个人认为 lottie 最大的优势就是可以将设计师设计的动图原原本本的在页面上展现出来，完美还原了动画的精细度，并且对动画拥有足够的控制能力。目前所有使用 gif 或 apng 的场景应该都可以使用 lottie，当然 lottie 不局限与此场景。 本文主要从设计师视角和开发者视角讲述 lottie-web 的原理和使用以及 lottie 在 weex/rax 中的使用。 Demo 设计师视角准备在 AE 中为 lottie 创作动画，你需要以下准备 Ad ...

Babel 用于将 ES6 的代码转化为 ES5，使得 ES6 可以在目前的浏览器环境下使用。学习使用 babel 是为了使用 ES2015 做准备。本文将介绍如何使用 babel，以及一些相关的配置。 学习 Babel 可以通过其手册 Babel handbook。 babel-handbook 其中包含多语言版本，分为用户手册和插件手册。这是一个很好的学习 Babel 的资料。 babel-cli在 node 和 npm 环境安装好的前提下，安装 babel，如下： 1npm install --global babel-cli 安装完成后就可以编译文件了。 1babel main.js 编译后的文件显示在终端上，可以添加其他命令让它输出到指定文件下： 123babel example.js --out-file compiled.js或babel example.js -o compiled.js 或将整个目录编译成一个新的目录： 123babel src --out-dir lib或babel src -d lib 但这很麻烦，并且并不是一个很好的解决方案，请看下一节项目 ...

问题描述我们每次使用命令 1git clone git@gitlab.xxx.com:xxxxx.git 默认 clone 的是这个仓库的 master 分支。如果最新的代码不在 master 分支上，该如何拿到呢？如下图所示，最新的代码可能在daily/1.4.1分支上，我们希望拿到这个分支上的代码。 解决方法刚刚开周会的时候，自己洋洋得意的分享我的解决方案，但是……经过与团队成员的的讨论，自己的方法弱爆了，现在把更优雅的方法写一下。原来写的方法并不太适合用在这个场景里。 我之前写的方法在文章后面。 直接使用命令 1git branch -r #查看远程分支 或 1git branch -a #查看所有分支 会显示 1234567origin/HEAD -> origin/masterorigin/daily/1.2.2origin/daily/1.3.0origin/daily/1.4.1origin/developorigin/feature/daily-1.0.0origin/master 然后直接 1git checkout origin/daily/1.4.1 就好 ...

content{:toc} 简单来说 Fisher–Yates shuffle 算法是一个用来将一个有限集合生成一个随机排列的算法（数组随机排序）。这个算法生成的随机排列是等概率的。同时这个算法非常高效。 本文主要介绍这个算法的来源、演变、原理。并举出一个例子为大家清晰的描述每次迭代过程。最后使用 JavaScript 代码将算法实现。 Fisher and Yates 的原始版 Fisher–Yates shuffle 的原始版本，最初描述在 1938 年的 Ronald Fisher（上图） 和 Frank Yates 写的书中，书名为《Statistical tables for biological, agricultural and medical research》。他们使用纸和笔去描述了这个算法，并使用了一个随机数表来提供随机数。它给出了 1 到 N 的数字的的随机排列，具体步骤如下： 写下从 1 到 N 的数字 取一个从 1 到剩下的数字（包括这个数字）的随机数 k 从低位开始，得到第 k 个数字（这个数字还没有被取出），把它写在独立的一个列表的最后一位 重复第 ...

关于写倒计时大家可能都都比较熟悉，使用 setTimeout 或 setInterval 就可以搞定。几秒钟或者几分钟的倒计时这样写没有问题，但是如果是长时间的倒计时，这样写就会不准确。如果用户修改了他的设备时间，这样的倒计时就没有意义了。今天就说说写一个精确的倒计时的方法。 原理众所周知 setTimeout 或者 setInterval 调用的时候会有微小的误差。有人做了一个 demo 来观察这个现象并对其做了修正。短时间的误差倒也可以接受，但是作为一个长时间的倒计时，误差累计就会导致倒计时不准确。 因此我们可以在获取剩余时间的时候，每次 new 一个设备时间，因为设备时间的流逝相对是准确的，并且如果设备打开了网络时间同步，也会解决这个问题。 但是，如果用户修改了设备时间，那么整个倒计时就没有意义了，用户只要将设备时间修改为倒计时的 endTime 就可以轻易看到倒计时结束是页面的变化。因此一开始获取服务端时间就是很重要的。 简单的说，一个简单的精确倒计时原理如下： 初始化时请求一次服务器时间 serverTime，再 new 一个设备时间 deviceTime deviceT ...

本文将介绍如何使用 JavaScript 创建文件，并自动/手动将文件下载。这在导出原始数据时会比较方便。 先上代码12345678910111213/** * 创建并下载文件 * @param {String} fileName 文件名 * @param {String} content 文件内容 */function createAndDownloadFile(fileName, content) { var aTag = document.createElement('a'); var blob = new Blob([content]); aTag.download = fileName; aTag.href = URL.createObjectURL(blob); aTag.click(); URL.revokeObjectURL(blob);} 很简单对吧，直接调用这个方法，传入文件名和文件内容，程序新建 a 标签，新建 Blob 对象，将文件名赋给 a ...

记录一下阅读蝴蝶书的笔记，本篇为第一部分包含书中前三章内容：语法、对象和函数。 原书中第一章为精华，做了一些周边介绍，略去。 语法空白这里说一下JavaScript的注释，一种是 /* */ 包围的块注释，另一种是 // 开头的行注释。 因为块注释的字符可能是JavaScript中正则表达式字面量，因此不是很安全，如： 123/* var rm_a = /a*/.match(s)*/ 标识符标识符由一个字母开头，后面可选择性的加上一个或多个字母、数字或下划线。要避免保留字。 标识符被用于语句、变量、参数、属性名、运算符和标记。 数字可以存在指数部分，100和1e2完全相等 1100 === 1e2 // true 使用isNaN来检测NaN。 字符串当年 JavaScript 被创建的时候，Unicode 是16位字符集，因此 JavaScript 字符串是16位的。 用双引号或单引号包裹。 重点说一下转义字符\ 反斜杠后面可以跟", ', \, /, b (backspace), f (formfeed), n, r (carriage return), t ...

记录一下阅读蝴蝶书的笔记，本篇为书中以下章节的笔记：继承、数组和正则表达式。 继承继承的两大好处：代码重用，引入一套类型系统的规范。 伪类JavaScript 通过构造器函数产生对象。 构造器调用模式，即用new前缀去调用一个函数。 1234567891011121314var Mammal = function(name) { this.name = name}Mammal.prototype.getName = function() { return this.name}Mammal.prototype.says = function() { return this.saying || ''};var myMammal = new Mammal('Herb')console.log(myMammal.getName()) //Herb 书中不推荐这样的写法。有很多风险。若忘记添加new前缀，this无法绑定到新的对象上。而是绑定到了全局对象上，破坏了全局变量环境。 ...

记录一下阅读蝴蝶书的笔记，本篇为书中最后一部分：方法、代码风格、优美的特性、毒瘤、糟粕等。 方法这一章主要介绍了一些方法集。这里写几个我不太熟悉的方法和要点吧。 array.join() 对于IE6/7，使用array.join()连接大量字符串的效率确实优于使用+元素运算符。但是目前主流的浏览器，包括IE8以后的版本，都对+元素运算符连接字符串做了特别优化，性能已经显著高于array.join()。 number.toExponential(fractionDigits) 把这个number转换成一个指数形式的字符串。 number.toFixed(fractionDigits) 将这个number转换成一个十进制形式的字符串。 毒瘤 注意全局变量的引入。 JavaScript 中 Unicode 是16位的。包含65536个字符（基本多文种平面 Basic Multilingual Plane）。剩下的百万字符中的每一个都可以用一对字符来表示。Unicode 把一对字符视为一个单一的字符，而 JavaScript 认为一对字符是两个不同的字符。 检测nul ...

Swager使用手册[TOC] 前言 如何编写基于OpenAPI规范的API文档 编写目的本文介绍如何使用Swagger编写API文档。通过阅读本文，你可以： 了解swagger是什么 掌握使用swagger编写API文档的基本方法 第一章 简介Swagger Swagger是一个简单但功能强大的API表达工具。 使用Swagger生成的API，我们可以得到交互式文档 OpenAPI规范OpenAPI规范是Linux基金会的一个项目，试图通过定义一种用来描述API格式或 API定义的语言，来规范RESTful服务开发过程。OpenAPI规范帮助我们描述一个 API的基本信息，比如： 有关该API的一般性描述 可用路径（/资源） 在每个路径上的可用操作（获取/提交…） 每个操作的输入/输出格式 目前V2.0版本的OpenAPI规范（也就是SwaggerV2.0规范）已经发布并开源在github上。该文档写的非常好，结构清晰，方便随时查阅。关于规范的学习和理解 为啥要使用OpenAPI规范 OpenAPI规范这类API定义语言能够帮助你更简单、快速的表述API，尤其是在A ...

linux 的 apt update && apt upgrade -y linux 的升级命令 12345678910update update is used to resynchronize the package index files from their sources. The indexes of available packages are fetched from the location(s) specified in /etc/apt/sources.list. For example, when using a Debian archive, this command retrieves and scans the Packages.gz files, so that information about new and updated packages is available. An update should always be performed before an upgrade or dist-upgrade. Please be ...

利用hexo+github 搭建个人博客 搭建环境 进入root 用户 123➜ sudo suPassword:sh-3.2# 安装node包 官网下载安装包直接安装，一直下一步 安装淘宝镜像 1npm install -g cnpm --registry=https://registry.npm.taobao.org 安装hexo-cli博客 1cnpm install -g hexo-cli 新建博客文件夹 1mkdir yourBlog // 创建博客文件夹 12cd yourBlog // 进入博客文件夹sudo hexo init // 用hexo脚手架初始化一个hexo博客项目 Hexo常用命令 1234hexo s // Run server 启动hexo new 'my new post' // Create a new posthexo generate // Generate static fileshexo deploy //Deploy to remote sites 部署到github ...