- 博客(32)
- 收藏
- 关注
RSS订阅原创 js的跨域问题及若干解决方案
跨域跨域也叫非同源策略，简单理解就是从一个地址去请求另一地址的资源，我们知道，url地址包含协议、域名和端口号，两个地址中的这三者只要有一个不同，就属于跨域。我们可以在自己的电脑上模拟跨域，比如，搭建一个前后端分离的项目，前端主页的请求地址是http://120.0.0.1:8000，后端的数据接口地址设置为http://120.0.0.1:8001。显然，两个地址的端口号不一致，由此产生跨域。解决方案1.利用JSONP解决html中有些标签本身就可以实现跨域，它们不存在跨域请求限制。比如：scr
2021-06-01 16:53:37
1206
原创 JS总结之BOM
DOM的顶级对象是document，BOM的顶级对象是window，BOM包含DOM。1.window对象的常见事件：onload事件DOMContentLoaded事件onload是等所有资源加载完毕触发，而DOMContentLoaded仅当DOM加载完成触发，不包括样式表、图片、flash等等，所以当两个事件同时出现时，DOMContentLoaded更快执行。（DOMContentLoaded有兼容性，IE9以上支持）onresize事件调整窗口大小加载事件。只要窗口大小发生变化
2021-05-30 20:10:01
176
原创 js单例模式的理解
什么是单例模式？1.只有一个实例2.可以全局访问它解决了什么问题？一个全局使用的类被频繁的创建和销毁。什么时候使用单例模式？需要控制实例的数目，节省系统化资源的时候。如何实现单例模式？判断系统中是否已经有这个单例，有则返回，无则创建。单例模式的优点：内存中只有一个实例，减少了内存的开销，尤其是频繁的创建和销毁实例（比如首页页面的缓存）使用场景：1.全局的缓存2.弹窗es5实现单例模式比如做一个登录弹窗，一般思路是这样的：先将登录框写好，加入到body中，并把它隐藏，当点击登录按
2021-05-30 11:04:36
285
原创 Vue底层原理之虚拟DOM（3）详解diff算法--子节点更新策略
diff算法子节点更新策略diff算法提出了四种命中查找：新前与旧前新后与旧后新后与旧前新前与旧后命中一种该节点就不再进行判断，都没命中用循环来查找。在四种命中查找中，前指针只会后移，后指针只会前移。四种命中查找循环的条件是：新前<=新后&&旧前<=旧后新增：上图中，右边是我们的新节点，它要替代左边的旧节点，li标签是节点的子节点。图里这种情况是新增了两个节点。首先，新前与旧前，A与A相同，两个指针都下移，B与B，C与C都相同，“新前”移动到了D，“旧前”移动
2021-05-30 10:45:03
484
原创 js手写promise的all方法和race方法
Promise.all()传入参数是一个promise数组，当数组中的所有promise都成功时，all方法返回一个成功的promise，且保存的结果为所有成功promise的结果，否则返回失败的promise。Promise.all = function(promises) { return new Promise((resolve, reject) => { let len = promises.length; // 记录成功的promise个数 let count = 0;
2021-05-29 21:12:49
557
原创 promise关键问题
如何修改promise的状态？promise原状态是pending（未决定的），在执行器中调用resolve()，状态会变为成功，调用reject()，会变为失败。除此之外，我们还可以通过throw语句，将状态改为失败。let p1=new Promise((resolve,reject)=>{ throw '出错啦' })promise能否执行多个回调？也就是，then方法如果指定多个回调，这些回调是不是都会执行？答案是肯定的。let pp=new Promise((re
2021-05-28 12:40:54
736
原创 promise基础
promise是ES6引进的异步编程解决方案，语法上是一个构造函数，可以实例化对象，封装异步操作，获取成功或失败的结果，优点是可以解决回调地狱的问题。promise初体验：<body> <button type="button" id="btn">抽奖</button> <script type="text/javascript"> const btn=document.getElementById("btn"); btn.onclick
2021-05-28 11:00:27
88
原创 前端--详解浏览器工作原理之多标签页之间的通讯
实现多页通讯主要有利用浏览器数据存储方式和服务器方式。浏览器数据存储方式主要用本地存储方式解决，也即调用localStorage、cookie等本地存储方式。服务器方式主要使用websocket（全双工通讯）技术使多页标签都监听服务器推送事件来获得其他标签页发送的数据。浏览器存储（1）调用localStorage建立两个html文件，页面1： <body> <input type="" name="" id="name" value="" /> <inpu
2021-05-27 16:10:10
258
原创 前端--详解浏览器工作原理之HTTP请求
一次完整的http服务过程当我们在浏览器中输入www.baidu.com后，具体发生了什么？对www.baidu.com这个网址进行DNS域名解析，得到对应的IP地址根据IP地址，找到对应的服务器，发起TCP三次握手建立TCP连接后发起HTTP请求服务器响应HTTP请求，浏览器得到html代码浏览器解析html代码，并请求html代码中的资源（js、css、img等）浏览器对页面进行渲染服务器关闭TCP连接（1）DNS解析域名的过程？采用递归查询的方式，先找本地DNS缓存，找不到就找
2021-05-27 12:52:05
755
原创 Vue底层原理之虚拟DOM（2）节点更新流程
更新节点的流程：先完成不是同一个节点的情况：patch.js:import vnode from './vnode'import createElement from './createElement'export default function(oldVnode,newVnode){ // 判断传入的第一个参数是DOM节点还是虚拟节点 if(oldVnode.sel==''||oldVnode.sel==undefined){//没有sel属性就是DOM节点 o
2021-05-25 16:26:27
726
原创 vue-router全局导航守卫
为什么要使用导航守卫？假设我们有一个需求是，在跳转到每个页面的时候，页面的title随页面的改变而改变。我们能想到的一个方法是在每个Vue组件的mounted生命周期函数中定义它的title属性，但是这样做不容易维护，多个页面比较复杂。导航守卫能监听跳转的每个页面，使用导航守卫，就只需要在 一处代码修改title属性即可。router.beforeEach((to,from,next)=>{ // console.log(to) document.title=to.matched
2021-05-24 23:54:22
225
原创 vue-router中$router和$route的区别
$router相当于我们创建出来的router对象const router=createRouter();$route相当于我们配置的路由const routes=[ { path:'', redirect:'/home' }]为什么我们可以直接用this.$route或者$router？router-view和router-link是vue注册的全局组件。所有的组件都继承自Vue类的原型。Vue源码中用Object.defnePropert
2021-05-24 23:01:44
125
原创 CSS经典布局方案--三栏布局
圣杯布局与双飞翼布局这两种布局非常相似，都是左右固定，中间自适应圣杯布局： <style type="text/css"> body{ width: 100%; height: 100%; overflow: hidden; } .container{ height: 100%; /* 左右两边容器宽度都是100px，所以容器左右设置100的内边距 */ padding: 0 100px; } .cente
2021-05-24 11:08:44
99
原创 Vue底层原理之虚拟DOM（1）理解h函数&精细化比较
Vue的生命周期vue共有八个生命周期函数beforeCreatcreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyedbeforeCreat：vue对象实例化完成，此时实例只有一些生命周期函数以及一些默认事件，data和methods未被初始化。created：初始化了data和methods，最早可以在这个阶段获取到数据。beforeMount：模板在内存中编辑完成，但是没有渲染到页面上，也就是说，如
2021-05-23 10:43:11
590
原创 海康威视前端实习电话面
Vue的生命周期beforeCreatcreatedbeforeCountcountedbeforeUpdateupdatedbeforeDestroydestroyedCSS水平垂直居中的方法（行内元素？）参考了CSS水平居中+垂直居中+水平/垂直居中的方法总结，这篇文章总结的很清楚。首先，块级元素：1.水平居中（1）margin：0 auto;，这个方法的前提是必须给元素添加宽度。（2）子元素设置成行内块，父元素文本居中text-align: center;（3）定位：
2021-05-22 14:49:05
390
原创 VUE响应式原理（1）
Object.defineProperty()该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回该对象。方法的第一个参数是对象，第二个是对象的属性，第三个参数也是一个对象，用来操作属性。该参数有如下几个常用属性及方法：value：属性值writable：是否可写enumerable：是否可以枚举configurable：是否可以被配置，默认falseset（）：改变属性值时触发，需要参数get（）：访问属性时触发，不能与value或writable同时出现，需要返回
2021-05-21 17:54:59
121
原创 js事件循环机制event-loop理解
事件循环机制event-loop由三部分组成：调用栈、微任务队列、消息队列。event-loop开始的时候，会从全局一行一行执行，遇到函数调用，先压入调用栈中，被压入的函数称之为帧，当函数返回后会从调用栈中弹出。当js中存在异步操作，比如fetch、setTimeOut、setInterval，押入到调用栈中的时候，里面的消息会进入到消息队列中去，等到调用栈清空之后再执行。promise、async、await的异步操作会加入到微任务中，在调用栈清空的时候立即执行。调用栈中加入的微任务会立即执行。微任
2021-05-15 20:34:46
211
原创 vue基础知识--图书管理2
之前的一篇文章实现了一个图书管理小案例，也总结了vue常用的几个特性，这篇文章主要是将几个特性应用到图书管理中。编号的输入框自动获取焦点：<label for="id"> 编号：</label><input type="text" id="id" v-model='id' :disabled='flag' v-focus> Vue.directive('focus',{ inserted:function(el){
2021-05-15 20:04:47
136
原创 vue基础知识--图书管理案例
vue基础知识实现图书管理的增删改查：```javascript <style> .grid{ width: 550px; } .book{ background-color: orange; padding: 2px; border-top: 1px solid rgb(105, 90, 62); border-le
2021-05-15 18:10:28
156
原创 Vue六大常用特性详解
Vue的常用特性：表单操作自定义指令计算属性过滤器侦听器生命周期1. 表单操作 <body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <form action=""> <div> <span>
2021-05-15 15:50:33
1057
原创 Vue中的v-model、v-bind、v-on区别与联系
v-onv-on是用来绑定事件的，比如给按钮添加点击事件，我们可以写成v-on:click='handle'，也可以简写为@click='handle'。v-bindv-bind用来绑定文本或属性，绑定文本跟v-text差不多，能够绑定的属性有html中的属性、css的样式、对象、数组、number 类型、bool类型。v-bind是单向绑定，它在绑定文本时，当data中的数据发生变化时，页面中的数据也相应改变，但页面中的数据改变不会影响到data。v-model实现了数据的双向绑定，页面中的数
2021-05-15 10:33:24
847
原创 js的map函数&手写map函数
map()函数理解map函数是Array对象的一个方法，它可以返回一个新数组，不修改原来的数组。array.map((item,index,arr)=>{})map回调函数的三个参数，item是必须的，代表数组的每个元素，index可选，元素的下标值，arr可选，代表元素所属于的数组对象。每个元素都要执行回调函数的内容，返回一个新的数组。比如：var array=[1,2,3]var new_array=array.map((item,index)=>{ retur
2021-05-14 21:23:37
522
原创 arguments类数组如何转化为数组
arguments具有length属性，但是又缺少数组的一些方法，所以被称作类数组。1.ES6的展开运算符arguments中有iterator迭代器，这使得它可以使用ES6的展开运算符，扩展运算符可以很方便的将对象、类数组、字符串等转化为数组，含有iterator 接口的内置对象都可以使用扩展运算符。2.slice方法Array.prototype.slice.call(arguments)slice() 方法可从已有的数组中返回选定的元素。但是不能直接在slice括号中写arguments，
2021-05-14 20:30:00
185
原创 jQuery发送Ajax请求
GET请求jQuery发送Ajax请求时，函数有三个参数，第一个是请求的url地址，第二个是请求参数，第三个是一个回调函数，回调函数的参数是服务器端返回的结果。server.js部分app.all('/jquery',(req,res)=>{ res.setHeader('Access-Control-Allow-Origin','*'); const data={ name:'zhangsan' } res.send(JSON.stringify
2021-05-13 12:22:29
93
原创 关于Ajax的一些小问题解决
IE浏览器的缓存问题由于IE浏览器存在缓存，当服务器端返回的结果发生变化时，客户端利用Ajax请求的数据并不会实时改变，我们需要在发送请求时，在url地址上添加时间戳，以保证每次获取的都是最新数据。xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());//解决ie浏览器的缓存问题Ajax请求超时与网络异常处理模拟请求超时，服务器端延时三秒发送数据app.get('/delay',(req,res)=>{ res.setHe
2021-05-13 11:59:04
70
原创 Ajax入门--发送Ajax请求流程
Ajax请求基本操作–GET请求首先，建立一个server.js文件const express=require('express')const app=express();app.get('/server',(req,res)=>{ res.setHeader('Access-Control-Allow-Origin','*');//ajax不能跨域，需要服务器端设置 res.send('hello')});app.listen(8000,()=>{ cons
2021-05-13 10:45:17
278
原创 深入理解js的闭包问题&实现单例模式
为什么js会产生闭包这其实是跟js的作用域有关系的，举个例子： function out() { var x=123 function inner() { var y=456 console.log(x)//123 } return inner } var res=out() res(
2021-05-11 21:15:05
223
原创 深入理解js的作用域
全局作用域全局作用域在页面打开时创建，页面关闭时销毁全局作用域的顶级对象是window，由浏览器创建全局作用域中声明的变量、函数都是window的对象函数作用域函数作用域在函数被调用时创建，在函数执行完毕后销毁每次调用函数，都会创建一个新的作用域，它们之间是相互独立的全局作用域的变量可以在函数作用域中访问，反之不行在函数作用域中访问变量时，如果作用域内有，访问，如果没有，就去上一层作用域访问，一直到全局作用域，还是没有，就是未定义undefined深入理解作用域执行期的上下文
2021-05-11 20:20:32
196
原创 防抖节流函数优化图片懒加载
图片懒加载只加载视窗内的图片。需要判断图片当前是否在视窗范围内，判断方法：视窗高度+视窗下滑的高度>图片的offsetTopps：关于offsetTop、scrollTop、clientTop等一系列值的理解，这里贴一个网上的图片。图片来源：https://www.jianshu.com/p/44abcc626318对于图片来说，offsetTop是指该图片的顶端到上层（body）的顶端的距离。 // 实现图片懒加载 var num=document.getElementsBy
2021-05-11 16:58:53
150
原创 节流函数--入门理解
节流函数–入门理解简单理解：一段时间内只做一件事情。事件持续被触发时，在一段时间内，只调用一次事件处理函数。//点击按钮，打印数字1（1s钟内，无论点击多少次，只打印一次）function thro(func,wait){ let timer return function(){ // 形成闭包 if(!timer){ timer=setTimeout(function(){
2021-05-11 15:37:07
270
原创 防抖函数--入门理解
防抖函数–入门理解简单理解：持续触发一个事件，且一段时间内没有再次触发，那么事件处理函数只会执行一次。若设定时间到来之前，多次触发事件，则重新开始延迟（即重新开始计时器）。这表示，再次触发同一事件时，需要将前一个定时器清理掉。<body><input type="text" id="input"><script>//1s钟之后，打印输入框中的内容-----错误示例var input=document.getElementById('input')funct
2021-05-11 14:21:02
513
原创 async-await 的简单理解，generator函数
同步与异步常见的异步操作：定时器、ajax、事件处理函数、node.js回调地狱ajax请求中回调函数套回调函数，多层嵌套形成回调地狱解决回调地狱问题ajax+promise：promise对象的形参是一个函数，该函数又有两个函数形参，resolve和reject，分别表示成功和失败时调用。let a=new Promise(function(resolve,reject){ ajax({ url:"/xxx", success:function(res){
2021-04-03 15:18:00
94
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人