前端
tianmd_Eric
这个作者很懒,什么都没留下…
展开
-
记录一个水波特效动画的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 · 408 阅读 · 0 评论 -
Vue的异步加载组件(按需加载)与路由懒加载
异步组件&路由懒加载异步组件介绍异步组件声明路由懒加载介绍路由懒加载方法异步组件介绍在开发大型项目的时候,我们会把大型项目根据组件分割为小块代码,然后异步加载代码块,这样可以让首屏部分代码块优先加载,加快首屏渲染速度,其他代码块在需要的时候再加载,加载过的代码块会被缓存起来,以便复用重新渲染。参考Vue官方文档异步加载.异步组件声明异步组件声明主要通过将 Vue.component() 方法的第二个声明为工厂函数,这个工厂函数会收到一个 resolve 回调,这个回调函数会在你从服务器原创 2020-10-23 19:52:36 · 817 阅读 · 0 评论 -
移动端H5 audio/video 标签遇到的一些问题总结
写在开头 由于需求的不断完善,最近着手的 移动端 代码中需要加入音效和背景视频,第一反应就是audio,做完demo之后测试发现在 safari 浏览器中没有得到想要的效果,经过查阅资料发现很多前辈都遇见过这个坑,为了总结在这里做个笔记,也说一说我自己的代码中实际的问题和解决办法~audio标签的问题主要是safari浏览器中的一些限制;1.每次只能播放一个音频。意思就是说我在播放一个音频的时候,不能同时播放另一个音频,代码中没有这种需求,真实性有待考证。2.不支持 preload 和 aut原创 2020-06-04 14:07:16 · 2244 阅读 · 0 评论 -
js 防抖与节流(setTimeout的应用)
1.防抖(debounce) 防抖的作用是:当用户多次触发回调函数时,只触发最后一次操作的,其余的全部忽略掉; 在第一次触发事件时,不立即执行函数,而是给出一个期限值比如200ms如果在200ms内没有再次触发滚动事件,那么就执行函数 如果在200ms内再次触发滚动事件,那么当前的计时取消,重新开始计时效果:如果短时间内大量触发同一事件,只会执行一次函数。...原创 2019-09-03 20:11:08 · 2056 阅读 · 0 评论 -
ES6系列之Iterator 和 for...of 循环
1.Iterator(遍历器)的概念JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set。这样就有了四种数据集合,用户还可以组合使用它们,定义自己的数据结构,比如数组的成员是Map,Map的成员是对象。这样就需要一种统一的接口机制,来处理所有不同的数据结构。遍历器(Iterator)就是这样一种机制。它是一种接...原创 2019-03-21 18:23:47 · 168 阅读 · 0 评论 -
ES6系列之 Promise 对象
1.Promise 的含义Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Pro...原创 2019-03-12 17:32:16 · 357 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 188 阅读 · 0 评论 -
前端响应式排版和布局的一种方式:基于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 · 424 阅读 · 0 评论