前端
__Charming__
多看算法多打码
展开
-
利用yeoman搭建自己的脚手架
背景平时开发vue项目我最喜欢的组合是: vue + vuex + axios + element + lodash但是每次初始化项目时都得:用vue-cli搭建vue + vuex安装引入axios安装引入element-ui安装lodash并设置为全局(配置eslint)这些步骤还是挺重复的。再者, 如果是公司团队开发就更需要统一的规范(如eslint规范),和统一的结构了...原创 2020-03-24 15:30:52 · 1176 阅读 · 0 评论 -
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 · 467 阅读 · 0 评论 -
tinyMCE 5富文本编辑器学习使用(Vue-cli3中使用)
背景最近公司有一个需求,在一个div里面输入文字,而且还要支持富文本,大概就是要实现下面这个样子(图片从QuickBi截的,类似的需求)这一看我没头绪,不过发现策划跟我讲是抄QuickBi的,ok,那就去看看QuickBi。审查元素,然后看到类名是有明显特征的:百度一下这个类名,基本上就知道这个是用了TinyMCE这个富文本库了。ok,开始研究这个编辑器最简demo搜索tiny...原创 2020-03-15 14:28:04 · 1092 阅读 · 1 评论 -
MutationObserver的基本使用与实际应用场景
MutationObserver说白了就是一个可以监听DOM树改变的东西,它的前身是Mutation Eventsvar observer = new MutationObserver(callback);callback,即回调函数接收两个参数,第一个参数是一个包含了所有 MutationRecord 对象的数组,第二个参数则是这个MutationObserver 实例本身。调用构造...原创 2019-11-07 11:29:18 · 1789 阅读 · 0 评论 -
对git的rebase(变基)的理解
其实git的官网对变基的解析挺详细的了:地址从原理上也能理解【变基】和【合并】有啥区别。我的理解是,【变基】和【合并】都能解决一个问题,那就是合并代码。但是他们的区别是:在master的记录上会有所不同。如下图:(我是用sourceTree做的合并与变基的)【合并】【变基】从上面那两个图可以看到,如果是【合并】的话,C4这一个记录其实还是在experiment分支上的,也就是说mas...原创 2019-11-07 10:51:07 · 5438 阅读 · 0 评论 -
2018前端进阶应该学什么(热词收集)
既然是前端进阶,那就不再是闭包之类的基础问题了。下面是我收集到的一些前端的基本功和前沿技术的名词概念,大家可以根据兴趣来学。学习方法:事件一些新的技术和概念抽取这些技术和概念,建造一个新的轮子把造轮子,实践的过程写成文章系统性的把这些文章整理成书基本功:模块化:自动化构建:webpack资源表加载优化,静态资源管理项目监控项目部署错误监控,错误收集,错...原创 2018-08-28 09:41:10 · 659 阅读 · 0 评论 -
[每周一译]color-adjust的应用前景
Open Web持续出现在我们原本无法想象的地方:我们的手机,电视,手表,书籍,视频游戏机,快餐菜单,燃气泵,电梯,汽车 ,甚至我们的冰箱。不用对怎么使用web进行太对严格的假设,它自身就很灵活而且很具适应性。这些特性使其能够超越Flash和Silverlight等封闭技术。随着网络的发展,新功能可以更好地适应新的外形和用例。其中使我兴奋的一个特性是,在css颜色模块等级4(CSS Col...翻译 2018-08-17 09:31:40 · 1211 阅读 · 0 评论 -
[每周一译]关于浏览器绘制对优化web性能的思考
Web浏览器对HTML,CSS和JavaScript的渲染过程非常复杂,并且很神奇。大概经历了下面几步:浏览器创建DOM和CSSOM。浏览器创建渲染树,把CSSOM中的DOM和样式也包括在内。(display:none属性的元素是不渲染的。)浏览器根据渲染树计算布局及其元素的位置。浏览器逐个像素地进行绘制,最终创建我们在屏幕上看到的样子。在本文中,我想重点关注最后一部分:绘制。...翻译 2018-08-15 12:08:07 · 362 阅读 · 0 评论 -
前端做模糊搜索-简单正则版
简单介绍:模糊搜索就是不要求搜索字段是连续的,之后包含这些字就行,不连续也行。 例如:搜索bj 结果可以是beijing或者baoji 思路:思路也非常简单,用正则匹配结果就行。例如,关键词bj,拿来匹配的正则应该是/(.*)(b)(.*)(j)(.*)/i,忽略大小写。 观察目标正则的规律,发现也很简单: 1. 在每次关键字之间插入:)(.*)( 2. 然...原创 2018-08-09 14:25:54 · 6638 阅读 · 0 评论 -
[每周一译]CSS和PWA:关于PWA的一些建议
近年来,由于移动设备的激增,我们的在线体验的有了一些重大转变。Web的发展使我们从网站的网页版,到桌面版和移动版,到根据屏幕大小自动调整页面的响应式网站,再到native mobile app,这些native mobile app可以将桌面体验做的像原生app一样,或者像响应式网站一样。所有这一切迭代变化的最新成果,就是是渐进式网络应用程序——PWA( progressive web...翻译 2018-08-24 18:18:58 · 641 阅读 · 0 评论 -
[每周一译]为何新的V8引擎如此的快
Node.js社区中的许多人都很高兴看到V8的最新更新,这次更新包括V8的编译器体系结构以及大部分的垃圾收集器。TurboFan取代了Crankshaft,Orinoco采用并行机制进行垃圾回收,以及其他应用的优化。第8版的Node.js附带了这个新改进的V8引擎,这意味着我们可以编写惯用的声明式JavaScript,而不必担心由于编译器的缺点而导致性能开销。V8团队也对这点进行了说明。由...翻译 2018-09-04 13:02:51 · 1301 阅读 · 0 评论 -
echart饼图label超出绘图区域显示省略号
最近在工作遇到这样一个问题,在绘制饼图时,由于label文字过长,而超出了canvas的绘图区域,导致超出的label直接被截掉。dalao要我帮忙看一下这个问题…阐述问题:就像正常的思路一样,用个div标签,设置宽度,设定超出部分隐藏就好了。但是,这是canvas所以不能设div标签,再者,label的位置的不确定的,所以宽度也是不确定的。再加上我们公司的需求比较奇葩,我们要做的是l...原创 2018-09-20 21:06:31 · 21552 阅读 · 5 评论 -
GraphQL入门有这一篇就足够了
本文将从GraphQL是什么,为什么要使用GraphQL,使用GraphQL创建简单例子,以及GraphQL实战,四个方面对GraphQL进行阐述。说得不对的地方,希望大家指出斧正。github项目地址:https://github.com/Charming2015/graphql-todolist一、GraphQL是什么?关于GraphQL是什么,网上一搜一大堆。根据官网的解释就是一...原创 2018-10-08 13:39:16 · 152090 阅读 · 36 评论 -
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 阅读 · 0 评论 -
基于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 · 32448 阅读 · 26 评论 -
Web Worker学习笔记
JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力。一、简述Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。...原创 2019-08-11 22:51:38 · 248 阅读 · 0 评论 -
举例说明js节流与防抖之区别
1、 概念:函数防抖(debounce)在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。函数节流(throttle)规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上...原创 2018-07-26 20:52:57 · 1584 阅读 · 0 评论 -
用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 · 7051 阅读 · 17 评论 -
Vue2.0下使用json-server (dev-server失踪解决方法)
前言vue-cli(版本更新),由原来的2.8.1升级为2.9.1。主要改变是原来在build文件夹下的dev-server.js删掉了,增加了webpack.dev.conf.js。- 很多的文章都是要修改dev-server文件内容的,如:Vue-cli-使用json-server在本地模拟请求数据 - 但是我根本找不到这个文件! - 在网站找了很多方法,要么就是都比较复杂,对于v...原创 2018-05-11 18:00:38 · 1758 阅读 · 1 评论 -
js实现固定区域内的不重叠随机圆
关键词:js、固定区域、不重叠、随机圆,半径固定、半径随机最近公司有一个需求就是在一个固定的区域(500X500)内显示10个圆,且半径固定,而且不重叠因为圆的个数固定,而且半径固定,那么就有可能会没有解决方案。不过其实也没有很难,处理好半径的最大值就好了。思路:(固定半径) step1:先在区域内生成一个随机的圆心坐标, step2:然后拿一个固定半径(从大到小拿固定...原创 2018-07-16 12:42:21 · 11958 阅读 · 0 评论 -
[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 评论 -
[Codility]TapeEquilibrium
题目:TapeEquilibrium思路:细心观察会发现,其实每次两个值的差delta就是上一个差减去2倍的下一个数举个路子说明,比如数组A=[3, 1, 2, 4, 3],第一个差值是|3-10|=7,第二个差值是|4-9|=5,其实 5=7-2*A[1],那么下一个差值就是 |5-2*A[2]|=1注意耗时就行解答:function solution(A) { ...原创 2018-03-22 15:31:05 · 867 阅读 · 0 评论 -
[Codility]-FrogJmp
[Codility]-FrogJmp这是一道简单题,别往难处想,但也要巧妙题目解释:小青蛙在X位置,想去Y位置,它每跳一次可以前进D距离,问至少要跳多少次?思路:一开始我直接X+D…+D&amp;gt;=Y,统计加了多少个D,但是时间超了后来发现其实很简单。解答:function solution(X, Y, D) { return Math.ce...原创 2018-03-22 15:46:46 · 470 阅读 · 0 评论 -
[Codility]-PermMissingElem
[Codility]-PermMissingElemCodility的简单题目其实不难,关键还是要读懂题目。。。我就是踩了这样的坑。题目:给定一个长度为N的数组,数组元素是范围在(1,N+1)的互不相同的整数。请你找出缺少的数字。例:给定数组[2,3,1,5],你应该返回4特别说明: 如果给定的数组是[1,2,3,4],你应该返回4(4为第一个缺失的元素)如果给定的数...原创 2018-03-22 16:30:03 · 335 阅读 · 0 评论 -
[Codewars]-Gap in Primes
Gap in Primes题目:Gap in Primes题目简单说一下题目,在给定的整数m,n之间,找出所有间隔为g的素数对,而且这个素数对之间没有其他素数,返回小的那个素数对。gap(g,m,n)举个例子:gap(2,2,50)2和50之间,间隔为2的素数对有3-5, 5-7, 11-13, 17-19, 29-31, 41-43,应该返回[3,5]。如果找不到则返回...原创 2018-03-22 17:56:23 · 466 阅读 · 0 评论 -
[Codewars]-Integers: Recreation One
[Codewars]-Integers: Recreation One题目:在(m,n)(m,n)(m,n)范围内,找出符合一下条件的数k: -k的约数的平方和sumsumsum是一个平方数返回[k,sum][k,sum][k,sum]如:42的约数有1, 2, 3, 6, 7, 14, 21, 42,他们的平方是1, 4, 9, 36, 49, 196, 441, 1764,...原创 2018-03-22 20:56:20 · 514 阅读 · 0 评论 -
[Codewars]-Sudoku Solution Validator
[Codewars]-Sudoku Solution Validator题目:检查9*9数独矩阵是否有效。根据三个条件判定: 1.每行数字不重复(1~9)2.每列数字不重复(1~9)3.9个3*3的九宫格数字不重复(1~9)思路:直接解就行解答:function validSolution(board){ //TODO var len = b...原创 2018-03-23 15:23:20 · 889 阅读 · 0 评论 -
[Codewars]-Roman Numerals Encoder
[Codewars]-Roman Numerals Encoder题目:阿拉伯数字转罗马数字给个对应表 symbol value I 1 V 5 X 10 L 50 C 100 D 500 M 1000- ps:2000 -&gt; MM,8000 -&gt; MMM...原创 2018-03-23 20:52:59 · 306 阅读 · 0 评论 -
[Codewars]-Pascal's Triangle
[Codewars]-Pascal’s Triangle题目:就是杨辉三角让你输出三角形的全部元素,以数组的方式思路:既然杨辉三角的下一列,除了左右两元素是1之外,中间元素是根据上一列得来的。我们模仿这个思路就行了解答:function pascalsTriangle(n) { //return a flat array representing the...原创 2018-03-23 21:00:54 · 179 阅读 · 0 评论 -
[Codewars]-Longest Common Subsequence
[Codewars]-Longest Common Subsequence题目:编写一个函数LCS接受两个字符串,并返回传入的最长子字符串题目的意思有点说不明白。我试着去解释下,就是要返回两个函数的共有的字符组成的字符串,而且是从左往右按顺序的。举个例子:finaltest zzzfinallyzzz得返回final"anothertest", "notatest"需要返回nott...原创 2018-03-23 22:06:21 · 233 阅读 · 0 评论 -
[Codewars]-Pyramid Slide Down
[Codewars]-Pyramid Slide Down(2018/3/31更新)题目:从金字塔顶端到底部,寻找一条最长的路径。思路:动态规划就行了这里我简单解释一下动态规划方法,从底部开始,把倒数第二层每个元素,分别加上下一层的相邻元素(可以选的下一步),,把最大的一个(最优的下一步)作为这层(倒数第二层)的新元素。比如: 3 7 4 2 4 6 ...原创 2018-03-24 17:11:21 · 825 阅读 · 0 评论 -
[Codewars]-Explosive Sum(递归法和动态规划法)
[Codewars]-Explosive Sum题目:翻译成中文是整数分拆简单说:一个整数可以分拆若干个整数之和,问这种组合有多少种?举个例子:整数4,可以是1+1+1+1, 1+1+2, 1+3, 2+2, 4共5种,故应该返回5.思路:思路可以参考百度:整数分拆我简单解释下:把一个整数分割成若干个不大于m的整数的和,符合以下规律 这样思路就很清晰了,直接用递归...原创 2018-03-31 14:26:32 · 1111 阅读 · 0 评论 -
[Codewars]-Find the unknown digit
[Codewars]-Find the unknown digit题目:找到使等式成立的未知数有几条原则: 两个0连续00,这是一个不合法的数字两个减号--,其实是一个加号+未知数是等式里未出现过的数字如果有多个数字使等式成立,返回最小的如果未找到使等式成立的数字,返回-1思路看清楚题目的原则时候,直接写代码就行一定要记住的是未知数是等式里未出现过的数字 ,...原创 2018-03-31 15:53:31 · 456 阅读 · 0 评论 -
[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 · 653 阅读 · 0 评论 -
js 对象转url参数
很多时候都需要在url上拼接参数 对于参数比较少的时候,用字符串拼接是可以的,而且比较快和直观 但是参数一旦多起来,字符串就会变得很长而且不美观 es6出来之后可以用模板字符串拼接 但是对于有很多参数的时候,还是不够直观 于是有了以下的urlEncode函数// es6 模板字符串var name = 'charming'var id = 1va...转载 2018-06-11 10:44:12 · 19297 阅读 · 0 评论