冒泡的大鱼-CSDN博客

原创 Call从简易到难的实现，简单易懂

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script>

2020-11-24 22:26:11 180

概念：概念：Diff算法是一种同层的树节点进行比较的高效算法，避免对树的逐层遍历，减少时间复杂度。如Vue虚拟DOM渲染生成真实DOM的新旧VNode比较更新。 Diff算法的两个特点：只会同级比较，不跨层级 Diff比较循环两边往中间收拢Vue DIff算法核心： Vue的虚拟DOM核心在于patch过程: * 首先将新旧VNode进行开始位置和结束位置的标记 * 标记好节点的位置，进行循环处理节点 * 递归处理新旧开始指针比较新旧结束指针比较.

2020-11-24 22:18:10 910

原创 Vue-Router的原理

原理： vue-router的原理就是更新视图而不重新请求页面。Hash模式：默认是hash模式，基于浏览器history api，使用window.addEventListener('hashchange',callback,false)对浏览器进行监听，当调用push时，把新路由添加到浏览器访问历史的栈顶。使用replace时，把浏览器访问历史的栈顶路由替换成新路由。 hash值等于url#及其以后的内容。浏览器时根据hash值得变化，将页面加载到相应得DOM位置。锚点得变化.

2020-11-24 22:14:57 359

原创 Vue双向绑定的详解

简要概括： View的变化能实时的让Model变化，而Model得变化也能实时得更新到View详解： Vue采用数据劫持&发布-订阅模式得方法，通过ES5提供得Object.defineProperty()方法来劫持(监控)各属性得getter,setter，并在数据(对象)发生变化得时候通知订阅者，触发相应得回调。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。要实现Vue中的双向数据绑定，大致可以分为三个模块：Ob.

2020-11-24 22:11:21 161

原创 Virtual DOM详解

Virtual DOM定义：简单解释：本质来说:Virtual DOM是一个JavaScript对象,通过对象的方式来表示DOM结构. 将页面的状态抽象为JS对象的形式,配合不同的渲染工具,使跨平台成为了可能. 通过事务处理的机制,将多次DOM的修改结果一次性的更新到页面上,从而有效的减少页面的渲染次数,减少修改DOM的重绘重排次数,提高渲染的性能. 更本质解释：虚拟DOM是对DOM的抽象,这个对象是更加的轻量级的DOM的描述.它设计的最初的目的,就是为了更好的.

2020-11-21 19:08:17 658

原创巨详细的React声明周期解释：

挂载阶段：constructor(): 该方法通常用于初始化组件的state以及绑定事件处理方法.render(): 在这个方法中，根据组件的props和state返回一个React元素，用于描述组件的UI，通常React元素使用JSX语法进行定义。并且render必须是一个纯函数，就是不能进行改变state，也不能直接和浏览器进行直接的交互。主要的两个作用：计算props和state返回对应的结果;通过React.createElement将JSX转化为VDOM对象.conponentD..

2020-11-21 19:05:08 409

原创 Vue实现简单学生管理的功能

说明，页面上的html与css可以直接复制粘贴使用css样式1：#home1{ width: 1000px; height: 100%; margin: 50px auto; /* background-color: #ccc; */}.home_h1,.home1_h2{ /* margin: auto; */ text-align: center; background-color: #333; color: #fff; .

2020-09-01 22:25:12 2885 1

原创 CSS样式盒模型一些Tips

盒模型tips，直接上例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- <link rel="sty

2020-09-01 22:16:21 142

原创 Vue中常用绑定class的三种方法

绑定class的三种方法：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet"

2020-08-31 22:09:42 901

原创 Vue中v-cloak/v-pre的作用

v-clock的作用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-cloak]{ d

2020-08-31 22:07:47 724

原创 Vue数组遍历时出现：Duplicate keys detected: ‘0‘的解决方案

数组遍历的问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href=

2020-08-31 22:05:27 1530

原创 Javascript中的正则表达式使用

正则表达式说明：1、正则表达式，又称规则表达式。正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式通常用来检索、替换那些符合某个规则的文本。2、定义正则表达式有两种形式: 构造函数方式: new RegExp(pattern, attributes); 例：var reg=new RegExp(“abc","g"); 构造函数中的正则可以是常量字

2020-08-27 22:33:21 175

原创 Javascript中同步和异步的任务解析

微任务与宏任务：因为浏览器的任务队列不止一个，还有 microtasks 和macrotasks microtasks(微任务): process.nextTick、 promise、 Object.observe、MutationObserver macrotasks(宏任务):setTimeout、setInterval、setImmediate、I/O、UI渲染据whatwg规范介绍：一个事件循环(event loop)会有一个或多个任务队列(task queue) 每一个 ev

2020-08-27 22:30:11 146

原创 JavaScript中常用操作滚动条API

滚动条API：获取页面的滚动条：var pageScroll = document.body.scrollTop; //谷歌var pageScroll = document.documentElement.scrollTop;scrollLeft: 设置或获取当前左滚的距离，即左卷的距离scrollTop:设置或获取上滚的距离，即上卷的距离scrollHeight:获取对象可滚动的总高度scrollWidth:获取对象可滚动的总高度onscroll事件：元素滚动条在滚动时触发。应用:

2020-08-27 22:27:44 542

原创 JavaScript的事件委托解析

事件委托：什么是事件：通俗讲onclick，onmouseover，onmouseout等就是事件。什么是委托：就是这个事件本来是加在某些元素上的，而你却加到其他元素上来完成这个事件。原理：利用事件传播的特征具体来说:事件委托就是事件目标自身不处理事件，而是把处理事件委托给其父元素,甚至是document来完成优点: 1、提高性能和效率 2、减少事件注册，节省内存占用 3、未来元素无须再次注册事件...

2020-08-27 22:25:23 117

原创 Javascript的事件对象

事件流概念：1、事件流：事件的流向，事件的执行顺序。当子元素和父元素都定义了相同的事件，比如都定义了onclick事件，点击子元素时，父元素的onclick事件也会被触发。 JS里称这种事件连续发生的机制为事件冒泡或者事件捕获。 IE：事件从里向外发生，事件从最精确对象(target)开始触发，然后到最不精确的对象(document)触发，即事件冒泡网景：事件从外向里发生，事件从最不精确的对象(document)开始触发，然后到最精确对象(target)触发

2020-08-27 22:23:36 140

原创 JavaScript的计时器的基本用法

计时器的基本用法： setInterval ( 函数 , 毫秒数 ) 表示每经过一定的毫秒后，执行一次相应的函数(重复) setTimeout ( 函数 , 毫秒数 ) 表示经过一定的毫秒后，只执行一次相应的函数(不重复) 清除计时器： clearInterval( timerId ); clearTimeout( timerId );...

2020-08-26 22:35:06 224

原创 JavaScript的Math对象基本用法

Math对象的基本用法：1、Math 对象用于执行数学任务。Math是一个内置对象，不需要创建，可以直接使用。2、Math对象常用API: Math.PI --------------返回圆周率3.1415926... Math.ceil(x) ----------对数值x进行向上取整 Math.floor(x) --------对数值x进行向下取整 Math.round(x) -------对数值x进行四舍五入 Math.abs(x) ----------返回

2020-08-26 22:33:52 372

原创 Javascript的基本包装类型解析

基本包装类型的解析：1、基本类型：Undefined，Null，Boolean，Number，String2、 var str = 'hello'; //string 基本类型 var s2 = str.charAt(0); //为什么它能召唤出一个 charAt() 的方法？ //在执行到这一句的时候后台会自动完成以下动作：（ var _str = new String('hello'); // 1 找到对应的包装对象类型，然后通过包装对象创建出一个和基本类型值

2020-08-26 22:32:11 107

原创 Javascript的字符串的基本操作

字符串JavaScript的字符串就是用' '或" "括起来的字符。字符串之间使用 + 号进行拼接。1、创建字符串： var str1 = 'abc'; var str2 = new String('abc');2、字符串方法： length:属性返回字符串的长度(字符的个数) str1.length; // 3 可以通过索引访问字符串中的某个字符：str1[0]、str1[1]3.字符串常用API API（Application Progr

2020-08-26 22:30:01 218

原创 DOM的基本操作和用法

DOM的概念： Document Object Model -- DOM 文档对象模型 DOM是针对HTML和XML文档的一个API。 DOM描绘了一个层次化的节点树，即HTML文档中的所有内容都是节点(node)。 DOM树中的所有节点均可通过JS进行访问，允许开发人员添加、移除、修改和查询页面的某一部分。节点类型：1、整个文档是一个文档节点每个HTML元素是元素节点 HTML元素内的文本是文本节点(回车也是文本节

2020-08-26 22:28:00 797

原创 BOM的基本操作和用法

BOM的概念和作用BOM的概念与作用: Browser Object Model -- BOM 浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window。 JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM缺乏标准 BOM最初是Netscape浏览器标准的一部分。直到HTML5发布，W3C将 BOM 主要内容纳入了 HTML5 规范之中。 BOM是为了操作浏览器对象出现的API，w

2020-08-26 22:20:39 1612

原创 JavaScript中日期对象中常用的方法

Date对象：1、创建Date对象: var d = new Date(); console.log(d); Fri Aug 21 2020 11:32:42 GMT+0800 (中国标准时间)2、时间获取: getFullYear()------从 Date 对象以四位数字返回年份。 getMonth()---------从 Date 对象返回月份 (0 ~ 11)。 getDate()----------从 Date 对象返回一个月中的某一天 (1 ~

2020-08-25 22:38:46 217

原创 Javascript中面向对象与面向过程的区别

面向对象与面向过程之间的区别：面向过程是一种直接的的编程方法，它是按照编程的思路考虑问题，通过顺序执行一组语句来实现一个功能。面向过程可以说是从细节方面考虑问题面向对象可以说是从宏观方面考虑问题面向过程 ==> ‘自己造电脑' 面向对象 ==> ‘自己组装电脑’ 小结：面向对象目标 => 对一个对象进行编程构造函数作用 => 提供一个对象供你编程通过构造函数实现面向

2020-08-25 22:34:46 424

原创 JavaScript的混合模式用法

混合模式的用法： 1、混合使用构造函数模式和原型模式，是目前JS中使用最广泛、认同度最高的一种创建对象的方法 2、构造函数模式用于定义实例属性，原型模式用于定义共享的属性和方法,即可以共享方法，又可以向构造函数传递参数，集两种模式之长！例如： // 混合模式: function Cat(name,sex,age){ this.name = name; this.sex = sex; this.age = ag

2020-08-25 22:32:45 526

原创 JavaScript的原型模式的用法

原型模式的用法：每个函数都有一个prototype(原型)属性，这个属性指向一个对象，即原型对象. --prototype的作用是：所有添加到prototype中的属性和方法都将被所有对象实例共享。（继承）例子： //原型模式: function Cat(){ Cat.prototype.name = '折耳猫'; Cat.prototype.age = 3; Cat.prototype.sayHi = f

2020-08-25 22:30:23 80

原创 JavaScript的构造函数的用法

构造函数的用法： --当任意一个普通函数用于创建一类对象，并且通过new操作符来调用时，它就可以作为构造函数。 --作用：构造新对象，设置对象的属性和方法 ECMAScript提供了多个内置构造函数，如 Object、Array、String、Boolean、Number、Date…等等。 var obj = new Object(); var arr = new Array(); ECMAScript允许自定义构造函数按照惯例，构造函数通常以一个大写字母开头！

2020-08-25 22:27:48 336

原创 JavaScript的面向对象编程的工厂模式

面向对象：1、面向对象是一种软件开发方法，它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的灵活性、重用性和扩展性。2、面向对象是一种对现实世界理解和抽象的方法，是计算机编程技术发展到一定阶段后的产物，是一种高级的编程思想。3、面向对象的特征：封装、继承、多态、抽象工厂模式：1、工厂模式是软件工程领域一种常见的设计模式，这种模式抽象了创建对象的具体过程。原料 => 加工 => 出厂用函数来封装创建对象的具体过程： function createCat(na

2020-08-24 22:33:37 178

原创 Javascript的回调函数其他函数解释

this对象的说明：1、this是js的一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。this的指向在函数运行时才进行绑定。声明提升机制： 1、在 JavaScrip 中变量声明和函数声明，声明会被提升到当前作用域的顶部。 2、js解析器: 浏览器中有一套专门解析JS代码的程序，这个程序称为js的解析器。浏览器运行整个页面文档时，遇到<script>标签时JS解析器开始解析JS代码。 3、js解析器的工作步骤： 1.预解析代

2020-08-24 22:30:40 213

原创 CSS的动画animation与Transition的用法

Transition用法: 1、属性名称:property 2、过渡时间：duration 3、延迟时间：delay 4、时间函数：timing-function 例子：transfrom:rotate(45deg); transtion:transform 2s linear 2s; 属性名称过渡时间时间函数延迟时间实用小贴士： 1、display不能和transition一起使用 2、transition后面尽量不要跟all 3、常见的闪动我们

2020-08-24 22:25:46 255

原创 JavaScript的Tab选项切换面向对象的封装

Tab切换面向对象的封装（4）注：本文图片自己进行替换，创建一个文件夹，然后可以使用我的 01.png 02.png 03.png 04.png进行命名，或者自己自定义命名进行替换即可。 CSS样式与Js都不需要改变。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w

2020-07-23 22:09:27 153

原创 JavaScipt的拷贝继承事例

第四种：拷贝继承<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <

2020-07-23 21:03:51 75

原创 JavaScipt组合继承方法

第三种组合继承方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> &l

2020-07-23 21:01:25 79

原创 JavaScript常见继承方法

第二种方法原型链继承<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> &

2020-07-23 20:59:26 107

原创 JavaScript的常见继承方法

第一种方法构造函数继承<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>

2020-07-23 20:56:07 77

原创 JavaScript实现倒计时的效果

Js实现倒计时效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>

2020-07-13 22:07:21 249

原创 JavaScript实现圆周运动

Js实现圆周运动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {

2020-07-13 22:04:10 671

原创封装一个函数，将传入的时间戳转换为某些日期格式，如 time(15665568763,格式1) -」 YYYY-MM-DD hh:mm:ss

封装一个函数，将传入的时间戳转换为某些日期格式: function tranFormat(num, mat) { var date = new Date(num); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var hour = date.

2020-07-13 21:56:31 1034

原创 Javascript实现桶排序

Js实现桶排序： //桶排序 //1、创建桶 //2、遍历数据，向对应编号的桶灌水 //3、把所有有水的桶的编号取出 var arr = [3, 1, 9, 45, 2, 5]; document.write("原数组："+ arr +'<br/>'); // console.log(arr); function bucketSort(arr) { var b

2020-07-09 22:32:21 425 3

原创 Javascript封装冒泡排序

Js冒泡排序：//冒泡排序： //相邻元素进行互相交换 var arr1 = [56, 3, 89, 34, 9, 2]; console.log(arr1); function bubbleSort(arr,flag) { for (var i = 0; i < arr.length - 1; i++) { //冒泡排序的循环的次数 for (var j = 0; j

2020-07-09 22:14:08 386

空空如也

空空如也