- 博客(34)
- 收藏
- 关注
RSS订阅原创 ES6——Iterator 和 for...of 循环
是一接口，为不同的数据结构提供统一的访问机制，只要当前数据结构部署了iterator接口，当前数据结构就可以遍历。作用：1、为不同的数据结构，提供统一的访问机制2、使当前数据结构的成员依次被访问3、创建了for...of，为他服务原理：创建一个指针，指针指向初始位置；第一次调用next()，指针指向第一个位置；第二次调用，指针指向第二个位置；直到指向数据结构的结束位置。内置遍历器的数据结构有：Array、TypeArray、Map、Set、String、Aguments、NodeList。
2023-07-19 14:21:26
294
原创 ES6——Promise
含义：异步编程解决方案特点：1、状态不受外界影响，状态有三种：pending、fulfilled、rejected2、状态不可逆，只能pending -> fulfilled、pending -> rejected缺点：无法取消、不设置回调函数时，内部错误外部无法获知、pending状态时不知具体进度执行顺序：Promise执行 -> 同步代码执行 ->then执行 （事件循环机制）
2023-07-13 13:01:39
556
原创 ES6——set、map
map转json：键值都为字符串=> JSON.stringify，键值有其他=> JSON.stringify([...map])Array.form(new Set())：转成真正的数组。new WeakMap()：键值只能是对象，目的是弱引用对象为键值时，不干扰垃圾回收机制。new Set()：创建数值不可重复的类数组，===比较，但NaN与NaN相等。对象转map：new Map(Object.entires(obj))map转对象：键值都是字符串无损；map转数组： [...new Map()]
2023-06-27 21:48:17
509
原创 ES6——Symbol
Symbol.for： 生成全局唯一的值，如果已存在，返回已存在 Symbol.for('a') === Symbol.for('a')Symbol('a') === Symbol('a') false 唯一值描述即使一样，也不是同一个值。Symbol.keyfor：获取挂载在全局上已登记的 Symbol.for('a') 返回 a。Symbol('a').description === 'a' 获取描述。返回的不是一个对象不能用new Symbol()Symbol() 创建一个唯一的值。
2023-06-27 21:00:43
111
原创 TS学习笔记——模块
模块：在自身的作用域里执行，不是在全局作用域中，若是外部想要使用需要导入导出。好处：1、提高了代码的复用性 2、解决命名冲突 3、提高代码的可维护性模块导入导出：export （interface、class、变量、function）export defult 导入： import module fromexport = 导入： import module = require("module")模块化实现：1、立即执行函数，解决作用域问题 IFEE。
2023-06-27 19:34:43
651
原创 TS学习笔记
ts增加：unknow、any、void、never、元组any、unkonw、void、never的区别any：类型检查、编译筛查都放行unknow：绕过赋值时的类型的检查，什么类型都可以赋值给unknow类型，unknow只可以赋值给 unknow和anyvoid：没有returnnever：断头路，代码执行到此位置，（抛出异常、return等）类型断言：1、a as string 2、<string>a。
2023-06-26 17:43:26
258
原创 Vue2的声明周期
异步数据加载存放阶段：如果不涉及操作dom放在beforCreated比较合适。created：data、prop、method等都已准备完成。beforDestory：实例尚未销毁，清除定时器等等操作。beforCreate：vue实例化，其他都没有。destory：实例已经销毁，页面跳转等善后操作。beforMounted：VDom已经生成。如果设计dom操作，放在mounted合适。beforUpdate：Vdom已经更新。mounted：真实dom已生成。update：真是dom已经更新。
2023-06-12 12:04:59
296
原创 Vue的compute和watch的区别
watch 不会执行，加immdeate才可以理解执行。缓存：compute 使用diff算法，没有变化时直接从缓存中取值。watch是单入多出。watch 只要变化就执行。都是基于依赖收集机制，根据依赖的变化而变化。写法上：compute必须有return值。执行性：compute 页面初始化会执行。输入输出：compute是多入单出。
2023-06-12 11:58:46
358
原创 数组转成树结构（arrToTree）
2、遍历数组，在map中通过parentId查找父元素。3、父元素存在，将当前元素放入父元素的children。4、父元素不存在，直接放入数组。思路：1、遍历数组，以map用id存储节点。
2023-05-29 21:40:50
417
原创 数组的扁平化处理
需求：假设数组为[1,[2,[3,[4,5]]]]多层嵌套数组，处理后输出[1,2,3,4,5]思路：遍历数组，如果值得类型为数组，则递归扁平化，上一层链接下一层得处理结果。
2023-05-29 21:13:32
28
原创 手写apply、call、bind
作用：改变this执行，函数立即执行，参数以数组传递思路：1、在this新指向的对象上，增加一个函数等于待执行函数2、去参数3、执行函数4、删除增加的函数，返回结果。
2023-05-29 17:46:05
525
原创 防抖和节流
防抖：在规定时间内，只响应最新操作，之前的操作全部摒弃。实现思路：1、实现一个延时器2、如果已经有延时器，则清除旧的延时器3、设置新的延时器，到时间执行函数。
2023-05-29 15:11:41
23
原创 双飞翼布局
思路：center、left、right使用float设置浮动，center中的content设置margin制造left和right的位置，left使用margin-left：-100%，移动到上一行，right使用margin-left：-200px移动到上一行的末尾。双飞翼布局：与圣杯局部一样，center在dom最前边，渲染结果为left靠左、right靠右，center宽度自适应。
2023-05-20 17:58:42
32
原创 css画三角形、扇形、梯形
思路：div不设置宽高，使用border填充颜色，border争位置渲染成三角形，再删除对边border，左右两边颜色设置透明即可。
2023-05-20 17:10:51
168
原创 代码高亮插件syntaxhighlighter在angualr中的使用
首先官网下载syntaxhighlighter对应的文件，下载之后放到项目中。第二：在index.html中引入需要的文件 <link rel="stylesheet" href="assets/syntaxhighlighter-3.0.83/styles/shCore.css"> <link rel="stylesheet" href="assets/synt...
2020-03-17 15:35:27
239
原创 路径中有项目名时，Angualr前端打包
angular默认打包路径是项目于根目录的，这在项目有项目名时就会导致一个问题，即当项目路径是http://ip:port/项目名，我们使用默认的打包方式，就会更改路径为http://ip:port/项目名/路由，因而导致页面刷新时，就会报404找不到页面。解决此问题的方法为：第一步：路径 路由使用hash，路径中增加#号在app-routing.module.ts中@NgModu...
2020-03-17 15:23:16
373
原创 javascript中this指向问题
js中this指向问题js中this指向问题老生常谈的问题了，在这里说一下我所理解的层面的this。this 指的是当前对象，如果在全局范围内使用this，则指代当前页面window；如果在函数中使用this，则this指代什么是根据当前函数是在什么对象上调用。我们可以使用call和apply改变函数中this的具体指向。console.log(this === window) /...
2019-04-02 10:55:06
169
原创 vue中用swiper轮播框架Loop：true时点击事件失效的解决方法
我们在写页面的时候如果用到轮播图的情况一般会使用swiper来解决，因为swiper可以很好的兼容pc端和移动端。问题但是我们在给loop：true时轮播中的页面写点击事件，因为swiper的无限轮播时会自动复制第一个和最后一个页面进行轮播。但由于只复制页面没有复制点击事件，此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时，点击事件就会失效。解决方法对于这一问题到目前...
2019-03-18 14:19:07
9192
1
原创 VUE使用总结
关于APP.VUEapp.vue是我们整个项目的主组件，也是页面的入口文件，就相当于整个网站的首页。在app.vue中<router-view/>为路由嵌套代码，有了这一行我们就可以在主组件中嵌套子组件，实现组件之间的跳转，至于组件的跳转我们用<router-link to="/Media"></router-link>就可以跳转到Media组件了（其实...
2019-03-18 13:41:46
215
原创 事件之事件对象（event）
DOM中的事件对象event对象中存在是属性和方法如下表所示：在事件处理程序内部，对象this始终等于currentTarget（事件处理程序注册在这个元素之上），而target只包含事件的实际目标（即实际作出事件处理的元素）。使用方法：event.属性 eg:event.preventDefault()；--------取消特定时间的默认事件（写...
2018-12-28 10:27:28
341
原创 JavaScript事件之事件流事件处理程序总结
事件流事件流描述的是从页面中接受事件的顺序。IE团队提出的事件流概念为事件冒泡流--------事件开始是由最具体的元素（文档中嵌套层次最深的节点）接收。然后再逐级向上传播到较为不具体的节点（文档）。以下面HTML为例：<!DOCTYPE html><html lang="en"><head> <meta charset="U...
2018-12-27 11:20:15
159
原创 DOM获取元素大小
最近在看JavaScript红皮书，其中关于DOM获取元素大小及位置的种种方法总是容易混淆，DOM获取元素的偏移量（offset）、客户区大小（client）、滚动大小（scroll）以及确定元素大小（getBoundingClientRectangle（）方法）。所以就以此篇文章总结各自所求取的量以及区别。偏移量（offset）以上图我们可以清楚的看到offset每个量各自代表的是什...
2018-12-25 15:31:04
413
转载 移动设备浏览器视口问题（转载原文：http://t.cn/zOZs0Tz）
移动浏览器的问题当我们将移动浏览器与桌面浏览器进行比较时，最明显的区别是屏幕尺寸。移动浏览器显示的桌面优化网站显着少于桌面浏览器; 通过缩小直到文本不可读的小，或者只显示适合屏幕的网站的一小部分。移动屏幕远小于桌面屏幕; 考虑最大宽度为400px，有时候要少得多。（有些手机报告的宽度较大，但是它们在说谎 - 或者至少给我们无用的信息。）平板电脑设备的中间层，如iPad或传闻中的基于...
2018-12-25 14:40:08
416
原创 BOM获取窗口位置大小
最近在看JavaScript红皮书，其中关于BOM获取浏览器窗口大小、浏览器窗口的位置总是容易混淆，所以就以此篇文章总结各自所求取的量以及区别。浏览器窗口位置（screenLeft、screenTop、ScreenX、ScreenY、moveTo、moveBy）顾名思义浏览器窗口位置就是浏览器相对于显示屏屏幕的位置screenLeft、screenTop----------...
2018-12-25 14:29:39
483
原创 面向对象总结（01传参形式）
我一直相信实践是掌握理论知识的最好方法，看十遍概念不如自己动手做一遍。直接在代码中分析啦~// 这是一个答题的移动端网站,点击abc三个选项,选择答案是对的就页面展示对号图标提示选择正确,用户看到对错之后页面自动跳转至下一题// 应该考虑到的问题有,当用户点击了其中一个选项之后,页面中的所有选项不可以再点击// 第二,设置一个count值,计算用户答对的题数 var ...
2018-10-16 11:25:40
150
原创 设置滚动条样式
直接上代码吧 简单易懂。/* 设置滚动条的样式 */::-webkit-scrollbar { width:4px; background-color: #7fbe26;}/* 滚动槽 */::-webkit-scrollbar-track { border-radius:10px;}/* 滚动条滑块 */::-webkit-scrollbar-t...
2018-09-21 13:16:19
98
原创 手机移动端视频全屏播放（兼容Android与iOS）
在做移动端项目时，做个视频播放是不可避免的，大部分情况下都是点击一个按钮，视频全屏播放，下面将对这个情况进行分析与记录。html:<video height="100%" id="videoPlay1" playsinline preload="auto" src="video.mp4" type="video/mp4" width="100%" x5-video-
2018-09-21 12:48:56
9885
1
原创 导航栏同时缩放旋转（css3动画）
有时候看惯了墨守成规的导航栏，就突发奇想想要使自己的导航栏看上去酷炫与众不同。那么就看过来吧。这个文章实现的功能呢，就是当点击导航栏的小图标，导航栏就会在页面中心位置有小变大旋转而来，点击收回导航栏时，就会在页面中心有大变无旋转离去。挥挥手指不带走一片云彩~这种旋转出现的比较适合圆形导航栏哦~css:@keyframes tab { 0%{ transformtransfo...
2018-09-21 11:27:51
2483
原创 给页面添加背景音乐（兼容Android与iOS）
在我们做很多项目的时候，总会有需要给页面添加背景音乐的需求，在移动端呢，需要同时考虑到Android系统和iOS系统是否可以播放，以下代码音频播放代码可以完美的兼容Android和iOS系统，本人亲测有效。html:<div class="music-btn music-icon"></div>//设置音乐图标 <audio id="bg-music...
2018-09-21 10:49:36
1126
1
原创 网页移动端给页面横屏提示
大家都知道，我们在做移动端的网页时，设计及实现时，都会以竖屏或者横屏中的一种方式进行设计与实现，所以，为了使用户拥有更佳的体验，我们最好就是给网页加一个横屏或者竖屏提示。这里我们以横屏提示为例进行解析。首先，先做出横屏提示页面html:<div id="orientLayer" class="mod-orient-layer" style="display: none;"&...
2018-09-21 10:30:57
2030
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人