FavoriteStudent-CSDN博客

转载防抖和节流

一、什么是防抖和节流比如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，那么消耗的服务器资源就太大了。1.防抖 - debounce其中一种解决方案就是每次用户停止输入后，延迟超过xxxms时，才去搜索，这就是防抖。原理：将若干个函数调用合成为一次，并在给定时间过去之后仅被调用一次。 var num = 1 var con...

2019-05-14 18:20:07 277

转载 Object对象的相关方法

1.Object.getPrototypeOf()Object.getPrototypeOf方法返回参数对象的类型。这是获取原型对象的标准方法 var F = function () { } var f = new F() console.log(Object.getPrototypeOf(f) === F.prototype) // true上面代码中，实例对...

2019-05-13 16:11:15 274

转载 JavaScript模块

封装私有变量：立即执行函数的写法使用“立即执行函数”，将相关的属性和方法封装在一个函数作用域里面，可以达到不暴露私有成员的目的。 var model1 = (function () { var count = 0 var m1 = function () { console.log('m1') } var m2 = f...

2019-05-10 17:37:05 165

转载构造函数的继承

instancof运算符instanceof运算符返回一个布尔值，表示对象是否为某个构造函数的实例。 function Vehicle() { } var v = new Vehicle() console.log(v instanceof Vehicle) // true上面代码中，对象v是构造函数Vehicle的实例，所以返回true。instancof...

2019-05-10 16:37:39 230

转载 constructor属性

原型链所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所有它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型......一层层追溯的话，所有对象的原型最终都可以上溯到Object.prototype，即Object构造函数的prototype属性。也就...

2019-05-10 09:32:46 1141 1

原创手写Bind函数

原生bind函数，创建一个新函数，新函数的this指向bind的第一个参数，剩下的参数作为实参传入目标函数中。同时，需要知道的是，新函数可以当做构造函数使用 function func(...arg) { console.log(this) console.log(arg) } func.prototype.getName = function...

2019-05-09 10:07:21 635

转载 call、apply、bind的区别和用法

作用：这三个函数的作用是改变函数执行时的上下文，说的再具体一点就是改变函数运行时的this指向。 function Person(name) { this.name = name } Person.prototype = { showName: function () { console.log(this.name) ...

2019-05-08 15:38:06 116

转载 JS数组方法总览

1.push(value)将一个或多个元素添加到数组的末尾，并返回该数组的新长度（改变原数组） // Base var arr = [1, 2, 3, 4, 5] var result = arr.push(7) console.log(arr) // [1,2,3,4,5,7] 原数组被改变 console.log(result) // 6 ...

2019-05-05 18:29:22 178

原创 canvas手写时钟

记录一下canvas手写时钟的详细步骤，以备将来查阅<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc

2019-01-28 17:21:03 296

原创一个关于闭包题分析详解（记录下来以后再看）

function fun(n, o) { console.log(o) return { fun: function (m) { return fun(m, n) } }}var a = fun(0) a.fun(1)a.fun(2) a.fun(3)var b = fun(0).fun(1).fun(2).fun(3) var c ...

2019-01-08 17:15:16 384

原创 ES6字符串常用新增方法

1.includes()在ES5中，我们常用indexOf()来判断某个字符串中是否包含另一个字符串，如下：var str = 'hello world!' var result = str.indexOf('lo') < 0 ? false : true console.log(result) // true这样我们需要加一层判断来得到我们需要的是否该字符串中...

2018-10-10 13:55:08 300

原创 ES6之Class类

接触过后端的朋友应该对Class并不陌生，ES6的Class借鉴的后端的类。1.Class的基本用法需要注意的是Class的名称首字母需要大写，Class本质上仍然是function，constructor中的写法跟ES5中构造函数的写法相似，使用类的时候必须通过new来实例化该对象class Person{ constructor(name,age){ ...

2018-10-09 15:32:05 313

原创 ES6之解构赋值

简单的记录一下ES6的解构赋值，方便以后查阅。ES6解构赋值可以在对象和数组中使用。1、对象的解构赋值var obj = { name: 'Tom', age: 15, gender: false, work: 'teacher', hobby: 'basketball' } var {age} = obj...

2018-10-08 16:41:13 484

转载一分钟教你学会配置eslint，还在为风格单双引号，对象末位逗号要不要，引用各种报错而烦恼？(建议收藏！详细中文注释)最全的eslint配置大全，我已经加了详细中文注释，只需要找到自己想要的配置就可以

最全的eslint配置大全，我已经加了详细中文注释，只需要找到自己想要的配置就可以了，强烈建议收藏！转载地址：https://segmentfault.com/a/1190000014230857用法非常简单，找到.eslintrc.js下的rules添加对象即可,比如我要把规则原本单引号要变为双引号，那加上"quotes": [1, "double"]如果违反了规则情况下，这里的数...

2018-08-30 11:02:57 3916

要求：由数字和字母组成，并且要同时含有数字和字母，且长度要在8-16位之间。^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$分开来注释一下：^ 匹配一行的开头位置(?![0-9]+$) 预测该位置后面不全是数字(?![a-zA-Z]+$) 预测该位置后面不全是字母[0-9A-Za-z] {8,16} 由8-16位数字或这字母组成$ 匹配行结尾位置注：(?!x...

2018-07-05 09:51:53 4814

转载 window.btoa和window.atob

转载地址：http://www.cnblogs.com/moqiutao/p/6280099.html?utm_source=itdadao&utm_medium=referralWindowBase64.atob()函数用来解码一个已经被base-64编码过的数据。你可以使用window.btoa()方法来编码一个可能在传输过程中出现问题的数据，并且在接受数据之后，使用window.at...

2018-07-02 16:56:11 877

转载为何getElementsByTagName()比querySelectorAll()快100倍

转载链接：DOM中的动态NodeList与静态NodeList动态NodeList这是文档对象模型（DOM,Document Object Model）中的一个大坑。NodeList对象（以及HTML DOM中的HTMLCollection对象）是一种特殊类型的对象。DOM Level 3 spec规范对THMLCollection对象的描述如下：DOM中的NodeList和NameNodeMap...

2018-07-02 10:58:45 311

原创 Vue常用指令总结

由于Vue指令太多，常常记错指令的使用场景以及用法，现将常用指令总结出来，以便下次需要时查阅1.v-on，缩写@绑定事件监听（用于监听DOM事件）。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。比如我们常用的  <button @click="toDo">做一件事</b...

2018-06-28 17:17:43 351

原创 vue-router从入门到精通之重定向和别名（五）

vue-router的重定向根据router实例化时的配置来设置{ path: '/home', redirect: '/document', }上述代码表示从/home重定向到/document重定向的目标也可以是一个命名的路由{ path: '/home/:id', redirect: {name: 'document'} }, { path...

2018-06-27 17:14:34 456

原创 vue-router从入门到精通之命名视图（四）

应用场景，当我们想同时展示多个视图，而不是嵌套展示。如：sidebar（侧导航）和main（主内容）两个视图，这个时候命名视图就派上用场了。我们可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view没有设置名字，那么默认为default <router-view class="center"></router-view> &l...

2018-06-27 16:22:14 479

原创 vue-router从入门到精通之动态路由（三）

这一节，我们讲讲动态路由是如何使用的，动态路由我们也可以理解为路由传参，这样就容易理解了吧let router = new VueRouter({ mode: 'history', linkActiveClass: 'is-active', routes: [{ path: '/home/:id', component: home }]})这里，上述形式即为动态路...

2018-06-27 15:48:04 235

原创 vue-router从入门到精通（二）

上一期，我们讲过vue-router的基本使用，这一期，我们讲一下<router-link>标签的使用以及配置<template> <div id="app"> <ul> <router-link to="/home" tag="li">home</router-link&

2018-06-27 14:32:08 249

原创 vue-router从入门到精通（一）

vue-router的使用大致分为5步第一步：在src目录下新建一个router文件夹，里面新建index.js文件第二步：在router/index.js中写入router配置import Vue from 'vue'import Router from 'vue-router'之后我们需要把vue-router作为插件Vue.use(Router)然后添加配置...

2018-06-27 11:44:03 335

原创 JS正则表达式

var re = new RegExp();正则表达式是一个对象，RegExp是regular（正则）和expression（表达式）合并起来的意思，跟Array一样，可以用new操作符来创建，这样没任何意义，console.log(re)返回结果为/(?:)/一般我们需要将正则表达式的内容作为字符串传递出去，如：var re1 = new RegExp('a')这里的re1将匹配字母avar r...

2018-06-26 15:42:41 172

原创 vue的生命周期

为了更好的学习vue，理解vue的生命周期是很有必要的，vue的生命周期主要包含8个钩子函数，我们分析一下这8个钩子函数所做的事情就能够理解vue的生命周期了先贴一段代码吧，可以直接新建一个网页，在浏览器上运行，打开控制台查看结果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...

2018-06-26 11:32:38 200

原创 gulp的简单使用

首先，安装nodejs，通过命令行node -v（v.8.9.4）来查看版本号，通过npm -v（5.6.0）来查看npm的版本号如果以上都正常的话，打开命令行工具，进入文件目录全局安装gulp：npm install gulp -g，查看是否正确安装使用gulp -v，出现版本号即为正确安装，如果出现‘gulp’不是内部或外部命令，也不是可运行的程序或批处理文件，请设置环境变量设置环境变量方法：...

2018-06-25 18:04:59 366

转载 js中cookie的使用

cookie概述cookie是浏览器提供的一种机制，它将document对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨域多个域名使用。不同的...

2018-06-22 14:18:14 1480

原创 return、reutrn false、e.preventDefault、e.stopPropagation、e.stopImmediatePropagation的简单使用

returnvar i = function(){ return } console.log(i())//undefinedreturn的主要作用是阻止函数继续执行，直接返回undefinedreturn false<a class="baidu" href="http://www.baidu.com">百度</a>$...

2018-06-21 15:48:14 594

原创关于JS常见遍历语法比较

for循环var arr = [1,2,3] for(var i = 0;i<arr.length;i++){ console.log(arr[i]) }输出结果为：1,2,3forEachvar arr = [1,2,3] arr.forEach((item,i)=>{ console.log('第'+i+'个为'+item)...

2018-06-20 15:25:21 227

转载记录localStorage和sessionStorage

客户端存储数据的两个对象为：localStorage-没有时间限制的数据存储，删除的话只能手动删除sessionStorage-针对一个session的数据存储，当关闭窗口的时候，数据清空很多时候我们更加需要用到sessionStorage来存储数据setItem存储value用途：将value存储到key字段用法：.setItem(key,value)sessionStorage.setItem...

2018-06-08 18:01:50 164

转载 let和const

let的用法类似于var,但是所声明的变量，只在let命令所在的代码块内有效{let a = 10;var b = 2;}console.log(a);console.log(b);结果为：a is not defined,1for循环的计数器，就很适合使用let命令var a = [];for(let i = 0;i<10;i++){ a[i] = function()...

2018-06-07 18:14:22 177

转载同一个文件二次上传无效问题解决方案（转）

input[type=file]使用的时onchange去做，onchange监听的为input的value值，只有在内容发生改变的时候去触发，而value在上传文件的时候保存的是文件的内容，因此我们再上传成功的回调里面，将当前的input的value值置空即可。document.getElementById('myInput').value = ''...

2018-06-01 15:19:44 3438

转载 vue-cli引入手淘移动端适配解决方案（flexible）

转载地址：点击打开链接首先，安装lib-flexible，使用命令行npm i lib-flexible --save引入lib-flexible，在项目入口文件main.js中引入lib-flexibleimport 'lib-flexible'添加meta标签，在项目根目录的index.html中添加如下标签<meta name="viewport" content="width=dev...

2018-05-18 15:43:22 2707

原创 Vue进阶之Vue-cli构建项目

前置条件：电脑已安装node.js，能正常使用npm，检测是否安装了npm及版本情况，可以直接在命令行中输入 npm -v，如果出现版本号说明已安装node。如果没有安装node的，请去node官网下载，下载地址为https://nodejs.org/en/download。接下来，使用命令 npm install -g vue-cli，其中"-g"代表全局安装，安装成功之后，可以使用vue -V...

2018-05-17 11:47:11 889

原创字符串的常用方法

charAt(arguments)用来获取字符串中的某一个字符 var str = 'liqing'; console.log(str.charAt(2));//qcharCodeAt(arguments)用来获取字符串中的某个字符的unicode编码var str = 'liqing';console.log(str.charCodeAt(2));//113String.fromCharCo...

2018-05-15 11:09:35 179

转载 JS之构造函数继承

function Animal(){}Animal.prototype.type = '猫科动物'; function Cat(name, age) { this.name = name; this.age = age;}想要使Cat继承Animal的prototype属性方法一：构造函数的绑定，使用call或者apply将父对象的构造函数绑定在子对象上function Cat(na...

2018-05-09 11:43:16 776

转载 JS之原型prototype总结

为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。所谓“构造函数”，其实就是一个普通函数，但是内部使用了

2018-05-09 10:43:36 398

原创 css3基础总结-将一个div水平垂直居中的方法

方法一：使用flexdisplay: flex;justify-content: center;align-items: center;该方法能水平垂直居中不定宽高的div方法二：div绝对定位水平垂直居中【transform变形】position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-...

2018-05-08 19:00:48 1168 1

原创 JS基础总结

数据类型基本类型：5大类string，number，boolean，null，undefined操作和保存在变量的实际的值，保存在栈区基础类型可以用typeof() 来判断 var a = 'asaf'; console.log(typeof a) //string var b = true; console.log(typeof b) //boolean ...

2018-05-08 18:07:31 265

原创记录JS常用数组方法

1.给数组新增元素push()方法，在数组末尾添加，返回新数组var arr = [1,2,3];arr.push(4,2);console.log(arr);结果是：[1,2,3,4,2]2.给数组移除元素pop()方法，不需要传参数，返回新数组var arr = [1,2,3];arr.pop();console.log(arr);结果是：[1,2]便于记忆，将push()和pop()...

2018-05-07 17:38:57 175

空空如也

空空如也