五花毛-优快云博客

原创 ==和===的区别

== 两边值类型不同时,会先进行类型转换,然后在比较;=== 不做类型转换,若类型不同就不相等;==的转换过程:判断比较的是否是 null 或者是 undefined, 如果是, 返回 true . 判断两者类型是否为 string 和 number, 如果是, 将字符串转换成 number 判断其中一方是否为 boolean, 如果是, 将 boolean 转为 number...

2020-03-06 13:21:01 306

原创 Flex布局

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。容器的属性:1.flex-direction 决定项目的排列方向值: row 水平方向,起点在左 row-reverse 水平方向,起点在右 column 垂直方向,起点在上 column-reverse垂直方向,起点在下2.fl...

2020-03-05 13:09:52 409

原创关于H5项目简单调用手机地图

h5项目开发中遇到如下需求点击导航去这里,打开浏览器地图导航.如图实现方式: 都是直接使用a标签1. 使用百度地图((可以传经纬度,也可以传中文地址)遇到的问题:zoom参数配置不起作用参考:https://lbsyun.baidu.com/index.php?title=uri/api/web2. 使用高德地图(不能只传中文地址)参考:https://...

2019-11-25 11:49:18 1527 1

原创 ios日期转换遇到的小问题

今天在项目开发过程中遇到一个小问题,就是把后台返回的日期转换为指定的格式如:2019-11-20=> 周三代码如下:function getWeek(params) { let date = new Date(params) let week = ''; if(date.getDay() == '0') week = "周日" if(date...

2019-11-20 16:36:38 244

原创滑动报[Intervention] Unable to preventDefault inside passive event listener的解决办法

想要仿微信浮窗效果,开发过程中发现如下报错:解决方法:html{ touch-action:none;}这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。...

2019-10-25 10:22:14 974

原创 v-cloak,v-text,v-html的用法以及区别

v-cloak: 用来解决插值表达式闪烁问题.利用vue在渲染元素完成后,v-cloak属性就会消失的特性给有属性v-cloak的元素设置display:none;v-text: 默认没有闪烁问题, 会覆盖元素中原本的内容.v-html: 默认没有闪烁问题, 会把内容当做HTML来解析.<!DOCTYPE html><html lang="en">&lt...

2019-04-03 12:57:22 485

转载前端性能优化--load和DOMContentLoaded

转自:https://www.cnblogs.com/caizhenbo/p/6679478.html作者写的很好,通俗易懂,解释的也很全面.DOMContentLoaded:就是dom内容加载完毕,HTML文档被解析加载完成.load:页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件,页面的load事件会在DOMContentLoaded被触发之后才触发。...

2019-04-03 09:02:25 906

原创前端截图插件cropper用法包括向后台传输数据方式

最近项目中遇到一个需求,要求前端实现截图,并使用canvas描边,然后以文件流的方式传给后台.记录一下在实现这一过程中主要的几个步骤: base64转为file,canvas鼠标画线.关于cropper的使用可以参考:https://blog.youkuaiyun.com/weixin_38023551/article/details/78792400,作者写的比较详细,这里就不再赘述....

2019-04-01 13:28:35 1046

原创 CSS实现块级元素水平垂直居中

块级元素水平垂直居中一直是常考面试体,工作中也经常会用到,在这里就汇总使用css实现块级元素水平垂直居中的方法.欢迎补充.方法一: 父级元素position:relative, 子元素position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;<!DOCTYPE html><html lang="en"&gt...

2019-03-25 14:50:58 970

原创 JS的值传递和引用传递

JS中有5种基本数据类型,它们在赋值的时候是通过值传递,而引用数据类型(对象)是通过引用来传递.举个例子:var x = 10;var y = 'abc';var a = x;var b = y;a = 5;b = 'def';console.log(x, y, a, b); // 10, 'abc', 5, 'def'基本数据类型,改变a,b的值并没有影响x,y当我...

2019-03-07 16:55:09 384

原创 JS模块化:ES6规范

ES6规范说明: 依赖模块需要编译打包处理 ES6规范语法: 导出模块:export 引入模块:import ES6规范实现(浏览器端): 使用Babel将ES6编译为ES5代码使用Browserify编译打包js举个栗子:第一步创建目录结构如下,定义package.json{ ...

2018-12-10 14:51:59 587

原创 JS模块化(三):CMD

CMD规范说明: Common Module Definition(通用模块定义) 专用于浏览器端,模的加载是异步的模块使用时才会加载执行 CMD基本语法: 定义暴露模块: // 定义没有依赖的模块: define(function(require,exports...

2018-12-07 15:43:23 1722

原创 JS模块化(二):AMD(RequireJS)

AMD规范说明: Asynchronous Moudle Definition(异步模块定义) 专门用于浏览器端,模块的加载是异步的 AMD基本语法 * 定义暴露模块: // 定义没有依赖的模块 define(function(){ return 模块 ...

2018-12-07 10:44:42 373

原创 JS模块化(一):CommonJS

模块化的规范: 目前有四种: 1.CommonJS 2.AMD 3.CMD(了解) 4.ES6 CommonJS规范说明: * 每个文件(js文件)都可以作为一个模块 * 在服务器端:模块的加载是运行时同步加载的(容易遇...

2018-12-06 15:40:09 492

原创 JS之作用域

简单了解JS中的作用域:首先,作用域是指一个变量的作用范围,JS中的作用域分为全局作用域和函数作用域.1.全局作用域: * 直接编写在script标签的JS代码,都在全局作用域 * 全局作用域在页面打开时创建,页面关闭时销毁 * 在全局作用域中有一个全局对象window,它代表一个浏览器窗口,由浏览器创造我们可以直接使...

2018-12-05 10:40:00 277

原创 JS之变量提升

简单了解JS中的变量提升问题:变量声明的提升* 使用var关键字声明的变量,会在所有代码执行之前被声明(但不会赋值)console.log(a);//undefinedvar a = 123;上述代码相当于:var a;console.log(a)a = 123;* 如果声明时没有使用var关键字,则变量声明不会提前console.log(a)// 报错 a...

2018-12-05 09:56:53 178

原创 JS之执行上下文与执行上下文栈

分享一下JS中很基础也很重要的概念:执行上下文(Execution Context);将我们的代码进行分类:1.代码分类(位置)： * 全局代码 * 函数(函数)代码.2.全局执行上下文 (1) 在执行全局代码前将window确定为全局执行上下文 (2)对全局数据进行预处理 * va...

2018-12-04 18:43:49 1683

原创分享工作中img标签的一种用法

分享最近工作中加载图片的一种方法:如图,背景图片的url里的路径,先来解释一下,data表示取得数据的协定名称,image/png是数据类型名称,base64是数据编码方式,后边的一堆是image/png文件编码后的数据.这是一种 Data URL scheme模式目前Data URL scheme 支持的类型有:data:,文本数据data:text/plain,文本数据da...

2018-12-04 17:11:53 459

原创 css实现图片水平垂直居中

分享一种图片水平垂直居中的方法:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片水平垂直居中</title></head><style type=&qu

2018-11-27 16:57:01 324

原创 ES6：symbol属性介绍

前言: ES5中对象的属性名都是字符串,容易造成重名,污染环境。Symbol: 概念: ES6中添加了一种原始数据类型symbol (已有的原始数据类型:String,Number,Boolean,Null,Undefined,Object) 特点: 1.symbol属性值对应的值是唯一的,解决命名冲突问题 ...

2018-11-26 15:31:35 995

原创 ES6:promise对象原理详解

1. 理解 * Promise对象:代表了未来某个将要发生的事件(通常是异步操作) * 有了Promise对象可以将异步操作以同步的流程表达出来,避免了层层嵌套的回调函数(俗称"回调地狱") * ES6的Promise函数是一个构造函数,用来生成promise实例对象 2.使用promise基本步骤...

2018-11-25 15:52:20 1336 2

原创 ES6:形参的默认值

形参的默认值: 当不传入参数时默认使用形参里的默认值 function Point(x=1,y=2){ this.x = x this.y = y }<!DOCTYPE html><html lang="en"><head> <meta charset="...

2018-11-11 18:53:19 981

原创 ES6:三点运算符

用途 1. rest(可变)参数 * 用来取代arguments,但比arguments灵活,只能是最后部分形参参数 function fun(...values){ console.log(arguments) arguments...

2018-11-11 18:51:00 1402

原创 ES6:箭头函数

作用: 定义匿名函数基本语法: 没有参数: () => console.log('xxx') 一个参数: (i) => i+2 大于一个参数: (i,j) => i+j 函数体不用大括号: 默认返回结果函数体如果有多个语句,需要用{}包围,若有需要返回的内容,需要手动返回 ...

2018-11-11 18:47:13 178

原创 ES6:模板字符串和简化的对象写法

1. 模板字符串: 简化字符串的拼接 * 模板字符串必须用 `` 包含 * 变化的部分使用${xxx}定义<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模板字符串</title

2018-11-10 19:27:03 700

原创 ES6:变量的解构赋值

1.理解 * 从对象或数组中提取数据并赋值给变量(多个) 2.对象的解构赋值 * let {n,a} = {n:'tom',a:18} 3.数组的解构赋值 * let [a,b] = [1,'yoona'] 4.用途 * 给多个形参赋值<!DOCTYPE html><html lang="en"&g...

2018-11-10 19:18:31 166

原创 ES6:let和const

let 1.作用 * 与var类似,用来声明一个变量 2.特点 * 在块作用域内有效 * 不能重复声明 * 不会预处理不存在变量提升 3.应用 * 循环遍历加监听 * 使用let取代var是趋势 const 1.作用 * 定义一个常...

2018-11-10 19:12:33 176

原创 Function的拓展:bind(),call(),apply()

1. Function.prototype.bind(obj) 作用: 将函数内的this绑定为obj,并将函数返回var obj = {username: 'Yoona'} function foo(data){ console.log(this,data) } var bar = foo.bind(obj) console.log(bar);// 输出函数体...

2018-11-10 19:08:09 195

原创 Object扩展对象

1. Object.create(prototype,[descriptors]) 作用: 以指定对象为原型创建新的对象为新的对象指定新的属性,并对属性进行描述 -value 指定值 -writable 标识当前属性值是否是可修改的,默认为false -configur...

2018-11-10 18:56:45 281

原创 JS中this指向问题

解析器在调用函数时,每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this,this指向的是一个对象,这个对象我们称之为函数执行的上下文对象,根据函数的调用方式不同,this会指向不同的对象.简单来说一下函数中this指向问题,1.this是什么? 任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是 window 所以函数内部都有一个变量...

2018-09-04 11:51:05 295

原创初识ES6

1.ECMAScript是什么?它是一种由ECMA组织(前身为欧洲计算机制造商协会)制定和发布的脚本语言规范.JavaScript是ECMA的实现,但术语ECMAScript和JavaScript表达同一意思.2.JS包含三个部分: 1)ECMAScript(核心) 2)扩展===>浏览器端 BOM (浏览器对象模型) DOM (文档对象模型)...

2018-08-30 11:12:30 195

原创 ES6中Map对象和Set对象

Map对象:保存键值对Map方法:var myMap = new Map(); myMap.set('Yoona',27);// 添加新的键值对 myMap.set('Jessica',28) console.log(myMap)打印输出: console.log(myMap.size)// 2 console.log(myMap.has('Yo...

2018-08-29 11:52:40 405

原创 JS中对象(一)

1.什么是对象? * 多个数据的封装体 * 用来保存多个数据的容器 * 一对象代表现实中的一个事物 2.为什么要用对象? * 统一管理多个数据 3.对象的组成? * 属性:属性名(字符串)和属性值(任意)组成 * 方法:一种特别的属性(属性值是函数) 4.如何访问对象内部数据? * .属性名 * ['属性名']...

2018-08-28 10:03:55 283

原创数组之最全汇总(包含es6)

定义数组:var arr = [];//或者var arr = new Array(); //ES6const arr = [];const arr = new Array();检测数组: // 1.instanceof 检测 console.log(arr instanceof Array);//true arr对象的原型链上能找到Array // 注意...

2018-08-27 15:05:06 631

原创 console.log()在浏览器中是异步执行!!!

今天发现一个小问题:console.log()在浏览器中居然是异步执行的!!!看下面这段代码:打印结果如下:数组的第一项是true.使用node执行这段代码,结果如下: ...

2018-08-22 15:42:15 1161 1

原创初步认识网页

作为前端工程师需要掌握哪些技能?根据W3C标准,一个网页主要有三部分组成:结构,表现,行为,这些也是我们要学习的内容是什么是结构,表现,行为?结构:HTML用于描述页面的结构.表现:CSS用于控制页面中元素的样式.行为:JavaScript用于响应用户的操作....

2018-08-22 15:11:15 234

原创前端开发那些事儿

前端开发是做什么的?无论是前端工程师还是后端工程师都是做软件开发的.软件开发主要有两种j架构:C/S和B/SC/S:(Client/Server 客户端/服务器):一般我们使用的软件都是C/S架构,比如QQ\office\360......,C表示客户端,用户通过客户端来使用软件,S表示服务器,负责处理软件的业务逻辑.其特点:1.使用前必须要安装.2.软件更新时服务器与客户端同时更新...

2018-08-22 14:48:34 654

转自https://blog.youkuaiyun.com/wulala_hei/article/details/80488674 都说Vue2简单上手容易，的确，看了官方文档确实觉得上手很快，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改dom的锤子不能用了，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、取消事件。...

2018-08-16 09:39:24 396

原创 Vue之computed(计算属性)详解get()、set()

Vue的计算属性：1.在computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算的结果。2.通过getter\setter实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算。<div id="demo"> 姓：<input type="text" placeholder="firstName" v-mode...

2018-08-09 10:21:02 61689 9

空空如也

使用nuxt,动态路由传参,怎样传多个参数?