- 博客(77)
- 收藏
- 关注
RSS订阅原创 vue2和vue3 的双向绑定原理
一般我们所指的双向绑定都是指的数据,即当数据发生变化的时候,视图也发生变化;当视图发生变化时,数据也同步跟着变化,这就是vue的精髓之一.对象有两种属性：1 . 数据属性：就是我们经常使用的属性2 . 访问器属性：也称存取属性（存取器属性就是一组获取和设置值的函数）控制台打印:数据属性就是a和b；get和set就是关键字，他们后面各自对应一个函数，这个函数就是上面红字部分所讲的，存储器属性。get对应的方法称为getter，负责获取值，它不带任何参数。
2023-11-06 12:29:57
509
原创 vue3中如何编写一个组件---demo
这样，我们就完成了一个简单的待办事项列表组件的开发。在其他地方使用该组件时，只需要引入并放置在相应的位置即可。组件内部的数据和方法已经封装好，可以在不同的上下文中使用和传递。当使用 Vue 3 来开发组件时，可以使用 Composition API 来定义组件逻辑和实现组件传值。在上面的示例中，我们使用了 Vue 3 的 Composition API 来编写组件。假设我们要开发一个简单的待办事项列表组件，包括添加待办事项、显示待办事项列表以及删除待办事项的功能。// 暴露数据和方法给模板使用。
2023-07-03 14:27:33
2546
原创 vue中如何封装一个基础组件---demo
在点击按钮时，通过 handleClick 方法来触发 click 事件，并在事件处理函数中判断按钮是否被禁用，如果没有禁用，则通过 $emit 方法触发 click 事件。以上是封装基础组件的一般步骤，根据具体的项目和需求，可能会有一些特定的步骤和注意事项。在封装过程中，要注重组件的可重用性、可定制性和扩展性，同时遵循 Vue 的最佳实践和组件设计原则。在其他地方使用时，只需要引入该组件并传入相应的属性，即可实现可定制化的按钮功能。标签中定义了按钮的样式，可以根据自己的项目需求进行设计和调整。
2023-07-03 14:11:41
2110
原创 深入理解 JavaScript Promise
本文对JavaScript中的Promise进行了深入的介绍，包括基本概念、使用方法和进阶应用。Promise提供了一种优雅的方式来处理异步操作，使得代码更加清晰、可读和可维护。掌握Promise的使用方法和技巧，将帮助前端开发人员更好地处理异步代码，并提升代码质量和开发效率。
2023-06-14 09:56:16
5451
原创 深入理解JavaScript模块化开发
随着JavaScript应用程序的复杂性不断增加，模块化开发成为了一种必备的技术。通过将代码划分为模块，我们可以提高代码的可维护性、可重用性和可扩展性。在本文中，我们将深入探讨JavaScript模块化开发的概念、优势和不同的模块化方案。
2023-06-12 10:24:20
2799
原创 日常问题----如和解决跨域
跨域不是问题，是一种安全机制。同源策略是浏览器一个重要的安全策略，一个url由三部分组成:协议，域名（ip地址），端口。所谓的同源就是指两个域有相同的协议（protocol）、域名（host）、端口(port)，这三者之间任何一个不同都会构成跨域的情况，比如说前后端分离之后，前后都在两个域之下，前端的浏览器请求后端服务器的数据的时候就需要做跨域处理。可能有些人有点疑问，非得同源吗？（勿喷）无法读取非同源网页的 Cooike、LocalStorage、IndexedDB无法接触非同源网页的DOM。
2023-05-10 10:57:24
1965
原创 性能优化之-更高效的数据渲染
中心思想还是让请求的资源得到更快响应的方法，比如压缩资源，减少数据量的大小，缓存数据以减少请求数量，http/2让网络传输变得更快这些，下面就让我们来看看浏览器是如何解析这些数据，最终又是如何将他们渲染在屏幕上的？在数据量不变的情况下还有哪些可以优化的点？
2023-04-21 10:02:10
2171
原创 JavaScript的三座大山
作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。
2023-04-19 11:34:22
2529
原创 性能优化之-缓存篇
什么是缓存？在哪可以看到？为什么要做？本文简单说下，当做笔记在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。缓存技术一直一来在WEB技术体系中扮演非常重要角色，是快速且有效地提升性能的手段。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。
2023-04-03 16:43:50
1518
原创 性能优化之-事件代理
那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。
2023-03-30 10:49:55
5755
6
原创 如何跳出map或者foreach循环
forEach()和map() 是Array 数组对象提供的循环数组的方法。不能像js循环表达式那样使用break 、‘continue’等结束循环语句。那么在forEach() 和 map()方法中如何终止循环和跳出本次循环呢？
2023-02-09 17:28:20
5762
原创 nodej.s 搭建一个socket服务（原生和sockjs）
原生socket服务 createServer（）消息广播使用nodejs创建socket服务 原生以及http服务
2023-02-06 14:14:33
3043
原创 TypeScript 简单介绍
是微软开发的JavaScript的超集，typescript兼容JavaScript，可以载入JavaScript代码然后运行，ts与js相比进步的地方 包括：加入注释，让编译器理解理解存储所支持的对象和函数，编译器会移出注释，不会增加开销；增加一个完整的类结构，使之更新使传统的面向对象语言。
2022-09-07 14:25:19
4643
原创 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDafault(),return false的区别
1.event.stopPropagation()方法这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，2.event.preventDefault()方法这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；3.return false ；这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以
2022-03-16 15:29:18
669
原创 可以跨域的在线视频地址（测试用）包括m3u8，rtsp，rtmp，flv，mp4直播流在线测试地址！！
在线小视频地址：可以跨域https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4 https://stream7.iqilu.com/10339/article/202002/18/2fca1c77730e5
2021-12-15 11:39:19
3545
原创 用来测试的在线小视频地址
在线视频地址，MP4https://v-cdn.zjol.com.cn/280443.mp4https://v-cdn.zjol.com.cn/276982.mp4https://v-cdn.zjol.com.cn/276984.mp4https://v-cdn.zjol.com.cn/276985.mp4
2021-12-15 11:31:00
1538
转载 超详细的require、import、export讲解
超详细的require、import、export讲解JS 中的require 和 import 区别在研究react和webpack的时候，经常看到在js文件中出现require，还有import，这两个都是为了JS模块化编程使用。CSS的是@import1.ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。Require是CommonJS的语法，CommonJS的模块是对象，输入时必须查找对象属性。复制代码复制代码// CommonJS模块l
2021-11-08 11:03:21
390
原创 汇总onchange、onpropetrychange、和oninput事件的区别
1、 onchange事件与 onpropertychange 事件的区别：onchange事件在内容改变（两次内容有可能还是相同的）且失去焦点时触发。onpropertychange事件却是实时触发，即每增加一个字符或者减少一个字符就会触发，通过js改变也会触发该事件，但是该事件是IE专有的。2、oninput 事件与onpropertychange 事件的区别：oninput事件是IE之外的大多浏览器支持的事件，在value改变时触发，实时的，即每增加一个或者删除一个字符就会触发，然
2021-10-13 14:59:24
279
原创 模糊查询（前端）
首先，模糊查询一般交由后台处理。（数组对象的）当然前端也可以实现，我这里的主要实现方式有两种，其一是使用fitler 过滤器：ilter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。注意： filter() 不会对空数组进行检测。注意： filter() 不会改变原始数组。话不多说，上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8
2021-09-16 17:53:54
6884
1
原创 纯css实现三角形、菱形、梯形、等效果
需求有这么一个小东西需要实现一下，但是不想直接放一个图片，就随便写了写，，首先实现一个三角形：1.首先，我创建了一个 class 名为 ‘box’ 的div，我们暂且亲切的称它为‘小盒子’html：<div class='box'></div>css：.box { width:20px; height:20px; background-color:blue; }
2021-09-10 17:21:37
2244
原创 call()、 apply()、 bind() 方法的作用、使用详解以及手写实现它
我们先举一些简单的例子：例1:var name = "阿牛",age = '18';var obj = { name: "臭宝", objAge: this.age, fun: function(){ condole.log(this.name,this.age); }}// 输出“臭宝” undefined例2var faq = "牛牛牛";fun: function(){ console.log(this.faq);}// 输出fun() // “牛牛牛
2021-08-18 17:57:22
281
原创 css缩放（不同屏幕适配） transform属性的scale（）方法
在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。语法：transform： scaleX（x）； / 沿x轴方向缩放/transform: scaleY(y); / 沿y轴方向缩放/transform： scale（）； / 同时沿x轴和y轴缩放/说明：跟translate()方法类似，缩放也有3种情况：scaleX()、scaleY()、scale()。参数x表示元素在x轴方向的缩放倍数
2021-08-09 17:26:40
8376
原创 Math.min() / Math.max() 使用方法
首先弄懂apply 和 call 都是js函数自带的方法。区别如下：apply和call的用法只有一个地方不一样，除此之外，其他地方基本一模一样a.call(b,arg1,arg2…)apply(b,[arg1,arg2]) //apply只有2个参数，它将call的参数（arg1,arg2…）放在一个数组中作为apply的第二参数有时需要直接拿一个数组中的最大值最小值：就可以拿如下的操作：Math.min.apply(null, [1, 2, 3]) 等价于 Math.min(1,
2021-07-30 15:22:53
1224
原创 css经典布局之三栏布局（双飞翼，圣杯）！！！
双飞翼布局和圣杯布局两者实现效果相同，都是为了实现一个两侧宽度固定而中间自适应的三栏布局如图：要实现一个三列布局的具体要求为：header和footer各自占领屏幕所有宽度，高度固定。中间的container是一个三栏布局。三栏布局两侧宽度固定不变，中间部分自动填充整个区域。中间部分的高度是三栏中最高的区域的高度。主要实现思路为：Lleft、center、right三种都设置左浮动设置center宽度为100%设置负边距，left设置负边距为100%，right设置负边距为自身宽
2021-07-29 11:02:24
192
原创 页面嵌套iframe(window.postMessage()实现跨域通信)
项目中的需求 需要外接一个iframe与主页面之间需要通信 的情况在iframe 中：在主页面中：window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage()方法提供了一种受控机制来规避此限制，只要正确的使用，这种
2021-06-18 15:12:35
4485
原创 快速获取天气信息及实时刷新时间信息
1. 天气// 天气 $.ajax({ url:'http://wthrcdn.etouch.cn/weather_mini?city=南京', data:"", dataType:"jsonp", success:function(data){ // 这一步返回的就是时间，你
2021-06-18 14:59:30
357
原创 封装一个原始的Ajax（）方法及5个步骤
原生js发送ajax请求的就是“XMLHttpRequest”，那么我们必须要弄清楚XMLHttpRequest实现ajax的步骤，只有搞清楚了它的工作流程，我们才可以自己来封装。1、建立XMLHttpRequest对象；2、设置回调函数；3、使用open方法与服务器建立链接；4、向服务器发送数据；5、在回调函数中针对不同的响应状态进行处理；总共分为五步，每一个步骤单独来看，都非常的清晰明了，基本上跟http的表面请求响应流程差不多，现在我们试着来手动实现一个。<!doctype htm
2021-05-17 16:58:33
691
原创 数组和链表的区别
数组和链表是两种基本的数据结构,但是在内存表现上不一样,所以也有各自的特点。具体区别如下：数组静态分配内存，链表动态分配内存；数组在内存中连续，链表不连续；数组元素在栈区，链表元素在堆区；数组利用下标定位，时间复杂度为O(1)，链表利用引用定位元素时间复杂度O(n)；数组插入或删除元素的时间复杂度O(n)，链表的时间复杂度 O(1)。总结：如果是数据数量不发生变化，就使用数组；如果数据数量经常发生变化，就使用动态数组(ArrayList、vector)或双向链表LinkedList；如果
2021-05-13 11:44:24
144
原创 定时器（setTimeout()和setInterval()）的清除问题
方法一：在每次重新设置定时器之前清除掉方法二：在销毁的钩子函数里销毁，防止污染都是clearInterval（定时器返回的值，即timer）settimeout与setinterval清除时使用方式一致，即clearsetTimeout（）、clearInterval（）...
2021-05-11 19:11:49
6816
原创 死磕 36 个 JS 手写题（搞懂后，提升真的大）
死磕 36 个 JS 手写题（搞懂后，提升真的大）为什么要写这类文章作为一个程序员，代码能力毋庸置疑是非常非常重要的，就像现在为什么大厂面试基本都问什么 API 怎么实现可见其重要性。我想说的是居然手写这么重要，那我们就必须掌握它，所以文章标题用了死磕，一点也不过分，也希望不被认为是标题党。作为一个普通前端，我是真的写不出 Promise A+ 规范，但是没关系，我们可以站在巨人的肩膀上，要相信我们现在要走的路，前人都走过，所以可以找找现在社区已经存在的那些优秀的文章，比如工业聚大佬写的 100 行代
2021-04-28 15:32:48
2835
转载 事件代理(事件委托)
- 基本概念事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。举个通俗的例子比如一个宿舍的同学同时快递到了，一种方法就是他们一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一 一分发给每个宿舍同学；在这里，取快递就是一个事
2021-04-27 15:32:28
713
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人