JavaScript
关注
分享
扫一扫
mytheart
学习是一种生活方式。享受过程。
展开
-
React实现图片缩放效果
JS版本import React, { PureComponent, createRef } from 'react'import PropTypes from 'prop-types'export default class PrismaZoom extends PureComponent { static propTypes = { children: PropTypes.node.isRequired, className: PropTypes.string, st原创 2021-09-25 11:36:45 · 963 阅读 · 0 评论 -
原生js实现轮播图
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <title></title> <script src="htt原创 2021-09-24 00:37:40 · 258 阅读 · 0 评论 -
优秀文章整理
调试技巧：如何快速知道页面上所有元素的轮廓跟位置小程序调试新方案——WeConsole原创 2021-09-04 23:03:43 · 104 阅读 · 0 评论 -
关于滚动的属性和api整理
容器元素element.scrollTop/scrollLeft // 获取或设置一个元素的内容垂直滚动的像素数（可读可写）element.clientHeight // 如下图（只读）element.scrollHeight // 获取一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容（只读）element.scrollTo(x-coord, y-coord); // 使内容滚动到给定元素的指定坐标位置 element.scrollBy(x-coord, y-coord)原创 2021-04-09 17:22:26 · 203 阅读 · 0 评论 -
JavaScript数据结构和算法
01-线性数据结构之数组线性数据结构：也叫一维数据结构，线性的数据结构强调存储和顺序，常用的有数组和链表两种线性数据结构。特性存储在物理空间上是连续的；数组定长，底层的数组长度是不可变的；数组的变量，指向了数组第一个元素的位置；优点查询性能好缺点因为数组存储的空间必须得是连续的，所以如果数组比较大，当系统的空间碎片较多的时候，容易存不下；因为数组的长度是固定的，所以数组的内容难以被添加和删除；补充数组 a = [1, 2, 3, 4, 5, 6], a[1], a[2]原创 2020-10-07 02:31:31 · 521 阅读 · 0 评论 -
经典文章收藏
React Fiber 原理介绍BFF——服务于前端的后端深入理解CSS中的层叠上下文和层叠顺序-张鑫旭原创 2020-09-20 20:44:02 · 198 阅读 · 0 评论 -
MVC/MVVM（Redux的核心概念）
Redux核心概念action reducer storeMVC它是一个UI的解决方案，用于降低UI，以及UI关联的数据的复杂度。传统的服务器端的MVC[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vt7TOLof-1600448457535)(assets/2019-08-20-13-18-58.png)]环境：服务端需要响应一个完整的HTML该HTML中包含页面需要的数据浏览器仅承担渲染页面的作用以上的这种方式叫做服务端渲染，即服务器端将完整的原创 2020-09-19 01:01:55 · 773 阅读 · 0 评论 -
事件循环
事件循环JS运行的环境称之为宿主环境。执行栈：call stack，一个数据结构，用于存放各种函数的执行环境，每一个函数执行之前，它的相关信息会加入到执行栈。函数调用之前，创建执行环境，然后加入到执行栈；函数调用之后，销毁执行环境。JS引擎永远执行的是执行栈的最顶部。异步函数：某些函数不会立即执行，需要等到某个时机到达后才会执行，这样的函数称之为异步函数。比如事件处理函数。异步函数的执行时机，会被宿主环境控制。浏览器宿主环境中包含5个线程：JS引擎：负责执行执行栈的最顶部代码GUI线程：负责原创 2020-09-18 01:13:37 · 150 阅读 · 0 评论 -
h5定位总结（h5api + 高德 + 腾讯）
H5 API定位总结：定位非常不准，并且成功率很低。高德定位在PC端和IOS端经常定位失败，安卓定位还可以。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>高德定位 和 H5定原创 2020-07-02 20:03:10 · 4786 阅读 · 0 评论 -
前端文件下载
function download(url, filename) { return fetch(url).then(res => res.blob().then(blob => { let a = document.createElement('a'); let url = window.URL.createObjectURL(blob); a.href = url; a.download = filename;原创 2020-07-06 17:14:30 · 157 阅读 · 0 评论 -
手写Redux源码
import isPlainObject from "./utils/isPlainObject"import ActionTypes from "./utils/ActionTypes"function validateReducers(reducers) { if (typeof reducers !== "object") { throw new TypeError("re...原创 2020-03-22 23:43:26 · 352 阅读 · 0 评论 -
异步处理的通用模型Promise
1. 异步处理的通用模型ES官方参考了大量的异步场景，总结出了一套异步的通用模型，该模型可以覆盖几乎所有的异步场景，甚至是同步场景。值得注意的是，为了兼容旧系统，ES6 并不打算抛弃掉过去的做法，只是基于该模型推出一个全新的 API，使用该API，会让异步处理更加的简洁优雅。理解该 API，最重要的，是理解它的异步模型ES6 将某一件可能发生异步操作的事情，分为两个阶段：unsettled 和 settledunsettled： 未决阶段，表示事情还在进行前期的处理，并没有发生通向结果的那原创 2020-05-09 14:52:23 · 502 阅读 · 0 评论 -
React渲染原理
渲染原理渲染：生成用于显示的对象，以及将这些对象形成真实的DOM对象React元素：React Element，通过React.createElement创建（语法糖：JSX）例如：<div><h1>标题</h1></div><App />React节点：专门用于渲染到UI界面的对象，React会通过React元素，创...原创 2019-10-17 00:33:56 · 702 阅读 · 0 评论 -
export default与export的区别
1.export default 和export都可以用于导出常量，函数，文件，模块等；2.可以在模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用3.在一个文件或者模块中，export,import可以有多个，但是export default只能有一个。4.通过export方式导出，在导入的时候需要加{}，export default不需...原创 2019-08-17 00:28:49 · 235 阅读 · 0 评论 -
React生命周期详解（图）
React16.3版本以前的生命周期React16.3版本以前的生命周期注意：componentWillMount()、componentWillReceiveProps()、componentWillUpdate()在React16.3新版本中都被移除；在React16.3新版本的生命周期函数中，getSnapshotBeforeUpdate()生命周期函数必须要有返回值，且必须和...原创 2019-07-28 10:24:16 · 457 阅读 · 0 评论 -
JavaScript（浏览器）执行的时间线
JavaScript（浏览器）执行的时间线（创建document对象=>文档解析完=>文档解析玩加载完执行完）创建Document对象，开始解析web页面。这个阶段document.readyState=‘loading’;遇到link外部css，创建线程，进行异步加载，并继续解析文档；遇到script外部js，并且没有设置async、defer，浏览器同步加载，并...原创 2019-06-06 21:33:22 · 1704 阅读 · 2 评论 -
JavaScript中异步加载js的三种方案
defer，异步加载，但要等dom文档全部解析完（dom树生成）才会被执行。只有IE能用;async,异步加载，加载完就执行;async只能加载外部脚本，不能把js写在script标签里。ie9以上可以用，w3c标准；动态创建script，插入到DOM中，加载完毕后callBack，可以按需加载，很方便；4....原创 2019-06-06 21:36:00 · 1823 阅读 · 0 评论 -
什么情况下会遇到跨域，前端常见处理跨域的几种方式
浏览器最核心，最基本的安全功能是同源策略。限制了一个源中加载文本或者脚本与其他源中资源的交互方式，当浏览器执行一个脚本时会检查是否同源，只有同源的脚本才会执行，如果不同源即为跨域。jsonp：原理就是利用了script标签src属性外联引入文件不受同源策略的限制，在页面中动态插入了script，script标签的src属性就是后端api接口的地址，并且以get的方式将前端回调处理函数名称告诉...原创 2019-06-07 12:52:05 · 12424 阅读 · 0 评论 -
JavaScript防抖和节流
防抖概念：任务频繁触发的情况下，只有任务触发的间隔超狗指定间隔的时候，任务才会触发。应用：百度搜索框。输入关键词之后会调用接口，获取联想词。但是，频繁调用接口会影响性能，所有此时应使用防抖：只有在用户输入完毕的一小段时间后，才会调用接口，出现联想词。代码function debounce(handle, delay) { var timer = null; return f...原创 2019-06-07 22:08:40 · 206 阅读 · 0 评论 -
详解es6Map实现原理及实现自己的Map方法
待更新。。。原创 2019-06-18 23:52:28 · 3619 阅读 · 6 评论 -
使用ES6模拟Promise
待更新。。。原创 2019-06-16 11:53:56 · 3392 阅读 · 2 评论 -
自己封装的简易版jQuery
学过jQuery快一年了，学jQuery时曾尝试封装过一个简易的jQuery，也是为了考察自己对原生js的掌握程度。实现了jQuery的部分功能。如选择元素、add、trigger、queue、dequeue、delay、animate、callback、deffer…等方法Github地址：添加链接描述(function () { function jQuery (selector)...原创 2019-06-17 15:47:51 · 1642 阅读 · 1 评论 -
JavaScript实现排序算法
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...原创 2019-06-11 22:54:33 · 1057 阅读 · 0 评论 -
JavaScript运行机制、预编译、执行期上下文、作用域链、闭包
1.js运行的三部曲首先，我们需要了解JavsScript在浏览器中运行的三个步骤语法分析 > 预编译（重点）=>解析执行语法分析：整体分析js语法有没有错误，有的话机会报错停止运行预编译（重点）：主要解决j执行顺序的问题；（如变量声明提升，函数声明提升等）解析执行2.执行环境及作用域执行环境也叫执行期上下文。在这，我们需要先了解几个JavaScript中的几个重...原创 2019-06-17 19:09:22 · 471 阅读 · 0 评论 -
算法复杂度和大O表示法
概念算法复杂度是指算法在编写成可执行程序后，运行时所需要的资源，资源包括时间资源和内存资源。时间复杂度一个算法执行所耗费的时间，从理论上是不能算出来的，必须上机运行测试才能知道。但我们不可能也没有必要对每个算法都上机测试，只需知道哪个算法花费的时间多，哪个算法花费的时间少就可以了。并且一个算法花费的时间与算法中语句的执行次数成正比例，哪个算法中语句执行次数多，它花费时间就多。一个算法中的语句...原创 2019-06-25 16:58:55 · 1346 阅读 · 0 评论 -
原生js封装的一些常用方法
// 1.输入一个值，返回其数据类型function type(para) { return Object.prototype.toString.call(para)}// 2.数组去重function unique1(arr) { return [...new Set(arr)]}function unique2(arr) { var obj = {};...原创 2019-06-25 22:31:16 · 2211 阅读 · 1 评论 -
Node.js权威指南读书笔记
1.1 Node.js概述1.1.1 使用Node.js能够解决什么问题在Java、PHP或ASP.NET等服务器端语言中，为每一个客户端连接创建一个新的线程，而每个线程需要耗费大约2MB的内存，也就是说，理论上，具有8GB内存的服务器可以同时连接的最大用户数为4000个左右。要让Web应用程序支持更多的用户，就需要增加服务器的数量，而Web应用程序的硬件成本也就随之增加了。不仅如此，在技术层...原创 2019-07-01 20:01:53 · 257 阅读 · 0 评论