重拾 react - React-Router
由于最近一段时间一直在使用vue做项目，最近打算重拾react，在此记录react的点滴学习，实时更新
插件使用 插件： react-router-dom
安装： npm install -S react-router-dom
使用： import {Router} from 'react-router-dom'
Router 配置的方法
第一种
123456789101112131415import { Redirect } from 'react-router'React.render(( <Router> <Route path="/" component={App}> <IndexRoute component={Dashboard} /> <Route path="about" component={About} /&g ...
electron - 使用javascript编写pc应用 - 01
在electron官网根据文档指示，下载了一个electron模板并安装依赖成功运行
练习项目git地址
版本发布 插件： electron-packager
安装： npm install -g electron-packager
打包： package": "electron-packager ./ demo_app --platform=win32 --out ../demo_app_release --version 1.4.13 --overwrite --icon=./images/app.ico
模块 electron 提供了许多api来方便我们调用
Dialog模块
showOpenDialog(browserWindow, options, callback)
_browserWindow_ BrowserWindow (可选)
打包 Q: react 文件打包之后，访问index.html,文件报错找不到js和css文件
A: react 路由模式由 history模式修改为 hash模式, package.j ...
第三方插件安装采坑 - 01
此博客用来记录使用第三方插件安装及使用的时候采坑记录
electron 安装 npm install
报错
123Error: read ECONNRESET# 或者Error: Electron failed to install correctly ...
解决方式
1234// 设置镜像set "ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron"// 安装npm install
HOW TO 制作一个简易的弹幕demo
闲来无事，对于bili上面的弹幕感兴趣，于是自己打算尝试制作一个简单的弹幕系统
页面布局 首先先创建一个容器用来存放video播放器和弹幕发射器,注意要有一个遮罩层设置透明度为0,用来显示我们输入的弹幕,位于视频的上方,为了使视频的显示不那么突兀,我们可以把存放视频的容器的背景颜色设置成深色或者黑色
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> ...
HTML 标签及函数
HTML全局属性
accesskey 规定激活元素的快捷键，使元素获得焦点（Opera浏览器不支持此选项）
以下元素支持accesskey a, area, button, input, label, legend 以及 textarea
contenteditable 规定元素内容是否可编辑，如果元素未设置contenteditable 属性，那么元素将会从其父元素继承该属性
contenteditable = true | false
contextmenu 规定 div 元素的上下文菜单。上下文菜单会在用户右键点击元素时出现，contextmenu 属性的值是要打开的 menu 元素的 id，目前只有fireFox支持
123456<div contextmenu="mymenu"> <menu type="context" id="mymenu"> <menuitem label="Refresh"></menuitem> <m ...
使用js压缩图片
压缩图片的方式主要是使用了canvas进行了一次转码和压缩 使用的方法
var fr = FileReader()
fr.readAsDataURL(file)
Image()
canvas.toDataURL(imgType, quality)
FileReader() 函数
使用
12345var reader = new FileReader()reader.onload = function(e) { console.log(e.target.result)}reader.readAsText(file)
属性
error
返回读取文件时的错误信息
onabort
包含在终止事件被触发时执行的事件处理程序，举例，当读取文件的过程中需要中止时。
onload
当FileReader读取文件的方式为readAsArrayBuffer,readAsBinaryString, readAsDataURL 或者 readAsText 的时候，会触发一个 load 事件。从而可以使用 FileReader.onload 属性对该事件进行 ...
矢量图形 SVG 学习之路 --- 进阶版
SVG 滤镜 SVG可用的滤镜有以下几种
feBlend - 与图像相结合的滤镜
feColorMatrix - 用于彩色滤光片转换
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - 过滤阴影
feSpecularLighting
feTile
feTurbulence
feDistantLight - 用于照明过滤
fePointLight - 用于照明过滤
feSpotLight - 用于照明过滤
您可以在每个 SVG 元素上使用多个滤镜！
SVG 模糊效果 和
所有互联网的SVG滤镜定义在元素中。元素定义短并含有特殊元素（如滤镜）定义。 标签用来定义SVG滤镜。标签使用必需的id属性来定义向图形应用哪个滤镜？
用于创建模糊效果
123456789<svg xmlns="http://www.w ...
矢量图形 SVG 学习之路 --- 基础版
SVG意为可缩放矢量图形（Scalable Vector Graphics） SVG使用XML格式定义图像
如何定义一个SVG图像
1234567891011121314151617<?xml version="1.0" standalone="no"?><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M200 200 C153 334 151 334 151 334 C151 339 153 344 156 344 C164 344 171 339 171 334 C171 322 164 314 156 314 C142 314 131 322 131 334 C131 350 142 364 156 364 C175 364 191 350 191 334 C ...
浏览器存储方式学习 cookie, session, localstorage, indexedDB
浏览器存储方式
cookie： cookie相当于客户端和服务器之间进行信息交互的一个标识，每次客户端访问服务器的时候都会携带上cookie，这样服务器就可以知道是谁来访问了。
Storage: Storage 是专门为浏览器存储提供的数据存储机制，分为localStorage和sessionStorage, 保存的数据以键值对的形式存在，并且以文本格式保存
indexedDB: indexedDB是运行在浏览器上的非关系型数据库, 一般来说是没有存储上限的, 不仅可以存储字符串, 还可以存储二进制数据
Cookie cookie的本职工作并非本地存储,而是维持状态，它是浏览器存储在用户机器上的一个小文本，大小不能超过4K
cookie根据过期时间分为两类：会话cookie和持久cookie
会话cookie是一种临时cookie，当用户退出浏览器，会话cookie就会被删除
持久cookie则会存储在硬盘中，保存时间更长，浏览器关闭并不会删除cookie，通常持久性cookie会维护某一个用户周期性访问服务器配置文件或者登陆信息
访问方式
通过document.co ...
TypeScript 学习之路进阶版 - 扩展
代码检查 eslint 能够发现一些tsc不会关心的错误，检查出一些潜在的问题
TypeScript中使用Eslint
eslint安装
1npm install eslint -S
由于ESLint 默认使用Espree进行语法解析，无法识别TypeScript中的一些语法，因此我们需要安装@typescript-eslint/eslint-plugin, 他作为eslint默认规则的补充，提供了一些额外的适用于ts语法的规则
1npm install --save-dev @typescript-eslint/eslint-plugin
创建配置文件
ESLint 需要配置文件来决定对哪些规则进行检查配置文件的名称一般是.eslintrc.js或.eslintrc.json
当运行ESLint的时候检查一个文件，他会首先尝试读取到文件的目录下的配置文件，然后一级一级往上查找，将所找到的配置合并起来
在根目录创建一个.eslintrc.js
12345678910111213module.exports = { parser: &#x ...
