- 博客(40)
- 收藏
- 关注
RSS订阅
原创 CANVAS游戏开发思路
一、游戏截图DEMO_1: 卷轴跑酷游戏DEMO_2: 格斗游戏以下思路仅为我的一些个人观点，读【HTML5 2D游戏编程核心技术】一书获得的一些收获，欢迎指正！！二、用到的API三、开发前的准备开发一款游戏都需要准备些什么呢？这里列出了简单的一些东西。1、图片资源。 一款游戏最主要的表现力之一就是图片，游戏的登陆，过场界面，地图，人物序列帧，怪物，技能特效，都是基于图片的2、音效。 恰到好处的音效可以让游戏给玩家留的印象很深，比如仙剑3的回梦游仙。3、一些数学基础 和 对生活定律的
2020-10-10 15:02:33
2963
翻译 [译] angular中的ng-template, ng-content, ng-container
angular中的ng-template, ng-content, ng-container
2022-09-15 21:21:48
515
原创 TS装饰器
通过本文你可以知道什么装饰器的发展历程JS和TS装饰器有何不同Angular中的装饰器到底是什么装饰器的定义，语法，作用reflect-meta是什么及如何使用前言我们平常开发中或多或少的听说或使用过装饰器，也切身感受到了它带给我们的便利。但是应该很少去系统的了解过装饰器。不清楚装饰器到底擅长干什么，怎么干。由于目前js和ts中的装饰器有很多不同，本期只聚焦于ts的装饰器进行探讨。本文预计阅读时间——20分钟装饰器的演变2015-3-24stage 1阶段，也是目前广.
2022-05-09 21:03:28
6577
2
原创 Promise {＜rejected＞: DOMException: play() failed because the user didn‘t int
工作中在使用video时候遇到了如下报错：大体意思是说，不能再没有互动的清华下来使用play方法。官方说的是为了移动端的带宽和仿扰民阻止了自动播放，只要用户在页面上有交互动作后，就可以自动播放了；经研究发现，该报错只会针对于会播放声音的媒体数据，我们只要在标签上加上 muted 属性，即可不报错<video muted autoPlay > 您的浏览器不支持 video 标签。</video>其他问题：使用vido时候，如何自定义进度条？首先不适用vi
2022-03-18 17:56:16
645
原创 React Next 配置svg-loader, 并支持svg可配置
1、下载相关loader, 插件yarn add svg-url-loader postcss-inline-svg --dev2、开始配置在根目录创建 postcss.config.js 文件，并写入module.exports = { plugins: { 'postcss-inline-svg': {removeFill: false}, },}修改next.config.js配置webpack(config) { config.module.
2022-02-25 16:25:32
1134
原创 双指缩放和双指移动
最近负责将项目适配到pad上，自己实现了一套双指缩放和双指移动代码。记录一下方便以后用到。双指缩放和移动的判定是基于角度实现的，感兴趣的小伙伴可以看一下。const doubleTouchEvent = () => { let startTouchesInfo = []; let isTouch = false; const _this = this; let zoom
2021-10-27 19:26:59
727
原创 前端神器——Charles(花瓶)的下载配置使用流程【MAC版本】
1、前言你是在跨终端跨浏览器开发中是否遇到过如下困难呢：某个bug只能在某种机型的某个浏览器上复现，想debug无从下手。只能在dev环境打上console后推到开发环境，在用vscosole去查看！这样每次想console一次就得推一版上去，及其浪费时间，及其痛苦！接下来介绍的这款工具就可以一次配置，终身爽翻～Charles的作用实现请求拦截，抓包分析（可以跨终端，下面会提到）将本地域名代理出去，可以供局域网的其他终端访问。2、下载支持正版!!!正版下载地址：https://www.
2021-09-16 11:14:54
2376
原创 defineProperty介绍
MDN传送们在vue2中经常会听到这个属性，我也是联系了很多遍，奈何在工作中很少能用到，所以看了忘，忘了看，索性自己写下来记录一下，方便以后随时翻阅。Object.defineProperty(obj, prop, descriptor)Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。这是mdn的描述，嗯，看了和没看一样。来看一下它的三个参数：obj 要定义属性的对象。prop 要定义或修改的属性的名称或 S
2021-09-14 15:42:26
382
原创 PC端适配到移动端记录
一、前言最近遇到了将PC端的编辑器（在线设计编辑器）兼容到pad端，为什么不是手机端呢，因为我们手机端已经有一套专门的编辑器，但是在pad上无法直接用移动端的编辑器。之前做过的兼容基本上都是视觉上的适配，但是在编辑器中，需要各种手势的兼容，所以下面从两个方面进行分析这里推荐一下我们的稿定编辑器哈，功能很全，性能也还ok。 稿定设计二、适配过程2.1 收集当前编辑器在pad端存在的问题选中元素后后无法通过手势移动。文本元素调起键盘特别困难，canva的交互为当元素处于选中状态并为文本元素
2021-09-14 14:55:32
435
原创 史诗级浏览器环境判断
最近遇到了pad端适配的需求，将浏览器浏览器所处环境的代码整理了一下，供以后使用～ const ua = navigator.userAgent; const isWindowsPhone = /(?:Windows Phone)/.test(ua); const isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone; const isAndroid = /(?:Android).
2021-09-14 11:21:30
219
原创 js的各类错误捕获
一、前言我们在开发中经常用到try catch来捕获接口错误，并上报到监控平台。这是你是否产生过疑问，这些错误在前端都是如何捕获到的？二、常见错误类型解析时候发生语法错误值不是所期待类型引用为声明变量资源加载错误Http请求错误三、捕获错误try catch能够捕获常规运行时错误，语法错误或异步错误不行// 常规运行时错误，可以捕获 ✅try { console.log(notdefined);} catch(e) { console.log( 捕获到异常： , e
2021-08-31 11:14:00
3245
1
转载 为什么Vue3.0使用Proxy实现数据监听2021-06-21
转载自：https://www.jb51.net/article/171869.htm
2021-06-21 11:26:06
175
原创 JS 继承详解
ES5继承ES5中没有class，所以es5的继承都是通过this指向改变和原型链去模拟继承。• 构造函数式继承• 原型式链式继承• 组合式继承1、首先有一个构造函数Animal如下。function Animal(name,age){ this.name = name; this.age = age; } Animal.prototype.run = function(name){ cons
2021-05-12 15:58:26
111
原创 热更新功能的实现
前言：live server 是一个vs code的热更新插件。可以帮你在修改代码保存后，自动刷新页面，大大提升了我们开发的效率。分析：首先，我们要实现一个功能，页面如何知道我们的代码更改了？也就是如何实现我们的代码与浏览器页面通讯。我们很容易就能想到，使用websocket。 下面是具体的实现。实现思路：1、服务器使用node创建一个websocket服务2、浏览器使用websocket与服务器进行通讯3、双方通过对应api来进行数据交换。实现：1、开启一个http服务器const
2021-05-12 15:54:58
954
原创 for in 和 for of
for in1.index索引为字符串型数字，不能直接进行几何运算2.遍历顺序有可能不是按照实际数组的内部顺序3.for in会便利出数组上的的所有可枚举对象，包括原型上的方法和属性所以for in更适合遍历对象，不要使用for in遍历数组。for of• for…of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是，它可以正确响应break、continue和return语句• for-of循环不支持普通
2021-05-12 15:49:38
101
转载 Nodejs 中使用 import / export
使用的是node10版本，但目前为止nodejs对es6的 import / export语法还是无法直接使用，需要借助babel工具编译。1.安装babel-cli和babel-preset-envnpm install babel-cli -Dnpm install babel-preset-env -D2.使用方式正常使用ES6中的 import / export语法//test.jsexport const num = 0;export function foo() { }e.
2021-05-12 15:46:57
2908
原创 排查页面的内存泄漏
前言总所周知，js是有垃圾回收机制的，大致分为标记清除和引用计数，目前主流浏览器都用的是标记清除。定义标记清除：垃圾回收器每个一段时候会扫描一次内存，这个时间很短。在扫描过程中，垃圾回收器会把内存中所有的变量加上标记，然后如果有你需要用到的内存，垃圾回收器就会把对应内存的标记删掉，之后将有标记的内存全部回收删除。这套机制就是垃圾回收机制，这个清理工作是高频操作。（通常全局变量是不会被自动回收的)内存泄漏就是指由于疏忽或程序的某些错误造成未能释放的已经不再使用的内存的情况。简单来说就是一个变量已经不
2021-04-27 16:09:39
913
2
原创 函数防抖，函数节流
我又双叒叕来捡起一切的老知识了~今天主要回顾的是：作为为数不多的面试中高频问题且实际工作经常用到的——函数防抖，节流首先科普一下函数防抖，节流的概念：函数防抖：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。函数节流：限制一个函数在一定时间内只能执行一次。常见应用场景函数防抖的应用场景搜索框搜索输入。只需用户最后一次输入完，再发送请求手机号、邮箱验证输入检测窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重
2021-03-15 16:17:11
121
原创 JS-reduce 使用大全
• 定义：对数组中的每个元素执行一个自定义的累计器，将其结果汇总为单个返回值。• 形式：arr.reduce( ( t, v, i, a) => {}, initValue)• 参数：• callback：回调函数• initValue： 初始值• 回调函数的参数• total( t ): 累计器完成计算的返回值。• value（v）：当前元素• index（i）：当前元素的索引• array（a）：昂铅元素所属的数组对象• 运行过程：以 t 作为累计结果的初始值，不设置t则以数组
2021-01-14 17:23:09
305
原创 手动实现redux
前言我们在学习react时候，最难啃下来的一块就是redux了。可能现在也有很多伙伴都是停留在只会用的阶段～我们应该去深入了解一下redux是如何实现的，从而达到灵活运用。今天，我们就手动实现一个简单的redux。在实现redux之前，我们需要知道一下几点。redux和react没有关系，redux可以用于任何框架中connect不属于redux，而属于react-reduxredux是一个状态管理器。先忘记相关名词 reducer，store，dispatch，middleware等等
2021-01-14 17:16:51
179
原创 React项目如何自定义启动端口！
踩坑过来的！window 和 linux修改方式不一样！React 启动时自定义端口号修改 package.json 中 start 一行Linux or MacOS"start": "PORT=4003 react-scripts start",或者"start": "export PORT=3006 react-scripts start"Windows"start": "set PORT=3006 && react-scripts start"...
2020-12-09 17:00:27
3904
1
原创 浏览器原理-持续汇总
#浏览器的底层原理。###1、 主流浏览器内核市面上主要五大主流浏览器，分别问IE、火狐Firefox，谷歌Chrome，苹果safari，欧朋Opera。浏览器内核IE浏览器Trident内核，也是俗称的IE内核Chrome浏览器之前是webkit内核，现在是BlinkFirefox浏览器Gecko内核Safari浏览器webkit内核Opera浏览器最初是自己的Presto内核，后来加入谷歌，从webkit变成了Blink内核360，猎豹
2020-11-05 15:15:57
344
原创 前端模块化
我们在项目中，模块化是绕不开的一个话题。但平常只是局限于会用的阶段，今天我来好好整理一下模块化的相关知识。模块化是什么？模块就是一个具有特定功能的函数/对象。每个模块的内部数据是私有的，只向外部暴露一些方法进行通信。将一个复杂的程序，依据一定的规则封装成不同的块，并且组合到一起，这样的过程就是模块化。为什么要进行模块化？js发展初期只是为了实现一些简单的页面交互，很少的代码就可以实现功能。随之电脑性能的提升，js各种库的壮大，js已经不再局限于只是一个小小的 嵌入式脚本语言 了。 一些大型的项
2020-10-12 16:00:44
153
原创 Promise实现
"use strict";// let p = new Promise((resolve, reject)=>{// resolve('成功了')// })// p.then((result) => {// console.log(result)// })// console.log(p,Promise)class Promise1 { constructor(executor) { this['[[PromiseStatus]]'] =
2020-08-05 13:59:21
143
原创 Git命令集合
GIT 命令日常常用命令git log 查看最近的commit记录git show commitid 查看改此commit提交的内容git reset --hard id 根据id回退到指定的版本git checkout -b dev origin/dev 切换到远程分支dev并在本地建立对应dev分支。git fetch origin dev:dev1 在本地建立dev1分支，并下载远程地址的origin/dev分支到本地dev1分支。git diff dev1 查看dev1分支与当前分支的
2020-07-15 11:27:07
125
原创 Vue双向绑定和指令的实现。
实现Vue的双向绑定和指令。在实现中已经加了必要的注释，有兴趣的小伙伴可以研究一下～<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
2020-07-15 11:25:22
285
原创 React Hook的useCallback,memo,usememo的使用
1、useCallback每当组件重新渲染的时候，我们之前定义的函数就会被重新声明一次，即使这个函数不需要做出改变。这时可以使用useCallback。useCallback主要用于缓存一个函数。useCallback接收两个参数，第一个参数为一个回调函数，第二个参数为依赖数组。只有当依赖数组中的成员发生变化时，才进行重新声明该回调函数。一个简单的demomport React,{useC...
2020-04-19 12:09:50
358
原创 immutable
1、immutable介绍：immutable对象是不可直接赋值的对象，它可以有效的避免错误赋值的问题2、安装npm install immutable3、immutable的使用方法创建一个immutable对象并修改const {Map} = require('immutable')let preState = { //创建一个普通对象 name : "sultan"...
2020-03-29 00:32:43
332
原创 react配置反向代理—排坑记
1、先安装http-proxy-middlewarenpm i http-proxy-middleware在src文件夹下创建setupProxy.js文件，以下为代码，有详细注释const proxy = require('http-proxy-middleware')module.exports = function(app) { // /api 表示代理路径 // tar...
2020-03-27 22:38:59
702
原创 vue组件通信详解
vue组件通信详解。在使用vue开发的时候，组件是必不可少的一个环节，既然用到了组件，一定会有需要组件通信的时候，今天就来捡一捡组件通信的东西！vue组件通讯的方式有：父传子通信，子传父通信，bus中央事件总线，ref通信。1、父传子通信。<div id="box"> <div class="parent" > 我是父组件...
2020-03-01 11:54:55
717
原创 vue脚手架插件，库汇总——持续更新
1、swiper轮播库官网：https://www.swiper.com.cn/demo/index.htmlSwiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。使用swiper的时候，一定要注意new swiper的时机，最好在update生命周期里进行初始化，否则会出现数据还没请求回来就初始化了，导致轮播不生效。也可以将初始化代码写在nextTick()...
2020-03-01 11:16:24
542
1
原创 跨域科普以及JSONP跨域方法
首先科普一下域，这里只说前端的域。前端的域是指服务器在网络上占据的地址。跨域指的是浏览器请求了服务器A的某个页面，在操作该页面时，发送了一个请求B服务器的资源，这种现象就叫做跨域。如何更详细的判定是否跨域呢？当协议(http/https)，端口或域名中有任何一个不同时，就视为跨域了。为什么要进行跨域？浏览器针对跨域设置了一个策略叫同源策略：原则上只允许请求同一个服务器的资源。注意，静态...
2019-12-20 10:16:30
106
原创 打字小游戏源码—（JS写面向对象编程）
发现这段时间老忘基础单词，死记硬背太枯燥，遂想出写一个打字小游戏，过关制度来复习各个css属性和js关键字！下面贴出游戏界面！下边贴出代码！首先是index（首页）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie...
2019-12-16 08:39:35
1921
2
原创 烟花效果—JS面向对象编程
闲来无事，做了个烟花效果，面向过程的JS原生写的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
2019-12-12 15:39:43
817
原创 H5+CSS3写的旋转立方体
用CSS3的动画写出来的，代码很少，技能锻炼代码能力，也能提高思维能力，有兴趣的小伙伴可以试一试哈！CSS代码<style> *{padding:0;margin:0;} ul{ /*background: 150px;*/ /*posi...
2019-12-10 09:03:40
213
原创 JS实现的淘宝购物车
主要功能为，动态计算价格，移除内容和订单排序功能，先贴一张图！画风比较简陋~用的是JS原生代码写的，所以脚本会比较长！下面是html结构代码。 <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr > ...
2019-12-10 08:58:33
929
原创 纯JS写的轮播图！（有自动轮播，手动左右点击，点击小点切换图片）
图片宽为340px，高为490px，，，当时写的时候把代码写死了，只支持这个的大小的图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...
2019-12-05 10:47:12
1388
原创 JS兼容性问题汇总（主要针对IE）
今天来总结一下JS的兼容问题和相关的解决方法。这里老规矩，吐槽一下万恶之源IE！！1、事件绑定的兼容问题。这里先回顾一下事件绑定的方式，有DOM0级和DOM2级，DOM0级没有兼容性问题，但是缺点也很多，比如不可以在多次绑定同一个事件，后绑定的时间会将先绑定的事件覆盖！！DOM2级绑定方式支持大多数高级浏览器。但是IE8及以下浏览器不支持DOM2级绑定方式，它有自己的绑定方法：attachEve...
2019-12-05 10:37:20
1382
原创 纯JS写的贪吃蛇小游戏（前端初学者看，面向过程代码）
贪吃蛇代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
2019-12-02 10:08:39
1175
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人