- 博客(47)
- 收藏
- 关注
RSS订阅原创 js函数防抖与节流
防抖不管时间触发的频率有多高，必须要在停止触发后的一定时间内才能执行，例如：滚动事件，必须等到滚动停止后才能输出打印// 利用闭包，返回 function debounce(fn, wait, immediate) { console.log("heihei") let timer = null; // 返回一个函数 return function (...args) { console.log(this)
2022-02-27 20:49:35
95
原创 js中的类、继承、构造函数
在es5中实现一个构造函数，并用new调用，即可得到一个类的实例。到了es6发布了Class的写法，js的面向对象变成也变得比较规范了。聊到类就不能不说类的构造函数以及类如何继承
2022-02-26 23:57:45
333
原创 js中的六种错误
SyntaxError：语法错误// 1.1 变量名不符合规范var 1 // Uncaught SyntaxError: Unexpected number// 1.2 给关键字赋值function = 5 // Uncaught SyntaxError: Unexpected token =Uncaught ReferenceError：引用错误 // 2.1 引用了不存在的变量 // 至少声明了才能用，声明了不赋值是undefined cons
2022-02-26 12:06:15
325
原创 js闭包应用
闭包：函数能够访问其他函数内部的变量在一个函数作用域中，函数内部的变量可以被它的子函数所访问，这是因为在js运行时会创建上下文环境，js寻找变量的过程就是从当前作用域寻找，找不到就去上级寻找，一直到window，如果还是没有就返回undefined。闭包优点：避免全局变量的污染变量长期保存在内存中，不会被清除常见例子：返回内部子函数 function count(){ var a = 0 return { up:function ()
2022-02-25 23:18:38
306
原创 react高阶组件的使用
高阶组件高阶组件：高阶组件是参数为组件，返回值为新组件的函数。作用：像我们之前用到的react的Form组件和redux的connect函数都是高阶组件，使用高阶组件能够提高代码复用能力实现一个高阶组件实现一个高阶组件很容易，只需要简单的几步就好了import React, { useEffect, useState } from "react";interface Props{ }function WithComponent(WrappedComponent: React.FC&l
2022-02-22 23:20:12
606
原创 react代码分割（二）之react.lazy和Suspense组合
之前介绍过代码分割的插件react-loadable：react代码分割（一）之react-loadable，这次介绍一下react官方提供的方法动态import语法在react官网的代码分割部分阐述了为什么要代码分割，以及代码分割实现需要靠动态import进行为了方便使用，react自身提供了lazy和suspense组合使用进行代码分割使用样例首先使用lazy引入组件// router.tsimport { lazy } from "react"const Home = lazy(()
2022-02-22 22:50:00
879
原创 webpack5引入包报错Moudle not found : cant resolve ‘url‘ in “xxx“ BREAKING CHANGE: webpack ＜ 5
问题webpack5 在引入mqtt组件的时候报错：Moudle not found : cant resolve ‘url’ in “xxx” BREAKING CHANGE: webpack < 5解决办法在 webpack.config.js中找到alias配置项报错缺少什么就在这里加上配置即可
2022-02-22 20:45:00
4587
4
原创 百度地图鼠标绘制后判断点是否在圈内isPointInRect的api异常
业务场景：在一次开发中，需要通过页面鼠标绘制多边形圈选人创建群聊鼠标绘制利用百度地图的鼠标绘制api画出多边形，例：百度鼠标绘制DEMO;圈选完成后利用BMapLib.GeoUtils完成判断点是否在多边形内，BMapLib.GeoUtils中提供了多种判断的api但是矩形的判断一直失败。。。。。无奈之下我打印了isPointInRect方法，并且复制下来在内部加了打印，发现类型判断一直不能通过，bounds参数的getSouthWest等方法也不存在。 41 GeoUtils.isPo
2021-12-13 18:15:00
817
原创 window.loaction和window.history对象
window.locationwindow.location.hrefa标签路由管理插件哪些引起页面刷新
2021-11-22 23:55:31
398
原创 Js模块化规范
模块化前端模块化我们所熟知的是AMD、CMD、ES6模块化、CommonJSCommonJS这是由node引入的一种规范，这种规范的特点是每个文件是一个模块，有自己的作用域。在任意一个模块中都有一个module对象，它的exports属性是对外提供的接口，其他文件加载模块的时候就是在读取这个属性的值，用require命令读取模块。CommonJs的读取过程是同步的，这在服务端因为资源都在本地，所以并不会造成阻塞。参考 阮一峰CommonJS规范AMD、CMDAMD、CMD规范都是异步加载的，
2021-11-05 00:02:36
56
原创 parcel打包报错Error opening directory
win10系统parcel打包的时候报错Error opening directory，找到最后发现手残路径里面有中文导致的，把文件路径里的中文都去掉就好了
2021-11-03 16:13:31
472
原创 谈谈Cookie、sessionStorage、localStorage
一、Cookie、sessionStorage、localStorageCookiecookie是存储在本地终端上的一个小型文本文件，主要作用是服务器与客户端会话时记录用户身份的cookie的大小一般不超过4K，由一个Name、一个Value构成和Expires（控制cookie的生存期）、Path（web站点可以访问cookie的目录）、Domain（指定可以访问cookie的web站点或者域）、Secure（指定是否使用HTTPS安全协议发送cookie）、HttpOnly（防止客户端通过脚本访
2021-10-21 23:48:33
93
原创 广度优先遍历、深度优先遍历js实现
介绍深度优先遍历：自上而下的遍历广度优先遍历：逐层遍历例如一个二叉树，每次遍历优先找叶子节点就是深度优先，每次先找同一层次的节点就是广度优先一、深度优先 var tree = [ { name: "中国", children: [ { name: "北京", children: [ { name: "海淀区", },
2021-10-14 00:44:22
470
原创 MVVM、MVC、MVP个人解读
文章目录前言一、MVC二、MVP三、MVVM总结前言文章是个人理解，查阅过百度百科，博客、知乎等网站之后以自己的理解做一下记录。一、MVCMVC模式是经典的软件设计模式，主要由Modal、View、Controller层组成。其中View的定义最清晰，主要负责用户交互；Modal层主要是数据的存储和处理；Controller层负责沟通协调Modal和View（例如View获取用户的输入后，告知Modal处理数据，完成数据处理后通知View更新视图）。Modal层拥有最多的数据处理，这一层的数
2021-10-11 01:30:03
154
原创 数组排序的算法用js实现
冒泡排序 var arr = [2, 11, 5, 3] function sort1(arr) { var len = arr.length for (var i = 0; i < len; i++) { /** * 第一次循环时i = 0, * 进过内层的循环后，确保arr[0]为数组的最小项 * 不必比较当j = 0，也就是j =< i时的情
2021-09-28 08:15:00
84
原创 js继承的实现
这里主要介绍两种比较好的继承方式组合继承组合继承实际上指的是继承了父类的原型链并且调用了父类的构造函数代码如下： function Person(name){ this.name = name || 'user' console.log(this.name) this.showName = function(){ console.log('my name is '+ this.name) } }
2021-09-24 11:19:07
57
原创 call、apply、bind实现
call改变this指向，传递参数为（目标对象，方法的参数逐个传入）代码如下： var obj = { name: 'sss' } function showName(name) { console.log('name：' + name + ' this.name：' + this.name) } Function.prototype.myCall = function (object) { let obj = object ||
2021-09-24 10:39:38
69
原创 new操作符做了什么，实现一个new方法
new操作符做了什么MDN上的说明是：创建一个空的简单JavaScript对象（即{}）；为步骤1新创建的对象添加属性__proto__，将该属性链接至构造函数的原型对象 ；将步骤1新创建的对象作为this的上下文 ；如果该函数没有返回对象，则返回this。实践一下 function Person(name,age){ this.name = name this.age = age } var child1 = new Person('t'
2021-09-23 11:17:20
110
原创 js计算数组中的最大值
不再示范循环遍历的方法1.sort排序sort排序需要注意sort函数本身会按照字符串形式进行排序，正确的排序需要用一个比值函数 var arr = [4,22,45,1,31,52] arr.sort(fn) console.log(arr,arr[arr.length-1]) // [1, 4, 22, 31, 45, 52] 52 // 比值函数 function fn(a,b){ return a-b }2.reduce方法
2021-09-21 23:29:08
2897
原创 js实现观察者模式与发布订阅模式的对比
观察者模式当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者与发布订阅模式的不同观察者模式只有两个角色，发布订阅模式多了中间管理者观察者和被观察者之间是松耦合关系，发布者和订阅者之间完全不存在耦合关系发布订阅模式的系统更加庞大适用于较大的系统，观察者模式适用于单个应用内部实现代码 // 目标者类 class Subject { constructor() {
2021-09-21 12:13:21
165
原创 js简单实现发布订阅者模式
发布订阅模式在发布订阅模式中，发布者和订阅者并不会直接交流，由一个中间调度者做中间人，实现消息的传递。相对于观察者模式，发布订阅模式的规模更适用于较大规模的消息通知优点：发布订阅模式将对象之间解耦，发布者不必关心消息传递给谁，订阅者只需要负责对应主题消息的接受即可缺点：订阅者一旦实例化就必须占用内存，但订阅者并不能一定获取到对应主题发送的消息，也就是这个主题不一定会有新的消息通知JS代码实现发布者=》主题中间件=》订阅者// 发布者 class Publish{ cons
2021-09-21 11:45:48
676
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人