- 博客(49)
- 收藏
- 关注
RSS订阅原创 querySelector和getElementsBy系列的区别
querySelector系列和getElementsBy系列之前在使用的时候，比较经常用getElementsById，这两个似乎可以混用，但是在有一些地方这两个的差别还是很大的，现在来整理一下。querySelector 属于 W3C 中的 Selectors API 规范，接收的参数是一个css选择符。而 getElementsBy 系列则属于 W3C 的 DOM 规范 。querySelector返回的都是NodeList对象（即文档节点的集合）getElementsBy系列返回的是H
2021-09-30 16:08:37
597
原创 前端必备数据结构——链表
一、单向链表链表的优势链表相对于数组的优点在于：内存空间不是必须连续的，可以充分利用计算机的内存，实现灵活的内存动态管理。链表不需要再创建的时候就确定大小，并且它的大小可以无限的延伸下去。链表在插入和删除数据时，时间复杂度(即执行算法所需要的计算工作量)可以达到O(1)，相对数组效率高许多。链表相对于数组的缺点在于：链表访问任何一个位置的元素时，都需要从头开始访问无法像数组一样通过下标值访问元素，需要从头开始访问，直到找到对应的元素封装链表链表的每个元素由一个存储元素本身的节点和
2021-08-08 20:33:32
2030
原创 React中开启代理的两种方式
开启代理的两种方式react并没有封装好了的ajax请求的代码供我们直接使用，在进行交互的时候，我们需要自己封装ajax代码或者使用第三方ajax库，一般我们用axios(轻量级)。先说一下为什么需要代理？比如说，在本地写一个端口为5000的服务器时，当我们通过端口3000去发生请求，会出现跨域的问题（原来3000端口的ajax引擎把响应拦截了），此时可以通过代理来解决问题。所谓的代理就是一个传递信息的工具，端口为3000的请求发给开在3000端口的代理，代理再转发给5000端口的服务器，在响应的
2021-08-03 13:48:37
439
原创 Flex布局总结(详细)
Flex布局以前在网页开发过程中，布局一直是不可或缺的，从最早的表格布局，到后来的DIV+CSS布局，现在再到CSS3的伸缩布局。最近在写小程序的项目中flex布局用得非常多，其适应性也非常强，其强大的伸缩性，发挥了极大的作用，因此就在这里整理一下flex布局的知识。参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex首先先明确一下主轴和侧轴的意思：主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向（x轴正向）侧轴：
2021-07-27 22:34:30
11049
3
原创 React中组件的生命周期(详细)
组件的生命周期今天学习了组件的生命周期~理解生命周期的回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子组件从创建到死亡经历的一些特定的阶段React组件中包含一系列钩子函数(生命周期回调函数)，会在特定的时刻调用我们在定义组件的时候，会在特定的生命周期回调函数中做特定的工作。1 .组件的挂载和卸载首先讲一下出生与死亡——挂载与卸载。（1）当 Clock 组件第一次被渲染到 DOM 中的时候，就为其设置一个计时器。
2021-07-27 19:00:55
1315
原创 React的diffing算法(面试题)
React的diffing算法在虚拟DOM转为真实DOM的时候，会想通过diffing算法进行一个比较。如果已经渲染过一次了，再次渲染的时候，会对相同key值的节点进行比较，如果内容相同，就会复用原来的那个真实DOM。经典面试题：react/vue 中的key有什么作用? ( key的内部原理是什么? )为什么遍历列表时，key最好不要用index?虚拟DOM中key的作用简单说，key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用；详细讲，当状态中的数据发
2021-07-26 17:40:52
586
原创 React基础
一、React基础JSX是react的不可缺少的部分，所以在这里先看一下JavaScript XML(JSX)到底是什么:React定义的一种类似于XML的JS扩展语法：JS+XML本质是React.createElement(component, props, ...children)方法的语法糖作用：用来简化创建虚拟DOM它不是字符串，也不是HTML/XML标签，最终产生的就是一个JS对象标签名任意，HTML标签或者其他的标签（XML早期用于存储和传输数据）—接下来进入正文—a.
2021-07-21 01:34:43
110
1
原创 微信小程序——自定义组件、生命周期
1. 自定义组件创建一个component的文件夹，然后右键点击新建component在page里面添加一个新的页面，打开其中的json文件，如下所示，tab为文件夹名称"usingComponents": { "Tabs": "../../components/tab/tab" }再在page的wxml添加<Tabs><Tabs>文件，接下来创建组件的操作就在tab中进行绑定的函数，不能写在data同级，而是写在methods里面a. 父
2021-07-19 18:16:41
555
1
原创 微信小程序——常用属性及标签
微信小程序最近在学习小程序开发，在学习的过程中感受到了内容之多，这里总结了一些小程序开发的一些常用属性与方法，更加具体的还得通过打开微信开放文档进行学习，在学习的过程中多打demo才是最好的学习方式啊，再好的文档都比不上自己去实践。这里附上mdn: 微信开放文档 (qq.com)~1. 准备工作project.config.json：项目配置文件，比如项目名称、appid等；sitemap.json：小程序搜索相关的app.json：全局配置page.json：页面配置全局配置
2021-07-19 12:48:12
3315
1
原创 组件实例的三大核心属性——state、props、refs
组件实例的三大核心属性一、statestate的理解一个组件如果是有状态（state）的，那么这个组件就是复杂组件。也就是如果一个组件没有state，这个组件就是简单组件。state是组件对象最重要的属性，值是对象(可以包含多个key-value的组合)组件被称为“状态机”，通过更新组件的state来更新对应的页面显示(重新渲染组件)组件的状态里面存着数据，通过改变数据更新组件的状态来更新着页面的展示。但我们创建类式组件的时候，通过把组件实例对象打印出来，可以看到它的state的值
2021-07-17 21:33:27
406
7
原创 什么是继承？——构造函数、原型、实例
继承复习！看书！下面的内容是我今天看红宝书P238-250后总结的。1. 原型链原型链的基本思想就是通过原型继承多个引用类型和方法。构造函数、原型和实例之间的关系：每个构造函数【SuperType】都有一个原型对象【prototype】，原型有一个属性【constructor】指回构造函数，而实例有一个内部指针【_proto_】指向原型。即如下图所示：在这里要记住一句话：实例对象的隐式原型等于构造函数的显式原型，即Function.__proto__===Function.prototype;通
2021-07-15 22:36:07
244
原创 论文参考文献代码
参考文献代码（1）参考文献类型：专著［M］，论文集［C］，报纸文章［N］，期刊文章［J］，学位论文［D］，报告［R］，标准［S］，专利［P］，论文集中的文献［A］（2）电子文献类型：数据库［DB］，计算机［CP］，电子公告［EB］（3）电子文献的载体类型：互联网［OL］，光盘［CD］，磁带［MT］，磁盘［DK］...
2021-06-19 13:04:40
5374
原创 编写一个函数print，打印一个学生的成绩数组，该数组中有5个学生的数据记录，每个记录包括num,name,score[3]，用print函数输入，input函数输出
#include<stdio.h>struct student{ int num; char name[10]; float score[3];} stu[5];void input(struct student s[]);void print(struct student s[]); int main(){ input(stu); print(stu); return 0;}void input(struct student stu[]){ in
2021-06-14 16:10:24
1274
原创 解决axios通过for循环向同一个接口发送请求后渲染出现的问题
最近在做一个项目的过程中，发现用for循环渲染出来的列表会发生乱序的情况。下图是在axios请求中打印出来的索引号。思考了许久发现，是因为用for循环来发送axios请求时，for循环的发生时间是很短的，但是axios请求需要发生一段不确定的时间，存在先发送请求而慢结束的情况，而这就导致了渲染顺序的乱序情况。解决方案利用promise，then(异步变同步)的方式，通过递归将每一个请求的结果都push到一个数组里面，在把这个数组里面的数据取出来用。亲测有效，就是异步变同步的话速度相对会比较慢.
2021-05-14 22:31:05
935
5
原创 offsetWidth、clientWidth、scrollWidth区别
对offset、client、scroll这几个有关高度的值不是很熟悉，所以写了这篇博客~元素scroll系列scroll系列的相关属性可以动态地得到该元素的大小，滚动距离等(真实内容高度)元素被卷去的头部，用element.scrollTop；页面被卷去的头部，可以通过windows.pageYOffset获得offsetscrollclientoffset系列经常用于获取元素位置 offsetLeft offsetTopclient系列用于获取元素大小 clientWidt.
2021-05-13 22:56:11
146
1
原创 Promise基本使用
Promise–准备–区别实例对象与函数对象函数对象: 将函数作为对象使用时, 简称为函数对象实例对象: new 函数产生的对象，简称为对象回调函数的分类同步回调:理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中例子: 数组遍历相关的回调函数 / Promise的excutor函数// 1. 同步回调函数const arr = [1, 3, 5]arr.forEach(item => { console.log(item);})consol
2021-05-13 22:22:39
206
2
原创 CSS3动画之3D旋转
今天分享一下一个用3d效果写出来的小demo效果展示这个做出来的效果没有预想中的那么好看，不过还是勉勉强强可以看吧嘤嘤嘤。实现前想说一下在做一个项目或者是小demo之前一定要好好构思，哪个盒子和哪个盒子放在一起，思考完成项目的个大概思路，然后再进行操作，否则会浪费很多时间在不必要的东西上。布局之前一定要经过思考！！设想出你各种操作所会产生的各种不同结果，一个好的布局真滴可以省好多时间，真就亲身实践得出的经验555，如果了完成了一个很好的布局，当你在写css或者是js的时候真的能感受到什么叫.
2021-05-11 17:57:50
538
2
原创 CSS3动画之视差滚动
AM设计官网的UI真滴太棒了！今天看到AM官网的时候真的又被震撼到！选取了其中一小部分(视觉滚动)做了一下效果展示不得不说这种视差效果看着真滴很舒服！！用户体验感瞬间就提升了一个level。实现思路这个小demo看起来很舒服，感觉挺高级的，其实基本上都是通过CSS来处理的。通过给父元素一个perspective的值和3d效果，把图片通过translate-Z屏幕向外移动实现视差的效果。.onSight { perspective: 1800px; posi.
2021-05-11 03:20:58
565
3
原创 canvas炫彩小球爱心(博客园鼠标点击)
第一次登录进去博客园，发现它在鼠标点击页面的时候会出现炫彩小球，感觉挺好玩的，学了canvas就来做啦！效果展示实现思路首先以小球为对象，创建一个构造函数在这里存放小球需要的数据(x,y,r,color等)// 绘制小球 function Ball(x, y, r) { this.x = x; this.y = y; this.r = r; // 初始半径 this.co.
2021-05-09 01:49:50
979
8
原创 async和await
ES8新特性async和awaitasync和await两种语法结合可以让异步代码像同步代码一样a. mdn文档:https: //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_functionhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await1. async函数函数的返
2021-05-08 12:22:29
138
原创 好看的雪花背景o
我又来了！效果展示白色的背景配上蓝色的雪花，e，还挺好看实现思路导入一张雪花的图给雪花加样式还有动画最后通过js在可视窗口中创建一个新的雪花(大小都是可以自己设置d)@keyframes animate { 0% { opacity: 1; transform: scale(1) rotateZ(0); } 50% { opacity: .8; transform: scale(1.5) rota.
2021-05-07 15:36:13
255
原创 简易加载效果----疯狂吃豆人
不知道在哪看到这个加载，看得入神就想写一个hhhh疯狂吃豆人实现思路创建两个没有border-right的圆通过正反旋转45度展示吃的效果创建3个小球，动画效果处理小球平移代码htmldiv class="beanWrap"> <div class="bean"></div> <div class="bean"></div> <i class="ball"></i.
2021-05-07 14:26:24
167
原创 5分钟写一个炫彩加载小球
最近回来巩固CSS3的知识了，顺便做几个小案例效果展示没有加模糊度的效果加了模糊度的效果(根据喜好通过filter: blur()改变模糊程度)实现思路创建两个圆圈形成同心圆改变大圆的背景颜色将一部分背景颜色设为transparent, 形成一个看起来不完整的圆。添加动画// 背景颜色可以自己调，我这个可能有点丑hahaha background: linear-gradient(45deg, transparent 40%, rgb(218, 255, 17.
2021-05-07 13:35:02
134
原创 JS高阶函数
函数进阶1.1 函数的定义方式函数声明方式function关键字(命名函数)函数表达式(匿名函数)new function()var fn = new Function('参数1','参数2',...,'函数体')所有函数都是Function的实例对象函数属于对象// 3. 利用 new Function('参数1','参数2', '函数体');var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2
2021-05-04 21:58:53
109
原创 面向对象编程
面向对象编程1.1 两大编程思想面向过程面向对象1.2 面向过程编程POP(Process-oriented programming)面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步思想，使用的时候再一一调用就可以了。面向过程，就是按照我们分析好了的步骤。按照步骤解决问题。打开冰箱把大象放进冰箱关闭冰箱1.3 面向对象编程 OOP面向对象是把事物分解成为一个个对象，然后由对象之间分工合作。例子：把大象装进冰箱先找出对象，并写出这些对象的功能大象对象
2021-05-03 15:39:54
113
原创 Less和rem
LessLess是一门CSS扩展语言，也称为CSS预处理器。简化了CSS的编写，并且降低了CSS的维护成本，可以让我们用更少的代码做更多的事情。less中文网址：http://lesscss.cn/less变量变量命名规范必须有@前缀不能包含特殊字符不能以数字开头大小写敏感@变量值：值；@color: pink;less嵌套写法 #header { .logo { width:300px; } }如果遇见(交集/
2021-04-16 13:46:54
121
原创 研发一轮答辩题目
`感觉每次面试或者答辩都能学到好多~，一轮答辩的时候看到这道题目的时候真就有被吓到，做完理解好还是感觉学到很多的！就是下面这道题！1. Foo.getname()这里getName()是在函数Foo中出现了，在第19行又重新给了一个getName()的方法覆盖了原先的getName。这里也可以理解成：var a = 1;a = 2;console.log(a); // 2这样子是不是就很好理解呢~2. getName()首先，这句话的意思就是调用一个名为getName的
2021-04-11 19:39:39
214
2
原创 跨域的解决方式--改浏览器
改浏览器是最简单的解决方式第一步：创建空文件夹首先，创建一个空的文件夹命名为C:\MyChromeDevUserData第二部：修改属性创建你的浏览器快捷方式，右键进入属性页面 --disable-web-security -user-data-dir=C:\MyChromeDevUserData点击应用。再次通过快捷方式打开浏览器显示如下内容，说明修改成功还有jsonp和cors的解决方法，，...
2021-04-07 11:41:01
240
2
原创 es6模块化 es7 8新特性
es6模块化模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来模块化的好处防止命名冲突代码复用高维护性模块化规范产品CommonJS => NodeJS、BrowserifyAMD => requireJSCMD => seaJSES6模块化语法模块功能主要由两个命令构成：export和importexport命令用于规定模块的对外接口import命令用于输入其他模块提供的功能引入模块1. 通用的导入方式<script
2021-04-07 11:29:52
220
原创 安装babel报错解决方法
至于为什么要写这篇笔记，那当然是因为我踩坑踩到很绝望第一步：初始化npm init --yes初始化之后会自动生成一个package.json的文件第二部：下载babel输入npm i babel-cli babel-preset-env browserify -D下载成功后会自动生成一个package-lock.json文件，也可在package.json中检查是否下载成功要注意！需要获取管理员权限不然的话…就会出现这种结果(555别问我怎么知道的)第三步：转换我原来模.
2021-04-07 01:52:16
1388
1
原创 js异步加载、时间线、json
JSONJSON是一种传输数据的格式(以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来传输的)属性名要加双引号{ "name": "deng", "age": 123}过去传输数据以xml的格式a. JSON.parse()用于把字符串转化为对象。const str = '{"name": "phoebe", "age": 20}';const obj = JSON.parse(str) // {name: "phoebe", age: 20
2021-04-06 15:14:14
128
原创 jQuery
jQueryJquery其实就是一个封装了很多方法的js库JS的缺点不能添加多个入口函数(window.onload), 如果添加多个，后面会把前面的取代原生js有时候代码会冗余原生js中有些属性和方法，有浏览器兼容性的问题原生js的容错率比较低，前面的代码出了问题，后面的代码执行不了如何使用jQuery？引入Jquery文件写入一个入口函数找到你要操作的元素(jQuery选择器)去操作他，给他添加属性、样式、文本等1. jQuery的入口函数// 1$(document.
2021-04-06 15:13:59
126
3
原创 es6
JSONJSON是一种传输数据的格式(以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来传输的)属性名要加双引号{ "name": "deng", "age": 123}过去传输数据以xml的格式a. JSON.parse()用于把字符串转化为对象。const str = '{"name": "phoebe", "age": 20}';const obj = JSON.parse(str) // {name: "phoebe", age: 20
2021-04-04 03:37:09
156
原创 JavaScript一些常用API汇总
JavaScript一些常用API汇总为了方便看…整理发到博客…文章目录JavaScript一些常用API汇总Array1. new Set()2. sort()3. reverse()4. delete5. shift()6. unshift()7. push()8. toString()9. concat()10. join()11. slice(start, end)12. splice()13. map()14. forEach()15. for in()16. filter()17. s
2021-03-30 17:43:52
192
2
原创 正则表达式
— 正则表达式对以后的一些开发很有用吧，大部分都是要靠记忆，当然还有理解，感觉这部分并不容易，知识点多且杂，所以要多看看~首先补充一点内容转义字符多行字符串字符串换行符\nvar test = document.body.innerHTML = "\ <div></div>\ <span></span>\ "; //字符串本来是不可以换行的var str = "_abcd.
2021-03-30 01:42:56
100
原创 静态页面+轮播图
轮播图制作步骤实现效果：插入几张图片，还有向前和向后的按钮插入列表的小圆点调间隔，样式，前后图片的位置但向前向后的按钮触发之后的事件点击小圆点后触发的事件当鼠标移动到小圆点上发生的事件隐藏小圆点(hover)添加一个定时器，让图片自动轮播（点击时重置定时器）点击左右图片后也会触发跟点击按钮一样的事件，提高用户体验（需要让左中右的图片分开在不同盒子中，我在做这个部分的时候才发现我前面CSS代码写出来的效果是让中间和右边的图片在同一个盒子中）涉及到的知识点：html和css排版页面、
2021-03-20 18:07:42
2583
8
原创 JS原型原型链作用域闭包等
JS高级这里是对JS一些高级的一些总结~文章目录JS高级显式原型和隐式原型原型链原型链的属性问题instanceof原型链继承内存溢出和内存泄漏作用域与作用域链闭包闭包的作用预编译1. 全局预编译2. 函数中的预编译JS用在本地存储一些函数显式原型和隐式原型每个函数的function都有一个prototype,即显式原型属性，默认指向一个空的object对象每个实例对象都有一个__proto__,可称为隐式原型对象的隐式原型的值为其对应构造函数的显式原型的值// 定义构造函
2021-03-17 11:45:40
298
5
原创 CSS3过渡旋转透视2d3d动画等效果
才发现CSS3原来这么好用…CSS3盒子模型CSS3中可以通过 box-sizing 来指定盒模型，有2个值，即可指定为 content-box、border-box，这样计算盒子大小的方式就发生了改变。box-sizing: content-box 盒子大小为 width+padding+border(默认)box-sizing: border-box 盒子大小为 width (前提padding和border不会超过width宽度)* { margin: 0; pad.
2021-03-15 12:11:34
2174
8
原创 HTML5和CSS3一些常用方法(标签选择器过渡等)
HTML5 和 CSS31. HTML5 新特性增加了一些新的标签、新的表单和新的表单属性HTML5 新增的语义化标签<header>头部标签</header><nav>导航标签</nav><article>内容标签</article><section>定义文档的某个区域</section><aside>侧边栏边框</aside><footer>尾部标签<
2021-03-14 18:00:37
300
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人