- 博客(50)
- 收藏
- 关注
RSS订阅原创 JS中slice,splice,split的区别
JS中slice,splice,split的区别 不知道大家对slice,splice,splite是肿么样的感觉，反正我刚接触到这三个函数的时候整个人都懵了，因为一个个长的跟孪生兄弟似的，每次用的时候都会混，于是决定记下来，也给大家当个参考吧。slice ： 定义：接收一个或两个参数，它可以创建一个由当前数组中的一项或多项组成的新数组，注意是新数组哦~ 也就是说它不会修改...
2018-11-19 08:54:49
341
原创 ES6 箭头函数this指向
箭头函数有几个使用注意点。（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。上面四点中，第一点尤其值得注意。th...
2018-11-13 15:51:15
463
转载 async/await的使用以及注意事项
使用 async / await, 搭配 promise, 可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性. 本文介绍 async / await 的基本用法和一些注意事项.await引用MDN的介绍:await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用.await 的使用语法非常简单:[return_va...
2018-10-16 23:04:08
782
原创 ES6---new Promise()讲解，Promise对象是用来干嘛的?
具体介绍语法：new Promise(function(resolve,reject){...}/*executor*/);Promise构造函数执行时立即调用executor函数，resolve和reject两个函数作为参数传递给executor（executor函数在Promise构造函数返回新建对象前被调用）。resolve和reject函数被调用时，分别将Promise状态改为fu...
2018-10-16 22:58:38
6386
原创 Object.assign合并对象
今天撸代码看到大佬写的代码了有句‘ Object.assign(param,_param);’不明白什么意思，遂百度之：Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。const object1 = { a: 1, b: 2, c: 3}; const object2 = Object.assign({c: 4,...
2018-10-10 11:02:41
243
原创 vue.js中使用set方法
vue教程中有这样一个注意事项：第一种具体情况如下：运行结果：当利用索引改变数组某一项时，页面不会刷新。解决方法如下：运行结果：三种方式都可以解决，使用Vue.set、vm.$set()或者数组的splice方法。在做项目的过程中，有个发现，先上代码：第一个数组通过利用下标改变第二项，第二个数组使用$set()方法改变第二项，根据上面的代码，我们会知道：第一个数组的第二项...
2018-10-10 10:57:34
932
转载 JS 对象(Object)和字符串(String)互转方法
JS 对象(Object)和字符串(String)互转方法利用原生JSON对象，将对象转为字符串// 字符串转化为 对象var jsonString = '[{"name":"天鸽"},{"name":"梅花"},{"name":"台风"}]';// console.log(JSON.parse(jsonString));var jsArr = JSON.parse(jsonS
2018-10-10 09:35:11
27436
1
转载 使用min-device-pixel-ratio媒体功能实现真正的1像素border
由于设备像素比存在的原因，我们在处理设计图的一些边框时，对于1px的border，如果在代码里将其写死，可能在不同设备像素比的设备中，粗细不一样，尤其是在目前大多数设备像素比为2的设备中，过粗。那么利用媒体查询和”min-device-pixel-ratio”就可以轻松的搞定，实现货真价实的1px border。scss代码如下：%border-1px{ display: block...
2018-09-29 18:04:30
513
转载 better-scroll使用
better-scroll是借鉴iscroll，是很牛的前端大神ustbhuangyi黄轶老师上传至github，并在教学视频中屡次运用的github地址：https://github.com/ustbhuangyi/better-scroll中文文档：Document其方法、事件、属性等都可以去文档查找，做移动端的滑动非常好1、使用better-scroll的基本条件必须包含两个大的d...
2018-09-29 16:32:03
594
原创 JS封装返回固定时间函数
暴露封装export function formaDate (date, fmt) { //返回固定的年份 if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }; //定...
2018-09-29 16:23:24
597
原创 vue子组件改变父组件数据的两种方法
今天再看github上别人的项目时发现一个vue的小细节，之前没有见过特写一篇文章记录一下……，小细节为方法二。方法一子组件代码<template> <div @click="open"></div></template>methods: { open() { this.$emit('showbox',tru...
2018-09-28 10:09:10
1901
转载 vue2.0$nextTick监听数据渲染完成之后的回调函数
vue里面本身带有两个回调函数：一个是Vue.nextTick(callback)，当数据发生变化，更新后执行回调。另一个是Vue.$nextTick(callback)，当dom发生变化，更新后执行的回调。栗子：… {{item}}...，问题在于这个don...
2018-09-25 11:12:22
249
转载 vue基本使用--refs获取组件或元素
说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods添加ref属性<div id="app"> <h1 ref="h1Ele">这是H1</...
2018-09-24 14:17:09
3715
1
转载 Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值
Vue2.0 传值方式：在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。我先给大家介绍...
2018-09-24 14:13:20
790
原创 VUE子组件向父组件的数据传递
自定义事件我们知道，父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通信呢？这个时候 Vue 的自定义事件系统就派得上用场了。使用 绑定自定义事件v-on每个 Vue 实例都实现了事件接口，即：使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件Vue 的事件系统与浏览器的 EventTarget API 有所不同。尽管它们的运行起来...
2018-09-24 13:36:28
358
原创 VUE双向数据绑定原理
vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。在MDN上对该方法的说明是：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。...
2018-09-19 22:07:57
206
转载 Web前端性能优化解决方案
**1、请减少HTTP请求基本原理：**在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的...
2018-09-17 23:48:49
7432
原创 Ajax的readyState和status状态码
1.readyState0—-（未初始化）还没有调用send()方法 1—-（载入）以调用send()方法，正在发送请求 2—-（载入完成）send()方法执行完成，已接受到全部响应内容 3—-（交互）正在解析响应内容 4—-（完成）响应内容解析完成，可以在客户端调用了2.status2xx—-表示请求成功 3xx—-需要重定向，浏览器直接跳转 4xx—-客户端请求错误...
2018-09-14 11:03:31
214
原创 完善通用事件绑定函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
2018-09-14 10:28:25
183
转载 js事件代理
js事件代理想象一下现在我们有一个美女图片的列表页，在这个列表页中有上千个美女的小图片。我们希望点击每一个美女小图片就跳到对应的美女的大图片页，如果把事件处理器加到这上千个美女的小图片的标签上会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理的话，你只需要把一个事件处理器添加到列表ul上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击...
2018-09-14 09:17:12
286
原创 JS阻止事件冒泡
什么是JS事件冒泡？：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 如何来阻止Jqu...
2018-09-14 09:14:58
163
转载 JS获取当前使用的浏览器名字以及版本号
function getExplorerInfo() { var explorer = window.navigator.userAgent.toLowerCase(); //ie if (explorer.indexOf(“msie”) >= 0) { var ver = ex...
2018-09-14 08:56:18
5123
1
转载 WEB常用API
一、节点1.1 节点属性Node.nodeName //返回节点名称，只读 Node.nodeType //返回节点类型的常数值，只读 Node.nodeValue //返回Text或Comment节点的文本值，只读 Node.textContent //返回当前节点和它的所有后代节点的文本内容，可读写 Node.baseURI //返回当前网页的绝对路径No...
2018-09-14 08:55:52
804
原创 Javascript中Array数组对象常用方法
1、join()join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。var arr = [1,2,3];console.log(arr.join()); // 1,2,3console.log(arr.join("-")); // 1-2-3console.log(arr); //...
2018-09-13 16:29:03
397
原创 Javascript运算符优先级
运算符优先级 JavaScript中的运算符优先级是一套规则。该规则在计算表达式时控制运算符执行的顺序。具有较高优先级的运算符先于较低优先级的运算符执行。例如，乘法的执行先于加法。下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。 优先级从高到底 1. () 优先级最高 2. 一元运算符 ++ – ! ...
2018-09-12 17:40:04
257
转载 JavaScript 运算符规则与隐式类型转换详解
在 JavaScript 中，当我们进行比较操作或者加减乘除四则运算操作时，常常会触发 JavaScript 的隐式类型转换机制；而这部分也往往是令人迷惑的地方。譬如浏览器中的 console.log 操作常常会将任何值都转化为字符串然后展示，而数学运算则会首先将值转化为数值类型（除了 Date 类型对象）然后进行操作。我们首先来看几组典型的 JavaScript 中运算符操作结果，希望阅读完...
2018-09-12 17:20:15
163
转载 理解JS函数作用域
函数作用域 从之前我们讨论的作用域是负责声明并维护由所有声明的标识符（变量）组成一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。作用域包含着一系列的规则。很多函数嵌套的时候，最里面的函数的作用域包含着对外层函数作用域的引用，这些引用包含着对标识符（变量、函数）的定义。我们知道。JavaScript有基于函数的作用域，这意味着每一个函数都可以创建属于自己的一套作...
2018-09-12 11:02:55
208
原创 this的几种使用场景
JavaScript 中的 this 含义要丰富得多，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式： 作为对象方法调用 作为函数调用 作为构造函数调用 使用 apply 或 call,bind 调用 下面我们将按照调用方式的不同，分别讨论 this 的含义。 1作为对象方法调用在 JavaScrip...
2018-09-12 10:47:06
2929
转载 函数声明和函数表达式之间的区别
函数表达式是javascript中的一个既强大容易令人困惑的特性 《javascript高级程序设计》定义函数的方式有两种//指定函数名的方式 1.function sayHi(){ } 以上的函数声明方式一个重要的特征就是函数声明提升，意思是在执行代码之前会先读取函数声明，意味着可以把函数声明放在调用他的语句后面 即： sayHi(); function...
2018-09-12 10:42:22
245
转载 CSS3弹性布局flex
CSS3 弹性盒子内容弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示...
2018-09-12 10:41:52
123
原创 常见ES6总结
前言ES6是即将到来的新版本JavaScript语言的标准，他给我们带来了更“甜”的语法糖（一种语法，使得语言更容易理解和更具有可读性，也让我们编写代码更加简单快捷），如箭头函数（=>）、class等等。用一句话来说就是：ES6给我们提供了许多的新语法和代码特性来提高javascript的体验不过遗憾的是，现在还没有浏览器能够很好的支持es6语法，点这里查看浏览器支持情况，所以我...
2018-09-11 16:16:28
174
转载 CSS选择器大全
一，CSS3 选择器分类二，选择器语法1，基本选择器语法选择器 类型 功能描述 * 通配选择器 选择文档中所以HTML元素 E 元素选择器 选择指定类型的HTML元素id ID选择器 选择指定ID属性值为“id”的任意类型元素.class 类选择器 选择指定class属性值为“class”的任意类型的任意多个元素selector1,s...
2018-09-10 16:25:58
151
原创 javascript原型规则
function Foo(name , age){ this.name = name; this.age = age; this.class = "class-1"; return this; // 默认有这一行 } var f = new Foo( "bobo" ,22); // 实例化对象 ...
2018-09-10 08:41:16
143
原创 JS原型规则
<script> // 构造函数 function Foo(name , age){ this.name = name; this.age = age; this.class = "class-1"; return this; // 默认有这一行 } var f = new Foo...
2018-09-10 08:21:19
154
原创 深入理解JS构造函数
在JavaScript中，创建对象的方式包括两种：对象字面量和使用new表达式。对象字面量是一种灵活方便的书写方式，例如：var o1 = { p:”I’m in Object literal”, alertP:function(){ alert(this.p); }}这样，就用对象字面量创建了一个对象o1，它具有一个成员变量p以及一个成员方法...
2018-09-10 08:16:21
165
原创 javascript内置函数大全
JS内置函数Data,Math,Number,Bollean,String,Array,RegExp,Function,Object1.Date：日期函数属性(1): constructor 所修立对象的函数参考 prototype 能够为对象加进的属性和方法 办法(43): getDay() 返回一周中的第几天(0-6) getYear() 返回年份.2000年以前为2位,20...
2018-09-08 13:40:54
701
转载 js类型转换----转换函数/////强制类型转换/////利用js变量弱类型转换。
方法主要有三种转换函数、强制类型转换、利用js变量弱类型转换。1. 转换函数：js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(Not a Number)。一些示例如下：复制代码代码如下:parseInt("1234blu...
2018-09-08 10:57:13
761
原创 js变量类型的判断
前言 JavaScript中的变量为松散类型，所谓松散类型就是指当一个变量被申明出来就可以保存任意类型的值，就是不像SQL一样申明某个键值为int就只能保存整型数值，申明varchar只能保存字符串。一个变量所保存值的类型也可以改变，这在JavaScript中是完全有效的，只是不推荐。相比较于将变量理解为“盒子“，《JavaScript编程精解》中提到应该将变量理解为“触手”，它不保存值，而是抓...
2018-09-08 10:00:44
1298
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人