MichaelAn的博客

Write less, do more!

前端技术细节(不断更新中)

前端的知识点比较碎,所以需要不断的学习巩固。 1,reflow和repaint:回流和重绘。 回流:renderTree 重建。 重绘:外观样式风格进行更新。(color更改) 页面在第一次加载时候必须进行了回流操作,有回流一定伴随重绘,但是重绘不一定回流。 减少回流和重绘,也就是减少对rende...

2019-01-08 18:13:28

阅读数 1312

评论数 0

React中获取元素位置

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

2018-09-22 10:45:41

阅读数 1668

评论数 0

React中loading界面处理

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

2018-08-19 13:04:18

阅读数 2520

评论数 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

阅读数 2803

评论数 0

Web前端开发标准规范总结

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

2018-07-15 07:32:40

阅读数 1729

评论数 1

CodeMirror安装及使用

Code mirror code mirror 是一个代码编辑插件,最终效果如下 在常规HTML界面使用 <!--选择脚本编码代码--> <div class="controls"&am...

2019-01-29 18:02:04

阅读数 12

评论数 0

数据结构——数组方法

01 数组中的过滤器方法 every: 数组的每一项的函数返回值都是true,结果才是true,否则是false(&&)。方法不改变原始数组。返回值是boolean。 some: 数组的任何一项是true,some函数返回值及时t...

2019-01-28 11:22:21

阅读数 28

评论数 0

svg绘制折线图

svg http://www.ruanyifeng.com/blog/2018/08/svg.html 1、svg 插入界面 方法一:直接以svg标签插入界面中 方法二:以外部文件的形式插入embed iframe 标签中 方法三:以 css 的背景图片插入界面中 2、svg标签使用 ...

2019-01-23 10:59:21

阅读数 21

评论数 0

前端绘制小猪佩奇(CSS)

绘制小猪佩奇的方法有很多。从前端的角度,可以在 canvas 中绘制,或者直接使用 css3 绘制。这里就练习最基本的CSS绘制小猪佩奇。 <!DOCTYPE html> <html> &l...

2019-01-19 15:28:53

阅读数 133

评论数 0

佩奇——Python方法

#coding=utf-8 from turtle import* # 这个库是pyhton 绘图的库 def nose(x,y):#鼻子 penup()#提起画笔 goto(x,y)#定位 pendown()#落画笔,开始画 setheading(-30)#将...

2019-01-19 15:24:41

阅读数 40

评论数 0

文件上传五种方法对比

文件上传 这里参考阮一峰老师的博客,原文写于2012年,现在需要不断学习新东西。 早期不同文件上传浏览器兼容性不好。现在HTML5出现后有了统一的接口。 1、早期 form 表单同步上传 <form id="upload-form" act...

2019-01-10 11:06:41

阅读数 64

评论数 0

SVG 绘制基本图像

svg http://www.ruanyifeng.com/blog/2018/08/svg.html 1、svg 插入界面 方法一:直接以svg标签插入界面中 方法二:以外部文件的形式插入embed iframe 标签中 方法三:以 css 的背景图片插入界面中 2、svg标签使用 ...

2019-01-07 18:32:29

阅读数 44

评论数 0

React 高阶 API 学习

React 高阶 API 使用方法:react 是React库的入口点。如果你通过 <script> 标签加载React,这些高阶API可用于 React 全局。如果你使用ES6,你可以使用 import React from 'react' 。如果你...

2018-12-22 17:12:01

阅读数 79

评论数 0

AttributeError:object has no attribute 报错及解决

报错情况:在前端测试中,界面发送一个 PUT 请求,界面发生上面的报错,请求无法响应,服务器状态码是500。 错误分析:语义上是“对象没有一个XXX属性”。 查阅大部分资料,大部分说 Python 的问题。这个项目前端使用 React, 后端使用 Python 的 djongo 框架。...

2018-12-22 17:10:08

阅读数 36

评论数 0

Range对象

range 对象是选中的一段区域,包括一个开始节点和一个结束节点(anchorNode focusNode)通过节点和offset可以构造一个选区,进一步操作选区的文本内容。下面是常用的API,参考整理于MDN。 Selection 学习 Selection对象表示用户选择的文本范围或插入符号...

2018-12-22 16:43:41

阅读数 19

评论数 0

浏览器事件总结

原文来源于MDN,有时候MDN无法访问,可以自己参考下面的说明。 DOM 事件被发送用于通知代码相关的事情已经发生了。每个事件都是继承自Event 类的对象,可以包括自定义的成员属性及函数用于获取事件发生时相关的更多信息。事件可以表示从基本用户交互到渲染模型中发生的事件的自动通知的所有内容。 ...

2018-12-22 16:41:09

阅读数 49

评论数 0

如何学习React框架

2019-1-23 复习:现在关键在于打包工具 React 作为2018年市场占有率很高的框架使我们必须懂得的。 学习react前需要有基本的 html+css+js 的 基础。 如何踏入 React 你应该按照以下的顺序进行学习, 而不是跳着学或者同时学习: React ...

2018-12-22 16:34:25

阅读数 23

评论数 0

Super expression must either be null or a function, not undefined 报错及解决

在 React 项目中,遇到了上面的报错信息。 Super expression must either be null or a function, not undefined 查阅资料,进行这样的分析: // 原始代码 'use strict'; import Realm fr...

2018-12-12 23:28:09

阅读数 87

评论数 0

React 避免重新渲染-性能优化

React 避免重新渲染 性能优化 React框架运行的原理:界面受到数据驱动,state 和 props 的改动会造成界面的改动。其中,state 是自身的属性,props 是父组件提供的参数。如果界面内容很多,很小的数据变化会造成界面的重绘,那么造成性能的浪费。下面从几个方面总结一下如何避免...

2018-12-06 10:14:47

阅读数 130

评论数 0

stopImmediatePropagation 事件

复习:2019-1-25 event.stopImmediatePropagation() 方法阻止剩下的事件处理程序被执行。该方法阻止事件在 DOM 树中向上冒泡。停止当前节点,和所有后续节点的事件处理程序的运行。 stopPropagation 会阻止事件向上层元素冒泡。如果同一个元素绑定...

2018-12-06 10:12:53

阅读数 28

评论数 0

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