- 博客(55)
- 收藏
- 关注
RSS订阅
原创 GraphQL入门有这一篇就足够了
本文将从GraphQL是什么，为什么要使用GraphQL，使用GraphQL创建简单例子，以及GraphQL实战，四个方面对GraphQL进行阐述。说得不对的地方，希望大家指出斧正。github项目地址：https://github.com/Charming2015/graphql-todolist一、GraphQL是什么?关于GraphQL是什么，网上一搜一大堆。根据官网的解释就是一...
2018-10-08 13:39:16
152058
36
原创 基于Pierre Dellacherie算法实现俄罗斯方块的人工智能（python实现）《三》
基于Pierre Dellacherie算法实现俄罗斯方块的人工智能（python实现）《三》 本章主要讲述人工智能的实现。先讲解Pierre Dellacherie算法的基本知识，再讲解我是怎么实现的。一些有趣的背景知识为啥叫俄罗斯方块？：首先俄罗斯方块是一个俄罗斯人做的，这个无聊的人就是前苏联科学家阿列克谢·帕基特诺夫（铭记前辈）游戏规则就不说了，不懂的人都是没有童年...
2018-04-19 15:34:18
13234
9
原创 利用yeoman搭建自己的脚手架
背景平时开发vue项目我最喜欢的组合是: vue + vuex + axios + element + lodash但是每次初始化项目时都得：用vue-cli搭建vue + vuex安装引入axios安装引入element-ui安装lodash并设置为全局（配置eslint）这些步骤还是挺重复的。再者， 如果是公司团队开发就更需要统一的规范（如eslint规范），和统一的结构了...
2020-03-24 15:30:52
1174
原创 gulp入门
虽然现在是webpack盛行的时代，但是日常工作中仍有机会接触到gulp，特别是一些老一点的项目。本文旨在对gulp的入门，不在对gulp的高级使用，仅仅完成写一份gulpfile.js，浅层体会一些gulp即可。安装用npm命令初始化一下package.json，然后用npm装一下gulpnpm init -ynpm i gulp -s运行以下命令，看看gulp装好了没有np...
2020-03-16 21:14:10
464
原创 npx:调用项目内部安装的模块
背景最近在学gulp时，在局部安装了gulp，然后直接在终端使用gulp --tasks，结果报错'gulp' 不是内部或外部命令，也不是可运行的程序或批处理文件。我认真想了一下，因为我的包是装在项目内的（局部的），没有在环境变量里注册，当然就不能在终端直接使用了。（注：全局安装的node包是可以在终端直接使用的）那有没有办法在终端直接使用呢？有的。类似这样吧，直接进入node-m...
2020-03-16 12:03:48
760
原创 nrm:一个管理npm镜像源的工具
背景开发中经常会遇到以下问题：（以及一般解法）npm的默认源下载太依赖包太慢了 => npm config set registry https://registry.npm.taobao.org有时候开发还得用公司的npm源 => npm config set registry https://mycompony/npm-registry疑问： 老是这样切，烦不烦啊，我...
2020-03-15 23:50:30
601
原创 tinyMCE 5富文本编辑器学习使用（Vue-cli3中使用）
背景最近公司有一个需求，在一个div里面输入文字，而且还要支持富文本，大概就是要实现下面这个样子（图片从QuickBi截的，类似的需求）这一看我没头绪，不过发现策划跟我讲是抄QuickBi的，ok，那就去看看QuickBi。审查元素，然后看到类名是有明显特征的：百度一下这个类名，基本上就知道这个是用了TinyMCE这个富文本库了。ok，开始研究这个编辑器最简demo搜索tiny...
2020-03-15 14:28:04
1092
1
原创 【docker笔记4】docker搭建MongoDB并使用RoBo 3T完成连接
拉取镜像docker pull mongo查看本地镜像docker images在上图中可以看到我们已经安装了最新版本（latest）的 mongo 镜像。运行容器docker run --name my-mongo -p 17017:27017 -d mongo参数解释：--name my-mongo容器名为my-mongo-p 17017:27017 容器内部服...
2020-03-11 23:19:57
379
原创 【docker笔记3】搭建nginx
1. 拉取Nginx镜像docker pull nginx（默认会下载最新版latest）2.查看本地镜像使用docker images检查nginx镜像是否已经下载到本地了在上图中可以看到我们已经安装了最新版本（latest）的 nginx 镜像。运行容器使用以下命令运行nginx容器：docker run --name=my-nginx -p 8080:80 -d nginx...
2020-03-11 22:46:39
153
转载 【docker笔记2】基本命令
一、基本命令docker version查看docker版本docker info查看docker详细信息docker --help查看docker命令二、镜像命令docker images查看docker镜像这些事我已经下载回来本地的镜像了。因为docker是写时复制的，所以只要下载过一次，后面其他容易再用到这个镜像就不用再次下载了。字段解释PEPOSITORY：镜像的仓库源...
2020-03-11 22:08:47
133
原创 【docker笔记1】简介与安装
最近在学习docker，顺便写点笔记。简介什么是dockerdocker是一个开源的应用容器引擎，开发者可以打包自己的应用到容器里面，然后迁移到其他机器的docker应用中，可以实现快速部署。如果出现的故障，可以通过镜像，快速恢复服务。原理docker是利用Linux内核虚拟机化技术（LXC），提供轻量级的虚拟化，以便隔离进程和资源。LXC不是硬件的虚拟化，而是Linux内核的级别的...
2020-03-11 21:53:36
252
原创 MutationObserver的基本使用与实际应用场景
MutationObserver说白了就是一个可以监听DOM树改变的东西，它的前身是Mutation Eventsvar observer = new MutationObserver(callback);callback，即回调函数接收两个参数，第一个参数是一个包含了所有 MutationRecord 对象的数组，第二个参数则是这个MutationObserver 实例本身。调用构造...
2019-11-07 11:29:18
1788
原创 对git的rebase（变基）的理解
其实git的官网对变基的解析挺详细的了：地址从原理上也能理解【变基】和【合并】有啥区别。我的理解是，【变基】和【合并】都能解决一个问题，那就是合并代码。但是他们的区别是：在master的记录上会有所不同。如下图：（我是用sourceTree做的合并与变基的）【合并】【变基】从上面那两个图可以看到，如果是【合并】的话，C4这一个记录其实还是在experiment分支上的，也就是说mas...
2019-11-07 10:51:07
5438
原创 Web Worker学习笔记
JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。一、简述Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。...
2019-08-11 22:51:38
247
原创 基于element-ui的级联多选选择器:el-cascader-multi
基于element-ui的级联多选选择器，友好显示下拉箭头，样式与element一致，支持多选与级联选择器的大部分功能。在线demogithub地址（含更新日志）npm地址效果预览install 安装npm i el-cascader-multi --saveuse 使用在main.js中写入下面的代码import elCascaderMulti from "el-cas...
2019-04-30 10:36:48
32444
26
原创 Vue.extend挂载到实例上
主要是做个笔记根据官网的说法，Vue.extend：是使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。官网的用法是：<div id="mount-point"></div>// 创建构造器var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}...
2018-11-05 20:55:36
4094
原创 echart饼图label超出绘图区域显示省略号
最近在工作遇到这样一个问题，在绘制饼图时，由于label文字过长，而超出了canvas的绘图区域，导致超出的label直接被截掉。dalao要我帮忙看一下这个问题…阐述问题：就像正常的思路一样，用个div标签，设置宽度，设定超出部分隐藏就好了。但是，这是canvas所以不能设div标签，再者，label的位置的不确定的，所以宽度也是不确定的。再加上我们公司的需求比较奇葩，我们要做的是l...
2018-09-20 21:06:31
21532
5
翻译 [每周一译]为何新的V8引擎如此的快
Node.js社区中的许多人都很高兴看到V8的最新更新，这次更新包括V8的编译器体系结构以及大部分的垃圾收集器。TurboFan取代了Crankshaft，Orinoco采用并行机制进行垃圾回收，以及其他应用的优化。第8版的Node.js附带了这个新改进的V8引擎，这意味着我们可以编写惯用的声明式JavaScript，而不必担心由于编译器的缺点而导致性能开销。V8团队也对这点进行了说明。由...
2018-09-04 13:02:51
1300
原创 2018前端进阶应该学什么（热词收集）
既然是前端进阶，那就不再是闭包之类的基础问题了。下面是我收集到的一些前端的基本功和前沿技术的名词概念，大家可以根据兴趣来学。学习方法：事件一些新的技术和概念抽取这些技术和概念，建造一个新的轮子把造轮子，实践的过程写成文章系统性的把这些文章整理成书基本功：模块化：自动化构建：webpack资源表加载优化，静态资源管理项目监控项目部署错误监控，错误收集，错...
2018-08-28 09:41:10
659
翻译 [每周一译]CSS和PWA：关于PWA的一些建议
近年来，由于移动设备的激增，我们的在线体验的有了一些重大转变。Web的发展使我们从网站的网页版，到桌面版和移动版，到根据屏幕大小自动调整页面的响应式网站，再到native mobile app，这些native mobile app可以将桌面体验做的像原生app一样，或者像响应式网站一样。所有这一切迭代变化的最新成果，就是是渐进式网络应用程序——PWA（ progressive web...
2018-08-24 18:18:58
641
翻译 [每周一译]color-adjust的应用前景
Open Web持续出现在我们原本无法想象的地方：我们的手机，电视，手表，书籍，视频游戏机，快餐菜单，燃气泵，电梯，汽车 ，甚至我们的冰箱。不用对怎么使用web进行太对严格的假设，它自身就很灵活而且很具适应性。这些特性使其能够超越Flash和Silverlight等封闭技术。随着网络的发展，新功能可以更好地适应新的外形和用例。其中使我兴奋的一个特性是，在css颜色模块等级4(CSS Col...
2018-08-17 09:31:40
1208
翻译 [每周一译]关于浏览器绘制对优化web性能的思考
Web浏览器对HTML，CSS和JavaScript的渲染过程非常复杂，并且很神奇。大概经历了下面几步：浏览器创建DOM和CSSOM。浏览器创建渲染树，把CSSOM中的DOM和样式也包括在内。（display:none属性的元素是不渲染的。）浏览器根据渲染树计算布局及其元素的位置。浏览器逐个像素地进行绘制，最终创建我们在屏幕上看到的样子。在本文中，我想重点关注最后一部分：绘制。...
2018-08-15 12:08:07
361
原创 前端做模糊搜索-简单正则版
简单介绍：模糊搜索就是不要求搜索字段是连续的，之后包含这些字就行，不连续也行。 例如：搜索bj 结果可以是beijing或者baoji 思路：思路也非常简单，用正则匹配结果就行。例如，关键词bj，拿来匹配的正则应该是/(.*)(b)(.*)(j)(.*)/i，忽略大小写。 观察目标正则的规律，发现也很简单: 1. 在每次关键字之间插入：)(.*)( 2. 然...
2018-08-09 14:25:54
6638
翻译 [每周一译]如何以及为什么要对Sass进行单元测试
如何以及为什么要对Sass进行单元测试原文：How and Why We Unit Test Our Sass ——LINDSEY WILD（06-25-18） 当设计系统是真实的来源，并且订户可以轻松自行修改代码时，代码经过充分测试就变得非常重要了。 Lindsey分享了我们如何对Sass进行单元测试以及如何进行单元测试。在Sparkbox社区，我们非常熟悉和喜爱设计系统，特别...
2018-08-02 21:05:59
331
原创 举例说明js节流与防抖之区别
1、 概念：函数防抖(debounce)在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。函数节流(throttle)规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上...
2018-07-26 20:52:57
1583
原创 【Kibana6.3.0】Kibana6入门小白教程之下载安装与数据准备
一、Kibana简介及下载安装 Kibana是专门用来为ElasticSearch设计开发的，可以提供数据查询，数据可视化等功能。 下载地址为：https://www.elastic.co/downloads/kibana#ga-release，请选择适合当前es版本的Kibana。 注意:kibana需要安装JDK和Elasticsearch，安装教程看我的： Kiba...
2018-07-26 20:23:15
4249
2
原创 用Vue开发kibana6插件
kibana版本：6.1.1 注意本次教程为kibana6.1.1版本的插件开发，由于kibana6.3.0及以上版本用Kibana Plugin Generator生成插件模板，我试过，但是改了插件模板的代码之后，服务一直处于restarting server状态，故我把kibana版本退到6.1.1，而且生成插件的模板也变成sao，下文有说。一、搭建环境step1： 把kib...
2018-07-26 20:21:52
7049
17
原创 kibana6.3.0开发环境搭建
背景讲述：首先说明一个问题，想要开发kibana的插件就必须在kibana的开发环境下开发以前（kibana6.3.0版本以前）都是用template-kibana-plugin也就是sao来生成开发插件的模板的。需要自己去下载npm install -g sao然后再跑起来。还是想用这个方法的可以浏览这些文章： 1. kibana-plugin-development-tuto...
2018-07-19 18:40:10
4378
15
原创 kibana 6.3.0版本开发环境配置失败（yarn kbn bootstrap）解决方案
问题描述： 跟着教程配置kibana的开发环境时，运行命令yarn kbn bootstrap时报如下错误：Installing dependencies in [@kbn/es]:[1/4] Resolving packages...[2/4] Fetching packages...[3/4] Linking dependencies...error An unexpected...
2018-07-18 17:40:40
3846
4
转载 [转]git的GUI工具Sourcetree使用及命令行对比
git的GUI工具Sourcetree使用及命令行对比1.提交推送流程 1. 勾选要提交的文件 2. 填写提交说明内容 3. 想提交直接推送到代码仓库时，勾选左下角按钮 4. 最后点击提交按钮即可完成代码推送等同于git add index.html //添加暂存文件git commit -m "feat(index): 新增index.htm首页内容" /...
2018-07-18 13:50:28
2490
原创 [Codewars]-Last digit of a huge number
超级大的数字的最后一位数字（python）题目：这个跟普通的大数取模（快速幂取模）有一点点不一样，这个题目是多次取幂例如：给出一个数组（列表）[x1, x2, x3, ..., xn]，你需要找到x1 ^ (x2 ^ (x3 ^ (... ^ xn)))这个大数的最后一位数字思路：细心观察每个个位数的倍数的对10求余数，会发现以下规律0:[0,0,0,0],1:[1,1,...
2018-07-16 19:06:33
1535
2
原创 js实现固定区域内的不重叠随机圆
关键词：js、固定区域、不重叠、随机圆，半径固定、半径随机最近公司有一个需求就是在一个固定的区域（500X500）内显示10个圆，且半径固定，而且不重叠因为圆的个数固定，而且半径固定，那么就有可能会没有解决方案。不过其实也没有很难，处理好半径的最大值就好了。思路：（固定半径） step1：先在区域内生成一个随机的圆心坐标， step2：然后拿一个固定半径（从大到小拿固定...
2018-07-16 12:42:21
11956
原创 [Codewars]-Last digit of a large number
大数字的最后一位数字（Last digit of a large number） ——大数取模题目：题目很简单，给出a,b两个数字，计算abab{a^b}的最后一位数字。例如：a=2,b=4，ab=24=16ab=24=16{a^b}=2^4=16，故16的最后一位数字应该是6思路：对于小数，直接计算然后取模（%10）就可以了但是对于大数，往往就会计算不出来或者十分费...
2018-07-13 12:42:57
968
原创 [Codewars]-Number of Proper Fractions with Denominator d
具有分母d的适当分数的数量(Number of Proper Fractions with Denominator d)题目：简单说就是以n为分母的，不能化简的，真分数，有多少个。以n=16举个例子： 5/16是符合题意的，而6/16可以化简为3/8故不合题意，不计算在内。一共有8个符合题意的真分数：1/15, 2/15, 4/15, 7/15, 8/15, 11/15, 13/1...
2018-07-11 12:08:50
652
原创 [Codewars]-Codewars style ranking system
Codewars风格的等级系统（Codewars style ranking system）题目：写一个名叫User的类，用于计算用户的得分和等级。（User类中必须包含rank和progress这两个属性，以及incProgress()这个方法）具体说明： 等级从-8到8依次递增等级不包含0级，也就是说-1级的下一级是1用户可以完成一些习题，这些习题也是有难度等级的每次用户完...
2018-07-10 13:35:18
914
1
翻译 vue2.0目录中的static和assets有什么区别[译]
Handling Static Assets（处理静态资源）或许你早就发现，在我们的项目结构中有两个目录来存放静态资源文件，src/assets和src/static。那么这两个文件到底有啥区别呢？Webpacked 资源要回答上面这个问题，我们首先要知道webpack是怎样打包静态资源：在*.vue组件中，所有的模板文件和css文件都会被vue-html-loader和css-loa...
2018-07-05 10:42:31
1369
原创 Kibana6安装使用(windows)
Kibana版本：6.3.0前提：保证安装了JDK前提：保证安装了Elasticsearch安装Elasticsearch：到官网下载elasticsearch：https://www.elastic.co/downloads/elasticsearch 解压进入bin目录，双击elasticsearch.bat打开http://localhost:9200/，发现显示...
2018-07-03 17:15:21
6053
2
转载 vue-resource 拦截器（interceptor）的使用详解
本篇文章主要介绍了vue-resource 拦截器（interceptor）的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧拦截器-interceptor在现代的一些前端框架上，拦截器基本上是很基础但很重要的一环，比如Angular原生就支持拦截器配置，VUE的Axios模块也给我们提供了拦截器配置，那么拦截器到底是什么，它有什么用？...
2018-06-20 11:24:29
5042
原创 git命令的基本操作
已有同名文件夹时的操作git init git remote add origin <你的项目地址> //注:项目地址形式为:http://git.oschina.net/xxx/xxx.git或者 git@git.oschina.net:xxx/xxx.gitgit clone <项目地址>新克隆一个项目的时候git init git c...
2018-06-14 13:54:33
214
转载 js 对象转url参数
很多时候都需要在url上拼接参数 对于参数比较少的时候，用字符串拼接是可以的，而且比较快和直观 但是参数一旦多起来，字符串就会变得很长而且不美观 es6出来之后可以用模板字符串拼接 但是对于有很多参数的时候，还是不够直观 于是有了以下的urlEncode函数// es6 模板字符串var name = 'charming'var id = 1va...
2018-06-11 10:44:12
19294
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人