- 博客(81)
- 收藏
- 关注
RSS订阅原创 完整的导航解析流程
完整的导航解析流程导航被触发。在失活的组件里调用 beforeRouteLeave 守卫。调用全局的 beforeEach 守卫。在重用的组件里调用beforeRouteUpdate 守卫 (2.2+)。在路由配置里调用 beforeEnter。解析异步路由组件。在被激活的组件里调用 beforeRouteEnter。调用全局的 beforeResolve 守卫 (2.5+)。导航被确认。调用全局的 afterEach 钩子。触发 DOM 更新。调用 beforeRouteEnte
2021-01-17 22:03:51
212
原创 Vue的生命周期
Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们称为Vue 实例的生命周期Vue的生命周期分三个阶段：创建阶段，运行阶段，销毁阶段。实例、组件通过new Vue()创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据
2021-01-17 21:13:40
163
原创 3D旋转轮播图
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D<
2020-12-27 22:37:53
500
原创 旋转木马轮播图
html部分：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="css/css.css" /></head><body> <div class="wrap" id="wrap"
2020-12-27 22:33:08
133
原创 ajax 状态值与状态码
状态值与状态码的区别ajax的状态值指，运行ajax时，无论是成功还是失败都要响应的步骤的几种状态。例如：尚未调用send()方法时的初始化前、正在发送请求、正在响应等，由ajax对象和服务器之间的交互所得。通过ajax.readyState获得 0~4 范围的一个状态值。ajax状态码是指，ajax无论请求是否成功，由HTTP协议根据所提交的信息，服务器返回的http头信息代码，通过ajax.state属性来获得。ajax状态值ajax的 XMLHttpRequest 不是一次就完成的，而是经历过
2020-12-20 23:52:36
796
原创 函数科里化
函数柯里化是js函数式编程的一项重要应用，柯里化，用一句话解释就是，把一个多参数的函数转化为单参数函数的方法。函数柯里化思想：一个JS预处理的思想，降低通用性，提高适用性。这是一个两个参数的普通函数：function plus(x, y){ return x + y} plus(1, 2) // 输出 3经过柯里化后这个函数变成这样：function plus(y){ return function (x){ return x + y }} p
2020-12-20 23:25:06
146
原创 切割轮播图
这是一个使用css3+jQuery实现的轮播图效果，以前还没接触css3时，觉得效果挺酷炫的，实现挺复杂的，今天研究了一下，发现特别简单，稍微动用一下空间想象力就好了,下面是代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>切割轮播图</title> <style> * {
2020-12-13 21:26:53
113
原创 页面优化--防抖
先看一个需求，需求是这样的，监听页面的scroll事件，当页面拖动到最底端时，加载更多。实现代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> * { padding:0; margin:0 } .content { hei
2020-12-13 20:44:12
232
原创 jQuery部分知识点总结
jQuery介绍1.jQuery是一个轻量级的、兼容多浏览器的JavaScript库。2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“jQuery的优势1.一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。2.丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS
2020-11-29 20:46:17
186
原创 完整原型链示意图
图中有几个难点：1.Function构造函数可以用Function.__proto__来访问Function.prototype. 这是因为Function构造函数的构造函数是他本身，作为实例化对象的角色来访问，可行。2.任何函数都是函数，他都继承Function的所有属性和方法，而Function是内置的构造函数，也是对象，都是继承Object的所有属性和方法。...
2020-11-17 20:03:29
211
原创 轮播图 opacity
利用透明度来实现轮播图效果话不多说直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2020-11-03 20:33:05
238
原创 splice()、slice()、split()的区别
splice() 用于数组splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。语法：array.splice(start[, deleteCount[, item1[, item2[, ...]]]])参数start 指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值， 则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.leng
2020-10-13 20:00:45
193
原创 数组去重
1. 利用indexO() 去重 var arr = [1, 2, 1, 2, 1, 4, 5, 8] function unique(arr) { var newarr = [] for (var i = 0; i < arr.length; i++) { //判断newarr是否存在当前元素，如果不存在，就将当前元素添加到newarr中 if (newarr.indexOf(arr[i]
2020-10-13 19:08:45
80
原创 JSON与js的关系
JSON是一种轻量级的数据交换格式，全称——JavaScript 对象表示法（JavaScript Object Notation）。类比XML，你可以把JSON看作是一种存储数据的格式类型，一种数据规范。描述JSON格式数据的语法采用了JS对象字面量的表示方法，但是你不能的把JS对象就看做是JSON了，同XML一样JSON只是一种存储数据的类型，它是独立于语言存在的，只是在不同的编程语言中对这种数据类型的实现不同，例如在JavaScript中使用JavaScript对象对这种数据格式进行实现，那么在j
2020-08-31 01:56:27
253
原创 什么是跨域？跨域请求资源的方法有哪些？
什么是跨域？由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况：网络协议不同，如http协议访问https协议。端口不同，如80端口访问8080端口。域名不同，如qianduanblog.com访问baidu.com。子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。域名和域名对应ip,如www.a.com访问20.205.28.90跨域请求资源的方法：(1)、porxy代理定义
2020-08-31 01:45:13
126
原创 3D旋转相册
HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D旋转相册</title> <link rel="stylesheet" href="css/demo.css"></head><body> <div class="wapper"> <div class="c
2020-08-24 00:49:30
200
原创 城市三级联动 js
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="./data.js"></script></head><body> <div> 省：<select class="sheng">
2020-08-24 00:41:16
195
1
原创 js实现轮播
html部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播</title> </head><body> <div class="box" id="box"> <div class="inner"> <ul&
2020-08-17 02:13:49
98
原创 纯css实现图片轮播
主要利用css3中的动画，完整实现代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css实现轮播</title> <style> @keyframes move{ 0%{ transform:translateX(0%);
2020-08-17 02:09:35
242
原创 js数组去重的几种方法
1. 利用ES6 Set去重（ES6中最常用）function unique(arr){ return Array.from(new Set(arr)); } var arr=[1,1,2,3,3,3,4,4,4,5,5,'1','true',true];console.log(unique(arr)); 此种方法对{}一些符号不起作用，可用于字符串和数字。2. 利用for嵌套，然后splice去重（ES5中常用）function unique(arr){ fo
2020-08-10 00:04:15
147
原创 vue中几个重要的钩子函数
生命周期 钩子函数一个组件从创建到销毁的过程就是生命周期。beforeCreate:创建前 1、当前vue实例化的时候会做一个初始化的操作，在这个生命周期函数里面我们可以做初始化的loading 2、在当前函数里面是访问不到data中的属性，但是可以通过vue的实例对象进行访问created:创建后 1、当beforeCreate执行完毕以后，会执行created. 在当前函数中我们可以访问到data中的属性 2、当前生命周期函数执行的时候会将data中
2020-08-09 23:56:21
581
原创 纯CSS使div垂直居中的几种方法
绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>水平垂直居中方式1</title> <style> /*使用
2020-08-03 00:09:30
230
原创 Cookie和session的区别，localstorage和sessionstorage的区别
Cookie和session都可用来存储用户信息，cookie存放于客户端，session存放于服务器端，因为cookie存放于客户端有可能被窃取，所以cookie一般用来存放不敏感的信息，比如用户设置的网站主题，敏感的信息用session存储，比如用户的登陆信息，session可以存放于文件，数据库，内存中都可以，cookie可以服务器端响应的时候设置，也可以客户端通过JS设置cookie会在请求时在http首部发送给客户端，cookie一般在客户端有大小限制，一般为4K，下面从几个方向区分一下cook
2020-08-02 23:53:12
271
原创 原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？
window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。/* * 传递函数给whenReady() * 当文档解析完毕且为操作准备就绪时，函数作为document的方法调用 */var whenReady = (function() { //这个函数返回whenReady()函数 var funcs = []; //当获
2020-07-26 23:48:49
396
原创 通用的事件侦听器函数
markyun.Event = { // 页面加载完成后 readyEvent : function(fn) { if (fn==null) { fn=document; } var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = fn; } e
2020-07-26 23:44:39
64
原创 什么是js的防抖和节流？
函数防抖： 是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。函数节流： 是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。函数防抖(debounce)实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法缺点：如果
2020-07-20 00:33:27
408
原创 Ajax原生写法，jQuery写法和promise封装。
原生写法：//1：创建Ajax对象var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');// 兼容IE6及以下版本//2：配置 Ajax请求地址xhr.open('get','index.xml',true);//3：发送请求xhr.send(null); // 严谨写法//4:监听请求，接受响应xhr.onreadysatechange=function(){
2020-07-20 00:24:46
314
原创 node.js搭建一个简易的仿apache服务器
引入http模块并创建服务因为在apache服务中我们使用的是他自己的www目录，所以在这里为了读取到我们自定义的www目录，还得引入文件模块let http = require('http');let fs = require('fs');let server = http.createServer();我们自定义www目录，并实现目录读取和判断let wwwUrl = 'F:/textstudy/simplePaging/node/www';server.on('request',fu
2020-07-13 01:01:52
84
原创 前后端数据交互方法和原理
网站数据处理主要分为三层。第一层，表示层，这部分可以用HTML代码，CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层。也就是你用浏览器打开能看到的网页。第二层，是业务层，这层是负责处理数据的。常用的代码语言有PHP,JSP，Java等。通过这些后台处理语言的算法来处理前台传回的数据。必要的时候进行操作数据库，然后把结果返回给前端网页。第三层，是数据层，这个就是数据库，用来存储数据的。通过业务层的操作可以实现增删改数据库的操作。①你接触到的是这个网页
2020-07-13 00:46:48
2259
原创 Generator(生成器)
ES6定义generator标准是借鉴了Python的generator的概念和语法。一个generator看上去像一个函数，但可以返回多次。Generator函数使用方法function和函数名之间有一个*号函数体内部使用了yield表达式，例如：function* gen(x) { yield x+1; yield x+2; return x+3;}单纯运行generator函数后，只会返回一个generator对象并没有执行它。调用generator对象有两个方法：不断的调用
2020-07-05 23:51:09
424
原创 Promise
我们知道的，在 JavaScript 中，所有代码都是单线程的，也就是同步执行的。而 Promise 就为异步编程提供了一种解决方案。基本概念名称：译为“承诺”，这也就表达了将来会执行的操作，代表异步操作；状态：一共有三种状态，分别为pending（进行中）、fulfilled（已成功）和rejected（已失败）。特点：(1)只有异步操作可以决定当前处于的状态，并且任何其他操作无法改变这个状态；(2)一旦状态改变，就不会在变。状态改变的过程只可能是：从pending变为fulfilled和
2020-07-05 23:35:47
76
原创 AJAX请求的五个步骤
一、原生JS中的Ajax：1、使用ajax发送数据的步骤第一步：创建异步对象var xhr = new XMLHttpRequest();第二步：设置 请求行 open(请求方式，请求url):// get请求如果有参数就需要在url后面拼接参数，// post如果有参数，就在请求体中传递 xhr.open("get","validate.php?username="+name)xhr.open("post","validate.php");第三步：设置请求（GET方式忽略此步骤）头:
2020-06-29 00:05:56
765
原创 ES6相关
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。刚开始用vue或者react，很多时候我们都会把ES6这位大兄dei加入我们的技术栈中。但是ES6那么多那么多特性，我们真的需要全部都掌握吗？秉着二八原则，掌握好常用
2020-06-28 23:59:29
254
原创 Typescript特性
Typescript是Javascript的超集，说白了——Typescript在Javascript的基础上进行了扩展，增加了一些特性。字符串变量的反撇号——`用键盘左上角的反撇号——`，将字符串包裹起来，可以插入多行的字符串；用反撇号引用的字符串里面可以插入函数的调用；自动拆分字符串。这一点比较强大，不过可能不太直观，别人看起来有点麻烦。参数类型声明用冒号定义变量类型：用var或者let声明变量后，用冒号间隔后可以定义变量类型。这相当于把javascript的弱类型语言变成了Types
2020-06-22 00:47:15
514
原创 TypeScript用法
relish:环境安装node安装 //查看版本 node --versionnpm install -g typescript //查看版本 tsc --version3.npm init -y //生成package.json4.tsc --init //基础化搭建环境 生成tscconfig.jsonnpm i @types/node --dev–save //安装依赖,主要解决模块声明文件6.使用编译工具，vscode ， ctrl+shift+b 构建ts文件，生成js文件，node
2020-06-22 00:36:15
137
原创 ajax的post请求
AJAX五部曲创建一个异步对象xmlhttp；new XMLHttpRequest(); new ActiveXObject("Microsoft.XMLHTTP"); 设置请求方式和请求地址；xmlhttp.open("POST","01-ajax-get.php",true);发送请求；xmlhttp.send();监听状态的变化；通过onreadystatechange 事件来监听发送的状态变化，readyState状态为4时，请求结束。处理返回的结果；通过status来判
2020-06-15 00:23:49
144
原创 js实现图片瀑布流布局
过程：创建一个放所有图片的模块bigblock。获取这个大模块，追加一个子元素块来放小图。封装一个函数list(n)来存放50张图片，并且将每张图追加放入空数组ele[]中。封装一个函数set_position（），来确定每个图片的位置，用到了offsetHeight，offsetTop，offsetWidth等属性，同时给最大块也设置动态的高度，随着加载的图片数量增多，最大块的高度也随着增高。使用 window.onload事件，加载图片更方便。给浏览器的滚动条添加事件，让滚动条滑到body的
2020-06-15 00:18:43
484
原创 PHP的基本用法
1.php服务器 ：为客户端提供服务器 php是服务器语言 ： 特殊服务器软件运行 php--apache服务器下运行 、 java c# 客户端 ：通过浏览器直接运行的 为客户提供服务器的一台电脑http协议文件路径组成:http协议默认的；端口号是 ：80协议名 域名 端口号 文件路径 ? 参数1&参数2http 2.php生成动态网页原理 ：动态网页 -- 数据从服务器上获取的（实现客户.
2020-06-07 23:40:49
478
原创 Ajax的基本用法
Ajax是啥?Ajax是允许客户端与服务端通信而无需刷新当前页面的一种技术,不是一种语言。如何完成一个完整的Ajax交互？交互分三步：**创建Ajax对象：**XMLHttpRequest对象（XMLHttpRequest对象是Ajax的基础）发送请求：1.onreadystatechange事件处理函数：该函数由服务器触发，而不是由用户触发。在Ajax执行过程中，服务端会向用户端发送当前的状态（通过XMLHttpRequest对象的ReadyState属性）。在请求过程中，该函数会被触发4次。
2020-06-07 23:38:06
160
原创 计算机网络层次划分
网络层次划分为了使不同计算机厂家生产的计算机能相互通信，在更大范围内建立计算机网络，国际标准化组织（ISO）在1978年提出了“开放系统互联参考模型”，即著名的OSI/RM模型（Open System Interconnection/Reference Model）。它将计算机网络体系结构的通信协议划分为七层，自下而上依次为：物理层（Physics Layer）、数据链路层（Data Link Layer）、网络层（Network Layer）、传输层（Transport Layer）、会话层（Sessi
2020-06-01 00:04:06
752
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人