自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 canvas生成图片toDataUrl报错

在使用canvas的toDataURL()方法时,控制台有时会报错原因:这是由于之前由drawImage()向canvas导入的图片跨域而导致的。解决办法1、在引用图片之前打开跨域资源允许权限(一定要注意顺序):var myImage = new Image(); myImage.setAttribute("crossOrigin", 'Anonymous'); //解决图片跨域问题 myImage.src = imgUrl2; //背景图片 你自己本地的图片或者在线图片

2020-08-04 15:57:55 27

原创 移动端pageshow

用于强制刷新当前页面 var isPage = false; window.onload = function () { window.addEventListener('pageshow', function () { if (isPage) { window.location.reload(); } }); window.addEventListener('pagehide', function () { isPage = true; .

2020-07-24 11:28:59 20

原创 canvas游戏开发平手速反思

效果图在这个项目中,首先先将需要用到的图片全部加载出来,用于活动动画,参考canvas优化优化:应该尝试分离思想,这个分成一个canvas这个分成一个canvas而不是所有的再一个canvas中,还有对于游戏图片的处理,不应该再游戏之前将全部图片加载出来,应该在不同层将各自的层的图片全部加载出来。...

2020-07-23 10:27:27 15

原创 redux路由配置

路由基本配置npm ireact-router-domimport React from 'react'import {HashRouter,Route,Switch,Link} from 'react-router-dom'import Index from '../pages/component/Index.js'import Register from '../pages/component/info/register.js'import Setting from '../page.

2020-07-23 10:24:59 26

原创 redux持久化存储方案

对于Redux来讲,我们都很熟悉了,是著名的 React 全家桶的一份子。但是在使用 Redux 时有个痛点:就是其 store 状态树的state并不是持久保存的,在浏览器端刷新一下数据就全没有了,得重新从后台读取。这时候,redux-persist 就显示出它的用武之地了。我们知道,本地数据库或者像 localstorage 之类的缓存系统才有可能长时间保存数据,而 redux-persist 可以让你的数据从 state 分离出来,保存到浏览器缓存中,以便实现数据的持久化缓存。既然如此,那么我

2020-07-23 10:18:54 34

原创 vue 路由鉴权

用于进入某些页面需要什么什么特权才能进入判断当前路由是否需要鉴权(router中meta字段下requireAuth是否为true)这里我先讲讲我们项目中用到的路由鉴权方式,这里我们主要用到我们Vue Router中的router.beforeEach, 这个函数的作用就是注册一个全局前置守卫当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。每个守卫方法接收三个参数: to: Route: 即将要进入的目标

2020-07-22 10:23:51 48

原创 react this指向修改

import React from 'react'export default class BindThis extends React.Component { constructor(props) { super(props) this.state = { msg: '这是默认的msg' } // 绑定 this 并传参的方式2: 在构造函数中绑定并传参 // 注意,当为一个函数,调用 bind 改变了this指向后,bind 函数调用的结.

2020-07-15 12:41:59 38

原创 react componentWillReceiveProps

import React, { Component} from 'react'//当组件执行完componentDidMount函数后,就进入了class ParentBy extends Component { constructor() { super() this.state = { count: 4, } } setSave(){ this.setState({ ...

2020-07-15 12:32:11 43

原创 react绑定click事件

class Count extends Component{ constructor(){ super() // this.state={ num:2 } } setSave(){ this.setState({ num:this.state.num+1}) } render(){ return( &.

2020-07-15 11:11:18 26

原创 canva重复图案

canvas的createPattern()可以用于绘制重复图案,它可以接收image元素、canvas元素或video元素作为图案参数,并且可以传入如何重复图案的字符串参数:repeat——为整个区域绘制重复图案repeat-x——只在x方向绘制重复图案repeat-y——只在y方向绘制重复图案no-repeat——不重复,只绘制一张图案 var can = document.createElement('canvas...

2020-07-09 15:48:11 30

原创 canvas定位点击位置

myCanvas.removeEventListener('touchstart',_bindTouchStart.bind(this),false) myCanvas.removeEventListener('touchend',_bindTouchEnd.bind(this),false) myCanvas.removeEventListener('touchstart',_bindTouchMove.b..

2020-07-08 15:31:39 94

原创 react生命周期

import React from 'react'// 注意: prop-types 包中职能跟单一,只提供了 一些常见的 数据类型,用于做类型校验import ReactTypes from 'prop-types'// 咱们封装组件的目的,是为了团队协作开发更加方便,有的人只负责 开发组件,有的人只负责 调用别人开发好的组件// 最好在封装组件的时候,为组件中的一些必要数据,进行类型校验export default class Counter extends React.Compon...

2020-07-07 14:49:18 35

原创 react render jsx

使用 ReactDOM 把元素渲染到页面指定的容器中:``` // ReactDOM.render('要渲染的虚拟DOM元素', '要渲染到页面上的哪个位置中') // 注意: ReactDOM.render() 方法的第二个参数,和vue不一样,不接受 "#app" 这样的字符串,而是需要传递一个 原生的 DOM 对象 ReactDOM.render(myDiv, document.getElementById('app'))```## JSX语法1. 如要要使用 JS.

2020-07-06 16:22:08 37

原创 react学习01

// JS打包入口文件// 1. 在 React 中,需要安装 两个包 react react-dom// 1.1 react 这个包,是专门用来创建React组件、组件生命周期等这些东西的;// 1.2 react-dom 里面主要封装了和 DOM 操作相关的包,比如,要把 组件渲染到页面上import React from 'react'import ReactDOM from 'react-dom'// 2. 在 react 中,如要要创建 DOM 元素了,只能使用 React 提.

2020-07-06 15:55:59 1640

原创 react已有项目中部署typescript

1. npm install --save @types/react @types/react-dom主要是为了获取react和react-dom的声明文件,因为并不是所有的库都有TypeScript的声明文件,所以通过运行2、npm i --save @types/typescript3npm install --save-dev typescript awesome-typescript-loader source-map-loader这一步,我们安装了..

2020-07-06 14:17:13 101

原创 canvas动画requestNextAnimationFrame兼容性写法

,采用window.requestAnimationFrame()实现动画效果。这个方法提供了更加平缓并更加有效率的方式来执行动画,当系统准备好了重绘条件的时候,才调用绘制动画帧。一般每秒钟回调函数执行60次,也有可能会被降低。想要了解更多关于动画循环的信息,尤其是游戏,// #FFEAAAwindow.requestNextAnimationFrame = (function() { var originalWebkitRequestAnimationFrame = undefined, ..

2020-07-03 10:00:34 2293

原创 贝塞尔曲线

连接:贝塞尔曲线控制点确定的方法https://wenku.baidu.com/view/c790f8d46bec0975f565e211.html

2020-05-27 14:32:45 99

原创 js之链式调用原理解剖

因为所有对象都会继承原型对象的属性和方法,所以可以让定义的原型对象中的那几个方法都返回用以调用方法的实例对象的引用即return this(function(){var $=function(){}$.prototype={init:function(){......return this}}}())...

2020-05-09 17:52:07 51

原创 js new关键字做了什么

在使用new运算符的时候,系统会为你做一些事,首先:他会先创建一个空对象,然后调用这个构造函数,在此过程中空对象处于作用域链的最前端(作用域链的前端就是当前代码执行所在环境对应的变量对象即空对象) function Person(name , age){ this.name = name; this.age = age; cons...

2020-05-07 10:39:44 126

原创 ios在用户输入点击输入按钮上的完成时页面滚动问题

在失去焦点强制滚到某位置document.body.addEventListener('focusout', function () { setTimeout(function(){ $('html,body').stop(true,true).animate({scrollTop:$(document).height()+'px'},0); },200) });...

2020-04-28 16:26:02 78

原创 textarea placeholder输入的时候不显示的问题

方式1:css解决textarea:focus::-webkit-input-placeholder { color: transparent; }textarea:focus::-moz-placeholder{ color: transparent; }textarea:focus:-moz-placeholder{ color: transparent; }input:f...

2020-04-24 09:44:32 76

原创 js判断触摸事件上下左右哪个方向

var _bindTouSta = function(e) { console.log(this) clearInterval(this.setInter) this.touchTime = new Date().getTime() this.tPage = { sx: e.targetTouches[0].pageX, sy: e.targetTouches[0]....

2020-04-17 15:35:23 62

原创 解决classList的兼容问题(ie9及以下)

if (!("classList" in document.documentElement)) { Object.defineProperty(HTMLElement.prototype, 'classList', { get: function() { var self = this; function update(fn...

2020-04-16 15:24:43 91

原创 js参元类(重用代码)

如果想要一个函数用到多个类中,可以使用扩充的方式让这些类共享该函数。做法:先创建一个包含各种通用方法的类,然后在用它扩充其他类。这种包含通用方法的类称为参元类。他们通常不会被实例化,或直接调用,其存在的主要的母目的主要只是向其他类提供自己的方法// 参元类var Mixin=function(){}Mixin.prototype={ commonFun:function(){ ...

2020-04-14 13:45:06 47

原创 js根据matrix算rotate值

var tr=$('#yuanpan').css('transform')var values = tr.split('(')[1].split(')')[0].split(','); var a = values[0]; var b = values[1]; var c =...

2020-03-19 19:02:48 181

原创 cordova gradle-2.14.1-all下载不成功

1手动下载gradle-2.14.1-all.zip2、将其放在项目:下3、在项目set CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL=../gradle-2.2.1-all.zip在第三步或者:在这个路径下打开红色线框文件将distributionUrl修改了并且:在seedApp\platforms\a...

2020-01-17 16:38:23 232

原创 js多维数组降维

data() { return { arrCop:[] }; }, created() { var data=[2,[4,[66,[25,[56,[73]]]]]] var data2=this.getData(data) console.log(data2) console.log(Array.of(3,3,undefined...

2020-01-17 11:59:35 116

原创 node.js跨域问题

方式1:通过对所有请求设置请求头:var allowCrossDomain = function (req, res, next) { debugger res.header('Access-Control-Allow-Origin', '*');//自定义中间件,设置跨域需要的响应头。 res.header("Access-Control-Allow-Heade...

2019-12-03 14:10:58 43

原创 express 渲染html文件

通过express-art-template art-templateconst express = require('express')var app = express()app.engine('html', require('express-art-template'))app.use('/static/',express.static('./static/'))a...

2019-12-02 14:59:56 380

原创 node的中间件

在nodeJS中,中间件主要是指封装所有Http请求细节处理的方法,一次Http请求通常包含很多工作:如记录日志,IP过滤,查询字符串、请求体解析,cookie处理、权限验证、参数验证、异常处理等、但对web应用而言,并不希望接触到这么多细节性的处理,因此使用中间件来简化及隔离这些基础设施与业务逻辑之间的细节,让开发者更关注在业务的开发上,他的工作模式如下:中间件机制核心实现中间件是从...

2019-12-02 10:20:10 57

原创 mysql命令

数据库增删改查1、创建数据库:create database 数据库名;2、删除数据库:drop database 数据库名创建表的语法create table 表名(字段1 数据类型,........)create database hty_test charset utf8;use hty_test;create table product(id...

2019-11-26 11:42:19 24

原创 vue检测路由变化

watch:{ $route:{ handler(val,oldVal){ debugger this.activIndex=this.funList.findIndex((item) =>{ return ~(val.fullPath).indexOf(item.type) }) ...

2019-11-18 14:25:45 277

原创 jquery源码分析之总体架构-jQuery.fn.init

jQuery模块可以分为3部分:入口模块、底层支持模块和功能模块在入口模块中,调用了构造函数jQuery()(本质jQuery.fn.init)创建jQuery对象时传入了选择器表达式,则会调用选择器Sizzle遍历文档,查找与之相匹配的DOM元素,并创建一个包含这些DOM元素的JQuery对象。工具方法模块主要用于简化JQuery对象,DOM元素、数组对象,字符串等得操作如:$.ea...

2019-10-22 17:07:33 61

原创 jquery源码结构分析

(function (window, undefined){ //创建jQeury对象 var jQuery = function(){ var jQuery = function(selector, context){ return new jQuery.fn.init(selector, context); } ...

2019-10-21 16:37:39 43

原创 js原型原型链

每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,每个实例都有一个指向原型的内部指针构造函数缺点:所有的实例对象都可以继承构造函数中的属性和方法,但是同一对象实例之间无法共享属性,所以js有了prototype.prototype:相当于特定类型所有实例都可以访问到的一个共同容器。Function Dag(name,age,){var name,age}Dag...

2019-10-21 11:50:30 45

原创 viedojs opstion

初始化option配置:组件与元素option配置有两种方式,一种是在标签video上(<video data-setup='{"autoplay":"true",.....}'),另一种是在初始化的palyer对象上常见optopn成员:autoplay:true/false播放器准备好之后,是否自动播放,默认为false controls: true/false...

2019-10-11 16:15:09 36

原创 js获取滚动距离底部距离

滚动内容的高度-滚动容器的高度-设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离(获取元素到滚动列表顶部的距离) this.getToBottom= (this.getScrollHeight()-this.getClientHeight()-this.scrollTop)getScrollHeight(){ return this.$refs.navConLis...

2019-09-27 16:42:53 1185

原创 vuex基本使用state,getters,actions,mou..

state:存储状态(变量) getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun() mutations:修改状态,并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。 actions:异步操作。在组件中使用是$store.dispath('') m...

2019-08-16 10:22:24 816

原创 node.js路径拼接

var path = require('path'); // node内置模块。 // path.join() 拼接路径var fullPath = path.join(__dirname,'mylog'); // __dirname是获取当前文件绝对路径的全局对象。console.log(fullPath); // G:\huangtaoying\seed\src\log\m...

2019-08-09 16:57:43 910

原创 node mysql连接池实例

正常node连接数据库是通过mysql这个包来实现mysql的地址:https://www.npmjs.com/package/mysql使用实例:var mysql=require('mysql')mysqlConfig={ host:'', user:'byt', password:'', database:'byt_crops_tracker'...

2019-08-09 15:33:30 466

提示
确定要删除当前文章?
取消 删除