- 博客(112)
- 收藏
- 关注
RSS订阅原创 FE使用art-template
使用 template 时，第一个参数为模板的 id。第二个参数为传递到模板的数据，没有数据传递{}，但是不要不传，否则会出现意外，文档地址最基础的使用<body> <div id="box"></div> <script type="text/html" id="boxTmp"> 姓名：{{name}} </script> <script src="./template-web.js"><..
2021-01-04 08:48:49
174
原创 node之buffer
前置知识字节一个字节等于8位字节是计算机中传输信息的基本单位一个字节可以表示的最大十进制数是255每个位只能填0或1进制0b二进制0x十六进制0o八进制进制之间的转换parseInt(‘11’, 2) // 二进制转为十进制parseInt(‘77’, 8) // 八进制转为十进制parseInt(‘ff’, 16) // 十六进制转为十进制(1).toString(2) // 十进制转为二进制1…toString(16) // 十进制转为十六进制1…to
2020-12-08 14:50:24
331
原创 浏览器事件环和node事件环
浏览器事件环node事件环什么是事件环node中处理非阻塞I/O的操作机制node启动后，就会初始化事件环执行流程先进行主栈代码的执行，注意主栈代码也属于宏任务，微任务是语言提供的主栈代码执行后，会清空一次微任务队列，在清空微任务之前会先执行process.nextTick(优先级高于微任务，不属于事件环的一部分)，然后会进入事件环执行node中的事件环包含以下几个阶段，timers、pending callbacks、idle，prepare、poll、close callbacks
2020-12-02 17:44:56
296
原创 npm的使用
文件模块的解析流程不同的版本对文件模块的解析流程往往不一样会先找同级别是否存在该文件，文件找不到，会找文件夹如果文件夹下面存在package.json，查看package.json中的main字段对应的文件，会执行此文件如果没有package.json文件，执行此文件夹下面的index.js文件，备注：对于有些版本，即使存在package.json中，即使存在main，也仍然会去执行index.js文件模块分类分为第三方模块、核心模块、自定义模块核心模块不需要安装，第三个模块需要安装，自
2020-12-01 21:12:59
417
原创 node之process
常见的global变量setTimeoutsetIntervalqueueMicroTasksetImmediateglobal.process作用：可以获取执行命令时的一些参数常见的process:envargvargv[0]，表示node可执行文件在系统中的位置argv[1]，此时正在执行哪个文件…other，用户设置的命令行参数chdircwd获取当期的工作目录，可以变化的与__dirname的区别是，__dirname获取到的文件的绝对路径，不可用修改
2020-12-01 16:12:28
1187
1
原创 generator+co+async+await
浏览器解决异步的发展史回调promisegeneratorasync+awaitgeneratorfunction * demo() { // generator函数可以使用try...catch... try { let a = yield 1; let b = yield 2; }catch{ throw() }}let it = demo(); // generator函数返回一个Generator对象// 常用的Generator对象上的方法，next，th
2020-12-01 14:18:59
136
原创 解决GitHub国内访问太慢了
打开 ipaddress网站，https://www.ipaddress.com/查询gitHub.com的IP查询github.global.ssl.fastly.net的IP打开本机hosts文件，我的Windows系统：C:\Windows\System32\drivers\etc添加如下内容：199.232.69.194 github.global.ssl.fastly.net140.82.112.3 github.com不出意外的话此时应该比配置之前快了N倍。...
2020-10-24 16:14:48
960
1
原创 括号生成
准备阶段1–判断括号字符串是否正确闭合<script> function isRight(arr) { let result = []; for (let i = 0; i < arr.length; i++) { let stack = []; let str = arr[i]; for (let k = 0; k < str.length; k++) { if (stack.le
2020-10-21 15:06:57
76
原创 react使用@tweenjs/tween.js实现数字动态增长
安装npm install @tweenjs/tween.js --save使用在componentDidMount钩子函数中引入tween函数传参调用即可import TWEEN from '@tweenjs/tween.js'const animate = () => { if (TWEEN.update()) { requestAnimationFrame(animate); }}/** * @param {*} context 上下文 * @param {*}
2020-09-25 16:23:10
1409
原创 利用canvas给图片打马赛克
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片打码</title> <style> canvas { border: 1px solid
2020-08-05 20:22:35
680
原创 获取画布上的任意一个坐标对应的像素点的颜色值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>像素操作</title> <style> canvas { border: 1px solid
2020-08-05 20:20:32
1761
原创 通过操作像素点改变画布颜色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>像素操作</title> <style> canvas { border: 1px solid
2020-08-05 20:19:45
575
原创 canvas之伸缩变换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>缩放案例</title> <style> canvas { border: 1px solid
2020-08-03 21:36:09
314
原创 记录一次项目中使用canvas绘制图形
目标import React from "react";import { Link } from "react-router-dom";import { PropTypes } from "prop-types";import "./header-nav.scss";class HeaderNav extends React.Component { constructor(props) { super(props); this.state = { initDeg
2020-08-02 08:41:34
179
原创 记录canvas学习--签名
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>签名案例</title> <style> canvas { border: 1px solid r
2020-08-02 08:37:34
100
原创 记录一次canvas学习--绘制时钟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>钟表案例</title> <style> canvas { border: 1px solid
2020-08-02 08:36:31
107
原创 canvas生成刮刮乐~~~
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ma
2020-06-18 13:28:42
144
原创 Vscode 项目文件快速生成注释
安装插件：koroFileHeader安装成功之后，使用 Ctrl+Alt+i 即可快速生成注释使用 Ctrl + shift + p 之后输入 codeDesign 可以选择生成自己喜欢的注释主题自定义文件header部分注释内容，打开settings.json文件（File>Preference>Settings>Extensions>File header Configuration>Edit in settings.json）"fileheader.cust.
2020-06-18 12:54:16
976
转载 Echarts 配置主副标题【转载】
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <!-- jquery cdn引入 --> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <!-- echar
2020-05-21 13:17:56
2265
原创 接口
接口/** * 接口就是多个类的公共规范 * 接口是一种引用数据类型，最重要的内容是其中的抽象方法 * 定义接口的格式： * public interface 接口名称 { * // 接口内容 * } * 如果是java7，那么接口中可以包含如下的内容： * 1. 常量 * 2. 抽象方法 * 如果是java8，还可以额外的包含： * 3. 默认方法 * 4. 静...
2020-03-30 21:12:01
130
原创 Vue性能优化
Vue性能优化路由懒加载–按需加载keep-alive缓存页面列表页进入到详情页，在由详情页返回到列表页设置了keep-alive的组件首次进入：beforeRouterEnter–>created–>activated–>deactivated设置了keep-alive的组件再次进入：beforeRouterEnter–>activated–>deac...
2020-03-29 21:31:18
116
原创 html-浮动、盒模型、布局方式
浮动概念: 浮动就是让块级标签不独占一行使用场景：让块级元素在排在一行原理：让浮动的元素脱离标准文档流清除浮动：在浮动的元素后面添加一行多余标签，控制其样式为：clear:both;给浮动的父级元素设置：overflow: hidden;PS：该属性有两个作用，一个是超出部分隐藏，另一个是清除浮动。给浮动的父级元素设置伪类：.wrapper:after {content:...
2020-03-28 13:37:54
452
原创 react学习笔记
背景facebook特点声明式组件化高效虚拟DOM，不总是直接操作domdiff算法，最小化重绘页面issues告诉babel去解析jsx语法react库react.js 核心库babel.min.js 把jsx语法转为js语法react-dom.js 提供操作dom的react扩展库步骤创建虚拟dom，React.createElemen...
2020-03-26 22:28:34
126
1
原创 mongodb学习笔记
数据库存储数据的仓库程序是运行在内存中的，一旦计算机断电或者计算机出了问题，数据就可能丢失所以我们就需要对数据进行持久化，存储在硬盘上，而数据库无疑是一个最好的选择文档api文档数据库的分类关系型数据库（RDBMS）mysqloracledb2sql server关系型数据库全部都是表非关系型数据库（NoSQL-- Not Only Sql）mongo...
2020-03-26 22:27:25
82
原创 从一道题(a==1&&a==2&&a==3)JavaScript隐式类型转换
先看两个方法toString() // 返回对象的字符串表示valueOf() // 返回对象的数值、字符串、布尔值表示注意：在数值运算里，会优先调用valueOf()，在字符串运算里，会优先调用toString()。undefined和null没有toString()和valueOf()细看valueOf()数组、函数、和正则表达式简单的继承了这个默认方法，调用这些类型的...
2020-03-26 22:25:22
80
原创 node学习笔记
Node是什么node不是一个语言node是一个基于chrome V8引擎的javascript运行环境适合做高并发，但是没有python好非阻塞I/O,正常情况下是阻塞的Node不是因为js而产生的node选择了js，开始选择的是ruby文档api文档nvmnvm下载链接nvm install node版本号nvm uninstall node指定版本号nvm...
2020-03-26 22:24:34
135
原创 js长列表渲染的三种方式
原始方法每一次都重新触发一次重排，性能很差，不建议使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
2020-03-21 18:23:26
2594
3
原创 H5离线存储
离线存储H5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接的时候进行访问，轻松创建web应用的离线版本离线应用和网页缓存都是为了更好的缓存各种文件以提高读取速度离线于缓存对网络环境的要求缓存依赖于网络的存在，离线在离线状态下仍然可以缓存主要缓存当前页面的内容，离线主要走缓存，只要设置缓存该文件的页面，都能在离线状态下读取该文件离线存储的意义：最突出的功能...
2020-03-14 14:57:56
1306
原创 H5地理位置信息
地理信息定位用户的位置，使用HTML5 Geolocation API用于获得用户的位置但是必须要获取用户的同意，否则不行主要使用navigator.geolocation.getCurrentPosition(success, error, options)<!DOCTYPE html><html lang="en"><head> &l...
2020-03-14 14:57:14
223
原创 跨文档通信postMessage
跨文档通信 postMessagewindow.postMessage(message, origin, [transfer])message: 最好是传递字符串origin：域信息，指定框架中文档来源的域，如果域匹配才会传递消息transfer：不常使用，是一串课message同时传递的Transferable对象，这些对象的所有权将被转移给消息的接收方，而发送一方不在保留所有权d...
2020-03-14 14:56:24
117
原创 nodejs之koa常用功能
搭建静态资源服务器const Koa = require('koa')const static = require('koa-static')const app = new Koa()const path = require('path')// koa-static 搭建静态资源服务器app.use(static(path.join(__dirname, './static')))...
2020-03-12 22:04:50
307
原创 java学习之ArrayList
ArrayList数组的长度是不能改变的但是ArrayList的长度是任意改变的对于ArrayList来说，有一个 <E> 代表泛型泛型：也就是装在集合中的所有元素。全部都统一是什么类型注意，泛型只能是引用数据类型，不能是基本数据类型注意，从JDK 1.7+版本开始，右侧的 <> 里面的内容可以省略不写，但是 <>还是要写的对于ArrayList...
2020-03-07 15:08:39
142
原创 java学习之构造方法
构造方法package xxx;/** * 构造方法也可以重载，方法名相同，参数列表不同 * 构造方法可以用来给成员变量赋初始值 * 构造方法专门用来创建对象，当我们使用new关键字调用的时候其实就是在调用构造方法 * 构造方法名称和类的名称要完全一样 * 构造方法不需要写返回值类型，连void也不需要写 * 构造方法不能return一个具体的值 * 如果没有编写构造方法，那么...
2020-03-07 13:59:43
86
原创 java学习之对象
面向过程概念：当需要实现一个功能的时候，每一个步骤都需要亲历亲为，详细处理每一个细节。强调过程（步骤）。// 要求打印格式为：[1,2,3,4]public static void print() { int[] array = {1,2,3,4} System.out.print("["); for (int i = 0; i < array.length; i++) { ...
2020-03-05 20:52:54
98
原创 java学习之数组
数组可以存放多个数据，但是存放的数据类型必须统一数组是一种引用数据类型数组的长度在程序运行期间不可改变初始化动态初始化：数据类型[] 数组名称 = new 数据类型[指定数组的长度];静态初始化：创建的时候指定内容，数据类型 [] 数组存名称 = new 数据类型[] {x,x,x,...}，还有一种省略格式：数据类型 [] 数组名称 = {x,x,x,...}默认值动态...
2020-03-02 10:15:31
103
原创 java学习之方法
注意事项方法只能在类中定义，方法的定义不能嵌套；方法的定义与顺序无关；方法不调用不执行，三种调用方式：单独调用、打印调用、赋值调用；如果方法有返回值，那么一定要return回去，且返回值的类型与方法定义时规定的类型一致；对于一个void类型的方法，可以有返回值，只不过为空，写return;方法重载对于很多功能类似的方法，仅仅是参数列表不一样，但是却要写很多名称不一样的方法，太过...
2020-03-01 19:48:12
97
原创 java学习之数据类型转换、ASCII
概念当数据类型两边不一致的时候，将会发生数据类型转换。自动类型转换（隐式）不需要人工干预，程序自动处理符合从小到大的原则（从右边到左边），int<long<float<double强制类型转换（显式）代码需要人工干预int x = int (100L);一般不推荐使用，可能会造成精度损失，数据溢出注意byte/short/char这三种数据类型都可以...
2020-02-29 16:19:31
144
原创 java学习之常量、变量、数据类型
常量概念：程序运行过程中固定不变的量基本数据类型字符串常量，双引号整数常量，不带小数点浮点型常量，带小数点布尔型，只有true和false空值null字符型常量，单引号变量概念： 程序运行过程中，会发生变化的量使用：数据类型 变量名称;变量名称 = 变量值;// 或者数据类型 变量名称 = 变量值;注意事项：定义一个变量之后，如果不赋值，不能使用。同时创建三个...
2020-02-29 15:35:53
89
原创 java学习之关键字、标识符
关键字全部是小写字母在编辑器中有特殊颜色标识符常见的标识符有类的名称、方法的名称、变量的名称标识符可以由大小写字母（区分大小写）、0-9数字、$、_类名的命名遵循大驼峰方法和变量的名称的命名需要遵循小驼峰形式...
2020-02-27 12:12:03
120
原创 java学习之程序开发步骤
三大步骤编写、编译、运行编写java的源程序是以.java为后缀的然后需要经过javac.exe编译器的编译，转换为.class的字节码文件然后经过java.exe解释器在JVM上执行hello world// 类是所有源代码的基本组织单位public class HelloWorld { // main方法是入口函数 public static void main(Stri...
2020-02-27 12:00:10
106
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人