机智的皮卡丘-优快云博客

原创前端资源收集

视频js https://github.com/Bilibili/flv.js bilibili的FLV视频js https://chimee.org/docs/index.html Chimee — 一套可扩展的H5视频播放器组件化框架

2018-01-26 09:51:58 307

原创个人服务器资源列表

gnvm.exe Xshell.exe

2017-12-22 22:58:18 672

最近在做跨页面的广播通信，相对于前端来说用的比较少，主要使用了broadcast Channel，他可以在同源的浏览器tab中相互通信，类似localstorage，使用的发布订阅模式使用方法如下。const channel= new BroadcastChannel('eventCode');channel.postMessage('')// 需要触发的页面new之后监听channel.onmessage =function(e) { console.log('接收到消息:', e.d.

2020-08-13 16:30:29 539

原创 Nodejs做服务端的优缺点

好久没有写博客了，作为一个小前端最近还是有点纠结后端语言用什么的，来分析一波nodejs在后端语言中的优缺点。缺点：1.nodejs单线程，不能做cpu密集型操作，导致时间片不能释放，阻塞后面的任务。2.nodejs可靠性比较低，一个地方报错会导致整个程序崩溃，需要守护进程或者docker重启来解决。3.像使用多核性能的时候需要使用cluster或者部署多个实例，比较麻烦。4.内存默认0.7G和1.4G，设置大了之后垃圾回收会变慢，可能需要多部署几个实例。5.nodejs类型的后端...

2020-07-31 23:38:18 12685

原创 dva常用功能及配置

最近用了下create-react-app，后来发现有个dva的脚手架就尝试了一波，感觉资料较少，所以花了些时间，给大家列下常用功能的配置方法。1.端口设置修改package.json中的linx/macos"scripts": { "start": "PORT=3000 roadhog server"}window"scripts": { "start": "set PORT=3000 && roadhog server"}2.proxy代理功能修改.webpac

2020-05-27 18:22:29 1139

原创 mac中GO安装覆盖旧版本不生效问题

大家好，我是古天乐，好长时间没写博客了，今天给大家带来Go语言安装覆盖问题的处理。大家肯定会比较疑惑为啥删了/usr/local/go,还能在某些终端里go version出版本吧，而且升级无效。执行以下操作删除 /usr/local/go删除 /usr/local/cellar/go里面的文件安装官网下载安装包安装重新启动...

2020-03-10 18:08:24 1758

原创 vscode下写vue的setting

{ "workbench.colorTheme": "Solarized Light", "window.zoomLevel": 2, "editor.detectIndentation": false, // 保存时自动fix "eslint.autoFixOnSave": true, // 添加 vue 支持 "eslint.valida.

2018-11-29 12:17:10 3203

原创 npm ERR! write after end

尝试以下命令npm install -g npm@latestnpm cache verify

2018-10-22 16:04:27 2181

原创 PWA程序相关介绍

官网上对PWA的宣传是这四个关键字：可靠、快速、Engaging、安全；再点进去PWA的主页，会发现还有Instant Loading、添加自主屏、通知推送、响应式，而官方教程就更棒了，一次性给了10个关键字！包括Progressive, App-like, Fresh, Installable……什么是渐进式Web应用程序？渐进式Web应用程序是：渐进式 - 适用于所有用户，无论浏览器的选择是

2018-03-27 11:10:33 600

原创 webpack4

还好前面写webpack3.x稍微赶上了点热度,最近在准备重构,还在考虑要不要使用parcel,正好发布了webpack4.0.0，就研究了下,修改还是比较大的。包含了大量的特性更新, 以及极大的性能优化(最高可达 98%)Webpack 4 中移除了 CommonsChunkPlugin, 替换以一系列默认的配置以及简单的 optimize.splitChunks 接口同时 Webpack 4 ...

2018-02-28 15:30:05 9682

原创 js 设计模式六大基本原则（未完成）

1.单一职责原则定义：一个类只提供一种功能，不要存在多于一个导致类变更的原因。问题由来：类T负责两个不同的职责：职责P1，职责P2。当由于职责P1需求发生改变而需要修改类T时，有可能会导致原本运行正常的职责P2功能发生故障。解决方案：遵循单一职责原则。分别建立两个类T1、T2，使T1完成职责P1功能，T2完成职责P2功能。这样，当修改类T1时，不会使职责P2发生故障风险；同理，当修改T2时，也不

2018-02-27 16:33:48 1404

原创 JS原型链详解

好久没写博客了，比较忙，最近的话同事正好在研究原型链，我也顺便自己复习了下，顺便总结归纳，尽可能的写的详尽一些。下面这幅图就是一个比较全面的原型链的图，在图中有两个比较容易搞混的单词，一个是 proto （隐式原型）一个是prototype（显式原型），这两个名词形成了原型链的爱恨情仇。下面我们看下这两个原型出自哪里，比较重要下面的图片是从知乎上面弄下来的祖传老图，被

2018-01-17 20:11:30 534

原创 nodejs的桌面应用（electron）

最近发现nodejs可以做桌面应用，主要是之前的同事在搞，我也要稍微研究下不能落后啊，基于nodejs的桌面应用，常用的就是nw.js和electron，nw出的比较早，资料比较多，bug也很多，它的前身是node-webkit文档可以参考nw.js，微信web开发工具、钉钉都是基于 nw.js 开发的，nw.js支持xp，还有很多人抱着xp过日子呢。而electron比较全比较新，在github的

2017-11-22 23:56:40 26660

原创 gnvm--window下的nodejs版本管理工具

刚来公司的时候公司用的nodejs版本是v6.0.0，后来想稍微搞下koa，但是koa只能支持7版本以上的，正好最近也是大版本升级，nodejs长期支持版本升级到了8.9.0，就像试试版本管理工具，正好同事用的gnvm，看看还是比较好用的就分享给大家gnvm.64.exe这个是我自己服务器上放的，因为很多下载的都可能要翻墙，所以就本地下了一个放出来下载之后将这个文件放在nodejs的文件根目录下，因

2017-11-10 23:46:21 996

原创 http2相关协议详解（express中开启http2流程）

最近想玩点新花样，所以就想搞下http2，之前公司也有搞过go语言的，一直对https和http2比较好奇，就锤了下。http2.0与1.1的性能对比这里有个从别人那里抄来的demo地址，上面分别使用和http1.1和http2来加载较大量的图片请求，差不多400个图片，http2的传输速度差不多是http1.1的2-4倍，极大地减少了网络的延迟。http2历史及相关技术2009年，谷歌公开了自行研

2017-11-06 18:58:34 4343 1

原创 github使用入门教程

github开源的项目数不胜数，如何使用github开源自己的项目呢，下面请跟着我来一步一步开始使用github吧首先先安装git软件，https://git-scm.com/downloads，选择相应的操作系统下载即可，然后安装。 git配置用户名和邮箱：在文件夹邮件git bash打开git的命令行，输入一下两句 // 写自己的名字和邮箱 git config –global user.

2017-10-16 16:29:58 467

原创前端服务器优化之设置max-age和gzip（express）

最近的话开始了一个新的项目，然后要重新做前端项目的优化，首先当然是优化最容易优化的地方了，就是强制缓存和gzip减少传输中的流量问题了，在express自带协商缓存所以不必去处理，之前项目是用nginx架在最外面的，所以贴代码安装gzip的相关插件npm install compression//app.js// gzip压缩const compression = require('comp

2017-09-30 15:01:38 2240

原创 webpack3最新版本配置研究（五） devtool，webpack-dev-server，CommonsChunkPlugin

devtooldevtool是webpack中config自带的属性只要使用就可以了不用安装 webpack官网的解释如下当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这

2017-08-27 22:33:08 5798

原创 webpack3最新版本配置研究（四）webpack压缩，clean-webpack-plugin，webpack-manifest-plugin，define-plugin

webpack.optimize.UglifyJsPlugin前端代码优化自然少不了压缩了，在webpack中也可以使用它的插件来进行自动压缩，非常的方便// A:webpack.config.js// B: ...// A: ...// 头部加上webpack的声明const webpack = require('webpack');// plugins里面加上一条配置new webp

2017-07-18 00:11:04 7242

原创 webpack3最新版本配置研究（三）多入口，html-webpack-plugin, extract-text-webpack-plugin

虽然现在有很多单页应用，不过还是多页面用的比较多一些，先研究了下多入口的配置//随便生成一个js来测试，我在根目录新建了一个entry.js文件console.log('123');之前的webpack.config.js的配置是这样的 entry: __dirname + "/index.js", output:{ // 打包后存放地址 path: _

2017-07-16 23:05:22 6679

原创 webpack3最新版本配置研究（二）loader

接上面的loaderurl-loader 现在来我们来试试加载图片，第一件事情肯定是安装对应的loader，可以将小图片转换成base64，减少请求 npm install url-loader file-loader –save-dev//修改index.html加两个div，背景图片设置成两张图片，一个小的，一个大的<!DOCTYPE html><html lang="en"><hea

2017-07-10 18:55:51 9655

原创 webpack3最新版本配置研究（一）loader

webpack这货还是挺火的,目前前端不管是react和vue都用这个打包,还是挺好用的，本文使用的时webpack2，使用的新配置，有很多旧的配置可能会出现报错，webpack3刚出希望变化不要太大！什么是WebpackWebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将

2017-07-03 00:26:19 5682

原创对称加密算法和非对称加密算法

（一）对称加密（Symmetric Cryptography）对称加密是最快速、最简单的一种加密方式，加密（encryption）与解密（decryption）用的是同样的密钥（secret key）,这种方法在密码学中叫做对称加密算法。对称加密有很多种算法，由于它效率很高，所以被广泛使用在很多加密协议的核心当中。对称加密通常使用的是相对较小的密钥，一般小于256 bit。因为密钥越大，加密越强

2017-06-16 18:47:36 6807 1

原创 Nodejs转发带cookie请求（superagent）

最近稍微研究了下nodejs的路由转发，主要是研究了下cookie的转发，这样可以共享cookie请求（不过服务器同域跨端口共享cookie也可以配），看了下网上的第三方框架，用了下request好像是不太好用，就用了下superagent来研究，talk is cheap，show you the codeexpress中转发cookie简例const express = require('exp

2017-06-16 15:27:11 13125 2

原创 ECMAScript 6 入门笔记（八）Proxy，Reflect

Proxyproxy用于修改某些操作的默认行为，等同于在语言层面作出修改，属于”元编程”。可以理解成架设一层“拦截”，外界对该对象访问都必须通过这层拦截。var obj = new Proxy({},{ get: function(){target, key, receiver}{ console.log(`getting ${key}`); return R

2017-05-03 14:55:51 712

原创 ECMAScript 6 入门笔记（七）Symbol,set和map

SymbolES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，前六种是：Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。let s = Symbol();typeof s// "symbol"注意，Symbol函数前不能使用new命令，否则会报错。这是因为生成的

2017-04-20 22:42:20 1154

原创 ECMAScript 6 入门笔记（六）Class

Classclass基本用法class Point{ constructor(x,y){ this.x = x; this.y = y; } toString(){ return "("+this.x+","+this.y+")"; } doStuff() { console.log('stuff'

2017-04-18 22:02:40 669

原创 ECMAScript 6 入门笔记（五）异步promise，Generator，async

前面弄完了ECMAScript6的基础对象扩展，下来来看下异步编程的三个方法PromisePromise.prototype.then() Promise.prototype.catch() Promise.all() Promise.race() Promise.resolve() Promise.reject() 两个有用的附加方法所谓Promise，简单说就是一个容器，里面保存着某

2017-04-01 18:53:44 1869

原创 ECMAScript 6 入门笔记（四）函数，对象

ECMAScript 6 入门笔记（三）数值，Array ECMAScript 6 入门笔记（一）let，const，解构 ECMAScript 6 入门笔记（二）String，RegExp函数函数参数的默认值function Point(x = 0, y = 0) { this.x = x; this.y = y;}var p = new Point();p // { x: 0,

2017-03-30 17:42:01 1045

原创 ECMAScript 6 入门笔记（三）数值，Array

ECMAScript 6 入门笔记（一）let，const，解构 ECMAScript 6 入门笔记（二）String，RegExp数值二进制和八进制表示法 Number.isFinite(), Number.isNaN() Number.parseInt(), Number.parseFloat() Number.isInteger() Number.EPSILON 安全整数和Numb

2017-03-29 17:13:27 888

原创 ECMAScript 6 入门笔记（二）String，RegExp

ECMAScript 6 入门笔记（一）let，const，解构字符串的扩展String1.字符的 Unicode 表示法 2.codePointAt() 3.String.fromCodePoint() 4.字符串的遍历器接口 5.at() 6.includes(), startsWith(), endsWith() 7.repeat() 8.padStart()，pa

2017-03-28 14:21:24 721

原创 ECMAScript 6 入门笔记（一）let，const，解构

最近重新看下阮一峰的ecmascript6教程，记性不太好，用的也不多所以记下笔记把自己认为重要的东西记录下来方便回顾，贴代码和调整下结构让查起来更快ECMAscript6 入门LET和CONSTES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。const声明一个只读的常量。一旦声明，常量的值就不能改变，const必须声明时就初始化。le

2017-03-27 13:04:17 988

原创前端模板handlebars.js

最近在维护一些jsp页面的前端部分，之前的老项目很多都是后端写前端的，时间比较长也没有vue和react这种，不过最近要开始改版了（兴奋），里面有一个模板填充数据的库叫handlebars.js，只要简单两步就可以将数据放到模板里面，生成字符串，然后就可以很容易的append到body里面了,下面只是简单的功能，可以稍微感受下，详细功能见handlerbar官网<!DOCTYPE html><ht

2017-03-24 10:27:11 559

转载 P2P、P2C 、O2O 、B2C、B2B、 C2C是什么

终于有人把P2P、P2C、O2O、B2C、B2B、C2C 的区别讲透了！ P2P、P2C 、O2O 、B2C、B2B、 C2C的概念解析P2P到底是什么呢?　　P2P借贷是一种将非常小额度的资金聚集起来借贷给有资金需求人群的一种民间小额借贷模式。P2P是“Peer-to-Peer”的简写，个人对个人的意思，P2P借贷指个人通过第三方平台(P2P公司)在收取一定服务费用的前提下向其他个人提供小额借贷

2017-03-21 13:18:16 759

原创理解云,IAAS，SAAS，PAAS

先写下看了网上的解释，比较地气的解释IaaS就是好像是阿里，腾讯，百度云服务器，环境什么的都没装 PaaS就是服务器里面帮你配了nodejs/java/go/php/python,需要自己写代码 SaaS就是类似于wordpress之类，已经有人帮你搞好程序了，你只要用就好了在家自己做这真是个麻烦事，你的准备很多东西，发面、做面团、进烤箱。。。。。买好速食披萨回家自己做着吃你只需要从

2017-03-16 13:42:18 698

原创 web首页加载优化

这也是我面试的时候经常碰到的一个问题，有的时候面试官表达的比较模糊，有的时候我不太明白意思（被首页这两个字迷惑），所以有点蒙，结果就答得不好，今天稍微整理了下1.书写标准1.将样式表放在头部 2.将脚本放在底部 3.使用外部的JavaScript和CSS，可缓存 4.减少DNS查找 5.避免重定向发出多次请求 6.减少重构重绘 7.减少DOM元素的数量 8.尽量减少DOM

2017-02-10 02:45:24 486

原创移动web和PCweb优化的区别

1、PC优化手段在Mobile侧同样适用。 2、在Mobile侧三秒种内渲染完成首屏指标或使用Loading。 3、基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB，加载时间就会越长，会增加网民访问的跳出率。 4、Mobile侧因手机配置原因，除加载外渲染速度也是优化重点，要合理处理代码减少渲染损耗。 5、加载完成后用户交互使用时也需注意性能。 6、

2017-02-10 02:41:51 2148 1

原创 2017前端招聘要求集合

要求熟练玩转前端技术三驾马车，掌握前端开发技术(HTML5、JS、JSON、XHTML、CSS3)，了解各项技术的相关标准，掌握Ajax异步编程；能够写出高性能、可复用的前端组件对OO、MVC、MVVM等编程思想有了解，对前端MV*框架有深刻理解，熟练掌握一个前端框架（Vuejs, AngularJS, React ）了解其原理；熟练掌握React、Redux及相关框架和技术，有单页

2017-02-06 23:30:51 4189

原创 chrome54以上版本flash不是最新版本解决方法

在最新的chrome中，目测跟着苹果一样，想不兼容的flash了，这让我看视频收到了很大的影响，像爱奇艺，优酷，斗鱼等都不能看了，显示个这个上网找了下找到了一个解决方案先百度搜adobe flash debugger，然后选官网这个下载页面下载这货，然后退出chrome，安装就行了为什么一个人发呆，是否还有一些无奈，不如和我一起摇摆，IT技术群252483493

2017-01-26 14:07:31 670

原创 vue2.0学习入门（webpack）

脚手架首先上官网进行脚手架工具的搭建vue官网，nodejs的安装可以看下 nodejs安装与配置npm install -g vue-cli vue init webpack my-project (在安装的时候eslint选择no比较安全)cd my-projectnpm installnpm run dev如果选择了yes，你会发现改改代码运行不起来了，看了下错误，希望获取到4个空

2017-01-23 19:11:04 570

空空如也

空空如也