isxxya-CSDN博客

原创 elementUI实现分页

分页的两种方式。前端分页，后端分页前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。后端分页：因为是后端分页，前端在每点击一次分页时，便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据一、在elementUI中将表格、分页引入自己的页面中<template> <div cla

2020-09-29 20:22:45 14268 5

原创 Vue 组件设计原则

1.扁平的，面向数据的 state/props扁平 props 也可以很好地清除组件正在使用的数据值。如果你传给组件一个对象但是你并不能清楚的知道对象内部的属性值，所以找出实际需要的数据值是来自组件具体的属性值则是额外的工作。state / props 还应该只包含组件渲染所需的数据。（此外，对于数据繁重的应用程序，数据规范化可以带来巨大的好处，除了扁平化之外，你可能还需要考虑一些别的优化方法）。2.更加纯粹的 State 变化对 state 的更改通常应该响应某种事件，例如用户单击按钮或 API

2020-09-29 20:15:15 2113

原创 js中的递归算法

js递归定义：递归函数就是在函数体内调用本函数递归函数的使用要注意函数终止条件，避免进入死循环简单的递归实例1.求1,2,3,…n的和function sum(n){ if( n == 1 ) return 1; return sum(n-1) + n;}2.求1,3,5,7,…第n项和前n项的和先求出第n项的值function foo(n){ if(n == 0) return 1; return foo(n-1) + 2;}接着求前n项的和

2020-09-19 10:38:20 3065

原创函数防抖（debounce）和节流（throttle）

前言：在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。这个时候，防抖和节流是比较好的解决方案。防抖（debounce）防抖就是指触发事件后在 n 秒内函数只执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。防抖函数分为非立即执行版和立即执行版非立即执行版：function debounce(func, wait) { let timeou

2020-09-16 20:07:07 2195

原创浏览器重绘（Repaint）和回流（Reflow）

回流必将引起重绘，重绘不一定会引起回流！！！重绘（Repaint）当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color 等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。回流（Reflow）当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。会导致回流的操作：页面渲染初始化添加、删除可见的 DOM 元素元素尺寸、位置发生变化浏览器窗口大小 resize

2020-09-16 19:49:21 3039

原创前端性能优化-基础篇

页面加载及渲染过程优化首先介绍一下浏览器渲染页面的流程：1.解析 HTML 文件，构建 DOM 树，同时浏览器主进程负责下载 CSS 文件2.CSS 文件下载完成，解析 CSS 文件成树形的数据结构，然后结合 DOM 树合并成 RenderObject 树3.布局 RenderObject 树（Layout/reflow），负责 RenderObject 树中的元素的尺寸，位置等计算4.绘制 RenderObject 树（paint），绘制页面的像素信息5.浏览器主进程将默认的图层和复合图层

2020-09-16 19:31:50 2633

原创 vue 面试题

1.什么是 mvvm？MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，因此 Vi

2020-09-12 17:55:42 4511

原创 vue-rooter基础篇

路由概述vue-rooter 是 vue.js 官方的路由插件，他和 vue.js 是深度集成的。适用于构建单页面。vue 的单页面应用是基于路由和组件的，路由是用于设定访问路径，并将路径和组件映射起来。在 vue-rooter 单页面应用中，是路径之间的切换，也就是组件的切换。路由的使用1.使用 router-link 标签进行导航，to 属性表示指定的链接，rooter-link标签会被渲染成 a 标签。路由匹配的组件在 router-view 中渲染出来。router-linkto： to

2020-09-03 21:58:19 4584

原创 js中的四种常用数组排序方法(冒泡、选择、插入、快排)及sort排序

1.冒泡排序原理：比较两个相邻的元素，如果第一个比第二个大，就交换他们的位置对所有的元素重复以上步骤，直至排序完成var arr = [3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];document.body.innerHTML += `排序前:${arr}<br /><hr>`;function arraySort(arr){ for(var i=0;i<arr.length;i++){ for(var j=0;j&

2020-08-31 21:13:34 5870

原创 javascript中的七种数据类型

五种基本数据类型1.StringString类型用于表示由零或多个16位的Unicode字符组成的字符序列，即字符串。至于用单引号，还是双引号，在js中还是没有差别的。记得成对出现。2.Number该类型的表示方法有两种形式，第一种是整数，第二种为浮点数。整数：可以通过十进制，八进制，十六进制的字面值来表示。浮点数：就是该数值中必须包含一个小数点，且小数点后必须有一位数字。3.Boolean即布尔类型，该类型有两个值：true、false。需要注意的是，Boolean类型的字面值true和fal

2020-08-27 19:53:47 5056

原创 js 与 jquery 判断数据类型的四种方法

JavaScript 四种判断方法1.typeof此方法的返回结果只要以下几种：Number、String、undefined、Bollean、Object、Function弊端在于如果数据类型为引用数据类型，他只能返回 Objectconsole.log(typeof 1); //numberconsole.log(typeof true); //bolleanconsole.log(typeof '欢喜'); //stringconsole.log(typeof {}); //o

2020-08-27 19:36:17 5111

原创表白必备小心心 biubiubiu~

效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小心心</title> <style> body { background: #000800; } canvas { margin: 0

2020-08-26 20:42:40 5848 3

原创 JavaScript 字符串方法全版

String 对象描述字符串是 JavaScript 的一种基本的数据类型String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。需要注意的是：JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。String 对象属性属性描述constructor对创建该对象的函数的引用

2020-08-26 18:45:22 9844

原创 mysql数据库基础操作命令大全

SQL数据库语言1.数据定义语言(CREATE,ALTER,DROP,DECLARE)2.数据操纵语言(SELECT,DELETE,UPDATE,INSERT)3.数据控制语言(GRANT,REVOKE,COMMIT,ROLLBACK)创建数据库create database my-database删除数据库drop database my-database创建新表create table my_table(col1 type1 [not null] [primary key],c

2020-08-24 19:33:33 15766 4

原创 JavaScript面试题三千问---下篇

31.IE 的事件处理和 W3C 的事件处理有哪些区别？绑定事件：W3C：targetEl.addEventLIstener(‘click’,handler,false);IE：targetEl.attachEvent(‘onclick’,handler);删除事件：W3C：targetEl.removeEventListener(‘click’,handler,false);IE：targetEl.detachEvent(‘onclick’,handler);事件对象：W3C：v

2020-08-20 21:41:20 7810 2

原创 JavaScript面试题三千问---上篇

1.JavaScript的组成ECMAScript(核心)：JavaScript语言基础DOM(文档对象模型)：规定了访问 HTML 和 XML 的接口BOM(浏览器对象模型)：提供了浏览器窗口之间进行交互的对象和方法2.JS 的基本数据类型和引用数据类型基本数据类型：undefined、null、bollean、number、string、symbol引用数据类型：object、array、function3.检测浏览器版本有哪些方式？根据 navigator.userAgent

2020-08-20 20:53:31 9185 3

原创 JavaScript 实现倒计时

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>倒计时</title></head><body> <h1 id="timer"></h1> <script> function leftTimer(year, month, day, hour, minute

2020-08-15 14:34:53 3159

原创 CSS面试题三千问

1.display:none与visibility:hidden的区别相同：他们都能让元素不可见区别：display:none会让元素完全消失，不再占据任何空间；visibility:hidden会让元素不可见但元素本来的空间继续占据，只是内容不可见。display:none是非继承属性，子孙节点会跟随父节点一起消失，即使修改子孙节点属性也无法显示；visibility:hidden是继承属性，子孙节点继承父节点消失，但通过设置visibility属性可以让子孙节点显示。2.link与@imp

2020-08-14 21:41:22 10300 5

原创让元素水平垂直居中的四种方法

一、使用flex弹性布局<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>flex</title></head><style> *{ margin: 0; padding: 0; } #father{ display: flex; j

2020-08-14 10:07:04 3360 3

原创 ES6之promise

promisepromise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以。promise并未剥夺函数return的能力，因此无需层层传递callback回调获取数据。多个异步等待合并并便于解决promise构造new Promise( function (resolve, reject) { resolve('hello') // 数据处理完成 reject('bye') // 数据处理出错 }).then( (res) => {consol

2020-08-13 20:18:21 3871 7

原创原生js与JQuery的ajax请求

原生js的ajax请求1.创建XMLHttpRequest对象var xhr=new XMLHttpRequest();2.准备发送请求 open()xhr.open('请求类型','url地址',是否异步);参数描述请求类型GET 或 POSTurl文件在服务器上的地址是否异步true(异步) / false(同步)3.发送请求数据 send()xhr.send();4.请求返回的回调函数当页面的加载状态发生改变的时候readyState属

2020-08-13 11:52:08 8424 3

原创 JQuery中的各种事件

文档加载完成加载文档完成触发：$(document).ready(function(){})事件可以多次执行。代码可以简写为：$(function(){})事件绑定bind(type、[data]、function)type为事件类型：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、chang

2020-08-12 20:39:08 8274 8

原创 ES6之Class详解篇

1.类简介ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法。类的数据类型就是函数，类本身就指向构造函数。使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。2.Class的基本语法class Point { constructor(x,y){ this.x = x; this.y = y; } toString(){ return `${thi

2020-08-12 20:07:22 4593 7

原创 JQuery中的遍历-元素查找

JQuery遍历概念jQuery 遍历，可以理解为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。废话不多说先上方法方法描述add()把元素添加到匹配元素的集合中addBack()把之前的元素集添加到当前集合中andSelf()在版本 1.8 中被废弃。addBack()的别名children()返回被选元素的所有直接子元素closest()返回被选元素的第一个祖先元素contents()返回被选元素的所有直接子

2020-08-12 17:41:55 6178 2

原创 JavaScript Array 对象之ES5新增数组高阶方法

1.forEach()遍历forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。语法:var arr = ['我','爱','我的','祖国'];arr.forEach(function(item,index,self){ console.log(item,index,self);})参数：参数描述item必须，当前元素index可选，当前元素的索引值self可选，当前元素所属的数组对象2.map()映射map() 方法返回一

2020-08-11 20:35:47 4785 5

原创 call()与apply()的作用和不同点

call()与apply()的作用和不同点call与apply都属于Function.prototype的一个方法所以每个Function(就是每个方法)都有call，apply属性它们的作用一样，只是使用方式不同作用他们两个的作用是一样的都是为了改变this指向区别他们的区别就是接收参数的方式不同call():传递给函数的参数必须逐个列举出来apply():传递给函数的事参数数组eg：用call和apply方式求数组最小值var arr=[15,20,30,31,89,120,33

2020-08-11 19:26:55 4354

原创 JQuery中的DOM操作

DOM操作内部插入内容1.内部插入内部插入内容1.内部插入-append()该方法在匹配元素集合的每个元素末尾插入由参数指定的内容并返回jQuery对象。$(selector).append(content)$(selector).append(function(i){return “索引值”+i})-appendTo()此方法将匹配元素集合中的每个元素插入目标元素的末尾并返回jQuery对象。两种方法执行效果相同，区别在于语法上内容和目标的位置不同。 $(content).appe

2020-08-11 17:29:08 4653 7

原创 JQuery中的选择器

JQuery引入与选择器JQuery的引入JQuery中的$JQuery选择器1.基本选择器2.层次选择器3.过滤选择器3.1 、基本过滤选择器3.2、内容过滤选择器3.3 、可见性过滤选择器3.4 、属性过滤选择器3.5 、子元素过滤选择器3.6 、表单对象属性过滤选择器4、表单选择器JQuery的引入1.本地引入<script type="text/javascript" src="jquery.js"></script>2.远程引入<script type="

2020-08-10 21:09:40 11038 5

原创 ES6变量与解构

ES6第一讲变量声明变量声明- let1.let声明的变量是局部变量，在一对{}中有效if(true){ var a = 15; let b = 37;}console.log(a);console.log(b);var 声明的变量在if外能访问到，let声明的变量是局部变量只能在{}访问2.let不能重复声明3.let不会变量提升(js在执行时会预编译，会把所有的变量提升在代码的最前面并赋初值undinfine)- const...

2020-08-10 20:14:03 5174 6

AK的博客