- 博客(37)
- 收藏
- 关注
RSS订阅转载 react hooks 全面转换攻略(三) 全局存储解决方案
针对 react hooks 的新版本解决方案一.redux维持原方案若想要无缝使用原来的 redux,和其配套的中间件 promise,thunk,saga 等等的话可以使用 redux-react-hookgithub 链接 redux-react-hook一个简单的使用例子:import {useDispatch, useMappedState} from 'red...
2019-06-05 17:31:00
624
转载 typescript进阶篇之高级类型与条件类型(Readonly, Partial, Pick, Record)
本文所有东西尽可在 typescript 官网文档寻找,但是深浅不一高级类型lib 库中的五个高级类型以下所有例子皆以 person 为例interface Person { name: string; age?: number;}Partial源码:type Partial<T> = { [P in keyof T]?: T[P]...
2019-06-04 15:16:00
2508
转载 react hooks 全面转换攻略(二) react本篇剩余 api
useCallback,useMemo因为这两个 api 的作用是一样的,所以我放在一起讲;语法:function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;function useCallback<T extends (...args: any[]) => a...
2019-04-14 21:24:00
300
转载 react hooks 全面转换攻略(一) react本篇之useState,useEffect
useState经典案例:import { useState } from 'react';function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> ...
2019-04-07 15:22:00
745
转载 略微讲讲最近的 webpack 该如何加快编译
首先假设 基础的环境是有 creat-react-app 所创建的即所有基础的loader,插件的 cache 都已经缓存了在这种情况下想加速,真是很难不过,有一个插件是可以观察 各个模块所花的时间的:speed-measure-webpack-plugin,他给了我们一个观察点有很多文章都会说 happypack 有能加速的效果但是经过我的实际测试,效果不明显甚至无效他的 ...
2019-02-24 23:12:00
126
转载 小记 react 数据存储位置
react 中状态的六个存储位置state我想大家都知道这个地方,而且在使用 setState 时会触发组件的更新class prop将值存在 class 的对象中,如:class App extends React.PureComponent{ count = 0 }这个 class 中的 count 便是这种存储方式;优点: 改变值时不会触发组件的更新...
2018-12-11 16:59:00
432
转载 再谈 webpack build 及 加载优化
之前项目多,事情忙,一直没时间写博客,现在空闲下来了,总结一下之前讲过了关于 build 压缩文件的方法,有兴趣的可以看下: 点击查看现在讲讲一个页面的首屏加载速度该如何提升提前说明 需要 webpack-bundle-analyzer 插件来进行 build 文件的分析异步文件和必须文件首先是异步文件,可以按功能分,也可以按照路由分块,目的就是尽量较少首次加载的必须代码的...
2018-10-30 17:40:00
265
转载 使用 script 的 module 属性实现 es6 以上的兼容
几个月前看到了这篇文章 https://philipwalton.com/articles/deploying-es2015-code-in-production-today/,给了我很大的启发,本来是想使用 vue 来当实验对象的,但是在 vue-cli3 的测试版中就有了这个内容,所以这次使用 react 来实验, 现在 cra 中还未采用该方法;作用:借用 vue-cli3...
2018-08-22 15:56:00
1845
转载 在 Vue 项目中(vue-cli2,vue-cli3)使用 pug 简化 HTML 的编写
使用 pug 的原因:使得 HTML 写起了来更加清晰和快捷用法:Vue 的用法没有变化:<template lang="pug"> transition(name="sider") div.hello h3 {{msg}} p(:style="{color:'#000'}", :htmlData="msg") p label ...
2018-08-05 22:11:00
665
转载 vue-cli 升级至 webpack 4 指北
时至今日(2018-7-11),vue-cli 任然未稳定支持至webpack4,所以我自己也来创建一个 vue 初始化模板不过大致的原因我也能猜到,因为很多插件仍然是一个不稳定的点,比如我在创建中也遇到了,至今未有解决的方案webpack 4 优点:总结来说就是 加快了 dev 模式下的编译速度,和 prod 模式下的打包速度还有 optimize.CommonsChunk...
2018-07-11 15:08:00
142
转载 使用 typescript 开发 Vue
基础配置:1.准备一个使用 vue-cli 生成的项目2.使用 npm 一建安装基础配置npm i -S @types/node typescript vue-class-component vue-property-decorator vuex vuex-class ts-loader@3.2.0// vue-cli 的 webpack 大版本为 3// 所以不支持 ts...
2018-06-16 18:23:00
125
转载 聊聊 webpack 打包如何压缩包文件大小
想必很多人都经历过做完一个项目后,再打包发现某些文件非常大,导致页面加载时很慢,这就很影响用户体验了,所以在我经历了一些打包后,讲讲如何有效地缩小包体积,加快页面的首屏渲染动态 polyfill相信很多项目都会用到polyfill 那么一整个polyfill 会占据很多的空间,这个时候需要使用动态polyfill来解决这个问题了:在 index.html 文件中引入:<...
2018-05-13 22:00:00
480
转载 小记 vue 打包(build)需要注意的一些事
记录 vue 项目打包的一些事情首先声明项目都是由 vue-cli 生成;vue 项目从 dev 切换到 prod 时有很多地方需要注意;首先是大家最需要注意的 ajax 切换环节以前一开始用 Vue 的时候我是在 build 之后,手动修改 ajax 的请求前缀比如现在我使用的 axios,js axios.defaults.baseURL = 'api'但是打包...
2018-04-15 14:55:00
414
转载 实现一个颜色选择器
最近经历了一波辞职,找工作,搬家这样一个过程,所以没有空写博客,现在稳定了下来,写一下过年时写过的一些东西;这次要写的是一个颜色选择器,也许很多人都认为是不需要的,因为有h5的 api 提供类似的功能,但是作为一个探索者,怎么能不直接实现一个呢首先是样式的编写关于样式方面我仿照的是 elementUI 的结构:html <div > <div id="...
2018-03-26 17:51:00
756
转载 crosswalk 初步使用
这里简单的说下 crossWalk 的配置;我在学习 crosswalk 的时候,看到一篇博客,他所记录的已经是很完整的教程了: 点击查看 本文就根据该博客和官网说明,进行部分修改,补充;首先 crosswalk 的 minsdk 是14,如果兼容需要14一下的,那么就没法了;基础引入:和普通的一样;1.1 在 /build.gradle 里的 allprojects/rep...
2018-02-23 15:44:00
579
转载 js 中的一些小技巧
js 数字操作:1.1 取整:取整有很多方法如:parseInt(a,10);Math.floor(a); a>>0;~~a;a|0; 前面2种是经常用到的,后面3种算是比较偏的,因为其有不足之处,比如将下面代码放到 console 里测试:var num = 2150000000;console.log(num|0);console.log(pars...
2018-02-21 21:28:00
127
转载 vue用户登录状态判断
之前项目中用来判断是否登录我写了多种方案,但是最终只有一个方案是比较好的,这篇博客就是分享该方案;先说基本要求:项目中的登录状态是依据服务器里的状态来作为判断依据;每一个需要登录后才能操作的接口,如果未登录都会返回未登录的错误;项目中使用 vuex,axios,router;判断登录方案需要满足下面几点:未登录状态下的刷新:1.1 在需要登录页面中刷新是需要跳转...
2018-02-11 10:55:00
881
转载 Android webView包装WebAPP
前言 Android webView 兼容体验真的差到了极点!!前一阵子,老板要将 WebAPP 放到 Android 和 iOS 里面,而我因为以前做过安卓,所以这方面就由我来打包,原理是很简单的,就是打开 APP 的时候用 webView 加载网站的网址,这样服务器一次更新,就能更新微信版, iOS 版和 Android 版;首先我要说一句,如果你的 WebAPP 里面有文...
2018-02-04 22:23:00
207
转载 浮动粒子制作404动画页面
前言:之前在网上看到了这个效果,之后我在做项目的时候,正好将他放进了项目里面,这篇博客就介绍一下该效果的原理;1.首先是基础的设置const canvas = <HTMLCanvasElement>document.getElementById('canvas');let ctx: any = canvas.getContext('2d');const W: nu...
2018-01-30 21:17:00
164
转载 使用 typescript 和 canvas 重构snow效果
前言:之前做过一个 snow 效果,但是是直接用 HTML 做的 点击此处查看 ,几个星期前,我用 typescript 和 canvas 重构了一下,snow效果是一个很简单的效果,但是用来练手还是不错的;首先创建基本变量:let canvas = <HTMLCanvasElement>document.getElementById('canvas');l...
2018-01-14 16:39:00
166
转载 redux入门指南
前言:大概一个月没有写博客了,这两天正好是周末,就写点东西来梳理下之前几个月的所写与所得;两个月前,学习了一下 redux ,还是一点难度的,花了我一天的时间来搞明白他,但是都没怎么记录,今天这篇博客就是用一个demo来介绍 redux , react-redux , react-thunk 的简单用法;首先就是下载,使用命令:npm install --save redux...
2018-01-13 22:47:00
113
转载 毕达哥拉斯树(pythagorasTree)原理解析及canvas动画实现
以前就看到了这个东西,由于太忙了最近才有时间来实现这个;该文章适合有一定 canvas 基础的人阅读;首先说说他的原理:The construction of the Pythagoras tree begins with asquare. Upon this square are constructed two squares, each scaled down by a...
2017-12-17 18:21:00
1012
转载 canvas入门之时钟的实现
canvas 入门之作:三步实现一个时钟:直接上效果:step 1 : 背景制作首先制作从1-12的数字: var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.width = canvas.height ...
2017-12-09 22:18:00
94
转载 canvas动画之动态绘出六边形
先上 demo:https://grewer.github.io/JsDemo/canvasLine/这两天我一直在研究这个动画,花了大量的时间来想是如何实现的,一开始我是想在进入 canvas 时按时间来用 lineTo 绘出六边形,退出时反方向再绘出白色的一条线;想这样:function getSpeed(x, y) { if (x < 100...
2017-11-29 16:16:00
373
转载 分享一篇vue项目规范
最近 Vue 用的比较多,而且因为公司里有实习生,当几个人写一个项目的时候,会出现很多问题,最麻烦的就是规范不统一,之前我有一篇文章是说, vue 是比较有规范的一种框架了,但是也会出现很多问题,所以我今天写了一篇规范,也顺便拿出来分享一下先说下我所使用的技术站:"dependencies": { "axios": "^0.17.1", "element-...
2017-11-24 14:46:00
84
转载 css3 ajax加载进度线
最近想了想ajax加载时的进项,便着手写了这个,我想css3的支持度已经够了<button onclick="start()">button</button><p id="string"></p>body{ width: 500px}#string { width: 0%; he...
2017-11-17 23:18:00
80
转载 react 体验 react与vue的比较
用了 vue 大半年了,不过我在2016年暑假的时候就看到了 react 这个项目,学习了一番,不过之前学习的都是基础语法和一些基础用法吧,总的来说 mvvm 框架确实都很相似,会一个就可以了;今天我的配置 react 的时候,搜索过后,发现很多都是一步一步来配置文件的,不过也有好处可以帮助我理解 webpack ,不过这配置也太慢了,如果没存好,还得再来一遍吗?当然不是,我找到...
2017-11-12 22:57:00
192
转载 webapp填坑记录
网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题:meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器的手机模式是没有手机上的效果的,所以要在头部添加:<meta charset="utf-8" name="viewport" content="width=device-...
2017-11-11 19:28:00
132
转载 vue 组件中数组的更新
今天写项目时遇到的问题,瞬间就卡在那了来还原一下:parent.vue:<template> <div> <button @click="change">change</button> <input type="text" v-model="list" name="">...
2017-10-14 00:21:00
424
转载 canvas 文字转化为粒子
var canvas = document.createElement('canvas');var cxt = canvas.getContext('2d');var W = canvas.width = 500;var H = canvas.height = 200;var str = 'Grewer,点击此处';cxt.textBaseline = 'h...
2017-10-07 16:30:00
107
转载 canvas particles
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var Grewer = { init: function() { this.getWindowSize(); canv...
2017-10-03 19:15:00
130
转载 flex布局元素操作详情
之前布局一直用的是 position,float之类的,趁着国庆学习一下 flex 布局,可滑动~~转载于:https://www.cnblogs.com/Grewer/p/7618096.html
2017-10-01 22:43:00
77
转载 彩色小球的重现以及下雪效果的实现
之前我看到一篇文章是介绍彩色小球的实现;链接:http://www.cnblogs.com/xiaohuochai/p/6370123.html我按照他的思路也写了一个:代码:var canvas = document.getElementById('canvas'); var H = 300,W = 500; canvas.height =...
2017-09-27 16:02:00
99
转载 关于vue 框架与后台框架的混合使用的尝试
这几天我在研究前台框架和后台框架融合的问题,进行了一些尝试;我前台选择的是 vue,当然也可以选择 react 等其他 mvvm 框架,不过 vue 对于我来说是最熟悉的;后台话,我选择的是 php 的 lumen 框架,他是laravel 的简化版,因为比较轻量,所以这也是我的选择;先说下我这边的环境:系统:Mac os 10.12;服务器:apache 2.2;...
2017-08-27 22:03:00
179
转载 jq 时间计算
时间差计算:-(function($){ var caculation = function(gap){ var minutes = 1000 * 60 var hours = minutes * 60 var days = hours * 24 var ye...
2017-07-15 18:12:00
148
转载 JS 三目运算符和RETURN
以前写的博客,现在搬过来 1 首先三目运算符和return的正确用法是这样的: 2 3 (function test(){ 4 var foo = []; 5 return typeof foo === 'object'?1:2; 6 })();//函数返回值为1 7 8 要是在三目运算符中又多个运算呢: 9 10 (function...
2017-06-25 20:23:00
1101
转载 h5 canvas 图片上传操作
最近写的小 demo,使用的是h5的 canvas来对图片进行放大,移动,剪裁等等这是最原始的代码,比较接近我的思路,后续会再对格式和结构进行优化html:1 <pre name="code" class="brush: html;" rows="15" cols="300">2 <input type="file" name="" accept=...
2017-06-25 00:44:00
141
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人