- 博客(78)
- 收藏
- 关注
RSS订阅原创 js观察者监听判断dom元素是否在可视区域内
观察者模式监听判断dom元素是否在可视区域内本项目是使用vue3 setup的写法。在页面挂载完毕后设置observer监听：
2022-03-29 15:13:18
5617
1
原创 echarts-wordcloud中配置项
echarts-wordcloud中配置项series: [{ type: 'wordCloud', shape: 'circle', //圆形circle（默认），心形（heart，apple），菱形（diamond）， //向前的三角形（triangle-forward） ，三角形（triangle），直立三角形（triangle-upright), 五边形（pentagon）, 星型（star） //
2022-03-16 10:22:23
2565
原创 wordcloud与legend搭配使用的问题。
1.在option中的legend配置项中，设置selectedMode : ‘single’2.由于echarts-wordcloud中会存在layoutInstance问题，但我们本身无法在node_module中修改。Uncaught (in promise) TypeError: Cannot read property 'layoutInstance' of undefined3.卸载echarts-wordcloud npm uninstall echarts-wordcloud4.通
2022-03-16 10:20:50
760
原创 react hooks学习笔记（二）
Hook规则Hook的本质其实就是javascript函数，但是在使用它们的时候需要遵循两条规则，我们提供了一个linter插件来强制执行这些规则。规则一：只在最顶层使用Hook遵循这条规则，就可以确保Hook在每一次的渲染中都按照同样的顺序被调用。可以让React在多次的useEffect和useState种调用之间保持hook状态的正确。规则二：只在React函数种调用Hook不要在普通的JavaScript函数中调用Hook...
2022-02-28 11:10:43
460
原创 react hooks学习笔记（一）
React Hooks简介React Hooks是在React 16.8版本引入的全新API，程序员可以在不编写class的情况下使用state以及其他React中的特性。在16.8版本之前，组件的标准写法是类，也就是class。hook为已知的react概念提供了更为直接的API：props、state、context、refs以及一些新的生命周期钩子函数。...
2022-02-07 20:38:40
657
原创 taro-react
Taro支持将web框架直接运行在各个平台，开发者使用的大多数是react，vue。但是在taro中使用react开发和我们熟悉的web端还是存在一些差异，以下我们将差异详细列出。
2022-01-18 12:33:41
4186
原创 Taro设计尺寸
Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写，即从设计稿上量的长度 100px，那么尺寸书写就是 100px，当转成微信小程序的时候，尺寸将默认转换为 100rpx，当转成 H5 时将默认转换为以 rem 为单位的值。所以建议使用px或者%。如果我们不需要将尺寸进行转化，可以将px写成PX或者Px。此时class ignore在转化时将会被忽略。.ignore { border: 1Px solid; // ignored border-widt.
2022-01-17 15:18:17
1240
原创 VUE导航守卫
1.导航守卫是什么？导航守卫就是路由跳转的过程中的一些钩子函数。（路由跳转是一个大的过程，这个大的过程分为跳转前，跳转中，跳转后等过程，在每一个过程中都有一个函数，这个函数可以让你操作一些其他的事情）比如说点击一个页面，如果未登录就跳转到登录页面，已登录就让用户正常进入使用。2.全局路由守卫分类router.beforeEach（全局前置守卫）router.boforeEach((to,from,next)=>{ //to:将要进入的目标路由对象 //from：即将离开的目标路由对象
2021-07-27 12:11:13
367
原创 Ajax的认识
2005年2月，Ajax这个词被第一次正式提出，它是 Asynchronous JavaScript and XML的缩写，指的是通过JavaScript的异步通信，从服务器获取XML文档，并从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。具体的来说，Ajax分为以下几个步骤：创建XMLHttpRequest对象，也就是创建一个异步调用对象。创建一个新的HTTP请求，并指定该HTTP请求的方法，URL以及验证信息。设置响应HTTP请求状态变化的函数。发送HTTP请求。获取异步调用返
2021-07-22 17:41:27
103
1
原创 JS中的JSON
相关知识点：JSON是一种数据交换格式，基于文本，优于轻量，用于交换数据。JSON可以表示数字、布尔值、字符串、null、数组（值得有序序列），以及由这些值（数组，对象）组成的对象（字符串与值的映射）JSON使用JavaScript语法，但是JSON格式仅仅是一个文本，文本可以被任何编程语言作为数据格式传递。我对JSON的理解：JSON是一种基于文本的轻量级的数据交换格式可以被任何变成语言读取和作为数据的格式传递。在项目的开发中，我们使用JSON作为前后端数据交换的方式。在前端我们通过一个将
2021-07-22 16:34:19
1674
原创 js创建对象的七种方式
(1)工厂模式优点：解决了创建多个相似对象时，代码的复用问题缺点：使用工厂模式创建的对象，无法判断一个对象的类型是什么function Person(name,age,job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ console.log(this.name) } return o;}var
2021-07-20 14:21:03
165
原创 JS设计模式之工厂模式
工厂模式简单来说，工厂模式是将实现同意事请的相同代码，放到一个函数中去，以后如果想再实现这个功能，都不需要重新编写这些代码了，只要执行当前的函数即可。主要思想将对象的创建和对象的实现相分离，是一种关注对象创建的概念。简单工厂简单工厂模式也称为静态工厂模式，由一个工厂对象来决定创建某一种产品对象类的实例，主要用来创建同一类对象。调用需要的功能到工厂里获取，无需关注创建过程。简单工厂的优点就是明确了各自的职责和权利，有利于整个软件体系结构的优化。缺点就是违反了开闭原则，如果要新添加类，就要改变工厂
2021-03-29 20:16:00
376
原创 JS设计模式之单例模式
单例模式单例模式的核心是保证一个类仅有一个实例，并提供一个访问它的全局访问点举个例子来说单例模式的好处：比如说当我们点击了登录按钮之后，页面需要创建一个登录框，但是如果我们多次点击登录按钮，那么这个登录框就会被重新创建多次，这样会影响网页的性能，那么它只被创建一次，每次点击都显示之前创建的浮窗，那么网页性能就会大大提升。单例模式基本的实现思路一个类只能返回一个对象的引用（并且永远都是同一个）和一个获得该实例的方法（静态方法，一般使用getInstance名称）。实现步骤1.将该类的构造方法定义为
2021-03-29 16:03:24
276
原创 JavaScript关于链表的所有操作
//节点类class Node{ constructor(data){ this.data = data; this.prev = null; this.next = null; }}//单链表类class SingleList{ constructor(){ this.size = 0; this.head = new Node('head');//表头节点 this.currN
2021-03-26 14:36:19
177
原创 用CSS+HTML实现一个时钟
时钟的指针是会跟着动的 <style> .pan{ background-color: rgb(235, 100, 100); width: 400px; height: 400px; border-radius: 50%; position: absolute; top:0%; left: 0%; .
2021-03-25 19:30:25
462
原创 深拷贝
深拷贝真正的创建了一个对象的副本，把这个副本复制给另一个对象。手写深拷贝代码function deepClone(target){ let clone = null if(Array.isArray(target)){ clone = [] } else if((typeof(target) === 'object') && (target !== null)){ clone ={} } else{
2021-03-25 19:18:55
74
原创 什么是 CSRF 攻击？如何防范 CSRF 攻击？
CSRF攻击概念CSRF攻击指的是跨站请求伪造，攻击者诱导用户进入第三方网站，然后该网站向被攻击网站发送跨域请求。如果用户在被攻击的网站中保存了登录状态，那么攻击者就会利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。本质利用了Cookie会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充攻击类型GET类型比如说在网站中的一个img标签里构建一个请求，当用户打开这个网站的时候就会自动发起提交POST类型比如说构建一个表单，然后隐藏它，当用户进入界面的时候，自动提交
2021-03-25 16:32:35
1688
原创 什么是XSS攻击，如何防范XSS攻击？
XSS攻击概念XSS攻击是指跨站脚本攻击，是一种代码注入式攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如Cookie等。本质XSS本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。攻击类型XSS一般分为存储型，反射型，DOM型存储型指的是恶意代码提交到了网站的数据库中，当用户请求数据的时候，服务器将其拼接为HTML后返回给了用户，从而导致恶意代码的执行。反射型反射型指的是攻击者
2021-03-25 15:50:22
1162
原创 数组扁平化
数组扁平化（flatten）所谓数组扁平化就是：将一个嵌套多层的数组，转化为一个只有一层嵌套的数组即：array=[1,2,3,[4,5,[6,7],8],9,10]扁平化后：array=[1,2,3,4,5,6,7,8,9,10]手写数组扁平化代码let p = [1,2,3,[4,5,[6,7],8],9,10]function flatten(array){ if(!array.length) return [] let result = [] //[1,2,3,4,5
2021-03-24 19:08:47
50
原创 写一个EventEmitter类，包含on,emit,off,once方法
EventEmitter类的核心：事件触发与事件监听器功能的封装那么如何来手动写一个EventEmitterclass EventEmitter{ constructor(){ //在事件被创建或者实例化的时候调用此方法 //注册一个空对象 this.events = {} } //绑定事件函数 on(type,callback){ //首先判断这个事件是否存在 if(this.events[type
2021-03-22 09:50:51
703
1
原创 输入一个字符串，将字符串中的空格替换为%20
牛客网上的习题，这里我用javascript写一下第一种方法：/* 输入一个字符串，将字符串中的空格替换为%20* 输入：This is my book 输出：This%20is%20my%20book*///1.引入readline模块const readline = require('readline')const r1 = readline.createInterface({ input:process.stdin, output:process.stdout
2021-03-21 17:14:14
560
原创 Node.js使用readline模块实现输入
Node.js使用readline模块实现输入readline是实现标准输入（键盘）输出（显示器）的封装好的模块，使用require(“redaline”)引用该模块步骤如下：1.基础输入输出//1.引入readline模块const readline = require("readline")//2.创建readline实例const r1 = readline.createInterface({ input:process.stdin,//标准输入 output:proce
2021-03-21 17:08:59
735
2
原创 函数柯里化
什么是函数柯里化呢？就是把接受多个参数的函数变换成接受一个的单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数且返回结果的新函数技术。手写一个最简单的函数柯里化代码function curring(fn,...args){ return fn.length <= args.length ? fn(...args):(...args2)=>curring(fn,...args,...args2)}function add1(a,b,c,d){ return a
2021-03-20 22:14:28
51
原创 手写防抖节流函数
防抖与节流防抖函数防抖是指在事件被触发n秒后执行回调，如果在这n秒内，事件再次被触发，则会重新计时。可以使用在一些请求的事件上，避免因为用户的多次点击向后端发送多次请求手写一个防抖函数防抖函数是返回一个函数//防抖function debounce(callback,delay){ //每次触发事件的时候，都会传入这个event事件 return function(event){ //如果在delay时间内再次触发事件，首先判断timeOutId是否存在，如果存
2021-03-19 20:59:13
335
原创 手写New和instanceof
手写New和instanceofNewnew运算符创建一个用户定义的对象类型的实例，或者是具有构造函数的内置对象的实例New的使用function Car(make, model, year) { this.make = make; this.model = model; this.year = year;}const car1 = new Car('Eagle', 'Talon TSi', 1993);console.log(car1.make);// expected o
2021-03-19 20:26:50
73
原创 call,apply,bind手写代码
call,apply,bind都是改变this指向的问题将方法中的this指向call中第一个参数，当第一个参数为null、undefined时，默认指向window;call中第一个参数之后是要传递给方法的参数列表。apply与call相似，不同之处在于传递给方法的参数形式不一致。apply传递给方法的参数是数组的形式。call和apply在改变方法的this指向时，会同时执行方法；而bind不会执行方法，而是返回改变this指向后的新方法。手写call代码function myCall(f
2021-03-18 22:30:42
65
原创 如何用CSS实现一个三角形
因为盒子的边框是这样的当它小到一个只有边框的正方形的时候，就可以设置三条边为透明。.container{ width: 0%; height: 0%; background-color: #fff; border:50px solid; border-color: aqua transparent transparent transparent; }...
2021-03-12 16:21:57
119
原创 如何居中div
div的居中水平居中水平居中：给 div 设置一个宽度，然后添加 margin:0 auto 属性div{ width: 300px; margin: 0 auto; }把div设为inline-block，给父元素设置text-align:center,且父元素的宽度不设置<style> .container { background: rgba(0, 0, 0, 0.
2021-03-12 16:13:44
88
原创 Echars图表
Echars图表主要是以图表形式展示数据，功能强大，上手简单。使用JS开发的。开源的。兼容性强。特性有丰富的可视化类型：折线图，散点图，饼图，k线图…多种数据格式无需转化直接使用千万数据集合移动端优化（可以通过手指实现缩放）采用多种方式进行渲染（canvas,SVG,…）动态数据绚丽特效使用独立版本使用CDN版本（网络差的时候，效果不会显示）NPM方法(npm install echarts --save)(引用require（“echarts"）)eg:效果如图
2021-03-10 15:09:41
149
原创 前端性能优化
前端性能优化前端性能优化主要是提高页面的加载速度，优化用户的访问体验。我认为前端优化可以从以下部分进行展开：页面的内容方面（1）通过文件合并，CSS雪碧图，使用base64等方式去减少HTTP的请求数，避免过多的请求造成等待的现象。（2）通过DNS的缓存机制，来减少DNS的请求次数。（3）通过设置缓存策略，对常用不变的资源进行缓存（4）使用延迟加载的方式，来减少页面主屏加载时需请求的资源。延迟加载的资源，当用户需要访问时再去加载。（5）通过用户行为，对某些资源使用预加载的方式，来提高用户访问资
2021-03-09 09:33:35
47
原创 HTTP状态码
HTTP状态码1xx信息类状态码2xx成功类状态码3xx重定向类状态码4xx客户端状态码5xx服务器状态码以下我总结了一些面试会问到的状态码2XX200 客户端向服务器发送请求被正常处理并返回204 客户端向服务器发送请求被正常处理，但没有资源可以返回3XX301 永久性重定向，请求资源被分配了新的URL,以后每次请求就使用新的URL302 临时性重定向，请求资源被分配了新的URL，但是只有这一次会使用这个新的URL，以后每次访问都使用之前的
2021-03-08 22:15:40
70
1
原创 HTML5 的离线储存
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。原理：HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资 源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面 展示。如何使用： （1）创建一个和 html 同名的 manifest 文件，然后在页面头部像下面一样加
2021-03-04 18:46:41
492
1
原创 浏览器的重绘和重排
重绘:当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background-color，我们将这样的操作称为重绘。重排（回流）：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为重排。常见引起重排属性和方法：任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发重排。（1）添加或者删除可见的 DOM 元素；（2）元素尺寸改变——边距、填充、边框、宽度和高度（3）
2021-03-03 13:59:58
207
原创 常见浏览器所用内核
常见浏览器所用内核（1） IE 浏览器内核：Trident 内核，也是俗称的 IE 内核；（2） Chrome 浏览器内核：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，现在是 Blink内核；（3） Firefox 浏览器内核：Gecko 内核，俗称 Firefox 内核；（4） Safari 浏览器内核：Webkit 内核；（5） Opera 浏览器内核：最初是自己的 Presto 内核，后来加入谷歌大军，从 Webkit 又到了 Blink 内核；（6）
2021-03-02 19:31:51
220
原创 flex布局学习
flex布局如果做PC端页面布局，我们还是传统布局。如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局flex布局原理通过给父盒子添加flex属性，来控制子盒子的位置和排列方式任何一个元素都可以指定flex布局当我们设定flex布局以后，子元素的float，clear，vertical-align属性将失效伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局采用flex布局的元素，称为flex容器（flex container),简称’容
2021-03-02 15:21:31
196
原创 CSS 百分比参照问题
CSS 百分比参照问题：参照父元素宽度的元素：padding margin width text-indent参照父元素高度的元素：height参照父元素属性的元素：font-size line-height特殊：相对定位时，top(bottom) left(right)参照父元素内容区域的高度与宽度，而绝对定位时，参照最近的定位元素包含padding的高度与宽度。...
2021-03-01 11:19:20
219
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人