MichaelAn的博客

Write less, do more!

React中获取元素位置

React框架使用虚拟DOM代替真实的DOM来优化性能,使用props和state进行属性传递。所以说在react中直接获取DOM元素的位置是不合理的(不利于性能)。那么我们可以使用下面的API: document.documentElement.getBoundingClientRect S...

2018-09-22 10:45:41

阅读数 4824

评论数 0

Blob和File对象API与兼容性问题

前几天在上传文件过程中遇到Blob对象和File对象的相关问题,查资料结果如下: blob 在浏览器环境下,可以实现对blob的引用(浏览器会自动集成);但是在nodeJS环境下如何实现blob引用?文件传入依赖?具体怎样使用blob? 要求:首先在Node环境下上传简单文件。 File是特...

2018-08-19 19:14:39

阅读数 3652

评论数 0

React中loading界面处理

前几周,boss给出一个任务:在网站页面加载前设置一个loading界面。 设置loading界面,如果用户网络状况一般,或者用户执行请求操作频繁,可以让用户减少等待时间,有利于提升用户体验。那么具体怎样实现loading界面呢?查询资料进行实践,得出下面几个方案: 方案一: 在react框...

2018-08-19 13:04:18

阅读数 6617

评论数 0

Cannot read property innerHTML of null 报错信息

Cannot read property 'innerHTML' of null ——这个报错的字面含义是:不能读取空的内部HTML。 这个报错是一个初学者的问题。实际上,在页面的HTML结构中,innerHTML是有实际的值并可以在console进行获取查询到。 问题:script中关于DO...

2018-07-20 09:29:19

阅读数 6444

评论数 4

Web前端开发标准规范总结

Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。备注:实际开发请以本公司的规范为标准。A.基本原则符合web标准(UTF-8,HTM...

2018-07-15 07:32:40

阅读数 7694

评论数 1

超级玛丽JavaScript实现(Super Mario JS recompiled)

前几天用JS实现扫雷和贪吃蛇(通过HTML的DOM节点实现基本界面,界面背景简单,交互简单)。比较复杂的是植物大战僵尸,不同的关卡设置单独的函数,僵尸和植物使用不同的类名实现。 超级玛丽通过canvas实现背景,交互很复杂,功能很多,JS代码完全是有汇编语言反编译成C语言,然后把C语言转换成JS...

2019-08-21 11:48:20

阅读数 6

评论数 0

Resumable 文件分块上传

Resumable.js 提供多个同时上传,稳定的可以撤销的文件上传(使用HTML的文件API) It’s a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML...

2019-08-20 14:42:06

阅读数 5

评论数 0

扫雷JS实现

前几天分析了贪吃蛇的JS前端实现方案,今天分析了扫雷的实现。 因为扫雷单元格较多,获取元素设置样式频繁,所以使用Jquery库处理元素选择部分。 下面是源代码 function Cell(row, column, opened, flagged, mined, neighborMin...

2019-08-19 09:32:12

阅读数 13

评论数 0

贪吃蛇JS实现

网上看到可以使用原生JS实现贪吃蛇,JS代码300行,下面是游戏截图。 废话不多说,直接上代码,HTML和CSS部分不分析。JS部分的功能说明在注释中。 先放CSS代码 body { background: rgb(102, 178, 255); } main { max-w...

2019-08-16 18:20:06

阅读数 16

评论数 0

npx和npm的区别

npx 是 npm 的高级版本,npx 具有更强大的功能。 用途 在项目中直接运行指令,直接运行node_modules中的某个指令,不需要输入文件路径 node-modules/.bin/babel.js --version npx babel --version 避免全局安装模块:np...

2019-08-13 23:19:41

阅读数 11

评论数 0

React中使用LocalStorage用户登录

localStorage 通常用来存储服务器发送的一些数据或者用户自定义数据。localStorage 中的键值对总是以字符串的形式存储。 (意味着数值类型会自动转化为字符串类型)。 与 cookie 相比,localStorage 的存储量较大(cookie只有2k,只能存放字符串),下面介绍如...

2019-08-05 10:31:22

阅读数 106

评论数 0

7月前端知识点总结

今天已经7月31号,简单总结这个月的知识点和个人想法: 1、前端架构设计 view-model 分离思想:现在前端使用 React 框架。React 框架通过状态驱动,父子组件之间通过 props 进行数据传递,组件内部使用 state 控制行为。如果是组件自身的行为,控制行为的状态(state...

2019-07-31 22:01:02

阅读数 14

评论数 0

ECMA7 新标准

日常项目中,ES5 ES6 的语法经常使用,一部分新标准和提案已经增加,这里简单总结一下。 ES7 array.includes(item) return bool ES8 Async Functions SharedArrayBuffer和Atomics Object.values、Obj...

2019-07-29 22:44:01

阅读数 30

评论数 0

React-mentions 基本使用

最近需要做一个类似微博评论功能@用户的功能,手写JS的效率很低,所以使用 React-mentions 库实现这个功能。看了一下网上没中文介绍,所以自己看完英文介绍简单总结一个中文介绍。 使用 1、安装 npm 安装 npm install react-mentions --save yarn...

2019-07-22 17:13:39

阅读数 17

评论数 0

ladash 库 pick和omit函数介绍

Lodash 是常用的数据处理库函数,今天项目中遇到 omit 就简单写一下使用方法。 我们需要引入lodash,下面是 ES6 中的引入方法; const _ = require('lodash/object'); pick _.pick(object, *keys) 函数返回一个只有列入挑选...

2019-07-18 16:47:15

阅读数 32

评论数 0

避免事件频繁触发

避免事件频繁触发的方法,用于界面防抖和函数节流等。 直接上代码。 onKeyDown = {(e) => { e.persist(); let that = this; setTimeout(() => { that.function(e.targe...

2019-07-18 14:56:57

阅读数 13

评论数 0

进程和线程

进程和线程 最近看了阮一峰和廖雪峰大神的博客,简单总结一下进程和线程。 概念 **进程(Process)和线程(Trread)**是操作系统处理任务的一个单位。进程类似于任务管理器中的程序,例如 QQ.exe 和 chrome.exe。一个进程包含一个或者多个线程,例如 word.exe 程序可以...

2019-07-16 13:50:16

阅读数 27

评论数 0

UUID库介绍和使用

UUID介绍 UUID是Universally Unique Identifier的缩写,它是在一定的范围内唯一的机器生成的标识符,使用RFC规范。 结构 UUID 是一个128bit的数字,也可以表现为32个16进制的字符,中间用”-”分割 3F2504E0-4F89-11D3-9A0C-030...

2019-07-03 11:35:22

阅读数 87

评论数 0

favicon 尺寸问题

Favicon dimensions 最近更新网站的 favicon.ico 图标文件,需要美女设计师重新设计图标,那么需要设计什么尺寸的图标呢?有没有固定的标准? 百度上的解释是 又查了下其他的资料 在栈溢出找到了详细的解释:https://stackoverflow.com/questio...

2019-07-01 22:15:16

阅读数 75

评论数 0

超级实用前端知识点和面试题

这是搜集网上的多个前端经典知识点,不断更细中。虽然忙着每天的工作,但是基础知识要熟练掌握不断温习。 CSS CSS 常见布局方式 【整理】CSS布局方案 CSS查漏补缺 [布局概念] 关于CSS-BFC深入理解 [译]这些 CSS 命名规范将省下你大把调试时间 CSS知识总结 前端开发规范:命名...

2019-06-28 11:22:29

阅读数 38

评论数 0

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