木头的博客

我是木头 有些想法 有点精力

发表于 分类于

在 js 中，将内容复制到剪贴板的原理是利用 document.execCommand() 方法进行操作.

document.execCommand()

document.execCommand() 的签名是这样的

1
bool = document.execCommand(aCommandName, aShwoDefaultUI, aValueArgument)

需要注意的是，该命令复制的内容是当前页面选中的内容.

阅读全文 »

发表于 分类于

什么是动态规划

动态规划（DP, Dynamic Programming）

一句话总结：在求解一个复杂问题时，将其分解为若干个简单问题。通过求解简单问题的最优解，来找到目标问题的最优解。

动态规划能做什么

常见问题

怎么求解动态规划问题

我们通过一个例子来了解一下DP的基本原理。

首先，我们要找到某个状态的最优解，然后在它的帮助下，找到下一个状态的最优解。

如硬币问题的例子

硬币问题：如果我们有面值为1元、3元和5元的硬币若干枚，如何用最少的硬币凑够11元？

阅读全文 »

发表于 分类于

前言

因为最近在项目中经常需要将数组中的一个元素从数组中剔除，基于 ES6 的选择有比较多， 产生了一个关于几种方法之间执行效率的疑惑，网上也没有太多资料，于是乎本着学习性能测试的想法，展开了一段性能测试的旅程

测试工具

  • benchmark 性能测试核心依赖
  • mockjs 生成假数据
  • lodash 提供另外的筛选数组的方法用于参照
1
yarn add benchmark mockjs lodash

测试思路

首先定义四种方法来测试数据删除操作，他们分别是 Array.prototype.filter Array.prototype.splice lodash.reject lodash.filter

然后使用 mockjs 生成两个数组，长度分别是 100 和 1000，用四种方法分别对这两组数据进行测试。
需要注意的是，在测试时需要对测试数组进行深拷贝，避免他们之间相互影响(毕竟 Array.prototype.splice 会改变原数组)

然后我们对其中一组数据进行测试，来校验我们写的方法是否正确

最后运行 benchmark，比较结果得出结论

阅读全文 »

发表于 分类于

简介

testcafe (官网) 是一个基于 nodejs 的自动化测试框架，优点就先不多说了，我们直接进入正题！

安装

testcafe 是一个 npm 包，它可以使用 npm 或 yarn 包管理器进行安装，这里我们使用 yarn 进行安装（因为它很快）

如果你的机器上没有安装 yarn，那么你可以使用 npm 来安装 yarn 😊

1
npm install -g yarn

在命令行中运行以下命令

1
yarn global add testcafe

这样， testcafe 就安装在你本机上啦

小试牛刀

创建一个测试项目

我们新建一个目录，用于练习我们的自动化测试框架 testcafe

1
2
3
# 首先切换到你用于管理 web 项目的根目录，我本机是 "~/www"
cd ~/www
mkdir testcafe && cd testcafe
阅读全文 »

发表于 分类于

使用 Vue + Koa 打造全栈应用《时光·印象》图片分享应用 系列教程

前言

之前在学校用前端 pjax 无刷新跳转 + 后端 php 服务端渲染做了一个应用, 用来做校内的图片分享网站, 后来离校后就没怎么管了, 所以只做了一点就弃坑了.

最近又想起来那个项目, 所以这次抱着学习的心态使用 vue + koa 来重新将这个项目拾起来, 一方面可以学习一些当下的新框架了解前段发展趋势, 另一方面也可以充实下自己的简历.

选型

下面列出该项目的技术选型, 以及原因 (按重要程度排序)

  • Vue (v2.5) 单文件组件 响应式

    以及 vue-router vuex axios

    选 Vue 作为前端框架是因为他的单文件组件做模块化开发很方便, 还有现成的脚手架工具 vue-cli, 以及对 @尤大 的 信仰

  • Koa (v2.5) 中间件

    以及 koa-router koa-jwt

    选用 Koa 而非 Express 是因为 Express 了解过一些, 想换个口味试试. Express 也确实感受过回调地狱的痛, Koa 的洋葱模型似乎很不错!

    后端只用来提供 API 接口不做 SSR.

  • MySQL (v8.0) SQL Database

    常规的关系型数据库，深入学习一下 MySQL，为全栈发展打好坚实的基础

  • Eslint 语法检查 防傻瓜

    Eslint 进行代码风格检查和防傻瓜还是非常方便的, 尤其是配合其自带的 --fix 功能自动进行代码格式化. 避免在 coding 的过程中出现一些傻瓜式的语法错误带来的不必要的时间浪费.

    使用 Eslint Standard 配置（Vue 使用 @vue/standard 配置）

  • ES6, Stylus 语法糖 预处理

    语法糖! 提高 coding 效率. 但是 Stylus, 一个小众的 css 预处理器, 提供了非常高效和酷炫的写法.

  • Yarn 依赖安装

    用 Yarn 就是因为快! 比 npm 快了不是一丁半点! yarn 执行项目内 bin 文件也非常方便, 免去了安装全局依赖的烦恼.

阅读全文 »

发表于 分类于

tips: 解决办法在文章底部，请使用右侧导航直接跳转到 解决办法

问题描述

最近在使用 centos 7 时需要升级到 nodejs 10 版本，直接执行 yum update nodejs 发现 yum 源里还是 6.x，并且提示已经是最新版本了。。

？？什么鬼，去 nodesource 查看原来需要将 nodesource 源升级一下，so，执行以下命令

1
2
curl -sL https://rpm.nodesource.com/setup_10.x | bash -
yum upgrade nodejs

竟然发现还是 6.x 版本

1
2
3
4
5
6
7
8
====================================================================================================================
 Package               Arch                  Version                                Repository                 Size
====================================================================================================================
Installing:
 nodejs                x86_64                2:6.11.2-1nodesource                   nodesource                 17 M

Transaction Summary
====================================================================================================================

咦？难道是需要将 node 先卸载了吗？于是 yum remove nodejs 然后 yum install nodejs。。。然后是你猜到的结果，还还还还是 6.x 版本。。。

阅读全文 »

发表于 分类于

相信前端的同学们已经接触过栅格化布局了, 只要你用过 bootstrap 或者一些其他的 css 框架.

栅格化布局是一个非常方便的布局方式, 尤其是它的自适应布局, 可以根据屏幕大小缩放容器的宽度.

preview

今天我们用一个 css 预处理器 stylus 来编写一个 只有 50 行代码, 能自定义栅格数, 能响应多个断点, 能推能拉的栅格化布局!

阅读全文 »

发表于 分类于

前言

这里是一篇个人学习使用 Linux 操作系统时遇到的一些常见问题以及资料的集合. 用来在日后的操作中做一个 QA 索引. 如果它也能帮到你就再好不过了.

阅读全文 »

发表于 分类于

注意：无插件 Vim 笔记。个人使用 Vim 作为 tty 编辑器和辅助开发工具配合主力 IDE 使用（IDEA Vim、VSCode Vim），为了保证通用性与便捷性，本文无插件。

Vi 作为 Unix 系统自带的编辑器，流传至今是有一定道理的。在连接进远程服务器时，并不一定能够使用 GUI 进行操作，此时又一个趁手的编辑器就尤为重要了。

那是不是会进入编辑模式，能保存文件就够用了呢？哈哈，是的，但是 Vim 的强大完全可以作为日常编辑器使用，能极大的提升开发效率(是一种以大脑空间换时间的思路)，一起来看看吧！

阅读全文 »

发表于 分类于

使用技巧

现在的互联网都鼓励大家使用 Chrome 浏览器，它很强大，本身简洁，支持非常多的插件。但正因如此，大家都比较懒不愿意去花时间学习适应一个新的产品去打造适合自己的浏览器，所以我在这里写下一些使用 Chrome 浏览器的小技巧供大家参考学习。

搜索引擎相关

相信不少朋友不愿意使用 chrome 浏览器是因为它默认的搜索引擎是 google，而对于国内环境来说，普通用户不使用特别手段是上不了 google.com 的，所以你在地址栏输入向搜索的关键词时会跳转到 google 导致无法显示，从而必须先进入到 baidu.com 然后再进行搜索。

修改默认搜索引擎

那有没有简单的方法能够将 chrome 浏览器的默认搜索引擎切换为百度呢？当然有。

进入设置页面，找到 搜索引擎 一栏，将默认搜索引擎切换为百度即可

switch-search-engine

快捷切换搜索引擎

学到了上面的方法你还不满足，我想在多个搜索引擎中自由切换，比如搜技术类作品用 github，搜视频用 bilibili，搜百科用 wikipedia，搜地名用 map.baidu.com。

按照一般思路，搜百科用 wikipedia 的话要先去 zh.wikipedia.org，然后在该站点的搜索栏中键入要查询的关键字，总共两个步骤。

那我现在教你一个快捷的方法：直接在地址栏键入 wikipedia，然后按下 tab 键，会发现地址栏变成这样：（不过要保证你之前用过 wikipedia 的搜索功能）

阅读全文 »
0%