- 博客(174)
- 收藏
- 关注
RSS订阅原创 Java和JavaScript的区别
Java是面向对象的语言，JavaScript是脚本语言，是基于对象和事件驱动的语言。 Java的源代码在执行之前必须经过编译，而JavaScript的代码不需要，可以由浏览器直接解释执行。 Java变量在使用之前必须声明，反之不要。 Java变量定义时必须说明类型属于强类型语言，JavaScript不需要属于弱类型语言。 代码的格式不一样。...
2021-11-18 16:48:27
1142
原创 $(document).ready() 与window.onload的区别
1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。2.编写个数不同 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 $(document).ready()可以同时编写多个，并且都可以得到执行3.简化写法 window.onl...
2021-11-12 21:50:33
620
原创 简单请求和复杂请求
不会触发http预检请求的便是简单请求，想法能够触发http预检请求的便是复杂请求。Request Method: OPTIONS这里options叫做预检请求，就是查看是否可以或者允许跨域请求当请求满足下述任一条件时，即应首先发送预检请求：1. 使用了下面任一 HTTP 方法：PUTDELETECONNECTOPTIONSTRACEPATCH2. 人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。该集合为：AcceptAccept-LanguageCont
2021-11-12 16:24:52
2070
原创 requestAnimationFrame
复盘字节加面，希望这次加面能过，加油！！！实现动画效果的方法有：1.CSS3：transition，animation2.JS:setTimeout3.HTML: requestAnimationFromsetTimeout：容易出现卡顿、抖动的现象。原因是：1、settimeout任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚；2、settimeout的固定时间间隔不一定与屏幕刷新时间相同，会引起丢帧。requestAnimat
2021-11-12 15:33:28
515
原创 如何判断JS中两个对象是否相等？
① 方法一：通过JSON.stringify(obj)来判断两个对象转后的字符串是否相等优点：用法简单，对于顺序相同的两个对象可以快速进行比较得到结果缺点：这种方法有限制就是当两个对比的对象中key的顺序不是完全相同时会比较出错② 方法二：Object.getownPropertyNames(）1.用Object.getOwnPropertyNames拿到对象的所以键名数组2.比对键名数组的长度是否相等3.比对键名对应的键值是否相等缺点：对象属性是对象的情况要进行递归未递归情况：
2021-08-12 16:56:43
4484
原创 虚拟DOM和DIFF算法
通过新旧虚拟DOM 这两个对象的差异(Diff算法),最终只把变化的部分重新渲染,提高渲染效率的过程; diff 是通过JS层面的计算，返回一个patch对象，即补丁对象，在通过特定的操作解析patch对象，完成页面的重新渲染。虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象，因为他不是真实dom，所以才叫虚拟dom。...
2021-08-03 15:17:12
80
原创 BOM对象
BOM是browser object model的缩写，简称浏览器对象模型 ，提供了独立于内容而与浏览器窗口进行交互的对象；1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；2、document对象，文档对象；3、location对象，浏览器当前URL信息；4、navigator对象，浏览器本身信息；5、screen对象，客户端屏幕信息；6、history对象，浏览器访问历史信息；...
2021-08-03 15:05:56
74
原创 vue 优点？
vue 优点？轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；虚拟 DOM：dom 操作是非常耗费性能的， 不再使用原生的 dom 操作节点，极
2021-08-02 11:12:32
95
原创 Vue的两种路由模式
在vue-router路由对象中,路由有两种模式: hash 和 history,而默认的是hash模式hash路由监听路由的变化：onhashchange事件,只有#后面的地址发生变化，可以在window对象上监听这个事件history路由前面的hashchange，你只能改变#后面的url片段，而history api则给了前端完全的自由history api可以分为两大部分，切换和修改.切换历史状态:包括back,forward,go三个方法.修改历史状态:包括了history
2021-07-29 19:37:13
723
原创 vue中data里为什么要写return
1.因为不使用return包裹的数据会在项目的全局可见，会造成变量污染。2.使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
2021-07-29 17:41:13
1663
原创 父子组件之间的传值问题
父传子：v-bind props子传父： v-on $emit兄弟：1.子传父，父传子 2.bus中央事件总线：兄中：bus.$emit 弟中：bus.$on
2021-07-29 17:32:34
72
原创 Proxy和Object.defineProperty区别
（1）Object.defineProperty监听的是对象的每个属性，而Proxy监听的是对象本身。（2）使用Object.defineProperty需要遍历对象的每个属性，而Proxy则直接代理对象，不需要遍历操作。（3）Proxy对新增属性也可以监听，Object.defineProperty不可。（4）Proxy可以监听到数组的变化。...
2021-07-28 21:44:02
451
原创 defer 和 async 的区别
1. script 没有 defer 和 async 会停止（阻塞）dom 树构建，立即加载，并执行脚本2. script 带 async 不会停止（阻塞）dom 树构建，立即异步加载，加载好后立即执行3. script 带 defer 不会停止（阻塞）dom 树构建，立即异步加载。加载好后，如果 dom 树还没构建好，则先等 dom 树解析好再执行；如果 dom 树已经准备好，则立即执行。...
2021-07-27 17:50:00
97
原创 正向代理和反向代理
正向代理即是客户端代理, 代理客户端, 服务端不知道实际发起请求的客户端.反向代理即是服务端代理, 代理服务端, 客户端不知道实际提供服务的服务端
2021-07-27 17:06:08
86
原创 浏览器缓存机制
浏览器缓存就是把一个已经请求过的资源拷贝一份存储起来，当下次需要该资源时，浏览器会根据缓存机制决定直接使用缓存资源还是再次向服务器发送请求.强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回3
2021-07-27 16:36:26
135
原创 $route和$router的区别
$routeroute是路由信息对象，里面主要包含路由的一些基本信息，包括name、meta、path、hash、query、params、fullPath、matched、redirectedFrom$routerrouter是VueRouter的实例，包含了一些路由的跳转方法，钩子函数等...
2021-07-26 17:07:44
108
原创 keep-alive的作用
作用：keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现例如：两个输入框进行切换时默认每次切换都会清除另外一个输入框中的内容，若想保持内容不清除则可以使用keep-alive进行缓存...
2021-07-26 16:51:20
748
原创 vue父组件中调用子组件的方法
（1）通过ref直接调用子组件的方法//父组件中<template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div></template> <script>import Child from './child';export
2021-07-26 16:42:37
1911
原创 Vue子组件调用父组件的方法
（1）直接在子组件中通过this.$parent.event来调用父组件的方法<template> <div> <child></child> </div></template><script> import child from '~/components/dam/child'; export default { components: { child },
2021-07-26 16:34:58
91
原创 解决跨域问题的方法
1.跨域资源共享（CORS）主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。只需要在后台中加上响应头来允许域请求！在被请求的Response header中加入以下设置，就可以实现跨域访问了！//指定允许其他域名访问'Access-Control-Allow-Origin:*'//或指定域//响应类型'Access-Control-Allow-Methods:GET,POST'//响应头设置
2021-07-25 14:53:22
155
原创 性能优化的方法
减少 HTTP 请求使用内容发布网络（CDN）添加本地缓存压缩资源文件将 CSS 样式表放在顶部，把 javascript 放在底部（浏览器的运行机制决定）避免使用 CSS 表达式减少 DNS 查询使用外部 javascript 和 CSS避免重定向图片 lazyLoad...
2021-07-25 14:34:46
95
1
原创 数组去重的几种方法
法一：indexOf 循环去重法二：ES6 Set 去重；Array.from(new Set(array))法三：Object 键值对去重；把数组的值存成 Object 的 key 值，比如Object[value1] = true，在判断另一个值的时候，如果 Object[value2]存在的话，就说明该值是重复的。...
2021-07-23 20:43:56
313
原创 理解CommonJS、AMD、CMD三种规范
这三个规范都是为Js模块化加载而生的，使模块能够按需加载，使系统同庞杂的代码得到组织和管理。模块化的管理代码使多人开发得到了更好的合作。一、CommonJS核心思想一个单独文件就是一个模块，通过require方法来同步加载要依赖的模块，然后通过extports或则module.exports来导出需要暴露的接口。缺点：加载模块是同步的，只有加载完成后才能执行后面的操作，也就是当要用到该模块了，现加载现用，不仅加载速度慢，而且还会导致性能、可用性、调试和跨域访问等问题。Node.js主要用于服务
2021-07-22 22:45:18
260
1
原创 垃 圾 回 收 机制
垃圾回收机制：当一个对象是无用的时候，可以把它所占用的内存释放掉了。常用的垃圾回收机制方法：标记清除、引用计数标记清除：垃圾回收器在运行的时候会给存储在内存中的变量都加上标记（所有都加），然后去掉环境变量中的变量，以及被环境变量中的变量所引用的变量（条件性去除标记），删除所有被标记的变量，删除的变量无法在环境变量中被访问所以会被删除，最后垃圾回收器，完成了内存的清除工作，并回收他们所占用的内存。引用计数：当声明了一个变量，并用一个引用类型的值赋值给改变量，则这个值的引用次数为 1,；相反的，如
2021-07-22 22:29:19
112
原创 防抖和节流
防抖：如果短时间内大量触发同一事件，只会执行一次函数。//简单的防抖动函数functiondebounce(func,wait,immediate){端交//定时器变量vartimeout;returnfunction(){//每次触发scrollhandler时先清除定时器clearTimeout(timeout);//指定xxms后触发真正想进行的操作handlertimeout=setTimeout(func,wait);};};//实际想绑定在scroll事件上的ha.
2021-07-22 22:22:05
73
原创 mouseover 和 和 mousenter 的 的 区别
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是mouseoutmouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleavemouseover支持事件冒泡，而mouseenter不支持事件冒泡...
2021-07-22 21:43:36
212
原创 GET和POST的区别
get 参数通过 url 传递，post 放在 request body 中。get 请求在 url 中传递的参数是有长度限制的，而 post 没有。get 比 post 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息。get 请求只能进行 url 编码，而 post 支持多种编码方式。get 和 post 在缓存方面的区别：get 请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。post 不同，post 做的一般是修改和删除的工作，所以
2021-07-22 21:32:22
118
原创 new运算符的执行过程
新生成了一个对象 链接到原型 绑定 this 返回新对象function _new() { // 创建一个新对象 let newObj = {}; // 获取构造函数 let Constructor = Array.prototype.shift.call(arguments); // 设置空对象的原型 newObj.__proto__ = Constructor.prototype; // 使用apply绑定this，执行构造函数 C
2021-07-21 11:55:07
217
原创 CSS水平垂直居中
元素水平居中1.text-align: center;对父元素设置text-align: center;子元素即可居中。但子元素是有限制的，只对图片，文字等行内元素有效。2.margin: 0 auto; 元素本身设置 margin: 0 auto; 这种方法对能设置宽度的元素起作用.3.position:absolute; 父元素：relative，子元素：absolute4.flex父元素：display: flex; justify-content: ce
2021-07-19 21:47:40
65
原创 BFC（块级格式化环境）
BFC：块级格式化环境开启BFC后，BFC是一个独立的元素,外面的元素不会影响里面的元素,里面的元素不会影响外面的元素。开启BFC后的特点：1.不会被浮动元素所覆盖。2.子元素和父元素的外边距不会重叠。3.可以包含浮动元素。开启BFC的方式：1.设置浮动（不推荐）2.设为行内块元素（不推荐）3.将元素的overflow设为非visible（常用hidden，其余的auto，scroll）...
2021-07-19 21:18:50
134
原创 HTML 与 与 XHTML 二 者 区别
1.所有的标记都必须要有一个相应的结束标记2.所有标签的元素和属性的名字都必须使用小写3.所有的 XML 标记都必须合理嵌套4.所有的属性必须用引号""括起来5.把所有<和&特殊符号用编码表示6.给所有属性赋一个值7.不要在注释内容中使“--”8.图片必须有说明文字复制代码...
2021-07-19 21:02:35
71
原创 HTML5新特性
Localstorage，Sessionstorage：本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; sessionStorage 的数据在浏览器关闭后自动删除。下面从几个方向区分一下 cookie，localstorage，sessionstorage 的区别1、生命周期：Cookie：可设置失效时间，否则默认为关闭浏览器后失效Localstorage:除非被手动清除，否则永久保存Sessionstorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清
2021-07-19 20:55:12
106
原创 Canvas
canvas 是 HTML5 提供的一个用于展示绘图效果的标签.使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸. 默认 canvas 的宽高为 300 和 150. canvas 的兼容性非常强, 只要支持该标签的, 基本功能都一样, 因此不用考虑兼容性问题....
2021-07-19 20:32:09
50
原创 label标签的作用
<label>标签的作用是为鼠标用户改进了可用性，当用户点击<label>标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；为“男”和“女”文字都添加上“label”标签，标签属性“for”的属性值分别为“male”和“female”，这时用户点击“男”和“女”文字时也会选中对应的选项，提高了用户体验。除了单选框之外，多选框、文本框等标签也同样可以用label标签选中：...
2021-07-19 20:18:15
2796
原创 CSS 选择符
（1）id选择器（#myid）（2）类选择器（.myclassname）（3）标签选择器（div,h1,p）（4）后代选择器（h1 p）（5）相邻后代选择器（子）选择器（ul>li）（6）兄弟选择器（li~a）（7）相邻兄弟选择器（li+a）（8）属性选择器（a[rel="external"]）（9）伪类选择器（a:hover,li:nth-child）（10）伪元素选择器（::before、::after）（11）通配符选择器（*）::before 和:a
2021-07-18 22:18:21
64
原创 什么是盒模型？
（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分IE盒模型和W3C标准盒模型的区别：（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding（2）IE盒模型：属性width，height包含content、border和padding，指的是content+paddi
2021-07-18 22:08:58
68
原创 webpack和gulp之间的区别
gulpgulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。webpackwebpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。两者区别虽然都是
2021-07-16 22:20:22
190
原创 什么是Fetch，它和Ajax比有什么优势？
由来：当我们只需要发送Ajax请求时，需要引入整个jQuery，这是非常不合理的。故随着react和vue框架的兴起，于是便有了fetch来解决这一问题概念：fetch号称是ajax的替代品，它的API是基于Promise设计的，旧版本的浏览器不支持Promise，需要使用polyfill es6-promise二者举例对比：// 原生XHR var xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onreadystatec..
2021-07-16 21:59:11
548
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人