- 博客(21)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 记录一个水波特效动画的js
记录一个水波特效动画的jsthis.slide = new DookaySlide(this.$refs.canvas, { displacementImage: require('../images/p3/dmaps.jpg'), autoPlay: true, // centerSprites:true, autoPlaySpeed: [4, 3], displaceScale: [400, 800], displacementCenter:
2021-03-09 19:27:32
414
原创 Vue的异步加载组件（按需加载）与路由懒加载
异步组件&路由懒加载异步组件介绍异步组件声明路由懒加载介绍路由懒加载方法异步组件介绍在开发大型项目的时候，我们会把大型项目根据组件分割为小块代码，然后异步加载代码块，这样可以让首屏部分代码块优先加载，加快首屏渲染速度，其他代码块在需要的时候再加载，加载过的代码块会被缓存起来，以便复用重新渲染。参考Vue官方文档异步加载.异步组件声明异步组件声明主要通过将 Vue.component() 方法的第二个声明为工厂函数，这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器
2020-10-23 19:52:36
828
原创 移动端H5 audio/video 标签遇到的一些问题总结
写在开头 由于需求的不断完善，最近着手的 移动端 代码中需要加入音效和背景视频，第一反应就是audio，做完demo之后测试发现在 safari 浏览器中没有得到想要的效果，经过查阅资料发现很多前辈都遇见过这个坑，为了总结在这里做个笔记，也说一说我自己的代码中实际的问题和解决办法~audio标签的问题主要是safari浏览器中的一些限制；1.每次只能播放一个音频。意思就是说我在播放一个音频的时候，不能同时播放另一个音频，代码中没有这种需求，真实性有待考证。2.不支持 preload 和 aut
2020-06-04 14:07:16
2265
原创 js 防抖与节流（setTimeout的应用）
1.防抖（debounce） 防抖的作用是：当用户多次触发回调函数时，只触发最后一次操作的，其余的全部忽略掉； 在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms如果在200ms内没有再次触发滚动事件，那么就执行函数 如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时效果：如果短时间内大量触发同一事件，只会执行一次函数。...
2019-09-03 20:11:08
2068
原创 ES6系列之Iterator 和 for...of 循环
1.Iterator（遍历器）的概念JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。遍历器（Iterator）就是这样一种机制。它是一种接...
2019-03-21 18:23:47
169
原创 ES6系列之 Promise 对象
1.Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Pro...
2019-03-12 17:32:16
359
原创 ES6系列之Symbol类型
1.概述ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 Ja...
2019-03-07 17:46:23
670
1
原创 ES6系列之变量的解构赋值
1.数组的解构赋值 基本用法ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。ES6 允许写成下面这样。let [a, b, c] = [1, 2, 3];上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。...
2019-02-28 17:44:45
169
原创 ES6系列之 Set 和 Map 数据结构
1.Set基本用法ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}...
2019-02-12 17:46:38
215
原创 ES6系列之 let 和 const 命令
1.let命令基本用法ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结...
2019-02-12 14:59:14
191
原创 前端响应式排版和布局的一种方式：基于vw等viewport视区单位和rem
一、什么是视区相对单位？就是相对于浏览器viewport尺寸的单位，具体包括下面4个：vw – 视区宽度百分值 vh – 视区高度百分值 vmin – vw或vh，取小的那个 vmax – vw或vh，取大的那个这里100vw就是浏览器窗口的全部宽度，100vh是浏览器窗口的全部高度。即100vw=window.innerWidth，100vh=window.innerHeig...
2019-01-30 18:35:21
428
原创 CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow，那这两个阴影实现有什么具体的差异呢？一、兼容性不一CSS3 box-shadow从IE9浏览器开始就支持了，兼容性如下截图：而filter中的drop-shadowIE13才开始支持，移动端Android4.4才开始支...
2019-01-23 17:53:39
1144
转载 CSSOM视图模式(CSSOM View Module)相关整理
CSSOM视图模式(CSSOM View Module)定义了一些 API，Web 开发人员使用这些 API 可以进行检查，也可以以编程方式更改文档及其内容的视觉属性，包括布局框定位、视区宽度和元素滚动。以下就是一些API属性的相关内容，包括兼容性，使用，测试等。一、Window视图属性这些属性可以hold住整个浏览器窗体大小。微软则将这些API称为“Screenview 接口”。包括...
2019-01-17 19:49:09
536
原创 CSS3 backgroud 新增加的属性
一、CSS3背景background新增加的属性 background-size 背景图片大小background-origin 背景起始位置background-clip 背景范围1、background-size背景大小用background-size可以控制背景图片的大小，单位可以是固定像素值，也可以是百分比。如果是百分比，则相对于父元素的尺寸，还...
2019-01-11 10:55:52
691
原创 深入理解css盒模型
基本概念盒模型的组成大家肯定都懂，由里向外content,padding,border,margin.盒模型是有两种标准的，一个是标准模型，一个是IE模型。从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高，而在IE模型中盒模型的宽高是内容(content)+内边距(padding)+边框(border)的总宽高。css如何设置两种模型这里...
2019-01-03 15:40:13
220
转载 CSS的Flex布局
一、Flex布局是什么？Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex;}行内元素也可以使用Flex布局。.box{ display: inline-flex;}Webkit内核的浏览器，必须加上-webkit前缀。.box{ ...
2018-12-27 18:54:47
203
1
原创 深入js原型与继承
在JS中，函数也是一种对象，他也是属性的集合，你也可以对函数进行自定义属性，每个函数都有一个属性叫做prototype。这个prototype的属性值是一个对象（属性的集合，再次强调！），默认的只有一个叫做constructor的属性，指向这个函数本身。prototype既然作为对象，属性的集合，不可能就只弄个constructor来玩玩，肯定可以自定义的增加许多属性。例如这位Object...
2018-12-20 00:13:36
173
原创 CSS动画 animation与transition
一、容易混淆的概念css中有几个"长相"类似的动画属性。分别是animation（动画）、transition（过渡）、transform（变形）、translate（移动）CSS3中的transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix...
2018-12-13 15:10:04
588
1
转载 CSS选择器的权重与优先规则
一般而言，大多数前端工程师对css样式优先级的概念停留在如下所示：注:>表示优先级的一个高低,|表示优先级一样!important>行间样式>id>class|属性>标签选择器>通配符但实际上，css是有一个权重的。且是可也计算的，我们在使用CSS对网页元素定义样式时经常会遇到这种情况：要对一般元素应用一般样式，然后在更特殊的元素上覆盖它们。...
2018-12-06 17:35:27
3381
4
转载 Java float和double精度范围大小
要想理解float和double的取值范围和计算精度，必须先了解小数是如何在计算机中存储的：举个例子：78.375，是一个正小数。要在计算机中存储这个数，需要把它表示为浮点数的格式，先执行二进制转换： 一 小数的二进制转换(浮点数)78.375的整数部分：小数部分： 所以，78.375的二进制形式就是1001110.011然后，使用二进制科学记数法，有...
2018-03-28 16:37:46
15564
3
转载 Java快速排序的实现
快速排序的基本思想： 通过一趟排序将待排序记录分割成独立的两部分，其中一部分记录的关键字均比另一部分关键字小，则分别对这两部分继续进行排序，直到整个序列有序。先看一下这幅图：把整个序列看做一个数组，把第零个位置看做中轴，和最后一个比，如果比它小交换，比它大不做任何处理；交换了以后再和小的那端比，比它小不交换，比他大交换。这样循环往复，一趟排序完成，左边就是比中轴小的，右边就是比中轴大的，然...
2018-03-28 16:00:15
268
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人