- 博客(60)
- 资源 (7)
- 收藏
- 关注
RSS订阅原创 Node.js 笔记 4
Promise A+有三种状态，pending（进行中）、fulfilled（已成功）、rejected（已失败）复习Promise的使用 非管控异步操作 管控异步操作 then中两个参数 then和catch then链 then中返回新的Promise Promise.all … 基于Promise A+规范，自己创造一个原生的Promise库...
2022-02-03 20:41:01
652
1
原创 React 笔记 5
第5章：React路由5.1. 相关理解5.1.1. SPA的理解单页Web应用（single page web application，SPA）。 整个应用只有一个完整的页面。 点击页面中的链接不会刷新页面，只会做页面的局部更新。 数据都需要通过ajax请求获取, 并在前端异步展现。5.1.2. 路由的理解什么是路由? 一个路由就是一个映射关系(key:value) key为路径, value可能是function或component 路由分类 后端路由： 理解
2022-01-21 16:50:07
163
原创 React 笔记 6
REDUXREACT-REDUX* REACT-REDUX是把REDUX进一步封装,适配REACT项目,让REDUX操作更简洁* STORE文件夹中的内容和REDUX一模一样* 在组件调取使用的时候可以优化一些步骤** 1.Provider 根组件* 当前整个项目都在Provider组件下,用Provider包起来* 作用就是把创建的STORE可以供内部任何后代组件使用（基于上下文完成的）** =>P...
2021-12-28 22:31:08
534
原创 Vue 笔记 4
第 3 章：使用 Vue 脚手架3.1 初始化脚手架3.1.1 说明1. Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。2. 最新的版本是 4.x。3. 文档: https://cli.vuejs.org/zh/3.1.2 具体步骤第一步（仅第一次执行）：全局安装@vue/cli。npm install -g @vue/cli (4.x)安装失败尝试cnpm install -g @vue/cli 第二步...
2021-11-24 00:01:32
654
原创 React 笔记 4
REACT基础知识复习（一）： REACT是FACE-BOOK公司开发的一款MVC版JS框架 MVC：Model（数据层）、VIEW（视图层）、CONTROLLER（控制层）核心思想：通过数据的改变来影响视图的渲染（数据驱动）2.基于脚手架 CREATE-REACT-APP 快速构建一个REACT工程项目结构自动安装REACT的核心组件：REACT/REACT-DOM自动安装WEBPACK，并且完成相关的配置： ->区分了开发环境和生产环境 -&g...
2021-11-06 01:01:50
154
原创 React 笔记 2
* CREATE-ELEMENT：创建JSX对象* 参数：至少两个 TYPE/PROPS，CHILDREN这个部分可能没有可能有多个function createElement(type, props, ...childrens) { let ref, key; if ('ref' in props) { ref = props['ref']; props['ref'] = undefined; } if ('key' i...
2021-10-31 23:27:32
113
原创 React 笔记 1
React是FaceBook（脸书）公司研发的一款JS框架（MVC）1.React的脚手架React是一款框架：具备自己开发的独立思想(MVC：Model View Controller)-> 划分组件开发-> 基于路由的SPA单页面开发-> 基于ES6来编写代码(最后部署上线的时候，我们需要把ES6编译成ES5 =>基于Babel来完成编译)-> 可能用到Less/Sass等，我们也需要使用对应的插件把他们进行预编译-> 最后为了优化性能（减
2021-10-30 01:40:35
106
原创 基于事件委托实现无限级折叠菜单（42）
事件委托（事件代理） 一个容器中，很多后代元素的点击行为都要处理一些事情，之前的思路是把需要操作的元素一一获取，然后再一一做事件绑定，在不同的方法中完成不同的需求；现在不用了，基于事件的冒泡传播，我们可以只给容器的CLICK绑定一个方法，这样不管以后点击的是容器中的哪一个后代元素，都会通过事件的冒泡传播机制，把容器的CLICK行为触发，把绑定的方法执行，我们在方法执行的时候，根据事件对象中的事件源（EV.TARGET）来做不同的业务处理即可，这种机制即使事件委托机制 1.容器中很多...
2021-10-13 01:13:44
120
原创 放大镜案例（39）
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>放大镜案例</title> <link rel="stylesheet" href="css/reset.min.css"> <link rel="stylesheet" href="css/magnifier.css"></head><b.
2021-10-12 21:35:05
89
原创 事件委托（41）
* 事件委托（事件代理）* 利用事件的冒泡传播机制，如果一个容器的后代元素中，很多元素的点击行为（其它事件行为也是）都要做一些处理，此时我们不需要在像以前一样一个个获取一个个的绑定了，我们只需要给容器的CLICK绑定方法即可，这样不管点击的是哪一个后代元素，都会根据冒泡传播的传递机制，把容器的CLICK行为触发，把对应的方法执行，根据事件源，我们可以知道点击的是谁，从而做不同的事情即可...
2021-10-12 20:00:25
55
原创 鼠标跟随案例（40）
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>鼠标跟随案例</title> <link rel="stylesheet" href="css/reset.min.css"> <style> .container { position: relative; .
2021-10-11 17:48:15
97
原创 事件的基础理论（38）
* [DOM事件]** 1.什么是事件?* 事件就是一件事情或者一个行为（对于元素来说，它的很多事件都是天生自带的），只要我们去操作这个元素，就会触发这些行为* “事件就是元素天生自带的行为，我们操作元素，就会触发相关的事件行为”** 2.事件绑定：给元素天生自带的事件行为绑定方法，当事件触发，会把对应的方法执行* oBox.onclick=function(){}** 3.元素天生自带的事件？* [鼠标事件]* cli...
2021-10-11 10:42:47
228
原创 完整精准版选项卡案例（37）
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>珠峰培训</title> <link rel="stylesheet" href="css/reset.min.css"> <style> /*==选项卡样式（用户决定）==*/ .tabBox { mar.
2021-10-10 15:26:03
86
原创 渐隐渐现轮播图以及插件的封装（36）
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>珠峰培训</title> <link rel="stylesheet" href="css/reset.min.css"> <link rel="stylesheet" href="css/banner-fade.css"></head>...
2021-10-05 22:16:49
151
原创 左右运动版轮播图案例（35）
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" href="css/reset.min.css"> <link rel="stylesheet" href="css/banner.css"></head><bo...
2021-10-02 00:23:23
150
原创 动画基础知识（33）
动画的基础知识*动画*1.CSS3动画（能用C3解决的动画绝对不用JS，因为C3动画性能好）*+transition过渡动画*+animation帧动画*+transform是变形不是动画（经常依托某一种动画让元素在一定时间内实现变形效果）**2.JS动画*+定时器*+requestAnimationFrame(JS中的帧动画)*+所谓的canvas动画就是JS基于定时器...
2021-09-30 16:58:03
143
原创 回调函数原理和实战（34）
*回调函数：把一个函数A当做实参专递给另外一个函数B，在B方法执行的时候，把A执行了，我们把这种机制叫做“回调函数机制”**1.根据需求回调函数可以被执行N多次*2.不仅可以把回调函数执行，还可以给传递的回调函数传递实参，这样在回调函数中设置形参（或者使用ARG）接收即可*3.还可以改变回调函数中的THIS指向*4.可以在宿主函数（它在哪执行的，它的宿主函数就是谁）中接收回调函数执行的返回结果*...// let fn = (...
2021-09-30 15:03:24
143
原创 定时器基础知识（32）
*定时器：设定一个定时器，并且设定了等到的时间，当到达执定的时间，浏览器会把对应的方法执行**[常用定时器]*setTimeout([function],[interval])*setInterval([function],[interval])**[function]：到达时间后执行的方法（设置定时器的时候方法没有执行，到时间浏览器帮我们执行）*[interval]：时间因子（需要等到的时间MS）*...
2021-09-29 18:23:19
439
原创 瀑布流（31）
*瀑布流*效果：多列的不规则排列，每一列中有很多内容，每一项内容的高度不定，最后我们按照规则排列，三列之间不能相差太多高度**实现：首先获取需要展示的数据（假设有50条，共三列），把50条数据中的前三条依次插入到三列中（目前有的列高有的列低），接下来在拿出三条数据，但是本次插入不是依次插入，而是需要先把当前三列按照高矮进行排序，哪个最矮，先给哪个插入内容，以此类推，把50条数据都插入即可<!DOCTYPE html><html><...
2021-09-28 13:14:00
64
原创 jQuery源码解析（30）
/* * 类库、插件、UI组件、框架 * 1.类库:JQ/ZEPTO... 提供一些真实项目中常用的方法，任何项目都可以把类库导入进来，调取里面的方法实现自己需要的业务逻辑 * 2.插件:具备一定的业务功能，例如，我们可以封装轮播图插件、选项卡插件、模态框插件等（插件规定了当前这个功能的样式结构，把实现功能的JS进行封装，以后想实现这个功能直接导入插件即可） swiper\iscroll\jquery-dialog\jquery-drag\jquery-datepicker\ECharts.
2021-09-27 16:34:23
1241
原创 跑马灯案例（29）
在LONGLONGAGO以前，实现跑马灯用的是MARQUEE1.不好实现无缝衔接2.开始显示内容的时候后有空白3.性能消耗大4.目前MARQUEE标签基本上被舍弃了...现如今跑马灯都是基于JS动画或者CSS3动画实现的<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>珠峰培训...
2021-09-26 18:35:02
156
原创 DOM盒子模型（28）
JS盒子模型属性*JS盒子模型属性*=>在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性（基本上都是有关于样式的）**client*top*left*width*height**offset*top*left*width*height*parent...
2021-09-26 13:28:22
164
原创 原型深入（26）
*函数有三种角色*1.普通函数*->堆栈内存释放*->作用域链**2.类*->prototype：原型*->__proto__：原型链*->实例**3.普通对象*->和普通的一个OBJ没啥区别,就是对键值对的增删改查**=>三种角色间没有什么必然关系/*function Fn() { ...
2021-09-24 14:37:52
62
原创 ES6基础语法（27）
数组和对象的解构赋值// let ary = [12, 13, 14, 23, 24, 13, 15, 12];// let max = Math.max.apply(null, ary);// console.log(max);//=>基于ES6中的展开运算符完成// let max = Math.max(...ary);// console.log(max);*解构赋值：按照一个数据值的结构，快速解析获取到其中的内容*1.真实项目中一般都是针对于数组或者对...
2021-09-23 19:47:02
92
原创 正则（25）
正则基础*正则：是一个用来处理字符串的规则*1.正则只能用来处理字符串*2.处理一般包含两方面：*A:验证当前字符串是否符合某个规则“正则匹配”*B:把一个字符串中符合规则的字符获取到“正则捕获”**学习正则其实就是在学习如何编写规则，每一个正则都是由修饰“元字符”、“符”两部分组成//=>1.创建正则的两种方式// let reg1 = /^\d+$/g;//=>字面量方式// let reg2 ...
2021-09-21 22:58:58
146
原创 一周练习题复习补充（23）
17.var fullName = 'language';var obj = { fullName: 'javascript', prop: { getFullName: function () { return this.fullName; } }};console.log(obj.prop.getFullName());//=>this:obj.prop =>obj.prop.fullName =&g
2021-09-20 23:47:30
54
原创 less基础（24）
less它是CSS预编译语言，和它类似的还有sass/stylus...css是标记语言，不是编程语言，没有类、实例、函数、变量等东西；而less等预编译语言就是让css具备面向对象编程的思想；但是浏览器不能直接识别和渲染less代码，需要我们把less代码预先编译为正常的css后，再交给浏览器渲染解析；less的编译 在开发环境下编译(产品没有开发完，正在开发中，这个是开发环境) 导入less.js即可//=>rel="stylesheet/less" 这块有修改
2021-09-19 21:48:49
137
原创 一周练习题复习（23）
详细题目见资源1.B2.A3.D4.B/* * 变量提升 * var foo; * bar=aaafff000; */var foo = 1;function bar() { /* * 形参赋值：无 * 变量提升 * var foo; (不管条件是否成立，都要进行变量提升，新浏览器中对于判断体中的函数只是提前声明) */ if (!foo) {//=>!undefined =>TRUE
2021-09-19 19:54:27
58
原创 面向对象、原型链（22）
单例设计模式的理论模型/**单例设计模式（singletonpattern）*1.表现形式*varobj={*xxx:xxx,*...*};*在单例设计模型中,OBJ不仅仅是对象名,它被称为“命名空间[NameSpace]”，把描述事务的属性存放到命名空间中，多个命名空间是独立分开的，互不冲突**2.作用*=>把描述同一件事务的属性和特征进行“分组、归类”(存储在同一个堆内存空间...
2021-09-18 22:13:26
76
原创 闭包（21）
闭包及堆栈内存释放/** JS中的内存分为堆内存和栈内存* 堆内存：存储引用数据类型值（对象：键值对 函数：代码字符串）* 栈内存：提供JS代码执行的环境和存储基本类型值** [堆内存释放]* 让所有引用堆内存空间地址的变量赋值为null即可（没有变量占用这个堆内存了，浏览器会在空闲的时候把它释放掉）** [栈内存释放]* 一般情况下，当函数执行完成，所形成的私有作用域（栈内存）都会自动释放掉（在栈内存中存储的值也都会释放掉），但是也有特殊不销毁...
2021-09-17 15:34:34
81
原创 变量提升（20）
<!-- 一般都把JS放到BODY的末尾 1.为啥？ 2.放在HEAD中可不可以? 如何放到HEAD中也可以实现出放到BODY末尾的效果？ 3.SCRIPT标签中有两个属性：defer / async，这两个属性是做什么的-->var a = 12;var b = a;b = 13;console.log(a);var ary1 = [12, 23];var ary2 = ary1;ary2.push(100);console.log(ary.
2021-09-16 15:33:53
63
原创 GIT工作原理及操作（19）
//扩展知识交换两个变量的数据//方法一var a=10;var b=20;var c=a;a=b;b=c;//方法二var a=10;var b=20;a=a+b;b=a-b;a=a-b;//方法三var a=10;var b=20;[a,b]=[b,a]GIT工作原理及操作当我们在本地创建一个git仓库后，我们可以基于这个仓库管理我们的代码git的工作流程每一个git仓库都划分为三个区域 工作区：编辑代码的地方 暂存区：临时...
2021-09-16 00:48:52
71
原创 GIT & NODE 基础知识（18）
NODE安装Node.js 推荐大家使用LTS稳定版本，把安装包下载下来后，直接一路下一步安装即可（最好把它安装到C盘 [默认盘符] ，记好安装目录） 如果安装不了，我们可以把别人安装完成的内容拷贝过来，通过修改环境变量完成安装 高级系统设置 -> 环境变量 -> 系统变量 -> Path，把原有的变量值备份一份，在原有的基础上增加node的安装目录即可2.验证安装是否成功WIN + R => 打开运行窗口 => 输入cmd => 打开DOS窗口
2021-09-15 19:20:47
388
原创 JavaScript 数据结构与算法（九）字典
JavaScript 数据结构与算法（九）字典字典字典特点字典存储的是键值对，主要特点是一一对应。 比如保存一个人的信息 数组形式：[19，"Tom", 1.65]，可通过下标值取出信息。 字典形式：{"age": 19, "name": "Tom", "height": 165}，可以通过key取出value。 此外，在字典中 key 是不能重复且无序的，而 Value 可以重复。字典和映射的关系有些编程语言中称这种映射关系为字典，如 Swift 中的Dictona...
2021-09-15 10:47:20
127
原创 JavaScript 数据结构与算法（八）集合
JavaScript 数据结构与算法（八）集合集合几乎每种编程语言中，都有集合结构。集合比较常见的实现方式是哈希表，这里使用 JavaScript 的 Object 进行封装。集合特点 集合通常是由一组无序的、不能重复的元素构成。 数学中常指的集合中的元素是可以重复的，但是计算机中集合的元素不能重复。 集合是特殊的数组。 特殊之处在于里面的元素没有顺序，也不能重复。 没有顺序意味着不能通过下标值进行访问，不能重复意味着相同的对象在集合中只会存在一份。 封装集
2021-09-15 09:34:17
49
原创 JavaScript 数据结构与算法（七）双向链表
JavaScript 数据结构与算法（七）双向链表单向链表和双向链表单向链表只能从头遍历到尾或者从尾遍历到头（一般从头到尾）。 链表相连的过程是单向的，实现原理是上一个节点中有指向下一个节点的引用。 单向链表有一个比较明显的缺点：可以轻松到达下一个节点，但回到前一个节点很难，在实际开发中, 经常会遇到需要回到上一个节点的情况。双向链表既可以从头遍历到尾，也可以从尾遍历到头。 链表相连的过程是双向的。实现原理是一个节点既有向前连接的引用，也有一个向后连接的引用。 双向链表可以有效的解
2021-09-14 23:17:07
89
原创 DOM树（17）
dom tree 当浏览器加载HTML页面的时候，首先就是DOM结构的计算，计算出来的DOM结构就是DOM树（把页面中的HTML标签像树桩结构一样，分析出之间的层级关系）<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>珠峰培训</title></head><body><div class="box" id...
2021-09-14 19:09:14
143
原创 生成四位验证码案例（16）
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>四位验证码</title> <link rel="stylesheet" href="css/reset.min.css"> <style> #codeBox { display: inline-block; .
2021-09-13 18:43:15
308
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人