- 博客(46)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 数组去重总结
原文双层 for 循环思想: 双重 for 循环是比较笨拙的方法，它实现的原理很简单：先定义一个包含原始数组第一个元素的数组，然后遍历原始数组，将原始数组中的每个元素与新数组中的每个元素进行比对，如果不重复则添加到新数组中，最后返回新数组；因为它的时间复杂度是O(n^2)，如果数组长度很大，效率会很低。function distinct(arr) { for (let i=0, len=arr.length; i<len; i++) { for (let j=i+1; j
2021-07-17 17:10:57
155
原创 Vuex使用
需求：点击添加购物车的时候将对应商品加入购物车将购物车的数据放入Vuex中state: 保存的数据在index.js中导入state，并且将state设置到Vuex.Store的实例中getters:可以理解为state的一个计算属性在getters.js中定义函数，在函数中处理state在App.vue中导入mapGetters，方便引入getters.js中定义函数（需要在computed中使用）然后就可以在模版中使用在state中填入数据，此时购物车可以显示如果不..
2021-07-02 21:18:58
93
原创 跨域全解析
JSONP第一种解释先注册函数f,然后引用url地址下的脚本，url传入app.get中，解析出callback为f，以js的方式返回，而js直接执行f(‘你好’)语句，所以会执行f函数第二种解释（推荐）利用script中的src属性，其不受跨域限制，使用src访问跨域资源定义一个全局的callback函数，在另一个跨域的js文件里面，执行这个全局函数，并传入一段数据...
2021-06-25 15:01:38
92
原创 圣杯布局的五种方式
方法一center还在文本流之中，会影响到后面的元素，不影响前面的元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"
2021-06-19 15:05:54
322
原创 js的继承
// 构造函数继承 // 缺点：原型链上的方法和属性没有办法继承 function Person() { this.name = "person" this.say = function () { console.log('say') } } Person.prototype.run = function () { console.log('run') } ...
2021-06-18 20:55:26
72
原创 深拷贝和浅拷贝
原理需要为深拷贝深拷贝解决方案：方法一：但是该方法也是有局限性的：函数无法拷贝正则无法拷贝undefined无法拷贝symbol无法拷贝优点：可以实现二级以下的深拷贝方法二：优点：可以拷贝函数可以拷贝正则可以拷贝undefined缺点:二级以下无法实现深拷贝手写当访问的obj[key]为obj对象或数组的时候，会继续按之前的对象深拷贝操作，先判断是数组还是对象，然后再次进入for循环，如此反复直到符合第一个if(不是对象或者null),将返回值可以
2021-06-18 20:02:40
111
原创 this指向
1.直接函数调用中的this2. 对象.方法的形式调用中的this易错：直接调用函数let fn = obj.say相当于一个赋值过程function fn() { console.log(this)}3.构造函数中的this箭头函数中的this易错：箭头函数的缺点...
2021-06-17 10:34:35
72
原创 手写 instanceof
//原理：实例__proto__(n次) == 构造函数.prototype//左边：实例//右边：构造函数function instanceof(left, right) { // 获得类型的原型 let prototype = right.prototype // 获得对象的原型 left = left.__proto__ // 判断对象的类型是否等于类型的原型 while (true) { if (left === null) .
2021-06-16 21:50:48
238
1
原创 手写new
过程实现当未使用new创建对象时this指向window当使用new时会传入构造函数和参数，传入的参数为伪数组，需要转为真数组伪数组agrument调用Array原型上的slice方法，传入0是返回原真数组args返回的为第一个参数构造函数Person使得this指向空对象content，且传入args参数此时如果return content， 会发现content的_proto_指向有问题使用原生的new时 _proto_指向就没有问题所以完整版..
2021-06-16 21:19:41
109
原创 原生JavaScript实现call、apply和bind
如果用call进行绑定，其实相当于在egg对象里面增加一个person函数，再用egg.person()调用就好了简单来说就是在egg这个位置开始进行调用，然后执行person函数，如果发现了this就会绑定到egg，因为egg直接执行了person，egg是真正的调用位置，因此this指向了egg此时的this指向window，person函数进行调用，然后执行newCall函数，发现了this,因此需要进行绑定，person才是真正调用位置，所以this指向person函数实现call.
2021-06-14 21:12:09
7399
16
原创 手写防抖节流函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
2021-06-13 20:40:52
171
原创 AJAX用法
HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。请求报文重点是格式与参数行 POST /s?ie=utf-8 HTTP/1.1 头 Host: atguigu.com Cookie: name=guigu Content-type: application/x-www-form-urlencoded User-Agent: chro
2021-02-03 20:44:54
96
原创 Promise全解析
1 为什么需要promise需求通过ajax请求id, 再根据id请求用户名, 再根据用户名获取email回调地狱在回调函数中嵌套回调Promise解决了回调地狱2 Promise的基本使用Promise是一个构造函数, 通过new关键字实例化对象语法new Promise((resolve, reject)=>{})Promise接受一个函数作为参数在参数函数中接受两个参数resolve: 成功函数reject: 失败函数promise实例p
2021-01-31 09:46:33
757
1
原创 VuePress快速构建博客
本地:创建并进入一个新目录mkdir vuepress-starter && cd vuepress-starter使用你喜欢的包管理器进行初始化yarn init # npm init将 VuePress 安装为本地依赖yarn add -D vuepress # npm install -D vuepress创建你的第一篇文档mkdir docs && echo '# Hello VuePress' > docs/README.
2021-01-20 13:31:58
152
原创 Git使用
git使用的三种方式只在本地使用将本地仓库上传到 GitHub下载 GitHub 上的仓库1.本地使用：git init，初始化本地仓库 .gitgit status -sb，显示当前所有文件的状态git add 文件路径，用来将变动加到暂存区git commit -m “信息”，用来正式提交变动，提交至 .git 仓库如果有新的变动，我们只需要依次执行 git add xxx 和 git commit -m ‘xxx’ 两个命令即可。别看本教程废话那么多，其实就这一句有用！先 ad
2021-01-18 22:37:12
95
原创 构造函数和原型
商品查询案例-利用数组新增方法操作数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
2021-01-18 19:00:25
76
原创 函数高级（闭包、递归、深浅拷贝）
闭包的实例1.点击li输出当前li的索引号<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&
2021-01-18 16:20:24
252
1
原创 Javascript之BOM
总结案例：1.倒计时效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
2021-01-03 20:25:51
130
原创 移动端特效
总结案例1.轮播图需求：1.可以自动播放图片2.手指可以拖动播放轮播图实现：小圆点跟随变化：①小圆点跟随变化效果②把ol里面li带有current类名的选出来去掉类名 remove③让当前索引号 的小li 加上 current add④但是，是等着过渡结束之后变化，所以这个写到 transitionend 事件里面手指滑动轮播图：①手指滑动轮播图②本质就是ul跟随手指移动，简单说就是移动端拖动元素③触摸元素 touchstart： 获取手指初始坐标④移动手指 touchm
2021-01-03 20:00:49
179
原创 PC端网页特效
1.总结：2.实例1.拖动的模态框要求：1.点击弹出层， 会弹出模态框， 并且显示灰色半透明的遮挡层。2.点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。3.鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。4.鼠标松开，可以停止拖动模态框移动。思路：①点击弹出层， 模态框和遮挡层就会显示出来 display:block;②点击关闭按钮，模态框和遮挡层就会隐藏起来 display:none;③在页面中拖拽的原理： 鼠标按下并且移动， 之后松开鼠标④触发事件是
2020-12-30 20:07:09
151
原创 javascript 之DOM
1.仿京东显示密码①核心思路： 点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码②一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框③算法：利用一个flag变量，来判断flag的值，如果是1 就切换为文本框，flag 设置为0，如果是0 就切换为密码框，flag设置为1 // 1. 获取元素 var eye = document.getElementById('eye'); var pwd = document.getElementById
2020-12-20 20:38:53
184
原创 JavaScript预解析
f1();console.log(c); console.log(b); console.log(a); function f1() { //相当于var a = 9; b = 9; c = 9; b和c直接赋值,没有声明，当全局变量看 //易混淆：集体声明 var a = 9, b = 9, c = 9; var a = b = c = 9; console.log(a); console.log(b); console.log(c);}执行顺序：function f1(
2020-12-07 13:25:24
268
原创 移动端web总结
1.流式布局（百分比布局）1.流式布局，就是百分比布局，也称非固定像素布局。2.通过盒子的宽度设置为百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。2.flex布局1.flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。2.当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。伸缩布局 = 弹性布局 = 伸缩盒布局 =
2020-12-03 11:10:17
255
原创 响应式布局
阿里百秀案例1.width：100%;1.1 box-sizing为content-box时width：100%;表示width=父级的width父级的width不包括其内边距和边框值1.2 box-sizing为border-box时width：100%;表示width=父级的width父级的width包括其内边距和边框值1.3实践3处的空白间隔：1号盒子padding-right:10px 2号盒子width:100%，此处为默认的content-box所以width：100
2020-12-02 15:16:57
947
原创 rem布局
苏宁1.body的设置1.1 less + 媒体查询 + remmax-width: 750px;可以省略因为给了width:15rem;写死了body { min-width: 320px; /*给了width:15rem;写死了*/ width: 15rem; margin: 0 auto; line-height: 1.5; font-family: Arial,Helvetica; background: #F2F2F2;}1.2 f
2020-12-01 12:40:42
138
原创 flex布局
1.CSS3中行高=高时，文字没有垂直居中原因：设置box-sizing:border-box后设置的盒子的高，包含padding和border，所以此时想文字垂直居中，需要行高=高-padding-border才行。
2020-11-28 12:23:22
634
原创 流式布局
1.精灵二倍图原因：精灵图缩放后位置发生了变化二倍精灵图做法：1.在firework里面将精灵图缩放为原来的一半2.根据大小 测量坐标3.注意代码里面background-size也要写：原来精灵图的一半注意：因为虽然在firework里面将缩放为一半后测量的，但是实际导入背景的精灵图没有缩放 */.sou { /* 精灵图缩放后位置发生了变化 */ /* 二倍精灵图做法： */ /* 1.在firework里面将精灵图缩放为原来的一半 */ /* 2.根据大
2020-11-26 09:45:52
118
1
原创 HTML5+CSS3
三角形代码实现：1.div { width: 40px; height: 40px; border-top: 10px solid red; border-right: 10px solid green; border-bottom: 10px solid blue; border-left: 10px solid #000; }2.
2020-11-18 20:52:36
915
原创 品优购项目
1.font:不需要设置的属性可以省略（去默认值），但是必须保留font-size和font-family属性，否则font属性将不起作用。2.em是一个相对单位，就是当前元素（font-size）一个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小。...
2020-10-10 13:28:26
1107
原创 深拷贝与浅拷贝
class Person{public: Person() { cout << "无参构造函数！" << endl; } Person(int age, int heigth) { cout << "有参构造函数！" << endl; m_age = age; m_heigth = new int(heigth); } Person(const Person& p) { cout << "拷贝..
2020-07-28 22:11:36
130
原创 C# Basic
Learn C# in Y minutes// 单行注释以 // 开始/*多行注释是这样的*//// <summary>/// XML文档注释/// </summary>// 声明应用用到的命名空间using System;using System.Collections.Generic;using System.Data.Entity;using...
2020-03-11 12:30:50
247
原创 Unity坐标系
坐标系World SpaceLocal SpaceScreen SpaceViewport Space坐标转换Local Space --> World Space注意三者的区别World Space --> Local SpaceWorld Space <–> Screen SpaceWorld Space <–> Viewp...
2019-12-04 20:16:22
256
原创 Vector3.forward和transform.forward的区别
区别1.Vector3.forward是世界坐标Z轴，其值永远为(0, 0, 1)。2.transform.forward是当前物体自身坐标的Z轴，其值不会永远为(0, 0, 1),当物体旋转后，自身坐标轴也会跟着旋转。沿着世界坐标z轴前进方法一transform.position+=Vector3.forward; 方法二transform.translate(Vector3.f...
2019-12-04 10:36:26
633
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人