(1)行内元素:、、、、 (2)块级元素:、、、、 (3)空元素:、、 如何设计元素之间的转换? (1)display:block转为块元素,独占一行,行宽高、外边距、内边距都可以设置 (2)display:inline-block:转为行内块元素,和相邻的行内元素在一行上, 但是中间会有空白的间隙,行宽高、外边距、内边距都可以设置 (3)display:inline:转为行内元素,不占独立成行,仅靠字体大小或图像大小支撑, 宽高不能设置,水平方向可以设置内外边距,垂直方向不可以 2、link和@import的区别 (1)引用区别:link属于html标签,@import在css中使用表示导入外部样式表 (2)最大的区别就是:因为link是一个标签,所以页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载 (3)兼容问题:link是HTML标签,无兼容问题。而import只在IE5以上才能识别 3、titile与h1的区别、b与strong的区别、i与em的区别 (1)title是网页标题、h1是内容。在做网站的SEO(Search Engine Optimization)搜索引擎优化中,titile优先于h1。 (2)语义化,b只是一个加粗的标签没有特殊含义,strong也是一个加粗标签但有特殊含义(强调在阅读器、SEO中显示出来)。 (3)语义化,i和em都是倾斜,i没有特殊含义,而em有特殊含义,i一般来做图标。 4、img标签的titile和alt的区别 (1)titile:鼠标移入显示的问题。alt:图片没有加载显示文字 (2)在SEO中alt属性是可以解决蜘蛛抓取不到图片的问题 5、png、jpg、png、gif什么时候用 (1)jpg、jpeg:适合大图片(缩小会失帧) (2)png:适合小图标(缩小不容易失帧) (3)gif:动图 6、HTML5新特性 HTML5就是超文本语言的第五次重大修改 第一个是语义化标签,header、nav、section、article、aside、footer,这样编程会更规范清晰,而且引擎搜索优化会更加方便 第二个是表单功能增强,类型email、number、range、search、date等、属性required、multiple等 第三个是音视频标签,viedo是音频、audio是视频 第四个是Canvas画布和SVG矢量图 第五个是拖放,Drag和Drop,任何元素都可以拖放 第六个是本地存储,localStroage和sessionStorage 2、CSS 1、两种盒子模型 一种是标准盒子模型(content-box),一种是IE盒子模型(border-box) 主要区别是宽度和高度, 标准盒子模型的宽度就是内容(content)的宽度。 IE盒子模型的宽度就是(content+padding+border)的宽度。 如果想转换为IE盒子模型,可以使用:box-sizing:border-box; 2、实现水平垂直居中的方式 1、flex布局:justify-content水平居中,align-items垂直居中 2、grid布局:justify-content水平居中,align-items垂直居中 3、容器relative+内容absolute+transform 3、什么是BFC BFC是Block-formattng-context的简写,就是块级格式化上下文。 简单来说,BFC是一个完全独立的空间,就是让空间里的子元素不会影响到外面的布局。 如何触发BFC? 1、float:left/right/top/bottom 2、overflow:hidden 3、display:inline-block/flex 4、position:absolute/fixed BFC解决的问题: 1、使用float脱离文档流,高度塌陷 2、解决margain边框重叠 3、阻止元素被浮动元素覆盖 4、position定位 (1)static(默认),没有定位,元素不需要定位的时候,就默认即可。 (2)fixed(固定),相对于浏览器窗口,适用于顶部导航栏,或者返回顶部 (3)absolute(绝对),相对于第一个relative父元素,适合解决abosulte脱离文档流覆盖问题 (4)relative(相对),相对于自身定位 aboslute与relative的区别: (1)realtive不脱离文档流,absolute脱离文档流。所以realtive适合做absolute的容器 (2)relative只有两个值(left、right、top、bottom)如果同时存在,left会取代right,top取代bottom。而absolute可以取四个值 5、display:none与visibility:hidden的区别 (1)占位区别:display:none不占位置,visibility:hidden占位置 原理,display:none它第一次不绘制,第二次才绘制,就没有位置了,所以不占位。 visibility:hidden第一次就绘制,所以占位。 (2)触发重绘回流的区别:display:none触发回流和重绘,visibility:hidden触发重绘 重绘叫重新绘制,修改盒子font-size、background属性就会触发重新绘制 回流,修改盒子尺寸大小、位置就会触发回流 只要触发回流必定触发重绘,触发重绘不一定触发回流 为什么只要触发回流必定触发重绘,触发重绘不一定触发回流? 那么我们要知道浏览器渲染的过程: URL-》浏览器-》HMTL解析器-》JS解析器+DOM+CSS解析器[CSSDOM] -》render(把DOM和CSSDOM结合到一起) -》layout(具体计算确定DOM位置)、回流 -》渲染绘制(通过显卡显示,放到页面上)、重绘 6、css选择器有哪些,哪些属性可以继承 常见的选择器有: id选择器(#id)、类选择器(.className)、标签选择器(div)、 子选择器(ul>li)、后代选择器(li a)、通配符选择器(*)、伪类选择器(a:hover) 可以继承的样式有:字体、颜色 不可以继承的样式有:宽高、内外边距 优先级为!important>内联样式(1000)>id选择器(100)>类选择器(10) 标签选择器(1)>通配符选择器(0) 权重相加判断优先级。同权重的情况下,优先级就近原则,样式定义最后的为准。 7、用CSS画一个三角形 width和height为0 border: 250px solid transparent;(透明) border-bottom-color: saddlebrown;(颜色显示) 8、display有哪些值及作用 (1)inline(默认值):转为内联元素,不独立成行 (2)none:隐藏对象,是不占位的。跟visibility:hidden不一样,visibility:hidden是占位的。 (3)block: 转为块元素,独立成行 (4)inline-block:转为内联块元素,不独立成行,但跟同级元素会有空格分开 (5)flex:转为弹性盒子,最常用于页面布局 (6)grid:二维布局,flex是一维布局,都有兼容问题,需要IE10及以上 9、清除浮动的方式 清除浮动常见的方式有3种 第一种是在浮动元素后面,添加空白标签,设置clear:both,清除浮动,添加了无意义的标签(不推荐) 第二种是父级元素触发BFC,让内部元素不影响外部,清除浮动。(推荐) 触发BFC的方法有4种: 1、最常见的就是overflow:hidden,只要不是visible即可 2、float:left/right/top/bottom,只要不是none即可 3、display:inline-block/flex 4、position:absolute/fixed 第三种是使用伪元素清除浮动:在父级元素上添加::before/after,然后content值为空 display为block块级元素,clear:both清除浮动(推荐) 10、opacity和rgba的区别 opacity和rgba的相同点都是设置背景透明度。background: rgb(0,0,0);opacity: 0.5; 不同点就在于:opacity属性的值,可以被其子元素继承,而RGBA设置的元素的后代不会继承的。 11、flex布局 flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 可以随着页面大小的改变自适应页面布局。 flex的几种常见属性: (1) flex-direction:指定flex主轴的方向,默认为row水平方向。column为垂直方向。 (2) justify-content:主轴方向上的对齐方式,默认为flex-start,起始位置对齐 flex-end:结束位置对齐。center:行中间对齐。space-between:两端对齐,中间间距相等 (3) align-items:侧轴上的对齐方式,就是垂直方向。默认为stretch,高度占满整个容器。center:垂直居中。 (4) flex-wrap:是否换行,默认nowrap,不换行,可能会溢出。wrap:换行,溢出的Flex子项会自动放到下一行。 (5) align-content:多行的对齐方式。默认stretch占满 (6) align-self:单独指定某flex子项的对齐方式 (7)flex:复合属性,flex:flex-grow(扩展比率),flex-shrink(比率),flex-basis(伸缩基准值) 常用flex:1,就元素平均布局 12、CSS单位元素及使用 px:像素 em:相对于当前元素的父元素。 rem:相对于当前元素的根元素。 vw:相对于视窗的宽度,视窗宽度是100vw vh:相对于视窗的高度,视窗高度是100vh vm:相对于视窗的宽度或高度,取决于哪个更小。 13、CSS3新特性 1、过渡属性 ,transition 2、动画属性,animation 3、圆角属性,border-radius 4、引入了rgba 5、盒子阴影,box-shadow: 10px 10px 5px #888888; 6、盒子新特性,box-sizing:border-box; 7、transform,位移 8、flex弹性布局,grid栅格布局 14、伪类与伪元素的区别 伪类:用于当已有元素处于的某个状态时,为其添加对应的样式。LVHA 伪元素:用于创建一些不在文档树中的元素,并为其添加样式。::before/after 区别: 1、伪类它存在于DOM文档中,伪元素本身不存在在DOM文档中 2、伪类使用用:,伪元素使用::,便于区分 3、伪类可以同时使用多个,伪元素只能同时使用一个 3、JS 1、JS数据的类型及区别 JS的数据类型可以分为2种,一种是基本数据类型有5种,分别是: String(字符串)、Number(数字)、Boolean(布尔值)、Null(空值)、Undefined(未定义) Symbol(唯一值)、bigInt(大的整数值) 一种是引用类型,分别是Obejct(对象)、Data(日期)、Function(函数)、Array(数组) 基本数据类型与引用数据类型的区别有: 1、存放的位置不同:基本数据类型是放在栈中,而引用数据类型放在堆中。 2、赋值比较:基本数据类型的值改变时,只影响一个变量。 但引用数据类型指向的对象发生改变时,所指向这个对象的变量就会跟着改变,可以改变多个变量。 3、类型比较:基本数据类型比较的是一个值,而引用数据类型比较的引用是否指向同一个对象。 4、函数参数影响的比较,基本类型作为参数,函数内部不会影响到实参的值。 而引用数据类型作为参数时,函数内部的操作会影响实参的值,因为它们指向的是同一个对象。 2、null和undefined的区别 null是表示一个"无"的对象,指向空的对象,这个对象是不存在的,转为数值时为0。 null的使用场景:经常用作函数的参数,或作为原型链的终点 undefined是表示一个"无"的原始值,变量被声明了但还没有赋值,就为undefined,转为数值时为NaN 相同点:都是表示值的空缺,所以两者等于是相等的 不同点:null的类型是Object对象,undefined的类型就是Undefiend,所以两者全等不相等 3、检测数据类型方式 检测数据类型有四种方式: 第一种是typeof,返回结果是一个字符串,证明数据是哪种类型。typeof的局限有两个: (1)null检测出来不是null而是object,因为null虽然是单独的一个数据类型, 但是它原本意思就是空对象指针,所以浏览器使用typeof检测的时候会把它按照对象来检测。 (2)使用typeof无法具体细化数组、函数、日期,全都返回Object对象类型 第二种是instanceof ,检测某个实例是否属于这个类,属于的话返回true,不属于返回false 第三种是constructor,获取当前实例的构造器 第四种是Object.prototype.toString.call,获取当前实例的所属类信息(最为准确) 4、==和=== 的区别 ==判断数值是否相等,如果类型不一致,则会进行强制类型转化后再进行比较。 ===同时判断类型和数值是否全等,不会强制转换,如果有一个不等,直接返回 false。 5、作用域与作用域链 一个变量的使用范围就叫做作用域,作用域可以分为全局作用域和局部作用域。 一个HTML页面就是一个全局作用域,打开页面的时候, 作用域就生成了, 直到关闭页面为止。 而局部作用域就是私有作用域,每一个函数就是一个私有的作用域。 而作用域链就是调用某个函数或属性时,先在当前作用域寻找,如果找不到的情况下去父级寻找, 如果父级找不到继续向上级寻找,直到找到全局作用域为止,这个链式查找的过程,就是作用域链。 6、判断数组的方法 (1)Array.isArray() 书写:Array.isArray(arr1) (2)constructor构造器 书写:arr1.constructor.toString().indexof(‘Array’) (3)Object.propotype.toString.call()原型 书写:Object.propotype.toString.call(arr1) 7、宏任务与微任务 JS异步任务可以分为宏任务和微任务 (1)宏任务有Ajax请求、setTimeOut、setInterval计时器等 (2)微任务就有Promise.then、Promise.catch和Promise.finally以及process.nextTick 宏任务和微任务的执行顺序: 每一个宏任务执行完之后,都会检查是否存在待执行的微任务, 如果有,则执行完所有的微任务之后,再执行下一个宏任务。宏任务和微任务交替执行。 8、new对象的操作过程 (1)创建一个新对象 (2)构造函数的this指向这个新对象 (3)执行构造函数的所有代码 (4)返回新对象 9、闭包 函数里面嵌套一个函数,里面的函数就叫做闭包。 闭包的优点可以读取外层函数内部的变量,实现变量数据共享。 缺点就是由于闭包把函数中的变量保存到了内存中,消耗内存, 以及数据泄露,存在安全隐患,所以不能滥用闭包,否则影响性能。最好的解决方法就是, 在退出函数之前,将不使用的局部变量全部删除,这样减少内存消耗,优化性能。 10、原型和原型链 原型本质就是对象,包括显式原型对象和隐式原型对象。 显示原型对象:只有函数对象才有显式原型对象(prototype),默认指向空对象。 隐式原型对象:只要是对象都会有隐式原型对象(proto),并且它的值与该对象对应的构造函数的显示原型对象相等。 原型链实际就是隐式原型链。当访问一个对象的属性时,先在自身属性中查找,找到则返回。 如果没有找到,就会沿着__proto__(隐式原型对象)这条链查找,在自身对应的构造函数prototype(显式原型对象)上查找, 找到则返回,如果最终没找到就返回undefined。原型链的终点是Object的__proto__,也即返回null。这种链式查找的过程,就叫做原型链。 11、为什么0.1+0.2!=0.3,如何相等 因为在 0.1+0.2 的计算过程中发生了精度丢失。在JS内部所有的计算都是以二进制方式计算的, 在 0.1 和 0.2 转成双精度二进制浮点数时,由于二进制浮点数的小数位只能存储52位, 导致小数点后第53位的数要进行舍弃操作,从而造成精度丢失。最终导致 0.1+0.2 不等于0.3 。 如何相等呢?可以将其转换为整数后再进行运算,运算后再转换为对应的小数 var result = (a * 100 + b * 100) / 100 12、回调函数 当一个函数被当作另一个函数的参数的时候,这个函数就叫做回调函数。 简单来说,就是说一个函数你定义了,可是你没有马上去调用它, 而是交给了另一个函数去调用,这就叫做回调函数。 它的缺点:传统的回调函数去解决异步操作,无法避免地大量使用回调函数嵌套,形成回调地狱。 为了避免回调地狱问题,ES6新添加了Promise,目的就是为了解决异步编程问题。 13、Promise Promise是一个对象,promise对象是ES6对于异步编程提供的一种解决方案。 Promise有两个特点: (1)对象的状态不受外界影响 Promise对象有3种状态,分别是pending(进行中)、fulfilled(已成功)、rejected(已失败) (2)一旦状态改变了就不会再变,也就是说任何时候Promise都只有一种状态。 Promise对象的状态改变只有2种可能: (1)从pending变成resolve,表示成功 (2)从pending变成rejected,表示失败 Promise的基本流程: (1)Promise是构造函数,需要new一个Promise对象,参数是excution执行函数,执行器函数是同步的 (2)exctuor函数里面执行 Promise的好处就是: 比传统的回调函数执行异步操作更加合理和规范, 而且支持链式调用,有效解决了传统回调函数嵌套造成的回调地狱问题。 14、递归 递归,就是函数在运行的过程中调用自己,就叫做递归。 递归必须具备两个条件,一个是调用自己,另一个是有终止条件。 我对递归的理解是先往下一层层传递,当碰到终止条件的时候会返回出界结果。 最常用的运用场景就是阶乘,一直递归下去,然后把数相乘,得到阶乘值。 15、变量提升 JS的工作运行方式首先是先解析代码,获取所有被声明的变量,然后在一行一行的执行。 所有的变量的声明语句都会被提升到作用域的顶部,这就叫做变量的提升。 函数的声明也是一样的,都会提升到它所在的作用域最开始执行。 这样的好处是 (1)提高了性能,如果没有这一步的话, 那么每次执行代码前都必须重新解析一遍该变量或者函数,而这是没有必要的, 因为变量或者函数的代码并不会改变,解析一遍就可以了。 (2)容错性更好,先使用后定义也不会影响正常使用,不过最好发先声明再使用规范点好。 不过ES6中提出的let和const定义变量,它们没有变量提升机制,所以要先声明再使用,否则会报错。 16、ES6新特性 ES6就是JS的版本,是一个跨越性很大的一个版本,里面添加了特多新的特性。 (1)添加了let定义变量,不允许在声明变量之前使用,不允许重复声明,具有块级作用域,让变量更加规范。 (2)添加了const定义常量,常量定义了就不能再改变,适用于不变的常量。 (3)添加了模板字符串(反引号),可以换行也可以嵌套变量,不用再拼接字符串。 (4)添加了Promisec对象,用来解决异步编程问题 (5)变量的结构赋值(数组、对象、字符串) (6)数组的扩展(set和map) (7)函数的扩展,可以使用箭头函数(=>) 17、DOM DOM是Document-Object-Model的简写,就是文档对象模型, 整个文档是一个文档节点,就像是树的根一样(叫做根节点)。 每个HTML元素都是元素节点。HTML元素内的文本就是文本节点。 DOM通过document对象,处理网页内容的方法和接口。为开发者提供大量的接口(api), 来获取节点,操作DOM树,进行创建、修改、删除HTML元素节点。 DOM常用的方法: 1、获取节点,通过document.querySelect()通过选择器获取元素节点 2、创建节点,通过document.createElement(‘h1’),创建元素节点 3、添加节点:elment.appendChild(Node) 4、删除节点:elment.removeChild(Node) 18、BOM JS由3个部分组成,ECMAScript+DOM+BOM。 ECMAScript简称ES5/6,描述JS的语法和基本对象 DOM是Document-Object-Model的简写,就是文档对象模型,处理网页内容的方法和接口。 BOM是Browser-Object-Model的简写,就是浏览器对象模型,提供浏览器交互的方法和接口。 BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。 例如计时器和location对象,location.href获取或者设置整个URL 19、cookie和session的区别 什么是cookie? 众所周知,http协议是一种无状态的协议,它不保存客户端的历史请求记录,所以客户端和服务端互相不认识。 所以设置了Cookies,是一种记录客户状态的机制,它存储在用户电脑上,用来保存一些用户信息 为的就是让服务端认识到客户端,为客户定制内容。 比如Cookie中存储了用户所在地理位置,以后每次进入地图就可以默认定位到该地点。 cookie的执行原理:就是当客户端访问服务器的时候(服务器运用cookie), 服务器会生成一份cookie传输给客户端,客户端会自动把cookie保存起来, 以后客户端每次访问服务器,都会自动的携带着这份cookie。 cookie的好处就是:保存到客户端,简单易懂好用。 缺点就是:保存的数据量有限的,本身最大4kb,而且在保存到客户端,容易被篡改(删除、禁用)。 什么是session? Session是另一种记录客户状态的机制,不同的是Cookie保存在客户端浏览器中, 而Session保存在服务器上。客户端浏览器访问服务器的时候, 服务器把客户端信息以某种形式记录在服务器上。这就是Session。 客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。 session是一种特殊的cookie。cookie是保存在客户端的,而session是保存在服务端。 因为cookie放在客户端中不安全,而且存储数据有限,所以就设置了session。 session原理: 当客户端第一次请求服务器的时候,服务器生成一份session保存在服务端, 将该数据(session)的id以cookie的形式传递给客户端; 以后的每次请求,浏览器都会自动的携带cookie来访问服务器(session数据id)。 cookie和session的共同点:都是用来跟踪浏览器用户身份的会话方式。 不同点在于: (1)存储位置:cookie数据存放在客户的浏览器上,session数据放在服务器上。 (2)安全性:cookie数据容易修改不安全,session比较安全(重要的信息放在session中) (3)数据大小:cookie只有4KB,存储量不多。session比较大。 (4)服务器性能:session会在一定时间内保存在服务器上。 当访问增多,会比较占用你服务器的性能,考虑性能方面,应当使用cookie。 20、cookie,sessionStorage和localStrorage的区别 相同点:都是临时保存到客户端中,用来保存用户信息数据的。 不同点在于: (1)存储的时间有效期不同 1、cookie的有效期是可以设置的,默认的情况下是关闭浏览器后失效 2、sessionStorage的有效期是仅保持在当前页面,关闭当前会话页或者浏览器后就会失效 3、localStorage的有效期,在不进行手动删除的情况下是一直有效的 (2)存储的大小不同 1、cookie的存储是4kb左右,存储量较小,一般页面最多存储20条左右信息 2、localStorage和sessionStorage的存储容量是5Mb (3)与服务端的通信 1、cookie会参与到与服务端的通信中,一般会携带在http请求的头部中。 2、localStorage和sessionStorage是单纯的前端存储,不参与与服务端的通信 21、数组去重的方法 (1)indexOf():输出结果为该元素第一次出现的位置,-1为没有出现,没有出现就push添加到新数组 (2)对象属性:创建一个新的对象,用来记录元素的出现次数,没有出来就push添加到新数 (3)ES6中的set方法:set的一个最大的特点就是数据不重复。书写:return […new Set(arr1)]; (4)Array.from与set组合:Array.from方法可以将Set结构转换为数组。书写:return Array.from(new Set(arr1)); 22、实现继承的几种方式 (1)原型链继承,通过原型prototype将一个引用类型继承另一个引用类型的属性和方法,缺点,引用类型数据共享 (2)构造函数继承,在子构造函数中利用call()把父类的 this 指向子类,实现继承, (3)组合继承,将原型链和借用构造函数的技术组合在一块,缺点,执行两次父类构造函数 (4)寄生组合继承,通过借用函数来继承属性,通过Object.create(People.prototype)实现继承。 (5)ES6的class继承,子类通过extends实现继承,super 指向父类的原型对象 23、防抖与节流 1、防抖就是将多次触发转为一次触发,去除多余的操作,优化性能,可以用setTimeOut计时器来实现。在输入框中输入数据判断之前有没有数据,如果有就删除clearTimeOut()之前的数据,保留最新的,1秒后没有数据传过来就触发一次。 2、节流就是在一定时间内只能触发一次。也可以用setTimeOut计时器来实现。当数据输入,1秒后就触发一次,触发完就把timerOut判断有无触发的值改为false,等待下一次数据输入。 24、深拷贝与浅拷贝 浅拷贝:就是复制的是引用地址,如果修改复制后的对象,原对象也会跟着改变 深拷贝:就是复制的是对象的值,新建一个引用地址,复制后的对象修改不影响原对象。 浅拷贝的方法: (1)newObejct=oldObject (2)Object.assign(newObejct, OldObject); (3)扩展运算符newObejct={…oldObject} 深拷贝的方法: (1)用for in和递归:for in就是把值循环给新的对象,如果对象值里面有对象的话, 就用递归,把对象里面的值赋值完之后再遍历赋值。 (2)JSON:用JSON.stringift转为JSON字符串,再用JSON.parse转为对象。 25、事件循环机制 首先我们要知道JS是单线程的,因为JS的主要作用是与用户互动以及操作DOM节点, 这就决定了JS只能是单线程的,不可以进行多线程,比如说在一个线程中添加DOM节点内容, 在另一个线程中删除这个节点,这是不可以的,所以JS运行操作是单线程的。 单线程就会导致有很多任务需要排队一个个去执行,如果某个任务执行时间太长,就会出现阻塞。 为了解决这个问题,JS引入了事件循环机制,这个机制也叫做Event Loop(事件循环) 事件循环有两个任务,一个是宏任务,一个是微任务,都是异步请求 关键步骤如下: 1、执行一个宏任务 2、执行过程串如果遇到微任务,就将它添加到微任务的队列中 3、宏任务执行完成之后,立即执行当前所有的微任务 4、当宏任务执行完毕之后,开始检查渲染,渲染完毕之后,JS线程继续接管 26、事件捕获和事件冒泡 首先我们要知道什么是事件流? 事件流就是从页面中接收事件的顺序(Window->Document->Html->Div),就叫事件流。 它有三个阶段:捕获阶段、目标阶段、冒泡阶段 捕获阶段:就是事件响应从最外层的Window开始,逐级向内层前进,直到找到具体的事件目标元素。 目标阶段:就是触发事件的最底层的元素。 冒泡阶段:与捕获阶段正好相反,事件的响应从最底层开始一层一层往外传递到最外层的Window。 27、箭头函数和普通函数的区别 什么是箭头函数? ES6中允许使用箭头=>来定义箭头函数,箭头函数省去了function关键字, 函数的参数放在=>前面的括号中,函数体放在{}中,这就叫箭头函数。 区别: 1、箭头函数语法更加简洁清晰 2、箭头函数不会创建自己的this,而是它会捕获外层执行环境的this来继承使用,所以箭头函数的this指向是固定的。 3、call、apply、bind无法改变箭头函数中的this值 4、箭头函数不能作为构造函数使用,因为构造没有自己的this, 所以箭头函数不能作为构造函数使用。否则new会报错。所以箭头函数也没有原型Prototype。 28、call、apply、bind的区别 相同点:都可以修改this的上下文指向,都在第一个参数上修改。 不同点: 1、传参不同,call和bind是逐个列举传参,apply是数组传参 2、执行机制不同,call和apply会立即执行函数, bind不会立即执行,bind会得到一个修改this后的新函数,你要调用它才能执行。 29、Promise与async/await的区别 async/await 是建立在 Promises上的,不能被使用在普通回调以及节点回调 async/await相对于promise来讲,写法更加优雅 async/await 和 Promises 很像,不阻塞 async/await 代码看起来像同步代码 30、同步与异步 同步:指发送一个请求,需要等待返回,然后才能够发送下一个请求,有等待过程。 异步:指发送一个请求,不需要等待返回,随时可以再发发下一个请求。 最大的区别就是:同步需要等待,异步不需要等待。 优缺点:同步执行效率比较低,耗时间,但有利于控制流程,避免意外情况。 异步的执行效率高,节省时间,但会占用更多的资源,也不利于我们对进程的掌控。 31、数组的常用方法 1、 join,数组转字符串,参数为分割符,原数组不受影响 。arr.join(‘-’); 2、split,字符串转数组,参数为分割符,原数组不受影响。str.split(‘-’); 3、 push,数组尾部添加一或多个元素,arr.push(值)。 4、pop,数组尾部删除一或多个元素,arr.pop(值)。 5、unshift,数组头部添加一或多个元素,arr.unshift(值)。 6、shift,数组头部删除一或多个元素,arr.shift(值)。 7、 reverse,翻转数组。arr.reserse() 8、sort,对数组进行排序。 9、concat,数组的拼接,原数组不受影响。arr1.concat(arr2) 10.、slice,截取出来,原数组不受影响。 arr.slice(start,end) ;从start下标开始截取,一直到end结束,不包括end arr.slice(start) ;从start下标开始截取,一直到最后 arr.slice() ;全部截取相当于复制。 11、splice,删除或增加元素,原数组受影响。 arr.splice(start,deletedCount) 纯删除 arr.splice(start,deletedCount,item) 替换 arr.splice(start,0,item) 纯添加 32、循环数组的方法 1、for 2、array.forEach((item, index, array) 3、array.map((item, index, array) 4、for of,遍历值 5、for in,遍历索引 33、判断this的指向 普通函数:谁调用的函数,函数的this就指向谁,不调用就指向全局。 箭头函数:箭头函数没有 this,箭头函数 this 是定义箭头函数时父级作用域的 this,谁定义指向谁 call/apply/bind:可以改变函数内部的this指向,不可以改变箭头函数。 对象调用:当函数作为对象的方法被调用时,this指向该对象 34、Set和Map的区别 Set 对象可以存储任何类型的数据。值是唯一的,没有重复的值。 Map对象保存键值对,任意值都可以成为它的键或值。 35、foreach和map的区别 共同点: (1)只能遍历数组 (2)都是循环遍历数组中的每一项 (3)每一次执行匿名函数都支持三个参数,数组中的当前项item,当前项的索引index,原始数组input (4)匿名函数中的this都是指window 区别: forEach没有返回值,map有返回值,可以return出来 36、var、let、const的区别 1、变量提升:var存在变量提升。let和const没有 2、块级作用域:var没有块级作用域。let和const有 3、重复声明:var可以重复声明。let和const不可以。 4、修改声明变量:var和let可以,const是常量,不能修改。 37、结构赋值 数组: let [a] =[1] [变量名]:变量名可随意 对象: let {name} = {name} {变量名}:变量名必须是对象中的属性名 4、VUE 1、谈谈你对Vue的理解 vue是一个用于创建用户界面的渐进式的JavaScript框架。 它有三个优点: 1、采用了组件化的模式,实现了 html 的封装和重用,这样提高了代码的利用率,而且维护起来会更加方便。 2、声明式编码,不用再手动操作DOM节点,提高开发效率。 3、采用了虚拟DOM了,尽量复用DOM操作节点,优化性能。 2、响应式数据原理 首先我们要知道什么是响应式? 响应式就是视图渲染时使用到了一个数据,当数据更新时,视图就会响应是否更新,这就叫响应式。 Vue的响应式原理的关键是Object.defineProperty 简单来说,Vue通过Object.defineProperty对data的所有属性进行重新定义, 给数据的获取和设置进行一个拦截功能(就是数据劫持),当getter获取数据的时候,就会给当前数据一个依赖收集,当数据setter更新时,就会通知对应的依赖,进行视图更新,这就是Vue的响应式原理。 具体来说,就是vue初始化的时候,会利用initData()函数初化data的所有属性,然后new Observer对数据进行检测,如果数据类型是对象的话,就会调用this.walk()这个方法对对象进行一个依赖收集处理。它的内部会调用defineRective循环对象属性,定义响应式变化,核心就是通过Object.defineProperty来实现的。 如果数据类型是数组的话,我们首先要知道改变数据的7种方法,分别是pop、push、shift、unshift、sort、reverse、splice。当使用其中的一个的时候,就会改变数组内容。 然后来检测数组变化的时候,就采用函数劫持的方法,具体来说就是,重新定义数组的原型方法,通过原型链获取我们定义的原型方法。当数组变化时,就会通知视图更新。如果数组里面有对象的话,就会深度循环遍历,用Observer进行检测。 其实Vue3是可以通过Proxy直接监听对象数组的变化的。 3、MVVM与MVC的区别 MVC是Model-View-Controller的简写,Model就是模型,对应后端数据,View就是视图对应用户界面,Controller就是控制器,对应页面的业务逻辑。MVC的工作机制原理就是,用户操作会请求服务器路由,路由就会调用对应的控制器来处理,控制器就会获取后台数据,将结果返回给前端,进行页面渲染。 MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版,M和C是一样的,ViewModel的存在目的是抽离Controller中展示的业务逻辑,其它的业务逻辑还是在控制器中,整体和MVC差不多,最大的区别就是MVC是单向的,而MVVM是双向的,并且是自动的,也就是数据发生变化自动同步视图,视图发生变化自动同步数据,第二个是解决了 MVC 中大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。第三个和当数据频繁发生变化,视图是自动更新的,这样开发者就减少了DOM的操作,可以更多的关注业务逻辑。 4、谈谈你对MVVM模式的理解 MVVM即Model-View-ViewModel,Model就是模型,对应Vue实例中的data,View就是视图,对应模板,ViewModel就是Vue实例,它是连接View和Model之间的桥梁。它有两个方向,第一个是Model的数据会挂载到ViewModel中,自动渲染到View视图中。第二个是View视图数据变化时,ViewModel也会通知Model中数据进行更新。实现了一个数据双向绑定的过程。 MVVM的好处就是: 简化了View和Model之间的依赖,实现低耦合性。而且解决了数据频繁更新的问题,不用再用选择器写DOM节点操作,这样我们可以更加专注于数据的变化,提高开发效率。 缺点也很明显,Bug很难被调试: 因为使⽤双向绑定的模式,当你看到界⾯异常了,有可能是你View的代码有Bug,也可能是Model的代码有问题,而且比较占内存。 5、双向数据绑定原理 采用数据劫持结合发布者-订阅者模式的方式来Vue数据双向绑定。 简单来说就是,通过Object.defineProperty对data的所有属性进行重新定义, 给数据的获取和设置进行一个拦截功能(就是数据劫持), 当getter获取数据的时候,就会给当前数据一个依赖收集(就是订阅者Watcher), 当数据setter更新时,就会通知对应的订阅者,进行视图更新 如何视图更新呢?这我们需要一个,compile 解析模板指令,将模板中的变量替换成数据, 绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。 具体就三个步骤 1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。 2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。 3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,根据初始化模板数据。 6、computed和methods的区别 computed和methods的区别主要有两个 第一个是属性、方法调用。computed是属性调用,在定义函数时以属性的形式调用, methods是方法调用,在定义函数时以方法的形式调用,要加() 第二个是缓存功能,computed是计算属性,是有缓存的,当它的依赖属性改变的时候, 才会进行重新计算,如果数据没有改变,它是不会运行的。 而methods是方法,没有缓存功能,只要你调用一次,不管数据是否改变,它都是执行。 所以,性能方面的比较的话,computed是比methods的性能会好一点,避免重复执行。 7、computed和watch的区别 computed是计算属性,watch是监听属性。 它们的共同点都是用来监听数据变化白。 它们有三个区别: 1、是否有缓存功能,computed是有缓存的,只有它依赖的属性值改变的时候,它才会进行计算。而watch是没有缓存功能的,只要监听的数据变化了,它就会触发相应的操作。 2、是否支持异步,computed是不支持异步的,当computed内有异步操作的时候,它是监听不到数据变化的。watch是支持异步操作的,适合监听路由和设置计时器等。 8、vue的生命周期 vue的生命周期,用一句话来概述就是,一个vue实例从开始创建到销毁的过程,就叫做vue的生命周期 vue的生命周期的关键阶段有8个vue生命周期函数,也叫做生命周期方法/钩子。 可以分为3类: 第一类是创建期间的生命周期函数: 1、beforeCreate:这个时期,已经初始化好了vue实例,但是数据和方法还没有被初始化,还没有够被调用。 2、created:这个时期,vue中的数据和方法已经初始化好了,这是第一个可以调用数据和方法的函数 3、BeforeMoute:这个时期,vue中的数据已经预编译好了,但是还没有渲染到模板中。 4、Mouted:这个时期,数据已经渲染到了模板中,可以获取页面中的数据,这里Vue实例已经创建完成。 第二类是运行期间的生命周期函数: 1、beforeUpdate:这个时期,Vue中的数据改变时,视图还没有更新。 2、Updated:这个时期,视图已经更新完毕。 第三类是销毁期间的生命周期函数: 1、beforeDestroy:这是最后一个可以调用Vue中的数据和方法 2、Destroyed:Vue组件销毁,生命周期结束。 9、谈谈你对nextTick的理解 首先我们要知道Vue数据更新是异步操作的,就是数据改变后,视图不会立即更新, 而是Vue会创建一个异步队列,把更新的数据放到队列中,只有当队列中的数据全部更新完成后,才会进行视图更新。而nextTick在视图更新完成之后,就会自动执行,获取DOM内容,删除之前的异步队列,等待下一次数据更新。 nextTick的使用场景:就是数据改变之后你想立即操作节点内容的话,你就可以使用nextTick。 注意:Vue生命周期的created()钩子函数进行DOM操作时一定要放在nextTick()的回调函数中,因为此时模板还没有被渲染,所以此时操作DOM是没有用的,一定到放在nextTick中,等到mounted钩子函数,挂载完DOM之后才使用。 nextTick的原理,就是将传进去的回调函数推入到callbacks队列中, 然后判断pending是否为false,pending表示当前是否有异步任务正在执行, 如果pending为false时,就调用timerFunc函数,执行callbacks队列中的函数, 当timerFunc函数还没有结束时,重复调用nextTick只会触发一次执行。 等到执行完毕后,就会清空之前的异步队列,等待下一次数据更新。 10、vue-if与vue-show的区别 主要有3个区别: 第一个是渲染,v-if不成立的时候是不渲染元素的,而v-show成不成立都会渲染到页面中。 第二个是隐藏显示,v-if切换是动态的向DOM添加或者删除元素,而v-show只是简单的css的display切换 第三个是性能:v-if切换消耗性能高,而v-show初始化渲染消耗性能比较高 使用场景:v-if适合数据变化不大的情况下使用,v-show适合数据需要多次频繁切换 11、vue-if与vue-for为什么不建议一起使用 因为v-for比v-if的优先级高,所以每次渲染都会先执行循环再判断条件, 无论如何循环都不可避免浪费了性能。所以要避免出现这种情况, 则在外层嵌套template,进行v-if判断,然后在内部进行v-for循环。 如果v-if出现在v-for内部,可通过computed计算属性提前过滤掉那些不需要显示的项 12、v-model的双向数据绑定原理 v-model的本质就是v-bind数据绑定和v-on处理函数绑定的语法糖 在input输入框输入数据时,就会绑定data数据显示出来, 然后当数据改变时,就会绑定处理函数,修改data数据,渲染到页面中,实现双向数据绑定。 13、data为什么是一个函数而不是对象 组件实例对象data必须为函数,因为如果一个组件有多个实例,这样就会造成多个组件实例对象之间共用一个data, 产生数据污染。而采用函数的形式,initData初始化data时,就会会返回全新data对象 而在Vue根实例创建过程中则不存在该限制,也是因为根实例只能有一个,不需要担心这种情况 14、vue常用的组件间通信方式有哪些? vue常用的组件间通信方式有3种,分别是父子传值,兄弟传值还有任意组件传值 第一个是父传子,在父组件的子标签中自定义属性,把数据/方法传给该属性 子组件通过props获取属性,接收父组件传过来的数据/方法,实现父传子。 第二个是子传父,在子组件中通过$emit把数据传给父组件的自定义函数, 然后在父组件中的子标签中绑定方法来获取自定义函数传过来的数据,这就实现了子传父。或者可以通过$refs来获取子组件的数据/方法也可以。 第三个是兄弟传值,就用eventBus,来作为消息传递的对象,兄弟组件引入这个对象,然后在created生命周期函数中通过$on定义事件来获取数据,在methods中通过$emit穿参来修改数据,实现兄弟传值。 最后一个任意组件传值,创建一个事件中心,相当于中转站,可以用来传递事件和接收事件。如果业务逻辑复杂,很多组件之间需要同时处理一些公共的数据,这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ,vuex 的思想就是将这一些公共的数据抽离出来,将它作为一个全局的变量来管理,然后其他组件就可以对这个公共数据进行读写操作, 这样达到了解耦的目的。 15、谈谈你对Vuex的理解 Vuex就是实现组件全局状态(数据)管理的一种机制,实现组件之间数据的共享。 首先我们要知道组件之间的通信方法, 一种是父传子,使用属性绑定。一种是子传父,使用事件绑定。 还有一种是兄弟传值,用EvenBus。但是这3种方法只适合小范围的数据共享。 如果我们需要频繁地、大范围地数据共享,那么就要使用Vuex进行数据共享。 它有五个核心属性,分别是State、Getter、Mutation、Action、Module state:存放公共数据的地方; getter:对state值进行加工包装,形成新的数据,不会影响state值; mutations:唯一修改state的方法,修改过程是同步的; action:异步处理,通过分发操作触发mutation中的函数; module:模块化管理store; 它的好处就是: 1、能够在vuex中集中管理共享的数据,易于开发和后期维护。 2、能够高效地实现组件之间的数据共享,提高开发效率。 3、存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步。 适用场景:登录的状态、购物车、收藏的信息等。 16、谈谈你对组件的理解 组件就是自定义标签,是把页面当中的可以重复使用的内容进行封装,实现代码重用, 提高开发效率和代码质量,以及代码维护起来会更加方便。 如何封装组件? 首先,使用Vue.extend()创建一个组件。然后,使用Vue.component()方法注册组件 接着,如果子组件需要数据,可以在props中接受定义。 最后,子组件修改好数据之后,想把数据传递给父组件,可以使用$emit()方法。 17、对 SPA 单页面的理解,它的优缺点分别是什么? SPA是Single-Page-Application的简写,就是单页面应用。仅在Web页面初始化时加载相应的HTML、CSS和JS。 一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新渲染或者跳转。 取而代之的是,复用路由1机制实现HTML内容的变换,UI与用户的交互,避免页面的重新加载。 优点:用户体验快,不需要改变的内容就不需要重新加载,避免不必要的跳转和渲染。 缺点: (1)初次消耗多,为实现单页面Web应用功能及显示效果, 需要在加载页面的时候,将JS、CSS统一加载,部分页面按需要加载。 (2)SEO难度大,因为所有的内容都在一个页面中动态替换,所以在SEO上有弱势。 18、的作用 keep-alive是一个缓存组件,它的作用就是避免组件内的数据重复渲染,直接在页面中调用。 优点:组件切换的时候,组件被保存到了内存中,防止重复渲染减少加载时间,提高运行效率。 缺点:如果遇到二次路由访问页面,需要使用到路由守卫(before-routerleave),把二级路由保存起来即可。 19、vue为什么使用key且为唯一值? 使用key来给每个节点做一个唯一标识,这样的话,Diff算法就可以正确地识别此节点,可以高效地更新虚拟DOM 20、谈谈你对vue-router的理解 vue-router是Vue官网推出的路由管理器,主要用于管理URL,实现URL和组件之间的对应, 以及通过URL进行组件之间的切换,从而使构建SPA单页面应用变得更加简单。 vue-router的原理: 单页面应用SPA的核心思想之一,就是更新视图而不重新页面,简单来说,它在加载页面时, 不会再加载整个页面,而只是更新某个指定的容器中的内容。 对于大多数单页面应用,都推荐使用vue-router。 21、vue-router路由模式有几种 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用), 需要引入前端路由系统,这也就是 Vue-Router 存在的意义。 前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。 Hash模式: 即地址栏 URL 中的 # 符号,hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中, 对后端完全没有影响,因此改变 hash 不会重新加载页面。 History模式:history利用ES6中新增添的pushState()和replaceState()方法,它们提供了对历史记录修改的功能。 虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。 因此可以说,hash模式和history模式都属于浏览器自身的属性,vue-router只是利用了这两个特性来实现路由。 区别在于: (1)hash带#号,比较丑。history带#号 (2)hash不会请求后端。但history就要去请求服务器。而且服务器没有相应的响应或者资源,则会刷新出来404页面。 22、vue-router有几种导航钩子 vue-router有3种导航钩子 第一种是全局导航钩子:router.beforeEach((to, from, next) 第二种是组件内导航钩子,分别是beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave, 他们是直接在路由组件内部直接进行定义的 第三种是单独路由独享组件: 即单个路由独享的导航钩子,它是在路由配置上直接进行定义的beforeEnter: (to, from ,next) 23、怎么定义vue-router的动态路由?怎么获取传过来的值 我们可以通过params和query两种方式获取动态参数 第一种params的类型,通过/router/:参数名,传参,用$route.params.参数名,来获取 第一种query的类型,通过/router?参数名=123,传参,用$route.query.参数名,来获取 24、$router和$route的区别 1.$router是VueRouter的实例方法,可以认为是全局的路由对象,包含了所有路由的对象和属性。 2.$route是一个跳转的路由对象,可以认为是当前组件的路由管理,指当前激活的路由对象, 包含当前url解析得到的数据,可以从对象里获取一些数据。如name,path等。 25、你对Vue项目进行哪些优化 图片资源懒加载、路由懒加载、第三方插件的按需引入 26、Vue3.0特性 使用Proxy替换Object.defineProperty,重构响应式系统,使用Proxy优势: 1、可直接监听数组类型的数据变化 2、监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升 3、可拦截apply、ownKeys、has等13种方法,而Object.defineProperty不行 4、直接实现对象属性的新增/删除 27、vue中的data发生变化,视图不更新如何解决? 1、使用this.$set()方法重置属性 2、数据修改后调用this.$forceUpdate()强制更新视图 28、说出vue的指令和用法 v-if :判断是否隐藏 v-for:数据循环 v-bind:class:绑定一个属性 v-model:实现数据双向绑定 v-show:判断隐藏显示 29、如何获取DOM 获取dom节点可以用ref属性,这个属性就是来获取dom对象的,this.$refs.属性名 30、虚拟DOM的优点与缺点 虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象状态变更时,记录新树和旧树的差异 最后把差异更新到真正的dom中。 优点:虚拟DOM具有批处理和高效的Diff算法,最终表现在DOM上的修改只是变更的部分,可以保证非常高效的渲染,优化性能。 缺点:首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢。 31、Diff算法 diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方, 最后用patch记录的消息去局部更新Dom。 Diff算法步骤: (1)用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文 档当中 (2)当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff),记录两棵树差异 (3)把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch),视图就更新了 32、vue全家桶包括哪些 全家桶,顾名思义,对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架。 (1)vue-cli,脚手架,Vue.js 开发的标准工具。 (2)vueRoute,路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。 (3)vuex,应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 (4)Axios,基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 33、vue修饰符 (1).stop 阻止事件继续传播 (2).prevent 阻止标签默认行为 (3).capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 (4).self 只当在 event.target 是当前元素自身时触发处理函数 (5).once 事件将只会触发一次 (6).passive 告诉浏览器你不想阻止事件的默认行为 详情:https://blog.csdn.net/weixin_43638968/article/details/108635864 34、vue2和vue3的区别 (1)vue2 和vue3双向数据绑定原理不同: vue2的数据绑定是利用Object.definePropet()对数据进行劫持 结合 发布订阅模式实现 vue3利用Proxy API对数据代理实现 defineProperty只能监听某个属性,ProxyAPI可以进行全局监听。 两者区别: proxy可以监听数组,不用单独对数组进行异性操作,可以检测到数组内部的变化 proxy可以直接绑定整个对象,省去for in 闭包等内容来提升效率 (2) vue3默认进行懒观察 vue2.0中数据一开始就创建了观察者,数据很大的时候,就会出现问题, vue3中进行了优化 只有用于渲染初始化可见部分的数据,才会创建观察者,效率更高。 (3)更精准的变更通知 2.x 版本中,你使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行; 3.x 版本中,只有依赖那个属性的 watcher 才会重新运行 35、渐进式 用自己想用或者能用的功能特性,不想用的部分功能可以先不用。 36、axios axios它是基于promise的http库,可运行在浏览器端和node.js中 a作用:用于向后台发起请求的,还有在请求中做更多是可控功能。 步骤: 1、安装axios:npm install axios 2、在App.vue中引入axios:import axios from ‘axios’ 3、修改为 Vue 的原型属性,Vue.prototype.$axios = axios 核心对象:XMLHttpRequest ajax的原理: 由客户端请求ajax引擎,再由ajax引擎请求服务器, 服务器作出一系列响应之后返回给ajax引擎, 由ajax引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。 ajax请求的五个步骤: 1、创建XMLHttpRequest异步对象 2、设置回调函数 3、使用open方法与服务器建立连接 4、向服务器发送数据 5、在回调函数中针对不同的响应状态进行处理 37、ajax与axios的区别 Ajax是对原生XHR的封装,为了达到我们跨越的目的,增添了对JsonP的支持。 异步的javascript和xml,ajax不是一门新技术,而是多种技术的组合, 用于快速的创建动态页面,能够实现无刷新更新数据从而提高用户体验。 Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中;是请求资源的模块;通过promise对ajax的封装。 axios和ajax的区别: axios是通过Promise实现对ajax技术的一种封装,就像jquery对ajax的封装一样。 简单来说就是ajax技术实现了局部数据的刷新,axios实现了对ajax的封装, axios有的ajax都有,ajax有的axios不一定有。 总结一句话就是axios是ajax,ajax不止axios。 38、vue挂载过程 1、new Vue的时候调用会调用_init方法 2、调用$mount进行页面的挂载 3、挂载的时候主要是通过mountComponent方法 4、定义updateComponent更新函数 5、执行render生成虚拟DOM 6、_update将虚拟DOM生成真实DOM结构,并且渲染到页面中 5、HTTP 1、HTTP HTTP是HyperText-Transfer-Protocol的简写,就是超文本传输协议。 主要作用就是,它规定了只能由客户端主动发起请求,服务器接收请求处理后返回响应结果。 同时HTTP是一种无状态的协议,所以协议本身是不记录客户端的历史请求记录。 2、什么是跨域,如何解决跨域 浏览器从一个域名的网页去请求另一个域名的资源时, 协议、域名、端口任一个不同,都是跨域。 协议、域名、端口都相同叫同源策略,为了防止别人恶意访问。 如何解决跨域问题? 1、jsonp跨域 将返回数据以资源的方式放在标签里面返回,由于返回的不是JSON数据,就没有跨域的限制了, 类似对页面添加的js引用,这样就解决了跨域的问题。 2、cors 放开服务端跨域限制,通过添加response的header的方法。header(‘Access-Control-Allow-Origin:*’); 3、代理 将请求资源的操作通过一层代理,然后取回数据,再从代理层把数据返给浏览器, 由于代理层和浏览器是同源的,这样就解决了跨域的问题。 3、get和post的区别 1、get请求的参数数据放在URL中,post请求的参数放在body中,看不到,所以post比get安全。 2、get请求一般用来获取服务器资源,比如查询用户信息。post请求一般与服务器交互相关相关的,比如添加删除。 3、get请求可以缓存在浏览器中,post请求不能缓存。 4、http状态码 200 : 成功,表示访问成功,正常状态。 301 : 永久移动,表示本网页已经永久性的移动到一个新的地址,在客户端自动将请求地址改为服务器返回的新地址。 302 : 临时重定向,表示网页暂时性的转移到一的新的地址,客户端在以后可以继续向本地址发起请求。 303 : 表示必须临时重定向,并且必须使用GET方式请求。 304 : 重定向至浏览器本身,当浏览器多次发起同一请求,且内容未更改时,使用浏览器缓存,这样可以减少网络开销。 401 : 表示协议格式出错,可能是此IP地址被禁止访问该资源,与403类似。 403 : 表示没有权限,服务器拒绝访问请求。 404 : 这是最常见的错误,表示找不到系统资源,但是只是暂时性地。 500 : 表示服务器程序错误,一个通用的错误信息。 5、图片懒加载 实现懒加载的关键就是,在图片没有进入可视区域时,先不给的src赋值, 这样浏览器就不会发送请求了,等到图片进入可视区域再给src赋值。 实现懒加载有四个步骤,如下: 1.加载loading图片,src=“loading.gif”,src先为空 2.判断哪些图片要加载 3.隐形加载图片 4.替换真图片,data-src=“4.jpg”,存放真的图片路径 6、总结 好啦,以上就是我总结的所有的前端面试题目,还有其他没有写出来的前端题目,我会持续更新的。 因为是自己理解写出来的,所以有些地方可能还没那么准确,不过意思差不多,面试基本上没有问题。 还有其他没有我没提及到的前端面试题目,大家可以在评论区留言,让我看看,然后我再加上去。如果有哪些讲得不对或者可以改进的话,私信我,好让我查漏补缺噢。 最后,就是预祝各位小伙伴都面试成功,找到一份好工作,就这样啦~ 噢,还有一点,不能硬背,要理解之后,敲过代码,再按照自己的理解总结,更容易印象深刻哦! 就这样啦,拜拜ε(*・ω・)_/゚:・☆ 你可能感兴趣的:(前端八股文,前端,html,css,javascript,vue) android 自定义曲线图,Android自定义View——贝赛尔曲线 weixin_39767513 android自定义曲线图 个人博客:haichenyi.com。感谢关注本文针对有一定自定义View的童鞋,最好对贝赛尔曲线有辣么一丢丢了解,不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图:最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹,很规则。其次,他这个正弦图左右在移动。然后,就是它这个自定义View,上下也在移动,是慢慢增加的最后,优化 uni-app实现 步骤条 夏夏的码农 uni-app 实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st v-for 实例 琪33 v-for实例v-for实例{{item}}{{index+1}}:{{student.name}}-{{student.age}}varapp=newVue({el:'#app',data:{items:[53,23,76,14,54,36,28],students:[{name:'jspang',age:32},{name:'Panda',age:30},{name:'PanPaN',age: npm 搭建 Vite 项目 渺小的虫子 viter前端javascript开发语言 兼容性注意Vite需要Node.js版本>=12.0.0。1、使用npm安装Viter$npminitvite@latest使用npm初始化项目#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线:npminitvite@latestmy-vue-app----templatevue2、配置路由:npminstallvue- 大前端-postcss安装使用指南 黑夜照亮前行的路 postcss PostCSS是一款强大的CSS处理工具,可以用来自动添加浏览器前缀、代码合并、代码压缩等,提升代码的可读性,并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南:一、安装PostCSS在你的项目目录中,通过npm(NodePackageManager)来安装PostCSS。打开命令行窗口,输入以下命令:bash复制代码npminstallpostcss--save-dev这将把 谷歌浏览器驱动Chromedriver(114-120版本)文件以及驱动下载教程 pigerr杨 Pythonpythonchromedrivers ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装 虚拟 DOM 的优缺点有哪些 咕噜签名分发 前端javascript开发语言 虚拟DOM(VirtualDOM)技术作为现代前端开发中的重要组成部分,已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势,同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点,深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异,最小化实际DOM操作,从而减少页面重渲染时的性能消耗。这种优 vue 通信方式 hx_1199 vue.js前端 1、props和$emit父组件向子组件传递数据是通过props传递的,子组件传递给父组件是通过$emit触发事件来做到的。父组件this.$emit("update:page",newVal)-->importChildfrom'./child'exportdefault{name:"Father",components:{Child,},data(){return{articleList:[' 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架 P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML,异步的JS和XMLJS网页动作,XML一种标记语言,存储数据,作用:数据交换:通过Ajax给服务器发送请求,并获取服务器响应的数据异步交互:在不重新加载整个页面的情况下,与服务器交换数据并实现更新部分网页的技术,例如:搜索联想、用户名是否可用的校验等等。同步与异步:同步:服务器在处理中客户端要处于等待状态,输入域名 python转码 Desamond python开发语言 转码在许多场景中都有应用,以下是一些常见的场景:网页开发:当用户在网页上输入文本时,可能需要将特殊字符(如空格、引号、特殊符号等)进行转码,以防止这些字符对URL或HTML代码产生干扰。文件名处理:在处理文件名时,可能需要将特殊字符进行转码,以避免文件名被错误地解析或显示。数据传输:在数据传输过程中,为了确保数据的完整性和正确性,可能需要将数据中的特殊字符进行转码。数据存储:在数据库或数据存储中, Python dict字符串转json对象,小数精度丢失问题 朝如青丝 暮成雪 jsonpython 一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print VUE 页面禁止缩放(华为平板浏览器可能失效) 唐屁屁儿 JSvuewebviewjavascript h5页面移动端禁止缩放、web页面禁止浏览器缩放移动端优先,可禁止用户缩放和双击放大;在App.vue中的script内的方法里加入以下代码:window.onload=function(){document.addEventListener('touchstart',function(event){if(event.touches.length>1){event.preventDefault() java实体中返回前端的double类型四舍五入(格式化) 婲落ヽ紅顏誶 java 根据业务,需要通过后端给前端返回部分double类型的数值,一般需要保留两位小数,使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f Django forms组件 在飞行-米龙 Djangodjangopython后端 【一】引入【1】实现登陆验证功能(1)需求分析登陆验证需要前后端交互,采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容(2)后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict Vue 常见面试题(一) 安生生申 面试题vue.js前端javascript 目录1、Vue的最大的优势是什么?(必会)2、Vue和jQuery两者之间的区别是什么?(必会)3、MVVM和MVC区别是什么?哪些场景适合?(必会)1、基本定义2、使用场景3、两者之间的区别4、Vue数据双向绑定的原理是什么?(必会)5、Object.defineProperty和Proxy的区别(必会)6、Vue生命周期总共分为几个阶段?(必会)7、第一次加载页面会触发哪几个钩子函数?(必会) UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS liferecords LLM语言模型人工智能自然语言处理 UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接:arXiv关键字:大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型(LLMs)在各种自然语言任务上表现出色。然而,它们在HTML理解方面的能力——即解析网页的原始HTML,对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型(经过微调 Web前端Html的表单 任家伟 前端html 表单的关键字:form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读,不可修改,但是可以提交disabled=“disabled”禁用组件不可修改,不能提交type=“password”密码框type=“radio”单 Thinkphp - 详细实现网站系统登录功能,附带 Mysql 数据库设置、Web 前端展示界面、信息校验等(详细代码,即设计过程) 王佳斌 +Thinkphpmysql前端数据库 前言登录功能,是我们几乎开发每个系统都必须的模块。登录功能设计思路,主要包括几个方面。用户输入网址展示登录页面用户输入用户名,密码等点击登录进行信息校验校验通过之后,记录用户登录信息,跳转指定页面用户校验失败,提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面,我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。 javascript 日期转换为时间戳,时间戳转换为日期的函数 cdcdhj javascript学习日记javascript开发语言ecmascript 日期转化为时间戳,主要用valueOf()来进行转化为毫秒时间戳,getTime()IOS系统无法解析转换,所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(- react native 总结 一切顺势而行 reactnativereact.jsjavascript reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su Vue 模版编译原理 I will.874 vue.jsjavascript前端 当我们使用Vue编写完一个组件以后,Vue会根据模版编译一个render函数,调用render函数生成虚拟DOM,然后将虚拟DOM映射成真实DOM当数据发生变化时,Vue会触发更新视图,调用render函数返回新的虚拟DOM,对比新旧虚拟DOM,修改真实DOM,从而更新页面在此期间,有以下4个关键步骤:模版编译。生成渲染函数render执行render函数生成虚拟DOM首次渲染,根据虚拟DOM生成 reactive和ref的异同、toRef和toRefs的使用 Niucode vue3vue.js前端javascript 一、reactive和ref有了reactive为什么还要ref?ref处理起基本数据类型来更加的方便快捷,性能要更好。ref内部值的变化只会触发订阅它的副作用函数(effect)更新,而reactive(Proxy)内部对象的任何属性变化都会触发整个对象的重新渲染。相同点:都是Vue3提供的用于创建响应式数据的函数;在组件中都能够触发视图更新,实现数据的双向绑定。不同点:数据类型:reactiv COMP315 JavaScript Cloud Computing for E Commerce zhuyu0206girl javascript开发语言ecmascript Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform JSON与AJAX:网页交互的利器 入冉心 jsonajax前端 在现代Web开发中,JSON(JavaScriptObjectNotation)和AJAX(AsynchronousJavaScriptandXML)是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力,为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理,并通过代码示例展示它们在实际开发中的应用。一、JSON:轻量级的数据交换格式JSON是一种轻量级的数据 程序员开发技术整理 laizhixue 学习前端框架 前端技术:vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术:webservice:soap架构:简单的通信协议,用于服务通信ORM框架:对象关系映射,如EF:对象实体模型,是ado.net中的应用技术soap服务通讯:xml通讯ado.net:OAuth2:登录授权认证:Token认证:JWT:jsonwebtokenJava后端技术:便捷工 【前端学习——js篇】7.函数缓存 笔下无竹墨下有鱼 前端学习前端学习javascript 具体见:https://github.com/febobo/web-interview7.函数缓存函数缓存,就是将函数运算过的结果进行缓存本质上就是用空间(缓存存储)换时间(计算过程)常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化:①柯里化柯里化(currying)是一种函数式编程的概念,指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的 javascript的数据类型及转换 田小田txt 一、JavaScript数据类型:共有string,number,boolean,object,function五种数据类型;其中Object,Date,Array为对象型;2个不包含任何值的数据类型:null,undefined。二、Typeof查看数据类型:typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa html版本号 webpack_html-webpack-plugin详解 weixin_39994949 html版本号webpack 引言最近在react项目中初次用到了html-webapck-plugin插件,用到该插件的两个主要作用:为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口有了这种插件,那么在项目中遇到类似上面 HTML语言剖析 混沌破晓 HTML语言剖析Html简介-目录全写:HyperTextMark-upLanguage译名:超文本标识语言简释:一种为普通文件中某些字句加上标示的语言,其目的在于运用标签(tag)使文件达到预期的显示效果。由文字(字母,数字、标点符号)及标签组合而成。任何文字编辑器都可以,这里推荐用:Dreamweaver。1.Html特点:►描述性语言,结构语言,用于决定网页内容以什么样的形式显示;►通过标签 Websocket服务监听收发消息 beiback Java服务器问题websocket网络协议网络 目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范:为应用的所有servlet提供一个统一的前缀,使URL结构更加清晰和一致 ios内付费 374016526 ios内付费 近年来写了很多IOS的程序,内付费也用到不少,使用IOS的内付费实现起来比较麻烦,这里我写了一个简单的内付费包,希望对大家有帮助。 具体使用如下: 这里的sender其实就是调用者,这里主要是为了回调使用。 [KuroStoreApi kuroStoreProductId:@"产品ID" storeSender:self storeFinishCallBa 20 款优秀的 Linux 终端仿真器 brotherlamp linuxlinux视频linux资料linux自学linux教程 终端仿真器是一款用其它显示架构重现可视终端的计算机程序。换句话说就是终端仿真器能使哑终端看似像一台连接上了服务器的客户机。终端仿真器允许最终用户用文本用户界面和命令行来访问控制台和应用程序。(LCTT 译注:终端仿真器原意指对大型机-哑终端方式的模拟,不过在当今的 Linux 环境中,常指通过远程或本地方式连接的伪终端,俗称“终端”。) 你能从开源世界中找到大量的终端仿真器,它们 Solr Deep Paging(solr 深分页) eksliang solr深分页solr分页性能问题 转载请出自出处:http://eksliang.iteye.com/blog/2148370 作者:eksliang(ickes) blg:http://eksliang.iteye.com/ 概述 长期以来,我们一直有一个深分页问题。如果直接跳到很靠后的页数,查询速度会比较慢。这是因为Solr的需要为查询从开始遍历所有数据。直到Solr的4.7这个问题一直没有一个很好的解决方案。直到solr 数据库面试题 18289753290 面试题 数据库 1.union ,union all 网络搜索出的最佳答案: union和union all的区别是,union会自动压缩多个结果集合中的重复结果,而union all则将所有的结果全部显示出来,不管是不是重复。 Union:对两个结果集进行并集操作,不包括重复行,同时进行默认规则的排序; Union All:对两个结果集进行并集操作,包括重复行,不进行排序; 2.索引有哪些分类?作用是 Android TV屏幕适配 酷的飞上天空 android 先说下现在市面上TV分辨率的大概情况 两种分辨率为主 1.720标清,分辨率为1280x720. 屏幕尺寸以32寸为主,部分电视为42寸 2.1080p全高清,分辨率为1920x1080 屏幕尺寸以42寸为主,此分辨率电视屏幕从32寸到50寸都有 适配遇到问题,已1080p尺寸为例: 分辨率固定不变,屏幕尺寸变化较大。 如:效果图尺寸为1920x1080,如果使用d Timer定时器与ActionListener联合应用 永夜-极光 java 功能:在控制台每秒输出一次 代码: package Main; import javax.swing.Timer; import java.awt.event.*; public class T { private static int count = 0; public static void main(String[] args){ Ubuntu14.04系统Tab键不能自动补全问题解决 随便小屋 Ubuntu 14.04 Unbuntu 14.4安装之后就在终端中使用Tab键不能自动补全,解决办法如下: 1、利用vi编辑器打开/etc/bash.bashrc文件(需要root权限) sudo vi /etc/bash.bashrc 接下来会提示输入密码 2、找到文件中的下列代码 #enable bash completion in interactive shells #if 学会人际关系三招 轻松走职场 aijuans 职场 要想成功,仅有专业能力是不够的,处理好与老板、同事及下属的人际关系也是门大学问。如何才能在职场如鱼得水、游刃有余呢?在此,教您简单实用的三个窍门。 第一,多汇报 最近,管理学又提出了一个新名词“追随力”。它告诉我们,做下属最关键的就是要多请示汇报,让上司随时了解你的工作进度,有了新想法也要及时建议。不知不觉,你就有了“追随力”,上司会越来越了解和信任你。 第二,勤沟通 团队的力 《O2O:移动互联网时代的商业革命》读书笔记 aoyouzi 读书笔记 移动互联网的未来:碎片化内容+碎片化渠道=各式精准、互动的新型社会化营销。 O2O:Online to OffLine 线上线下活动 O2O就是在移动互联网时代,生活消费领域通过线上和线下互动的一种新型商业模式。 手机二维码本质:O2O商务行为从线下现实世界到线上虚拟世界的入口。 线上虚拟世界创造的本意是打破信息鸿沟,让不同地域、不同需求的人 js实现图片随鼠标滚动的效果 百合不是茶 JavaScript滚动属性的获取图片滚动属性获取页面加载 1,获取样式属性值 top 与顶部的距离 left 与左边的距离 right 与右边的距离 bottom 与下边的距离 zIndex 层叠层次 例子:获取左边的宽度,当css写在body标签中时 <div id="adver" style="position:absolute;top:50px;left:1000p ajax同步异步参数async bijian1013 jqueryAjaxasync 开发项目开发过程中,需要将ajax的返回值赋到全局变量中,然后在该页面其他地方引用,因为ajax异步的原因一直无法成功,需将async:false,使其变成同步的。 格式: $.ajax({ type: 'POST', ur Webx3框架(1) Bill_chen eclipsespringmaven框架ibatis Webx是淘宝开发的一套Web开发框架,Webx3是其第三个升级版本;采用Eclipse的开发环境,现在支持java开发; 采用turbine原型的MVC框架,扩展了Spring容器,利用Maven进行项目的构建管理,灵活的ibatis持久层支持,总的来说,还是一套很不错的Web框架。 Webx3遵循turbine风格,velocity的模板被分为layout/screen/control三部 【MongoDB学习笔记五】MongoDB概述 bit1129 mongodb MongoDB是面向文档的NoSQL数据库,尽量业界还对MongoDB存在一些质疑的声音,比如性能尤其是查询性能、数据一致性的支持没有想象的那么好,但是MongoDB用户群确实已经够多。MongoDB的亮点不在于它的性能,而是它处理非结构化数据的能力以及内置对分布式的支持(复制、分片达到的高可用、高可伸缩),同时它提供的近似于SQL的查询能力,也是在做NoSQL技术选型时,考虑的一个重要因素。Mo spring/hibernate/struts2常见异常总结 白糖_ Hibernate Spring ①ClassNotFoundException: org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWorldException 缺少aspectjweaver.jar,该jar包常用于spring aop中 ②java.lang.ClassNotFoundException: org.sprin jquery easyui表单重置(reset)扩展思路 bozch formjquery easyuireset 在jquery easyui表单中 尚未提供表单重置的功能,这就需要自己对其进行扩展。 扩展的时候要考虑的控件有: combo,combobox,combogrid,combotree,datebox,datetimebox 需要对其添加reset方法,reset方法就是把初始化的值赋值给当前的组件,这就需要在组件的初始化时将值保存下来。 在所有的reset方法添加完毕之后,就需要对fo 编程之美-烙饼排序 bylijinnan 编程之美 package beautyOfCoding; import java.util.Arrays; /* *《编程之美》的思路是:搜索+剪枝。有点像是写下棋程序:当前情况下,把所有可能的下一步都做一遍;在这每一遍操作里面,计算出如果按这一步走的话,能不能赢(得出最优结果)。 *《编程之美》上代码有很多错误,且每个变量的含义令人费解。因此我按我的理解写了以下代码: */ Struts1.X 源码分析之ActionForm赋值原理 chenbowen00 struts struts1在处理请求参数之前,首先会根据配置文件action节点的name属性创建对应的ActionForm。如果配置了name属性,却找不到对应的ActionForm类也不会报错,只是不会处理本次请求的请求参数。 如果找到了对应的ActionForm类,则先判断是否已经存在ActionForm的实例,如果不存在则创建实例,并将其存放在对应的作用域中。作用域由配置文件action节点的s [空天防御与经济]在获得充足的外部资源之前,太空投资需有限度 comsci 资源 这里有一个常识性的问题: 地球的资源,人类的资金是有限的,而太空是无限的..... 就算全人类联合起来,要在太空中修建大型空间站,也不一定能够成功,因为资源和资金,技术有客观的限制.... & ORACLE临时表—ON COMMIT PRESERVE ROWS daizj oracle临时表 ORACLE临时表 转 临时表:像普通表一样,有结构,但是对数据的管理上不一样,临时表存储事务或会话的中间结果集,临时表中保存的数据只对当前 会话可见,所有会话都看不到其他会话的数据,即使其他会话提交了,也看不到。临时表不存在并发行为,因为他们对于当前会话都是独立的。 创建临时表时,ORACLE只创建了表的结构(在数据字典中定义),并没有初始化内存空间,当某一会话使用临时表时,ORALCE会 基于Nginx XSendfile+SpringMVC进行文件下载 denger 应用服务器Webnginx网络应用lighttpd 在平常我们实现文件下载通常是通过普通 read-write方式,如下代码所示。 @RequestMapping("/courseware/{id}") public void download(@PathVariable("id") String courseID, HttpServletResp scanf接受char类型的字符 dcj3sjt126com c /* 2013年3月11日22:35:54 目的:学习char只接受一个字符 */ # include <stdio.h> int main(void) { int i; char ch; scanf("%d", &i); printf("i = %d\n", i); scanf("% 学编程的价值 dcj3sjt126com 编程 发一个人会编程, 想想以后可以教儿女, 是多么美好的事啊, 不管儿女将来从事什么样的职业, 教一教, 对他思维的开拓大有帮助 像这位朋友学习: http://blog.sina.com.cn/s/articlelist_2584320772_0_1.html VirtualGS教程 (By @林泰前): 几十年的老程序员,资深的 二维数组(矩阵)对角线输出 飞天奔月 二维数组 今天在BBS里面看到这样的面试题目, 1,二维数组(N*N),沿对角线方向,从右上角打印到左下角如N=4: 4*4二维数组 { 1 2 3 4 } { 5 6 7 8 } { 9 10 11 12 } {13 14 15 16 } 打印顺序 4 3 8 2 7 12 1 6 11 16 5 10 15 9 14 13 要 Ehcache(08)——可阻塞的Cache——BlockingCache 234390216 并发ehcacheBlockingCache阻塞 可阻塞的Cache—BlockingCache 在上一节我们提到了显示使用Ehcache锁的问题,其实我们还可以隐式的来使用Ehcache的锁,那就是通过BlockingCache。BlockingCache是Ehcache的一个封装类,可以让我们对Ehcache进行并发操作。其内部的锁机制是使用的net. mysqldiff对数据库间进行差异比较 jackyrong mysqld mysqldiff该工具是官方mysql-utilities工具集的一个脚本,可以用来对比不同数据库之间的表结构,或者同个数据库间的表结构 如果在windows下,直接下载mysql-utilities安装就可以了,然后运行后,会跑到命令行下: 1) 基本用法 mysqldiff --server1=admin:12345 spring data jpa 方法中可用的关键字 lawrence.li javaspring spring data jpa 支持以方法名进行查询/删除/统计。 查询的关键字为find 删除的关键字为delete/remove (>=1.7.x) 统计的关键字为count (>=1.7.x) 修改需要使用@Modifying注解 @Modifying @Query("update User u set u.firstna Spring的ModelAndView类 nicegege spring 项目中controller的方法跳转的到ModelAndView类,一直很好奇spring怎么实现的? /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version 2.0 (the "License"); * yo 搭建 CentOS 6 服务器(13) - rsync、Amanda rensanning centos (一)rsync Server端 # yum install rsync # vi /etc/xinetd.d/rsync service rsync { disable = no flags = IPv6 socket_type = stream wait Learn Nodejs 02 toknowme nodejs (1)npm是什么 npm is the package manager for node 官方网站:https://www.npmjs.com/ npm上有很多优秀的nodejs包,来解决常见的一些问题,比如用node-mysql,就可以方便通过nodejs链接到mysql,进行数据库的操作 在开发过程往往会需要用到其他的包,使用npm就可以下载这些包来供程序调用 &nb Spring MVC 拦截器 xp9802 spring mvc Controller层的拦截器继承于HandlerInterceptorAdapter HandlerInterceptorAdapter.java 1 public abstract class HandlerInterceptorAdapter implements HandlerIntercep 按字母分类: ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
、、、、
、、、、 (3)空元素:、、 如何设计元素之间的转换? (1)display:block转为块元素,独占一行,行宽高、外边距、内边距都可以设置 (2)display:inline-block:转为行内块元素,和相邻的行内元素在一行上, 但是中间会有空白的间隙,行宽高、外边距、内边距都可以设置 (3)display:inline:转为行内元素,不占独立成行,仅靠字体大小或图像大小支撑, 宽高不能设置,水平方向可以设置内外边距,垂直方向不可以 2、link和@import的区别 (1)引用区别:link属于html标签,@import在css中使用表示导入外部样式表 (2)最大的区别就是:因为link是一个标签,所以页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载 (3)兼容问题:link是HTML标签,无兼容问题。而import只在IE5以上才能识别 3、titile与h1的区别、b与strong的区别、i与em的区别 (1)title是网页标题、h1是内容。在做网站的SEO(Search Engine Optimization)搜索引擎优化中,titile优先于h1。 (2)语义化,b只是一个加粗的标签没有特殊含义,strong也是一个加粗标签但有特殊含义(强调在阅读器、SEO中显示出来)。 (3)语义化,i和em都是倾斜,i没有特殊含义,而em有特殊含义,i一般来做图标。 4、img标签的titile和alt的区别 (1)titile:鼠标移入显示的问题。alt:图片没有加载显示文字 (2)在SEO中alt属性是可以解决蜘蛛抓取不到图片的问题 5、png、jpg、png、gif什么时候用 (1)jpg、jpeg:适合大图片(缩小会失帧) (2)png:适合小图标(缩小不容易失帧) (3)gif:动图 6、HTML5新特性 HTML5就是超文本语言的第五次重大修改 第一个是语义化标签,header、nav、section、article、aside、footer,这样编程会更规范清晰,而且引擎搜索优化会更加方便 第二个是表单功能增强,类型email、number、range、search、date等、属性required、multiple等 第三个是音视频标签,viedo是音频、audio是视频 第四个是Canvas画布和SVG矢量图 第五个是拖放,Drag和Drop,任何元素都可以拖放 第六个是本地存储,localStroage和sessionStorage 2、CSS 1、两种盒子模型 一种是标准盒子模型(content-box),一种是IE盒子模型(border-box) 主要区别是宽度和高度, 标准盒子模型的宽度就是内容(content)的宽度。 IE盒子模型的宽度就是(content+padding+border)的宽度。 如果想转换为IE盒子模型,可以使用:box-sizing:border-box; 2、实现水平垂直居中的方式 1、flex布局:justify-content水平居中,align-items垂直居中 2、grid布局:justify-content水平居中,align-items垂直居中 3、容器relative+内容absolute+transform 3、什么是BFC BFC是Block-formattng-context的简写,就是块级格式化上下文。 简单来说,BFC是一个完全独立的空间,就是让空间里的子元素不会影响到外面的布局。 如何触发BFC? 1、float:left/right/top/bottom 2、overflow:hidden 3、display:inline-block/flex 4、position:absolute/fixed BFC解决的问题: 1、使用float脱离文档流,高度塌陷 2、解决margain边框重叠 3、阻止元素被浮动元素覆盖 4、position定位 (1)static(默认),没有定位,元素不需要定位的时候,就默认即可。 (2)fixed(固定),相对于浏览器窗口,适用于顶部导航栏,或者返回顶部 (3)absolute(绝对),相对于第一个relative父元素,适合解决abosulte脱离文档流覆盖问题 (4)relative(相对),相对于自身定位 aboslute与relative的区别: (1)realtive不脱离文档流,absolute脱离文档流。所以realtive适合做absolute的容器 (2)relative只有两个值(left、right、top、bottom)如果同时存在,left会取代right,top取代bottom。而absolute可以取四个值 5、display:none与visibility:hidden的区别 (1)占位区别:display:none不占位置,visibility:hidden占位置 原理,display:none它第一次不绘制,第二次才绘制,就没有位置了,所以不占位。 visibility:hidden第一次就绘制,所以占位。 (2)触发重绘回流的区别:display:none触发回流和重绘,visibility:hidden触发重绘 重绘叫重新绘制,修改盒子font-size、background属性就会触发重新绘制 回流,修改盒子尺寸大小、位置就会触发回流 只要触发回流必定触发重绘,触发重绘不一定触发回流 为什么只要触发回流必定触发重绘,触发重绘不一定触发回流? 那么我们要知道浏览器渲染的过程: URL-》浏览器-》HMTL解析器-》JS解析器+DOM+CSS解析器[CSSDOM] -》render(把DOM和CSSDOM结合到一起) -》layout(具体计算确定DOM位置)、回流 -》渲染绘制(通过显卡显示,放到页面上)、重绘 6、css选择器有哪些,哪些属性可以继承 常见的选择器有: id选择器(#id)、类选择器(.className)、标签选择器(div)、 子选择器(ul>li)、后代选择器(li a)、通配符选择器(*)、伪类选择器(a:hover) 可以继承的样式有:字体、颜色 不可以继承的样式有:宽高、内外边距 优先级为!important>内联样式(1000)>id选择器(100)>类选择器(10) 标签选择器(1)>通配符选择器(0) 权重相加判断优先级。同权重的情况下,优先级就近原则,样式定义最后的为准。 7、用CSS画一个三角形 width和height为0 border: 250px solid transparent;(透明) border-bottom-color: saddlebrown;(颜色显示) 8、display有哪些值及作用 (1)inline(默认值):转为内联元素,不独立成行 (2)none:隐藏对象,是不占位的。跟visibility:hidden不一样,visibility:hidden是占位的。 (3)block: 转为块元素,独立成行 (4)inline-block:转为内联块元素,不独立成行,但跟同级元素会有空格分开 (5)flex:转为弹性盒子,最常用于页面布局 (6)grid:二维布局,flex是一维布局,都有兼容问题,需要IE10及以上 9、清除浮动的方式 清除浮动常见的方式有3种 第一种是在浮动元素后面,添加空白标签,设置clear:both,清除浮动,添加了无意义的标签(不推荐) 第二种是父级元素触发BFC,让内部元素不影响外部,清除浮动。(推荐) 触发BFC的方法有4种: 1、最常见的就是overflow:hidden,只要不是visible即可 2、float:left/right/top/bottom,只要不是none即可 3、display:inline-block/flex 4、position:absolute/fixed 第三种是使用伪元素清除浮动:在父级元素上添加::before/after,然后content值为空 display为block块级元素,clear:both清除浮动(推荐) 10、opacity和rgba的区别 opacity和rgba的相同点都是设置背景透明度。background: rgb(0,0,0);opacity: 0.5; 不同点就在于:opacity属性的值,可以被其子元素继承,而RGBA设置的元素的后代不会继承的。 11、flex布局 flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 可以随着页面大小的改变自适应页面布局。 flex的几种常见属性: (1) flex-direction:指定flex主轴的方向,默认为row水平方向。column为垂直方向。 (2) justify-content:主轴方向上的对齐方式,默认为flex-start,起始位置对齐 flex-end:结束位置对齐。center:行中间对齐。space-between:两端对齐,中间间距相等 (3) align-items:侧轴上的对齐方式,就是垂直方向。默认为stretch,高度占满整个容器。center:垂直居中。 (4) flex-wrap:是否换行,默认nowrap,不换行,可能会溢出。wrap:换行,溢出的Flex子项会自动放到下一行。 (5) align-content:多行的对齐方式。默认stretch占满 (6) align-self:单独指定某flex子项的对齐方式 (7)flex:复合属性,flex:flex-grow(扩展比率),flex-shrink(比率),flex-basis(伸缩基准值) 常用flex:1,就元素平均布局 12、CSS单位元素及使用 px:像素 em:相对于当前元素的父元素。 rem:相对于当前元素的根元素。 vw:相对于视窗的宽度,视窗宽度是100vw vh:相对于视窗的高度,视窗高度是100vh vm:相对于视窗的宽度或高度,取决于哪个更小。 13、CSS3新特性 1、过渡属性 ,transition 2、动画属性,animation 3、圆角属性,border-radius 4、引入了rgba 5、盒子阴影,box-shadow: 10px 10px 5px #888888; 6、盒子新特性,box-sizing:border-box; 7、transform,位移 8、flex弹性布局,grid栅格布局 14、伪类与伪元素的区别 伪类:用于当已有元素处于的某个状态时,为其添加对应的样式。LVHA 伪元素:用于创建一些不在文档树中的元素,并为其添加样式。::before/after 区别: 1、伪类它存在于DOM文档中,伪元素本身不存在在DOM文档中 2、伪类使用用:,伪元素使用::,便于区分 3、伪类可以同时使用多个,伪元素只能同时使用一个 3、JS 1、JS数据的类型及区别 JS的数据类型可以分为2种,一种是基本数据类型有5种,分别是: String(字符串)、Number(数字)、Boolean(布尔值)、Null(空值)、Undefined(未定义) Symbol(唯一值)、bigInt(大的整数值) 一种是引用类型,分别是Obejct(对象)、Data(日期)、Function(函数)、Array(数组) 基本数据类型与引用数据类型的区别有: 1、存放的位置不同:基本数据类型是放在栈中,而引用数据类型放在堆中。 2、赋值比较:基本数据类型的值改变时,只影响一个变量。 但引用数据类型指向的对象发生改变时,所指向这个对象的变量就会跟着改变,可以改变多个变量。 3、类型比较:基本数据类型比较的是一个值,而引用数据类型比较的引用是否指向同一个对象。 4、函数参数影响的比较,基本类型作为参数,函数内部不会影响到实参的值。 而引用数据类型作为参数时,函数内部的操作会影响实参的值,因为它们指向的是同一个对象。 2、null和undefined的区别 null是表示一个"无"的对象,指向空的对象,这个对象是不存在的,转为数值时为0。 null的使用场景:经常用作函数的参数,或作为原型链的终点 undefined是表示一个"无"的原始值,变量被声明了但还没有赋值,就为undefined,转为数值时为NaN 相同点:都是表示值的空缺,所以两者等于是相等的 不同点:null的类型是Object对象,undefined的类型就是Undefiend,所以两者全等不相等 3、检测数据类型方式 检测数据类型有四种方式: 第一种是typeof,返回结果是一个字符串,证明数据是哪种类型。typeof的局限有两个: (1)null检测出来不是null而是object,因为null虽然是单独的一个数据类型, 但是它原本意思就是空对象指针,所以浏览器使用typeof检测的时候会把它按照对象来检测。 (2)使用typeof无法具体细化数组、函数、日期,全都返回Object对象类型 第二种是instanceof ,检测某个实例是否属于这个类,属于的话返回true,不属于返回false 第三种是constructor,获取当前实例的构造器 第四种是Object.prototype.toString.call,获取当前实例的所属类信息(最为准确) 4、==和=== 的区别 ==判断数值是否相等,如果类型不一致,则会进行强制类型转化后再进行比较。 ===同时判断类型和数值是否全等,不会强制转换,如果有一个不等,直接返回 false。 5、作用域与作用域链 一个变量的使用范围就叫做作用域,作用域可以分为全局作用域和局部作用域。 一个HTML页面就是一个全局作用域,打开页面的时候, 作用域就生成了, 直到关闭页面为止。 而局部作用域就是私有作用域,每一个函数就是一个私有的作用域。 而作用域链就是调用某个函数或属性时,先在当前作用域寻找,如果找不到的情况下去父级寻找, 如果父级找不到继续向上级寻找,直到找到全局作用域为止,这个链式查找的过程,就是作用域链。 6、判断数组的方法 (1)Array.isArray() 书写:Array.isArray(arr1) (2)constructor构造器 书写:arr1.constructor.toString().indexof(‘Array’) (3)Object.propotype.toString.call()原型 书写:Object.propotype.toString.call(arr1) 7、宏任务与微任务 JS异步任务可以分为宏任务和微任务 (1)宏任务有Ajax请求、setTimeOut、setInterval计时器等 (2)微任务就有Promise.then、Promise.catch和Promise.finally以及process.nextTick 宏任务和微任务的执行顺序: 每一个宏任务执行完之后,都会检查是否存在待执行的微任务, 如果有,则执行完所有的微任务之后,再执行下一个宏任务。宏任务和微任务交替执行。 8、new对象的操作过程 (1)创建一个新对象 (2)构造函数的this指向这个新对象 (3)执行构造函数的所有代码 (4)返回新对象 9、闭包 函数里面嵌套一个函数,里面的函数就叫做闭包。 闭包的优点可以读取外层函数内部的变量,实现变量数据共享。 缺点就是由于闭包把函数中的变量保存到了内存中,消耗内存, 以及数据泄露,存在安全隐患,所以不能滥用闭包,否则影响性能。最好的解决方法就是, 在退出函数之前,将不使用的局部变量全部删除,这样减少内存消耗,优化性能。 10、原型和原型链 原型本质就是对象,包括显式原型对象和隐式原型对象。 显示原型对象:只有函数对象才有显式原型对象(prototype),默认指向空对象。 隐式原型对象:只要是对象都会有隐式原型对象(proto),并且它的值与该对象对应的构造函数的显示原型对象相等。 原型链实际就是隐式原型链。当访问一个对象的属性时,先在自身属性中查找,找到则返回。 如果没有找到,就会沿着__proto__(隐式原型对象)这条链查找,在自身对应的构造函数prototype(显式原型对象)上查找, 找到则返回,如果最终没找到就返回undefined。原型链的终点是Object的__proto__,也即返回null。这种链式查找的过程,就叫做原型链。 11、为什么0.1+0.2!=0.3,如何相等 因为在 0.1+0.2 的计算过程中发生了精度丢失。在JS内部所有的计算都是以二进制方式计算的, 在 0.1 和 0.2 转成双精度二进制浮点数时,由于二进制浮点数的小数位只能存储52位, 导致小数点后第53位的数要进行舍弃操作,从而造成精度丢失。最终导致 0.1+0.2 不等于0.3 。 如何相等呢?可以将其转换为整数后再进行运算,运算后再转换为对应的小数 var result = (a * 100 + b * 100) / 100 12、回调函数 当一个函数被当作另一个函数的参数的时候,这个函数就叫做回调函数。 简单来说,就是说一个函数你定义了,可是你没有马上去调用它, 而是交给了另一个函数去调用,这就叫做回调函数。 它的缺点:传统的回调函数去解决异步操作,无法避免地大量使用回调函数嵌套,形成回调地狱。 为了避免回调地狱问题,ES6新添加了Promise,目的就是为了解决异步编程问题。 13、Promise Promise是一个对象,promise对象是ES6对于异步编程提供的一种解决方案。 Promise有两个特点: (1)对象的状态不受外界影响 Promise对象有3种状态,分别是pending(进行中)、fulfilled(已成功)、rejected(已失败) (2)一旦状态改变了就不会再变,也就是说任何时候Promise都只有一种状态。 Promise对象的状态改变只有2种可能: (1)从pending变成resolve,表示成功 (2)从pending变成rejected,表示失败 Promise的基本流程: (1)Promise是构造函数,需要new一个Promise对象,参数是excution执行函数,执行器函数是同步的 (2)exctuor函数里面执行 Promise的好处就是: 比传统的回调函数执行异步操作更加合理和规范, 而且支持链式调用,有效解决了传统回调函数嵌套造成的回调地狱问题。 14、递归 递归,就是函数在运行的过程中调用自己,就叫做递归。 递归必须具备两个条件,一个是调用自己,另一个是有终止条件。 我对递归的理解是先往下一层层传递,当碰到终止条件的时候会返回出界结果。 最常用的运用场景就是阶乘,一直递归下去,然后把数相乘,得到阶乘值。 15、变量提升 JS的工作运行方式首先是先解析代码,获取所有被声明的变量,然后在一行一行的执行。 所有的变量的声明语句都会被提升到作用域的顶部,这就叫做变量的提升。 函数的声明也是一样的,都会提升到它所在的作用域最开始执行。 这样的好处是 (1)提高了性能,如果没有这一步的话, 那么每次执行代码前都必须重新解析一遍该变量或者函数,而这是没有必要的, 因为变量或者函数的代码并不会改变,解析一遍就可以了。 (2)容错性更好,先使用后定义也不会影响正常使用,不过最好发先声明再使用规范点好。 不过ES6中提出的let和const定义变量,它们没有变量提升机制,所以要先声明再使用,否则会报错。 16、ES6新特性 ES6就是JS的版本,是一个跨越性很大的一个版本,里面添加了特多新的特性。 (1)添加了let定义变量,不允许在声明变量之前使用,不允许重复声明,具有块级作用域,让变量更加规范。 (2)添加了const定义常量,常量定义了就不能再改变,适用于不变的常量。 (3)添加了模板字符串(反引号),可以换行也可以嵌套变量,不用再拼接字符串。 (4)添加了Promisec对象,用来解决异步编程问题 (5)变量的结构赋值(数组、对象、字符串) (6)数组的扩展(set和map) (7)函数的扩展,可以使用箭头函数(=>) 17、DOM DOM是Document-Object-Model的简写,就是文档对象模型, 整个文档是一个文档节点,就像是树的根一样(叫做根节点)。 每个HTML元素都是元素节点。HTML元素内的文本就是文本节点。 DOM通过document对象,处理网页内容的方法和接口。为开发者提供大量的接口(api), 来获取节点,操作DOM树,进行创建、修改、删除HTML元素节点。 DOM常用的方法: 1、获取节点,通过document.querySelect()通过选择器获取元素节点 2、创建节点,通过document.createElement(‘h1’),创建元素节点 3、添加节点:elment.appendChild(Node) 4、删除节点:elment.removeChild(Node) 18、BOM JS由3个部分组成,ECMAScript+DOM+BOM。 ECMAScript简称ES5/6,描述JS的语法和基本对象 DOM是Document-Object-Model的简写,就是文档对象模型,处理网页内容的方法和接口。 BOM是Browser-Object-Model的简写,就是浏览器对象模型,提供浏览器交互的方法和接口。 BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。 例如计时器和location对象,location.href获取或者设置整个URL 19、cookie和session的区别 什么是cookie? 众所周知,http协议是一种无状态的协议,它不保存客户端的历史请求记录,所以客户端和服务端互相不认识。 所以设置了Cookies,是一种记录客户状态的机制,它存储在用户电脑上,用来保存一些用户信息 为的就是让服务端认识到客户端,为客户定制内容。 比如Cookie中存储了用户所在地理位置,以后每次进入地图就可以默认定位到该地点。 cookie的执行原理:就是当客户端访问服务器的时候(服务器运用cookie), 服务器会生成一份cookie传输给客户端,客户端会自动把cookie保存起来, 以后客户端每次访问服务器,都会自动的携带着这份cookie。 cookie的好处就是:保存到客户端,简单易懂好用。 缺点就是:保存的数据量有限的,本身最大4kb,而且在保存到客户端,容易被篡改(删除、禁用)。 什么是session? Session是另一种记录客户状态的机制,不同的是Cookie保存在客户端浏览器中, 而Session保存在服务器上。客户端浏览器访问服务器的时候, 服务器把客户端信息以某种形式记录在服务器上。这就是Session。 客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。 session是一种特殊的cookie。cookie是保存在客户端的,而session是保存在服务端。 因为cookie放在客户端中不安全,而且存储数据有限,所以就设置了session。 session原理: 当客户端第一次请求服务器的时候,服务器生成一份session保存在服务端, 将该数据(session)的id以cookie的形式传递给客户端; 以后的每次请求,浏览器都会自动的携带cookie来访问服务器(session数据id)。 cookie和session的共同点:都是用来跟踪浏览器用户身份的会话方式。 不同点在于: (1)存储位置:cookie数据存放在客户的浏览器上,session数据放在服务器上。 (2)安全性:cookie数据容易修改不安全,session比较安全(重要的信息放在session中) (3)数据大小:cookie只有4KB,存储量不多。session比较大。 (4)服务器性能:session会在一定时间内保存在服务器上。 当访问增多,会比较占用你服务器的性能,考虑性能方面,应当使用cookie。 20、cookie,sessionStorage和localStrorage的区别 相同点:都是临时保存到客户端中,用来保存用户信息数据的。 不同点在于: (1)存储的时间有效期不同 1、cookie的有效期是可以设置的,默认的情况下是关闭浏览器后失效 2、sessionStorage的有效期是仅保持在当前页面,关闭当前会话页或者浏览器后就会失效 3、localStorage的有效期,在不进行手动删除的情况下是一直有效的 (2)存储的大小不同 1、cookie的存储是4kb左右,存储量较小,一般页面最多存储20条左右信息 2、localStorage和sessionStorage的存储容量是5Mb (3)与服务端的通信 1、cookie会参与到与服务端的通信中,一般会携带在http请求的头部中。 2、localStorage和sessionStorage是单纯的前端存储,不参与与服务端的通信 21、数组去重的方法 (1)indexOf():输出结果为该元素第一次出现的位置,-1为没有出现,没有出现就push添加到新数组 (2)对象属性:创建一个新的对象,用来记录元素的出现次数,没有出来就push添加到新数 (3)ES6中的set方法:set的一个最大的特点就是数据不重复。书写:return […new Set(arr1)]; (4)Array.from与set组合:Array.from方法可以将Set结构转换为数组。书写:return Array.from(new Set(arr1)); 22、实现继承的几种方式 (1)原型链继承,通过原型prototype将一个引用类型继承另一个引用类型的属性和方法,缺点,引用类型数据共享 (2)构造函数继承,在子构造函数中利用call()把父类的 this 指向子类,实现继承, (3)组合继承,将原型链和借用构造函数的技术组合在一块,缺点,执行两次父类构造函数 (4)寄生组合继承,通过借用函数来继承属性,通过Object.create(People.prototype)实现继承。 (5)ES6的class继承,子类通过extends实现继承,super 指向父类的原型对象 23、防抖与节流 1、防抖就是将多次触发转为一次触发,去除多余的操作,优化性能,可以用setTimeOut计时器来实现。在输入框中输入数据判断之前有没有数据,如果有就删除clearTimeOut()之前的数据,保留最新的,1秒后没有数据传过来就触发一次。 2、节流就是在一定时间内只能触发一次。也可以用setTimeOut计时器来实现。当数据输入,1秒后就触发一次,触发完就把timerOut判断有无触发的值改为false,等待下一次数据输入。 24、深拷贝与浅拷贝 浅拷贝:就是复制的是引用地址,如果修改复制后的对象,原对象也会跟着改变 深拷贝:就是复制的是对象的值,新建一个引用地址,复制后的对象修改不影响原对象。 浅拷贝的方法: (1)newObejct=oldObject (2)Object.assign(newObejct, OldObject); (3)扩展运算符newObejct={…oldObject} 深拷贝的方法: (1)用for in和递归:for in就是把值循环给新的对象,如果对象值里面有对象的话, 就用递归,把对象里面的值赋值完之后再遍历赋值。 (2)JSON:用JSON.stringift转为JSON字符串,再用JSON.parse转为对象。 25、事件循环机制 首先我们要知道JS是单线程的,因为JS的主要作用是与用户互动以及操作DOM节点, 这就决定了JS只能是单线程的,不可以进行多线程,比如说在一个线程中添加DOM节点内容, 在另一个线程中删除这个节点,这是不可以的,所以JS运行操作是单线程的。 单线程就会导致有很多任务需要排队一个个去执行,如果某个任务执行时间太长,就会出现阻塞。 为了解决这个问题,JS引入了事件循环机制,这个机制也叫做Event Loop(事件循环) 事件循环有两个任务,一个是宏任务,一个是微任务,都是异步请求 关键步骤如下: 1、执行一个宏任务 2、执行过程串如果遇到微任务,就将它添加到微任务的队列中 3、宏任务执行完成之后,立即执行当前所有的微任务 4、当宏任务执行完毕之后,开始检查渲染,渲染完毕之后,JS线程继续接管 26、事件捕获和事件冒泡 首先我们要知道什么是事件流? 事件流就是从页面中接收事件的顺序(Window->Document->Html->Div),就叫事件流。 它有三个阶段:捕获阶段、目标阶段、冒泡阶段 捕获阶段:就是事件响应从最外层的Window开始,逐级向内层前进,直到找到具体的事件目标元素。 目标阶段:就是触发事件的最底层的元素。 冒泡阶段:与捕获阶段正好相反,事件的响应从最底层开始一层一层往外传递到最外层的Window。 27、箭头函数和普通函数的区别 什么是箭头函数? ES6中允许使用箭头=>来定义箭头函数,箭头函数省去了function关键字, 函数的参数放在=>前面的括号中,函数体放在{}中,这就叫箭头函数。 区别: 1、箭头函数语法更加简洁清晰 2、箭头函数不会创建自己的this,而是它会捕获外层执行环境的this来继承使用,所以箭头函数的this指向是固定的。 3、call、apply、bind无法改变箭头函数中的this值 4、箭头函数不能作为构造函数使用,因为构造没有自己的this, 所以箭头函数不能作为构造函数使用。否则new会报错。所以箭头函数也没有原型Prototype。 28、call、apply、bind的区别 相同点:都可以修改this的上下文指向,都在第一个参数上修改。 不同点: 1、传参不同,call和bind是逐个列举传参,apply是数组传参 2、执行机制不同,call和apply会立即执行函数, bind不会立即执行,bind会得到一个修改this后的新函数,你要调用它才能执行。 29、Promise与async/await的区别 async/await 是建立在 Promises上的,不能被使用在普通回调以及节点回调 async/await相对于promise来讲,写法更加优雅 async/await 和 Promises 很像,不阻塞 async/await 代码看起来像同步代码 30、同步与异步 同步:指发送一个请求,需要等待返回,然后才能够发送下一个请求,有等待过程。 异步:指发送一个请求,不需要等待返回,随时可以再发发下一个请求。 最大的区别就是:同步需要等待,异步不需要等待。 优缺点:同步执行效率比较低,耗时间,但有利于控制流程,避免意外情况。 异步的执行效率高,节省时间,但会占用更多的资源,也不利于我们对进程的掌控。 31、数组的常用方法 1、 join,数组转字符串,参数为分割符,原数组不受影响 。arr.join(‘-’); 2、split,字符串转数组,参数为分割符,原数组不受影响。str.split(‘-’); 3、 push,数组尾部添加一或多个元素,arr.push(值)。 4、pop,数组尾部删除一或多个元素,arr.pop(值)。 5、unshift,数组头部添加一或多个元素,arr.unshift(值)。 6、shift,数组头部删除一或多个元素,arr.shift(值)。 7、 reverse,翻转数组。arr.reserse() 8、sort,对数组进行排序。 9、concat,数组的拼接,原数组不受影响。arr1.concat(arr2) 10.、slice,截取出来,原数组不受影响。 arr.slice(start,end) ;从start下标开始截取,一直到end结束,不包括end arr.slice(start) ;从start下标开始截取,一直到最后 arr.slice() ;全部截取相当于复制。 11、splice,删除或增加元素,原数组受影响。 arr.splice(start,deletedCount) 纯删除 arr.splice(start,deletedCount,item) 替换 arr.splice(start,0,item) 纯添加 32、循环数组的方法 1、for 2、array.forEach((item, index, array) 3、array.map((item, index, array) 4、for of,遍历值 5、for in,遍历索引 33、判断this的指向 普通函数:谁调用的函数,函数的this就指向谁,不调用就指向全局。 箭头函数:箭头函数没有 this,箭头函数 this 是定义箭头函数时父级作用域的 this,谁定义指向谁 call/apply/bind:可以改变函数内部的this指向,不可以改变箭头函数。 对象调用:当函数作为对象的方法被调用时,this指向该对象 34、Set和Map的区别 Set 对象可以存储任何类型的数据。值是唯一的,没有重复的值。 Map对象保存键值对,任意值都可以成为它的键或值。 35、foreach和map的区别 共同点: (1)只能遍历数组 (2)都是循环遍历数组中的每一项 (3)每一次执行匿名函数都支持三个参数,数组中的当前项item,当前项的索引index,原始数组input (4)匿名函数中的this都是指window 区别: forEach没有返回值,map有返回值,可以return出来 36、var、let、const的区别 1、变量提升:var存在变量提升。let和const没有 2、块级作用域:var没有块级作用域。let和const有 3、重复声明:var可以重复声明。let和const不可以。 4、修改声明变量:var和let可以,const是常量,不能修改。 37、结构赋值 数组: let [a] =[1] [变量名]:变量名可随意 对象: let {name} = {name} {变量名}:变量名必须是对象中的属性名 4、VUE 1、谈谈你对Vue的理解 vue是一个用于创建用户界面的渐进式的JavaScript框架。 它有三个优点: 1、采用了组件化的模式,实现了 html 的封装和重用,这样提高了代码的利用率,而且维护起来会更加方便。 2、声明式编码,不用再手动操作DOM节点,提高开发效率。 3、采用了虚拟DOM了,尽量复用DOM操作节点,优化性能。 2、响应式数据原理 首先我们要知道什么是响应式? 响应式就是视图渲染时使用到了一个数据,当数据更新时,视图就会响应是否更新,这就叫响应式。 Vue的响应式原理的关键是Object.defineProperty 简单来说,Vue通过Object.defineProperty对data的所有属性进行重新定义, 给数据的获取和设置进行一个拦截功能(就是数据劫持),当getter获取数据的时候,就会给当前数据一个依赖收集,当数据setter更新时,就会通知对应的依赖,进行视图更新,这就是Vue的响应式原理。 具体来说,就是vue初始化的时候,会利用initData()函数初化data的所有属性,然后new Observer对数据进行检测,如果数据类型是对象的话,就会调用this.walk()这个方法对对象进行一个依赖收集处理。它的内部会调用defineRective循环对象属性,定义响应式变化,核心就是通过Object.defineProperty来实现的。 如果数据类型是数组的话,我们首先要知道改变数据的7种方法,分别是pop、push、shift、unshift、sort、reverse、splice。当使用其中的一个的时候,就会改变数组内容。 然后来检测数组变化的时候,就采用函数劫持的方法,具体来说就是,重新定义数组的原型方法,通过原型链获取我们定义的原型方法。当数组变化时,就会通知视图更新。如果数组里面有对象的话,就会深度循环遍历,用Observer进行检测。 其实Vue3是可以通过Proxy直接监听对象数组的变化的。 3、MVVM与MVC的区别 MVC是Model-View-Controller的简写,Model就是模型,对应后端数据,View就是视图对应用户界面,Controller就是控制器,对应页面的业务逻辑。MVC的工作机制原理就是,用户操作会请求服务器路由,路由就会调用对应的控制器来处理,控制器就会获取后台数据,将结果返回给前端,进行页面渲染。 MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版,M和C是一样的,ViewModel的存在目的是抽离Controller中展示的业务逻辑,其它的业务逻辑还是在控制器中,整体和MVC差不多,最大的区别就是MVC是单向的,而MVVM是双向的,并且是自动的,也就是数据发生变化自动同步视图,视图发生变化自动同步数据,第二个是解决了 MVC 中大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。第三个和当数据频繁发生变化,视图是自动更新的,这样开发者就减少了DOM的操作,可以更多的关注业务逻辑。 4、谈谈你对MVVM模式的理解 MVVM即Model-View-ViewModel,Model就是模型,对应Vue实例中的data,View就是视图,对应模板,ViewModel就是Vue实例,它是连接View和Model之间的桥梁。它有两个方向,第一个是Model的数据会挂载到ViewModel中,自动渲染到View视图中。第二个是View视图数据变化时,ViewModel也会通知Model中数据进行更新。实现了一个数据双向绑定的过程。 MVVM的好处就是: 简化了View和Model之间的依赖,实现低耦合性。而且解决了数据频繁更新的问题,不用再用选择器写DOM节点操作,这样我们可以更加专注于数据的变化,提高开发效率。 缺点也很明显,Bug很难被调试: 因为使⽤双向绑定的模式,当你看到界⾯异常了,有可能是你View的代码有Bug,也可能是Model的代码有问题,而且比较占内存。 5、双向数据绑定原理 采用数据劫持结合发布者-订阅者模式的方式来Vue数据双向绑定。 简单来说就是,通过Object.defineProperty对data的所有属性进行重新定义, 给数据的获取和设置进行一个拦截功能(就是数据劫持), 当getter获取数据的时候,就会给当前数据一个依赖收集(就是订阅者Watcher), 当数据setter更新时,就会通知对应的订阅者,进行视图更新 如何视图更新呢?这我们需要一个,compile 解析模板指令,将模板中的变量替换成数据, 绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。 具体就三个步骤 1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。 2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。 3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,根据初始化模板数据。 6、computed和methods的区别 computed和methods的区别主要有两个 第一个是属性、方法调用。computed是属性调用,在定义函数时以属性的形式调用, methods是方法调用,在定义函数时以方法的形式调用,要加() 第二个是缓存功能,computed是计算属性,是有缓存的,当它的依赖属性改变的时候, 才会进行重新计算,如果数据没有改变,它是不会运行的。 而methods是方法,没有缓存功能,只要你调用一次,不管数据是否改变,它都是执行。 所以,性能方面的比较的话,computed是比methods的性能会好一点,避免重复执行。 7、computed和watch的区别 computed是计算属性,watch是监听属性。 它们的共同点都是用来监听数据变化白。 它们有三个区别: 1、是否有缓存功能,computed是有缓存的,只有它依赖的属性值改变的时候,它才会进行计算。而watch是没有缓存功能的,只要监听的数据变化了,它就会触发相应的操作。 2、是否支持异步,computed是不支持异步的,当computed内有异步操作的时候,它是监听不到数据变化的。watch是支持异步操作的,适合监听路由和设置计时器等。 8、vue的生命周期 vue的生命周期,用一句话来概述就是,一个vue实例从开始创建到销毁的过程,就叫做vue的生命周期 vue的生命周期的关键阶段有8个vue生命周期函数,也叫做生命周期方法/钩子。 可以分为3类: 第一类是创建期间的生命周期函数: 1、beforeCreate:这个时期,已经初始化好了vue实例,但是数据和方法还没有被初始化,还没有够被调用。 2、created:这个时期,vue中的数据和方法已经初始化好了,这是第一个可以调用数据和方法的函数 3、BeforeMoute:这个时期,vue中的数据已经预编译好了,但是还没有渲染到模板中。 4、Mouted:这个时期,数据已经渲染到了模板中,可以获取页面中的数据,这里Vue实例已经创建完成。 第二类是运行期间的生命周期函数: 1、beforeUpdate:这个时期,Vue中的数据改变时,视图还没有更新。 2、Updated:这个时期,视图已经更新完毕。 第三类是销毁期间的生命周期函数: 1、beforeDestroy:这是最后一个可以调用Vue中的数据和方法 2、Destroyed:Vue组件销毁,生命周期结束。 9、谈谈你对nextTick的理解 首先我们要知道Vue数据更新是异步操作的,就是数据改变后,视图不会立即更新, 而是Vue会创建一个异步队列,把更新的数据放到队列中,只有当队列中的数据全部更新完成后,才会进行视图更新。而nextTick在视图更新完成之后,就会自动执行,获取DOM内容,删除之前的异步队列,等待下一次数据更新。 nextTick的使用场景:就是数据改变之后你想立即操作节点内容的话,你就可以使用nextTick。 注意:Vue生命周期的created()钩子函数进行DOM操作时一定要放在nextTick()的回调函数中,因为此时模板还没有被渲染,所以此时操作DOM是没有用的,一定到放在nextTick中,等到mounted钩子函数,挂载完DOM之后才使用。 nextTick的原理,就是将传进去的回调函数推入到callbacks队列中, 然后判断pending是否为false,pending表示当前是否有异步任务正在执行, 如果pending为false时,就调用timerFunc函数,执行callbacks队列中的函数, 当timerFunc函数还没有结束时,重复调用nextTick只会触发一次执行。 等到执行完毕后,就会清空之前的异步队列,等待下一次数据更新。 10、vue-if与vue-show的区别 主要有3个区别: 第一个是渲染,v-if不成立的时候是不渲染元素的,而v-show成不成立都会渲染到页面中。 第二个是隐藏显示,v-if切换是动态的向DOM添加或者删除元素,而v-show只是简单的css的display切换 第三个是性能:v-if切换消耗性能高,而v-show初始化渲染消耗性能比较高 使用场景:v-if适合数据变化不大的情况下使用,v-show适合数据需要多次频繁切换 11、vue-if与vue-for为什么不建议一起使用 因为v-for比v-if的优先级高,所以每次渲染都会先执行循环再判断条件, 无论如何循环都不可避免浪费了性能。所以要避免出现这种情况, 则在外层嵌套template,进行v-if判断,然后在内部进行v-for循环。 如果v-if出现在v-for内部,可通过computed计算属性提前过滤掉那些不需要显示的项 12、v-model的双向数据绑定原理 v-model的本质就是v-bind数据绑定和v-on处理函数绑定的语法糖 在input输入框输入数据时,就会绑定data数据显示出来, 然后当数据改变时,就会绑定处理函数,修改data数据,渲染到页面中,实现双向数据绑定。 13、data为什么是一个函数而不是对象 组件实例对象data必须为函数,因为如果一个组件有多个实例,这样就会造成多个组件实例对象之间共用一个data, 产生数据污染。而采用函数的形式,initData初始化data时,就会会返回全新data对象 而在Vue根实例创建过程中则不存在该限制,也是因为根实例只能有一个,不需要担心这种情况 14、vue常用的组件间通信方式有哪些? vue常用的组件间通信方式有3种,分别是父子传值,兄弟传值还有任意组件传值 第一个是父传子,在父组件的子标签中自定义属性,把数据/方法传给该属性 子组件通过props获取属性,接收父组件传过来的数据/方法,实现父传子。 第二个是子传父,在子组件中通过$emit把数据传给父组件的自定义函数, 然后在父组件中的子标签中绑定方法来获取自定义函数传过来的数据,这就实现了子传父。或者可以通过$refs来获取子组件的数据/方法也可以。 第三个是兄弟传值,就用eventBus,来作为消息传递的对象,兄弟组件引入这个对象,然后在created生命周期函数中通过$on定义事件来获取数据,在methods中通过$emit穿参来修改数据,实现兄弟传值。 最后一个任意组件传值,创建一个事件中心,相当于中转站,可以用来传递事件和接收事件。如果业务逻辑复杂,很多组件之间需要同时处理一些公共的数据,这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ,vuex 的思想就是将这一些公共的数据抽离出来,将它作为一个全局的变量来管理,然后其他组件就可以对这个公共数据进行读写操作, 这样达到了解耦的目的。 15、谈谈你对Vuex的理解 Vuex就是实现组件全局状态(数据)管理的一种机制,实现组件之间数据的共享。 首先我们要知道组件之间的通信方法, 一种是父传子,使用属性绑定。一种是子传父,使用事件绑定。 还有一种是兄弟传值,用EvenBus。但是这3种方法只适合小范围的数据共享。 如果我们需要频繁地、大范围地数据共享,那么就要使用Vuex进行数据共享。 它有五个核心属性,分别是State、Getter、Mutation、Action、Module state:存放公共数据的地方; getter:对state值进行加工包装,形成新的数据,不会影响state值; mutations:唯一修改state的方法,修改过程是同步的; action:异步处理,通过分发操作触发mutation中的函数; module:模块化管理store; 它的好处就是: 1、能够在vuex中集中管理共享的数据,易于开发和后期维护。 2、能够高效地实现组件之间的数据共享,提高开发效率。 3、存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步。 适用场景:登录的状态、购物车、收藏的信息等。 16、谈谈你对组件的理解 组件就是自定义标签,是把页面当中的可以重复使用的内容进行封装,实现代码重用, 提高开发效率和代码质量,以及代码维护起来会更加方便。 如何封装组件? 首先,使用Vue.extend()创建一个组件。然后,使用Vue.component()方法注册组件 接着,如果子组件需要数据,可以在props中接受定义。 最后,子组件修改好数据之后,想把数据传递给父组件,可以使用$emit()方法。 17、对 SPA 单页面的理解,它的优缺点分别是什么? SPA是Single-Page-Application的简写,就是单页面应用。仅在Web页面初始化时加载相应的HTML、CSS和JS。 一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新渲染或者跳转。 取而代之的是,复用路由1机制实现HTML内容的变换,UI与用户的交互,避免页面的重新加载。 优点:用户体验快,不需要改变的内容就不需要重新加载,避免不必要的跳转和渲染。 缺点: (1)初次消耗多,为实现单页面Web应用功能及显示效果, 需要在加载页面的时候,将JS、CSS统一加载,部分页面按需要加载。 (2)SEO难度大,因为所有的内容都在一个页面中动态替换,所以在SEO上有弱势。 18、的作用 keep-alive是一个缓存组件,它的作用就是避免组件内的数据重复渲染,直接在页面中调用。 优点:组件切换的时候,组件被保存到了内存中,防止重复渲染减少加载时间,提高运行效率。 缺点:如果遇到二次路由访问页面,需要使用到路由守卫(before-routerleave),把二级路由保存起来即可。 19、vue为什么使用key且为唯一值? 使用key来给每个节点做一个唯一标识,这样的话,Diff算法就可以正确地识别此节点,可以高效地更新虚拟DOM 20、谈谈你对vue-router的理解 vue-router是Vue官网推出的路由管理器,主要用于管理URL,实现URL和组件之间的对应, 以及通过URL进行组件之间的切换,从而使构建SPA单页面应用变得更加简单。 vue-router的原理: 单页面应用SPA的核心思想之一,就是更新视图而不重新页面,简单来说,它在加载页面时, 不会再加载整个页面,而只是更新某个指定的容器中的内容。 对于大多数单页面应用,都推荐使用vue-router。 21、vue-router路由模式有几种 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用), 需要引入前端路由系统,这也就是 Vue-Router 存在的意义。 前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。 Hash模式: 即地址栏 URL 中的 # 符号,hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中, 对后端完全没有影响,因此改变 hash 不会重新加载页面。 History模式:history利用ES6中新增添的pushState()和replaceState()方法,它们提供了对历史记录修改的功能。 虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。 因此可以说,hash模式和history模式都属于浏览器自身的属性,vue-router只是利用了这两个特性来实现路由。 区别在于: (1)hash带#号,比较丑。history带#号 (2)hash不会请求后端。但history就要去请求服务器。而且服务器没有相应的响应或者资源,则会刷新出来404页面。 22、vue-router有几种导航钩子 vue-router有3种导航钩子 第一种是全局导航钩子:router.beforeEach((to, from, next) 第二种是组件内导航钩子,分别是beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave, 他们是直接在路由组件内部直接进行定义的 第三种是单独路由独享组件: 即单个路由独享的导航钩子,它是在路由配置上直接进行定义的beforeEnter: (to, from ,next) 23、怎么定义vue-router的动态路由?怎么获取传过来的值 我们可以通过params和query两种方式获取动态参数 第一种params的类型,通过/router/:参数名,传参,用$route.params.参数名,来获取 第一种query的类型,通过/router?参数名=123,传参,用$route.query.参数名,来获取 24、$router和$route的区别 1.$router是VueRouter的实例方法,可以认为是全局的路由对象,包含了所有路由的对象和属性。 2.$route是一个跳转的路由对象,可以认为是当前组件的路由管理,指当前激活的路由对象, 包含当前url解析得到的数据,可以从对象里获取一些数据。如name,path等。 25、你对Vue项目进行哪些优化 图片资源懒加载、路由懒加载、第三方插件的按需引入 26、Vue3.0特性 使用Proxy替换Object.defineProperty,重构响应式系统,使用Proxy优势: 1、可直接监听数组类型的数据变化 2、监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升 3、可拦截apply、ownKeys、has等13种方法,而Object.defineProperty不行 4、直接实现对象属性的新增/删除 27、vue中的data发生变化,视图不更新如何解决? 1、使用this.$set()方法重置属性 2、数据修改后调用this.$forceUpdate()强制更新视图 28、说出vue的指令和用法 v-if :判断是否隐藏 v-for:数据循环 v-bind:class:绑定一个属性 v-model:实现数据双向绑定 v-show:判断隐藏显示 29、如何获取DOM 获取dom节点可以用ref属性,这个属性就是来获取dom对象的,this.$refs.属性名 30、虚拟DOM的优点与缺点 虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象状态变更时,记录新树和旧树的差异 最后把差异更新到真正的dom中。 优点:虚拟DOM具有批处理和高效的Diff算法,最终表现在DOM上的修改只是变更的部分,可以保证非常高效的渲染,优化性能。 缺点:首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢。 31、Diff算法 diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方, 最后用patch记录的消息去局部更新Dom。 Diff算法步骤: (1)用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文 档当中 (2)当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff),记录两棵树差异 (3)把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch),视图就更新了 32、vue全家桶包括哪些 全家桶,顾名思义,对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架。 (1)vue-cli,脚手架,Vue.js 开发的标准工具。 (2)vueRoute,路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。 (3)vuex,应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 (4)Axios,基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 33、vue修饰符 (1).stop 阻止事件继续传播 (2).prevent 阻止标签默认行为 (3).capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 (4).self 只当在 event.target 是当前元素自身时触发处理函数 (5).once 事件将只会触发一次 (6).passive 告诉浏览器你不想阻止事件的默认行为 详情:https://blog.csdn.net/weixin_43638968/article/details/108635864 34、vue2和vue3的区别 (1)vue2 和vue3双向数据绑定原理不同: vue2的数据绑定是利用Object.definePropet()对数据进行劫持 结合 发布订阅模式实现 vue3利用Proxy API对数据代理实现 defineProperty只能监听某个属性,ProxyAPI可以进行全局监听。 两者区别: proxy可以监听数组,不用单独对数组进行异性操作,可以检测到数组内部的变化 proxy可以直接绑定整个对象,省去for in 闭包等内容来提升效率 (2) vue3默认进行懒观察 vue2.0中数据一开始就创建了观察者,数据很大的时候,就会出现问题, vue3中进行了优化 只有用于渲染初始化可见部分的数据,才会创建观察者,效率更高。 (3)更精准的变更通知 2.x 版本中,你使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行; 3.x 版本中,只有依赖那个属性的 watcher 才会重新运行 35、渐进式 用自己想用或者能用的功能特性,不想用的部分功能可以先不用。 36、axios axios它是基于promise的http库,可运行在浏览器端和node.js中 a作用:用于向后台发起请求的,还有在请求中做更多是可控功能。 步骤: 1、安装axios:npm install axios 2、在App.vue中引入axios:import axios from ‘axios’ 3、修改为 Vue 的原型属性,Vue.prototype.$axios = axios 核心对象:XMLHttpRequest ajax的原理: 由客户端请求ajax引擎,再由ajax引擎请求服务器, 服务器作出一系列响应之后返回给ajax引擎, 由ajax引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。 ajax请求的五个步骤: 1、创建XMLHttpRequest异步对象 2、设置回调函数 3、使用open方法与服务器建立连接 4、向服务器发送数据 5、在回调函数中针对不同的响应状态进行处理 37、ajax与axios的区别 Ajax是对原生XHR的封装,为了达到我们跨越的目的,增添了对JsonP的支持。 异步的javascript和xml,ajax不是一门新技术,而是多种技术的组合, 用于快速的创建动态页面,能够实现无刷新更新数据从而提高用户体验。 Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中;是请求资源的模块;通过promise对ajax的封装。 axios和ajax的区别: axios是通过Promise实现对ajax技术的一种封装,就像jquery对ajax的封装一样。 简单来说就是ajax技术实现了局部数据的刷新,axios实现了对ajax的封装, axios有的ajax都有,ajax有的axios不一定有。 总结一句话就是axios是ajax,ajax不止axios。 38、vue挂载过程 1、new Vue的时候调用会调用_init方法 2、调用$mount进行页面的挂载 3、挂载的时候主要是通过mountComponent方法 4、定义updateComponent更新函数 5、执行render生成虚拟DOM 6、_update将虚拟DOM生成真实DOM结构,并且渲染到页面中 5、HTTP 1、HTTP HTTP是HyperText-Transfer-Protocol的简写,就是超文本传输协议。 主要作用就是,它规定了只能由客户端主动发起请求,服务器接收请求处理后返回响应结果。 同时HTTP是一种无状态的协议,所以协议本身是不记录客户端的历史请求记录。 2、什么是跨域,如何解决跨域 浏览器从一个域名的网页去请求另一个域名的资源时, 协议、域名、端口任一个不同,都是跨域。 协议、域名、端口都相同叫同源策略,为了防止别人恶意访问。 如何解决跨域问题? 1、jsonp跨域 将返回数据以资源的方式放在标签里面返回,由于返回的不是JSON数据,就没有跨域的限制了, 类似对页面添加的js引用,这样就解决了跨域的问题。 2、cors 放开服务端跨域限制,通过添加response的header的方法。header(‘Access-Control-Allow-Origin:*’); 3、代理 将请求资源的操作通过一层代理,然后取回数据,再从代理层把数据返给浏览器, 由于代理层和浏览器是同源的,这样就解决了跨域的问题。 3、get和post的区别 1、get请求的参数数据放在URL中,post请求的参数放在body中,看不到,所以post比get安全。 2、get请求一般用来获取服务器资源,比如查询用户信息。post请求一般与服务器交互相关相关的,比如添加删除。 3、get请求可以缓存在浏览器中,post请求不能缓存。 4、http状态码 200 : 成功,表示访问成功,正常状态。 301 : 永久移动,表示本网页已经永久性的移动到一个新的地址,在客户端自动将请求地址改为服务器返回的新地址。 302 : 临时重定向,表示网页暂时性的转移到一的新的地址,客户端在以后可以继续向本地址发起请求。 303 : 表示必须临时重定向,并且必须使用GET方式请求。 304 : 重定向至浏览器本身,当浏览器多次发起同一请求,且内容未更改时,使用浏览器缓存,这样可以减少网络开销。 401 : 表示协议格式出错,可能是此IP地址被禁止访问该资源,与403类似。 403 : 表示没有权限,服务器拒绝访问请求。 404 : 这是最常见的错误,表示找不到系统资源,但是只是暂时性地。 500 : 表示服务器程序错误,一个通用的错误信息。 5、图片懒加载 实现懒加载的关键就是,在图片没有进入可视区域时,先不给的src赋值, 这样浏览器就不会发送请求了,等到图片进入可视区域再给src赋值。 实现懒加载有四个步骤,如下: 1.加载loading图片,src=“loading.gif”,src先为空 2.判断哪些图片要加载 3.隐形加载图片 4.替换真图片,data-src=“4.jpg”,存放真的图片路径 6、总结 好啦,以上就是我总结的所有的前端面试题目,还有其他没有写出来的前端题目,我会持续更新的。 因为是自己理解写出来的,所以有些地方可能还没那么准确,不过意思差不多,面试基本上没有问题。 还有其他没有我没提及到的前端面试题目,大家可以在评论区留言,让我看看,然后我再加上去。如果有哪些讲得不对或者可以改进的话,私信我,好让我查漏补缺噢。 最后,就是预祝各位小伙伴都面试成功,找到一份好工作,就这样啦~ 噢,还有一点,不能硬背,要理解之后,敲过代码,再按照自己的理解总结,更容易印象深刻哦! 就这样啦,拜拜ε(*・ω・)_/゚:・☆ 你可能感兴趣的:(前端八股文,前端,html,css,javascript,vue) android 自定义曲线图,Android自定义View——贝赛尔曲线 weixin_39767513 android自定义曲线图 个人博客:haichenyi.com。感谢关注本文针对有一定自定义View的童鞋,最好对贝赛尔曲线有辣么一丢丢了解,不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图:最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹,很规则。其次,他这个正弦图左右在移动。然后,就是它这个自定义View,上下也在移动,是慢慢增加的最后,优化 uni-app实现 步骤条 夏夏的码农 uni-app 实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st v-for 实例 琪33 v-for实例v-for实例{{item}}{{index+1}}:{{student.name}}-{{student.age}}varapp=newVue({el:'#app',data:{items:[53,23,76,14,54,36,28],students:[{name:'jspang',age:32},{name:'Panda',age:30},{name:'PanPaN',age: npm 搭建 Vite 项目 渺小的虫子 viter前端javascript开发语言 兼容性注意Vite需要Node.js版本>=12.0.0。1、使用npm安装Viter$npminitvite@latest使用npm初始化项目#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线:npminitvite@latestmy-vue-app----templatevue2、配置路由:npminstallvue- 大前端-postcss安装使用指南 黑夜照亮前行的路 postcss PostCSS是一款强大的CSS处理工具,可以用来自动添加浏览器前缀、代码合并、代码压缩等,提升代码的可读性,并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南:一、安装PostCSS在你的项目目录中,通过npm(NodePackageManager)来安装PostCSS。打开命令行窗口,输入以下命令:bash复制代码npminstallpostcss--save-dev这将把 谷歌浏览器驱动Chromedriver(114-120版本)文件以及驱动下载教程 pigerr杨 Pythonpythonchromedrivers ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装 虚拟 DOM 的优缺点有哪些 咕噜签名分发 前端javascript开发语言 虚拟DOM(VirtualDOM)技术作为现代前端开发中的重要组成部分,已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势,同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点,深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异,最小化实际DOM操作,从而减少页面重渲染时的性能消耗。这种优 vue 通信方式 hx_1199 vue.js前端 1、props和$emit父组件向子组件传递数据是通过props传递的,子组件传递给父组件是通过$emit触发事件来做到的。父组件this.$emit("update:page",newVal)-->importChildfrom'./child'exportdefault{name:"Father",components:{Child,},data(){return{articleList:[' 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架 P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML,异步的JS和XMLJS网页动作,XML一种标记语言,存储数据,作用:数据交换:通过Ajax给服务器发送请求,并获取服务器响应的数据异步交互:在不重新加载整个页面的情况下,与服务器交换数据并实现更新部分网页的技术,例如:搜索联想、用户名是否可用的校验等等。同步与异步:同步:服务器在处理中客户端要处于等待状态,输入域名 python转码 Desamond python开发语言 转码在许多场景中都有应用,以下是一些常见的场景:网页开发:当用户在网页上输入文本时,可能需要将特殊字符(如空格、引号、特殊符号等)进行转码,以防止这些字符对URL或HTML代码产生干扰。文件名处理:在处理文件名时,可能需要将特殊字符进行转码,以避免文件名被错误地解析或显示。数据传输:在数据传输过程中,为了确保数据的完整性和正确性,可能需要将数据中的特殊字符进行转码。数据存储:在数据库或数据存储中, Python dict字符串转json对象,小数精度丢失问题 朝如青丝 暮成雪 jsonpython 一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print VUE 页面禁止缩放(华为平板浏览器可能失效) 唐屁屁儿 JSvuewebviewjavascript h5页面移动端禁止缩放、web页面禁止浏览器缩放移动端优先,可禁止用户缩放和双击放大;在App.vue中的script内的方法里加入以下代码:window.onload=function(){document.addEventListener('touchstart',function(event){if(event.touches.length>1){event.preventDefault() java实体中返回前端的double类型四舍五入(格式化) 婲落ヽ紅顏誶 java 根据业务,需要通过后端给前端返回部分double类型的数值,一般需要保留两位小数,使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f Django forms组件 在飞行-米龙 Djangodjangopython后端 【一】引入【1】实现登陆验证功能(1)需求分析登陆验证需要前后端交互,采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容(2)后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict Vue 常见面试题(一) 安生生申 面试题vue.js前端javascript 目录1、Vue的最大的优势是什么?(必会)2、Vue和jQuery两者之间的区别是什么?(必会)3、MVVM和MVC区别是什么?哪些场景适合?(必会)1、基本定义2、使用场景3、两者之间的区别4、Vue数据双向绑定的原理是什么?(必会)5、Object.defineProperty和Proxy的区别(必会)6、Vue生命周期总共分为几个阶段?(必会)7、第一次加载页面会触发哪几个钩子函数?(必会) UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS liferecords LLM语言模型人工智能自然语言处理 UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接:arXiv关键字:大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型(LLMs)在各种自然语言任务上表现出色。然而,它们在HTML理解方面的能力——即解析网页的原始HTML,对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型(经过微调 Web前端Html的表单 任家伟 前端html 表单的关键字:form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读,不可修改,但是可以提交disabled=“disabled”禁用组件不可修改,不能提交type=“password”密码框type=“radio”单 Thinkphp - 详细实现网站系统登录功能,附带 Mysql 数据库设置、Web 前端展示界面、信息校验等(详细代码,即设计过程) 王佳斌 +Thinkphpmysql前端数据库 前言登录功能,是我们几乎开发每个系统都必须的模块。登录功能设计思路,主要包括几个方面。用户输入网址展示登录页面用户输入用户名,密码等点击登录进行信息校验校验通过之后,记录用户登录信息,跳转指定页面用户校验失败,提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面,我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。 javascript 日期转换为时间戳,时间戳转换为日期的函数 cdcdhj javascript学习日记javascript开发语言ecmascript 日期转化为时间戳,主要用valueOf()来进行转化为毫秒时间戳,getTime()IOS系统无法解析转换,所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(- react native 总结 一切顺势而行 reactnativereact.jsjavascript reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su Vue 模版编译原理 I will.874 vue.jsjavascript前端 当我们使用Vue编写完一个组件以后,Vue会根据模版编译一个render函数,调用render函数生成虚拟DOM,然后将虚拟DOM映射成真实DOM当数据发生变化时,Vue会触发更新视图,调用render函数返回新的虚拟DOM,对比新旧虚拟DOM,修改真实DOM,从而更新页面在此期间,有以下4个关键步骤:模版编译。生成渲染函数render执行render函数生成虚拟DOM首次渲染,根据虚拟DOM生成 reactive和ref的异同、toRef和toRefs的使用 Niucode vue3vue.js前端javascript 一、reactive和ref有了reactive为什么还要ref?ref处理起基本数据类型来更加的方便快捷,性能要更好。ref内部值的变化只会触发订阅它的副作用函数(effect)更新,而reactive(Proxy)内部对象的任何属性变化都会触发整个对象的重新渲染。相同点:都是Vue3提供的用于创建响应式数据的函数;在组件中都能够触发视图更新,实现数据的双向绑定。不同点:数据类型:reactiv COMP315 JavaScript Cloud Computing for E Commerce zhuyu0206girl javascript开发语言ecmascript Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform JSON与AJAX:网页交互的利器 入冉心 jsonajax前端 在现代Web开发中,JSON(JavaScriptObjectNotation)和AJAX(AsynchronousJavaScriptandXML)是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力,为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理,并通过代码示例展示它们在实际开发中的应用。一、JSON:轻量级的数据交换格式JSON是一种轻量级的数据 程序员开发技术整理 laizhixue 学习前端框架 前端技术:vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术:webservice:soap架构:简单的通信协议,用于服务通信ORM框架:对象关系映射,如EF:对象实体模型,是ado.net中的应用技术soap服务通讯:xml通讯ado.net:OAuth2:登录授权认证:Token认证:JWT:jsonwebtokenJava后端技术:便捷工 【前端学习——js篇】7.函数缓存 笔下无竹墨下有鱼 前端学习前端学习javascript 具体见:https://github.com/febobo/web-interview7.函数缓存函数缓存,就是将函数运算过的结果进行缓存本质上就是用空间(缓存存储)换时间(计算过程)常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化:①柯里化柯里化(currying)是一种函数式编程的概念,指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的 javascript的数据类型及转换 田小田txt 一、JavaScript数据类型:共有string,number,boolean,object,function五种数据类型;其中Object,Date,Array为对象型;2个不包含任何值的数据类型:null,undefined。二、Typeof查看数据类型:typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa html版本号 webpack_html-webpack-plugin详解 weixin_39994949 html版本号webpack 引言最近在react项目中初次用到了html-webapck-plugin插件,用到该插件的两个主要作用:为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口有了这种插件,那么在项目中遇到类似上面 HTML语言剖析 混沌破晓 HTML语言剖析Html简介-目录全写:HyperTextMark-upLanguage译名:超文本标识语言简释:一种为普通文件中某些字句加上标示的语言,其目的在于运用标签(tag)使文件达到预期的显示效果。由文字(字母,数字、标点符号)及标签组合而成。任何文字编辑器都可以,这里推荐用:Dreamweaver。1.Html特点:►描述性语言,结构语言,用于决定网页内容以什么样的形式显示;►通过标签 Websocket服务监听收发消息 beiback Java服务器问题websocket网络协议网络 目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范:为应用的所有servlet提供一个统一的前缀,使URL结构更加清晰和一致 ios内付费 374016526 ios内付费 近年来写了很多IOS的程序,内付费也用到不少,使用IOS的内付费实现起来比较麻烦,这里我写了一个简单的内付费包,希望对大家有帮助。 具体使用如下: 这里的sender其实就是调用者,这里主要是为了回调使用。 [KuroStoreApi kuroStoreProductId:@"产品ID" storeSender:self storeFinishCallBa 20 款优秀的 Linux 终端仿真器 brotherlamp linuxlinux视频linux资料linux自学linux教程 终端仿真器是一款用其它显示架构重现可视终端的计算机程序。换句话说就是终端仿真器能使哑终端看似像一台连接上了服务器的客户机。终端仿真器允许最终用户用文本用户界面和命令行来访问控制台和应用程序。(LCTT 译注:终端仿真器原意指对大型机-哑终端方式的模拟,不过在当今的 Linux 环境中,常指通过远程或本地方式连接的伪终端,俗称“终端”。) 你能从开源世界中找到大量的终端仿真器,它们 Solr Deep Paging(solr 深分页) eksliang solr深分页solr分页性能问题 转载请出自出处:http://eksliang.iteye.com/blog/2148370 作者:eksliang(ickes) blg:http://eksliang.iteye.com/ 概述 长期以来,我们一直有一个深分页问题。如果直接跳到很靠后的页数,查询速度会比较慢。这是因为Solr的需要为查询从开始遍历所有数据。直到Solr的4.7这个问题一直没有一个很好的解决方案。直到solr 数据库面试题 18289753290 面试题 数据库 1.union ,union all 网络搜索出的最佳答案: union和union all的区别是,union会自动压缩多个结果集合中的重复结果,而union all则将所有的结果全部显示出来,不管是不是重复。 Union:对两个结果集进行并集操作,不包括重复行,同时进行默认规则的排序; Union All:对两个结果集进行并集操作,包括重复行,不进行排序; 2.索引有哪些分类?作用是 Android TV屏幕适配 酷的飞上天空 android 先说下现在市面上TV分辨率的大概情况 两种分辨率为主 1.720标清,分辨率为1280x720. 屏幕尺寸以32寸为主,部分电视为42寸 2.1080p全高清,分辨率为1920x1080 屏幕尺寸以42寸为主,此分辨率电视屏幕从32寸到50寸都有 适配遇到问题,已1080p尺寸为例: 分辨率固定不变,屏幕尺寸变化较大。 如:效果图尺寸为1920x1080,如果使用d Timer定时器与ActionListener联合应用 永夜-极光 java 功能:在控制台每秒输出一次 代码: package Main; import javax.swing.Timer; import java.awt.event.*; public class T { private static int count = 0; public static void main(String[] args){ Ubuntu14.04系统Tab键不能自动补全问题解决 随便小屋 Ubuntu 14.04 Unbuntu 14.4安装之后就在终端中使用Tab键不能自动补全,解决办法如下: 1、利用vi编辑器打开/etc/bash.bashrc文件(需要root权限) sudo vi /etc/bash.bashrc 接下来会提示输入密码 2、找到文件中的下列代码 #enable bash completion in interactive shells #if 学会人际关系三招 轻松走职场 aijuans 职场 要想成功,仅有专业能力是不够的,处理好与老板、同事及下属的人际关系也是门大学问。如何才能在职场如鱼得水、游刃有余呢?在此,教您简单实用的三个窍门。 第一,多汇报 最近,管理学又提出了一个新名词“追随力”。它告诉我们,做下属最关键的就是要多请示汇报,让上司随时了解你的工作进度,有了新想法也要及时建议。不知不觉,你就有了“追随力”,上司会越来越了解和信任你。 第二,勤沟通 团队的力 《O2O:移动互联网时代的商业革命》读书笔记 aoyouzi 读书笔记 移动互联网的未来:碎片化内容+碎片化渠道=各式精准、互动的新型社会化营销。 O2O:Online to OffLine 线上线下活动 O2O就是在移动互联网时代,生活消费领域通过线上和线下互动的一种新型商业模式。 手机二维码本质:O2O商务行为从线下现实世界到线上虚拟世界的入口。 线上虚拟世界创造的本意是打破信息鸿沟,让不同地域、不同需求的人 js实现图片随鼠标滚动的效果 百合不是茶 JavaScript滚动属性的获取图片滚动属性获取页面加载 1,获取样式属性值 top 与顶部的距离 left 与左边的距离 right 与右边的距离 bottom 与下边的距离 zIndex 层叠层次 例子:获取左边的宽度,当css写在body标签中时 <div id="adver" style="position:absolute;top:50px;left:1000p ajax同步异步参数async bijian1013 jqueryAjaxasync 开发项目开发过程中,需要将ajax的返回值赋到全局变量中,然后在该页面其他地方引用,因为ajax异步的原因一直无法成功,需将async:false,使其变成同步的。 格式: $.ajax({ type: 'POST', ur Webx3框架(1) Bill_chen eclipsespringmaven框架ibatis Webx是淘宝开发的一套Web开发框架,Webx3是其第三个升级版本;采用Eclipse的开发环境,现在支持java开发; 采用turbine原型的MVC框架,扩展了Spring容器,利用Maven进行项目的构建管理,灵活的ibatis持久层支持,总的来说,还是一套很不错的Web框架。 Webx3遵循turbine风格,velocity的模板被分为layout/screen/control三部 【MongoDB学习笔记五】MongoDB概述 bit1129 mongodb MongoDB是面向文档的NoSQL数据库,尽量业界还对MongoDB存在一些质疑的声音,比如性能尤其是查询性能、数据一致性的支持没有想象的那么好,但是MongoDB用户群确实已经够多。MongoDB的亮点不在于它的性能,而是它处理非结构化数据的能力以及内置对分布式的支持(复制、分片达到的高可用、高可伸缩),同时它提供的近似于SQL的查询能力,也是在做NoSQL技术选型时,考虑的一个重要因素。Mo spring/hibernate/struts2常见异常总结 白糖_ Hibernate Spring ①ClassNotFoundException: org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWorldException 缺少aspectjweaver.jar,该jar包常用于spring aop中 ②java.lang.ClassNotFoundException: org.sprin jquery easyui表单重置(reset)扩展思路 bozch formjquery easyuireset 在jquery easyui表单中 尚未提供表单重置的功能,这就需要自己对其进行扩展。 扩展的时候要考虑的控件有: combo,combobox,combogrid,combotree,datebox,datetimebox 需要对其添加reset方法,reset方法就是把初始化的值赋值给当前的组件,这就需要在组件的初始化时将值保存下来。 在所有的reset方法添加完毕之后,就需要对fo 编程之美-烙饼排序 bylijinnan 编程之美 package beautyOfCoding; import java.util.Arrays; /* *《编程之美》的思路是:搜索+剪枝。有点像是写下棋程序:当前情况下,把所有可能的下一步都做一遍;在这每一遍操作里面,计算出如果按这一步走的话,能不能赢(得出最优结果)。 *《编程之美》上代码有很多错误,且每个变量的含义令人费解。因此我按我的理解写了以下代码: */ Struts1.X 源码分析之ActionForm赋值原理 chenbowen00 struts struts1在处理请求参数之前,首先会根据配置文件action节点的name属性创建对应的ActionForm。如果配置了name属性,却找不到对应的ActionForm类也不会报错,只是不会处理本次请求的请求参数。 如果找到了对应的ActionForm类,则先判断是否已经存在ActionForm的实例,如果不存在则创建实例,并将其存放在对应的作用域中。作用域由配置文件action节点的s [空天防御与经济]在获得充足的外部资源之前,太空投资需有限度 comsci 资源 这里有一个常识性的问题: 地球的资源,人类的资金是有限的,而太空是无限的..... 就算全人类联合起来,要在太空中修建大型空间站,也不一定能够成功,因为资源和资金,技术有客观的限制.... & ORACLE临时表—ON COMMIT PRESERVE ROWS daizj oracle临时表 ORACLE临时表 转 临时表:像普通表一样,有结构,但是对数据的管理上不一样,临时表存储事务或会话的中间结果集,临时表中保存的数据只对当前 会话可见,所有会话都看不到其他会话的数据,即使其他会话提交了,也看不到。临时表不存在并发行为,因为他们对于当前会话都是独立的。 创建临时表时,ORACLE只创建了表的结构(在数据字典中定义),并没有初始化内存空间,当某一会话使用临时表时,ORALCE会 基于Nginx XSendfile+SpringMVC进行文件下载 denger 应用服务器Webnginx网络应用lighttpd 在平常我们实现文件下载通常是通过普通 read-write方式,如下代码所示。 @RequestMapping("/courseware/{id}") public void download(@PathVariable("id") String courseID, HttpServletResp scanf接受char类型的字符 dcj3sjt126com c /* 2013年3月11日22:35:54 目的:学习char只接受一个字符 */ # include <stdio.h> int main(void) { int i; char ch; scanf("%d", &i); printf("i = %d\n", i); scanf("% 学编程的价值 dcj3sjt126com 编程 发一个人会编程, 想想以后可以教儿女, 是多么美好的事啊, 不管儿女将来从事什么样的职业, 教一教, 对他思维的开拓大有帮助 像这位朋友学习: http://blog.sina.com.cn/s/articlelist_2584320772_0_1.html VirtualGS教程 (By @林泰前): 几十年的老程序员,资深的 二维数组(矩阵)对角线输出 飞天奔月 二维数组 今天在BBS里面看到这样的面试题目, 1,二维数组(N*N),沿对角线方向,从右上角打印到左下角如N=4: 4*4二维数组 { 1 2 3 4 } { 5 6 7 8 } { 9 10 11 12 } {13 14 15 16 } 打印顺序 4 3 8 2 7 12 1 6 11 16 5 10 15 9 14 13 要 Ehcache(08)——可阻塞的Cache——BlockingCache 234390216 并发ehcacheBlockingCache阻塞 可阻塞的Cache—BlockingCache 在上一节我们提到了显示使用Ehcache锁的问题,其实我们还可以隐式的来使用Ehcache的锁,那就是通过BlockingCache。BlockingCache是Ehcache的一个封装类,可以让我们对Ehcache进行并发操作。其内部的锁机制是使用的net. mysqldiff对数据库间进行差异比较 jackyrong mysqld mysqldiff该工具是官方mysql-utilities工具集的一个脚本,可以用来对比不同数据库之间的表结构,或者同个数据库间的表结构 如果在windows下,直接下载mysql-utilities安装就可以了,然后运行后,会跑到命令行下: 1) 基本用法 mysqldiff --server1=admin:12345 spring data jpa 方法中可用的关键字 lawrence.li javaspring spring data jpa 支持以方法名进行查询/删除/统计。 查询的关键字为find 删除的关键字为delete/remove (>=1.7.x) 统计的关键字为count (>=1.7.x) 修改需要使用@Modifying注解 @Modifying @Query("update User u set u.firstna Spring的ModelAndView类 nicegege spring 项目中controller的方法跳转的到ModelAndView类,一直很好奇spring怎么实现的? /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version 2.0 (the "License"); * yo 搭建 CentOS 6 服务器(13) - rsync、Amanda rensanning centos (一)rsync Server端 # yum install rsync # vi /etc/xinetd.d/rsync service rsync { disable = no flags = IPv6 socket_type = stream wait Learn Nodejs 02 toknowme nodejs (1)npm是什么 npm is the package manager for node 官方网站:https://www.npmjs.com/ npm上有很多优秀的nodejs包,来解决常见的一些问题,比如用node-mysql,就可以方便通过nodejs链接到mysql,进行数据库的操作 在开发过程往往会需要用到其他的包,使用npm就可以下载这些包来供程序调用 &nb Spring MVC 拦截器 xp9802 spring mvc Controller层的拦截器继承于HandlerInterceptorAdapter HandlerInterceptorAdapter.java 1 public abstract class HandlerInterceptorAdapter implements HandlerIntercep 按字母分类: ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
、
、、
(1)引用区别:link属于html标签,@import在css中使用表示导入外部样式表 (2)最大的区别就是:因为link是一个标签,所以页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载 (3)兼容问题:link是HTML标签,无兼容问题。而import只在IE5以上才能识别
(1)title是网页标题、h1是内容。在做网站的SEO(Search Engine Optimization)搜索引擎优化中,titile优先于h1。 (2)语义化,b只是一个加粗的标签没有特殊含义,strong也是一个加粗标签但有特殊含义(强调在阅读器、SEO中显示出来)。 (3)语义化,i和em都是倾斜,i没有特殊含义,而em有特殊含义,i一般来做图标。
(1)titile:鼠标移入显示的问题。alt:图片没有加载显示文字 (2)在SEO中alt属性是可以解决蜘蛛抓取不到图片的问题
(1)jpg、jpeg:适合大图片(缩小会失帧) (2)png:适合小图标(缩小不容易失帧) (3)gif:动图
HTML5就是超文本语言的第五次重大修改 第一个是语义化标签,header、nav、section、article、aside、footer,这样编程会更规范清晰,而且引擎搜索优化会更加方便 第二个是表单功能增强,类型email、number、range、search、date等、属性required、multiple等 第三个是音视频标签,viedo是音频、audio是视频 第四个是Canvas画布和SVG矢量图 第五个是拖放,Drag和Drop,任何元素都可以拖放 第六个是本地存储,localStroage和sessionStorage
一种是标准盒子模型(content-box),一种是IE盒子模型(border-box) 主要区别是宽度和高度, 标准盒子模型的宽度就是内容(content)的宽度。 IE盒子模型的宽度就是(content+padding+border)的宽度。 如果想转换为IE盒子模型,可以使用:box-sizing:border-box;
1、flex布局:justify-content水平居中,align-items垂直居中 2、grid布局:justify-content水平居中,align-items垂直居中 3、容器relative+内容absolute+transform
BFC是Block-formattng-context的简写,就是块级格式化上下文。 简单来说,BFC是一个完全独立的空间,就是让空间里的子元素不会影响到外面的布局。 如何触发BFC? 1、float:left/right/top/bottom 2、overflow:hidden 3、display:inline-block/flex 4、position:absolute/fixed BFC解决的问题: 1、使用float脱离文档流,高度塌陷 2、解决margain边框重叠 3、阻止元素被浮动元素覆盖
(1)static(默认),没有定位,元素不需要定位的时候,就默认即可。 (2)fixed(固定),相对于浏览器窗口,适用于顶部导航栏,或者返回顶部 (3)absolute(绝对),相对于第一个relative父元素,适合解决abosulte脱离文档流覆盖问题 (4)relative(相对),相对于自身定位 aboslute与relative的区别: (1)realtive不脱离文档流,absolute脱离文档流。所以realtive适合做absolute的容器 (2)relative只有两个值(left、right、top、bottom)如果同时存在,left会取代right,top取代bottom。而absolute可以取四个值
(1)占位区别:display:none不占位置,visibility:hidden占位置 原理,display:none它第一次不绘制,第二次才绘制,就没有位置了,所以不占位。 visibility:hidden第一次就绘制,所以占位。 (2)触发重绘回流的区别:display:none触发回流和重绘,visibility:hidden触发重绘 重绘叫重新绘制,修改盒子font-size、background属性就会触发重新绘制 回流,修改盒子尺寸大小、位置就会触发回流 只要触发回流必定触发重绘,触发重绘不一定触发回流 为什么只要触发回流必定触发重绘,触发重绘不一定触发回流? 那么我们要知道浏览器渲染的过程: URL-》浏览器-》HMTL解析器-》JS解析器+DOM+CSS解析器[CSSDOM] -》render(把DOM和CSSDOM结合到一起) -》layout(具体计算确定DOM位置)、回流 -》渲染绘制(通过显卡显示,放到页面上)、重绘
常见的选择器有: id选择器(#id)、类选择器(.className)、标签选择器(div)、 子选择器(ul>li)、后代选择器(li a)、通配符选择器(*)、伪类选择器(a:hover) 可以继承的样式有:字体、颜色 不可以继承的样式有:宽高、内外边距 优先级为!important>内联样式(1000)>id选择器(100)>类选择器(10) 标签选择器(1)>通配符选择器(0) 权重相加判断优先级。同权重的情况下,优先级就近原则,样式定义最后的为准。
width和height为0 border: 250px solid transparent;(透明) border-bottom-color: saddlebrown;(颜色显示)
(1)inline(默认值):转为内联元素,不独立成行 (2)none:隐藏对象,是不占位的。跟visibility:hidden不一样,visibility:hidden是占位的。 (3)block: 转为块元素,独立成行 (4)inline-block:转为内联块元素,不独立成行,但跟同级元素会有空格分开 (5)flex:转为弹性盒子,最常用于页面布局 (6)grid:二维布局,flex是一维布局,都有兼容问题,需要IE10及以上
清除浮动常见的方式有3种 第一种是在浮动元素后面,添加空白标签,设置clear:both,清除浮动,添加了无意义的标签(不推荐) 第二种是父级元素触发BFC,让内部元素不影响外部,清除浮动。(推荐) 触发BFC的方法有4种: 1、最常见的就是overflow:hidden,只要不是visible即可 2、float:left/right/top/bottom,只要不是none即可 3、display:inline-block/flex 4、position:absolute/fixed 第三种是使用伪元素清除浮动:在父级元素上添加::before/after,然后content值为空 display为block块级元素,clear:both清除浮动(推荐)
opacity和rgba的相同点都是设置背景透明度。background: rgb(0,0,0);opacity: 0.5; 不同点就在于:opacity属性的值,可以被其子元素继承,而RGBA设置的元素的后代不会继承的。
flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 可以随着页面大小的改变自适应页面布局。 flex的几种常见属性: (1) flex-direction:指定flex主轴的方向,默认为row水平方向。column为垂直方向。 (2) justify-content:主轴方向上的对齐方式,默认为flex-start,起始位置对齐 flex-end:结束位置对齐。center:行中间对齐。space-between:两端对齐,中间间距相等 (3) align-items:侧轴上的对齐方式,就是垂直方向。默认为stretch,高度占满整个容器。center:垂直居中。 (4) flex-wrap:是否换行,默认nowrap,不换行,可能会溢出。wrap:换行,溢出的Flex子项会自动放到下一行。 (5) align-content:多行的对齐方式。默认stretch占满 (6) align-self:单独指定某flex子项的对齐方式 (7)flex:复合属性,flex:flex-grow(扩展比率),flex-shrink(比率),flex-basis(伸缩基准值) 常用flex:1,就元素平均布局
px:像素 em:相对于当前元素的父元素。 rem:相对于当前元素的根元素。 vw:相对于视窗的宽度,视窗宽度是100vw vh:相对于视窗的高度,视窗高度是100vh vm:相对于视窗的宽度或高度,取决于哪个更小。
1、过渡属性 ,transition 2、动画属性,animation 3、圆角属性,border-radius 4、引入了rgba 5、盒子阴影,box-shadow: 10px 10px 5px #888888; 6、盒子新特性,box-sizing:border-box; 7、transform,位移 8、flex弹性布局,grid栅格布局
伪类:用于当已有元素处于的某个状态时,为其添加对应的样式。LVHA 伪元素:用于创建一些不在文档树中的元素,并为其添加样式。::before/after 区别: 1、伪类它存在于DOM文档中,伪元素本身不存在在DOM文档中 2、伪类使用用:,伪元素使用::,便于区分 3、伪类可以同时使用多个,伪元素只能同时使用一个
JS的数据类型可以分为2种,一种是基本数据类型有5种,分别是: String(字符串)、Number(数字)、Boolean(布尔值)、Null(空值)、Undefined(未定义) Symbol(唯一值)、bigInt(大的整数值) 一种是引用类型,分别是Obejct(对象)、Data(日期)、Function(函数)、Array(数组) 基本数据类型与引用数据类型的区别有: 1、存放的位置不同:基本数据类型是放在栈中,而引用数据类型放在堆中。 2、赋值比较:基本数据类型的值改变时,只影响一个变量。 但引用数据类型指向的对象发生改变时,所指向这个对象的变量就会跟着改变,可以改变多个变量。 3、类型比较:基本数据类型比较的是一个值,而引用数据类型比较的引用是否指向同一个对象。 4、函数参数影响的比较,基本类型作为参数,函数内部不会影响到实参的值。 而引用数据类型作为参数时,函数内部的操作会影响实参的值,因为它们指向的是同一个对象。
null是表示一个"无"的对象,指向空的对象,这个对象是不存在的,转为数值时为0。 null的使用场景:经常用作函数的参数,或作为原型链的终点 undefined是表示一个"无"的原始值,变量被声明了但还没有赋值,就为undefined,转为数值时为NaN 相同点:都是表示值的空缺,所以两者等于是相等的 不同点:null的类型是Object对象,undefined的类型就是Undefiend,所以两者全等不相等
检测数据类型有四种方式: 第一种是typeof,返回结果是一个字符串,证明数据是哪种类型。typeof的局限有两个: (1)null检测出来不是null而是object,因为null虽然是单独的一个数据类型, 但是它原本意思就是空对象指针,所以浏览器使用typeof检测的时候会把它按照对象来检测。 (2)使用typeof无法具体细化数组、函数、日期,全都返回Object对象类型 第二种是instanceof ,检测某个实例是否属于这个类,属于的话返回true,不属于返回false 第三种是constructor,获取当前实例的构造器 第四种是Object.prototype.toString.call,获取当前实例的所属类信息(最为准确)
==
===
==判断数值是否相等,如果类型不一致,则会进行强制类型转化后再进行比较。 ===同时判断类型和数值是否全等,不会强制转换,如果有一个不等,直接返回 false。
一个变量的使用范围就叫做作用域,作用域可以分为全局作用域和局部作用域。 一个HTML页面就是一个全局作用域,打开页面的时候, 作用域就生成了, 直到关闭页面为止。 而局部作用域就是私有作用域,每一个函数就是一个私有的作用域。 而作用域链就是调用某个函数或属性时,先在当前作用域寻找,如果找不到的情况下去父级寻找, 如果父级找不到继续向上级寻找,直到找到全局作用域为止,这个链式查找的过程,就是作用域链。
(1)Array.isArray() 书写:Array.isArray(arr1) (2)constructor构造器 书写:arr1.constructor.toString().indexof(‘Array’) (3)Object.propotype.toString.call()原型 书写:Object.propotype.toString.call(arr1)
JS异步任务可以分为宏任务和微任务 (1)宏任务有Ajax请求、setTimeOut、setInterval计时器等 (2)微任务就有Promise.then、Promise.catch和Promise.finally以及process.nextTick 宏任务和微任务的执行顺序: 每一个宏任务执行完之后,都会检查是否存在待执行的微任务, 如果有,则执行完所有的微任务之后,再执行下一个宏任务。宏任务和微任务交替执行。
(1)创建一个新对象 (2)构造函数的this指向这个新对象 (3)执行构造函数的所有代码 (4)返回新对象
函数里面嵌套一个函数,里面的函数就叫做闭包。 闭包的优点可以读取外层函数内部的变量,实现变量数据共享。 缺点就是由于闭包把函数中的变量保存到了内存中,消耗内存, 以及数据泄露,存在安全隐患,所以不能滥用闭包,否则影响性能。最好的解决方法就是, 在退出函数之前,将不使用的局部变量全部删除,这样减少内存消耗,优化性能。
原型本质就是对象,包括显式原型对象和隐式原型对象。 显示原型对象:只有函数对象才有显式原型对象(prototype),默认指向空对象。 隐式原型对象:只要是对象都会有隐式原型对象(proto),并且它的值与该对象对应的构造函数的显示原型对象相等。 原型链实际就是隐式原型链。当访问一个对象的属性时,先在自身属性中查找,找到则返回。 如果没有找到,就会沿着__proto__(隐式原型对象)这条链查找,在自身对应的构造函数prototype(显式原型对象)上查找, 找到则返回,如果最终没找到就返回undefined。原型链的终点是Object的__proto__,也即返回null。这种链式查找的过程,就叫做原型链。
因为在 0.1+0.2 的计算过程中发生了精度丢失。在JS内部所有的计算都是以二进制方式计算的, 在 0.1 和 0.2 转成双精度二进制浮点数时,由于二进制浮点数的小数位只能存储52位, 导致小数点后第53位的数要进行舍弃操作,从而造成精度丢失。最终导致 0.1+0.2 不等于0.3 。 如何相等呢?可以将其转换为整数后再进行运算,运算后再转换为对应的小数 var result = (a * 100 + b * 100) / 100
当一个函数被当作另一个函数的参数的时候,这个函数就叫做回调函数。 简单来说,就是说一个函数你定义了,可是你没有马上去调用它, 而是交给了另一个函数去调用,这就叫做回调函数。 它的缺点:传统的回调函数去解决异步操作,无法避免地大量使用回调函数嵌套,形成回调地狱。 为了避免回调地狱问题,ES6新添加了Promise,目的就是为了解决异步编程问题。
Promise是一个对象,promise对象是ES6对于异步编程提供的一种解决方案。 Promise有两个特点: (1)对象的状态不受外界影响 Promise对象有3种状态,分别是pending(进行中)、fulfilled(已成功)、rejected(已失败) (2)一旦状态改变了就不会再变,也就是说任何时候Promise都只有一种状态。 Promise对象的状态改变只有2种可能: (1)从pending变成resolve,表示成功 (2)从pending变成rejected,表示失败 Promise的基本流程: (1)Promise是构造函数,需要new一个Promise对象,参数是excution执行函数,执行器函数是同步的 (2)exctuor函数里面执行 Promise的好处就是: 比传统的回调函数执行异步操作更加合理和规范, 而且支持链式调用,有效解决了传统回调函数嵌套造成的回调地狱问题。
递归,就是函数在运行的过程中调用自己,就叫做递归。 递归必须具备两个条件,一个是调用自己,另一个是有终止条件。 我对递归的理解是先往下一层层传递,当碰到终止条件的时候会返回出界结果。 最常用的运用场景就是阶乘,一直递归下去,然后把数相乘,得到阶乘值。
JS的工作运行方式首先是先解析代码,获取所有被声明的变量,然后在一行一行的执行。 所有的变量的声明语句都会被提升到作用域的顶部,这就叫做变量的提升。 函数的声明也是一样的,都会提升到它所在的作用域最开始执行。 这样的好处是 (1)提高了性能,如果没有这一步的话, 那么每次执行代码前都必须重新解析一遍该变量或者函数,而这是没有必要的, 因为变量或者函数的代码并不会改变,解析一遍就可以了。 (2)容错性更好,先使用后定义也不会影响正常使用,不过最好发先声明再使用规范点好。 不过ES6中提出的let和const定义变量,它们没有变量提升机制,所以要先声明再使用,否则会报错。
ES6就是JS的版本,是一个跨越性很大的一个版本,里面添加了特多新的特性。 (1)添加了let定义变量,不允许在声明变量之前使用,不允许重复声明,具有块级作用域,让变量更加规范。 (2)添加了const定义常量,常量定义了就不能再改变,适用于不变的常量。 (3)添加了模板字符串(反引号),可以换行也可以嵌套变量,不用再拼接字符串。 (4)添加了Promisec对象,用来解决异步编程问题 (5)变量的结构赋值(数组、对象、字符串) (6)数组的扩展(set和map) (7)函数的扩展,可以使用箭头函数(=>)
DOM是Document-Object-Model的简写,就是文档对象模型, 整个文档是一个文档节点,就像是树的根一样(叫做根节点)。 每个HTML元素都是元素节点。HTML元素内的文本就是文本节点。 DOM通过document对象,处理网页内容的方法和接口。为开发者提供大量的接口(api), 来获取节点,操作DOM树,进行创建、修改、删除HTML元素节点。 DOM常用的方法: 1、获取节点,通过document.querySelect()通过选择器获取元素节点 2、创建节点,通过document.createElement(‘h1’),创建元素节点 3、添加节点:elment.appendChild(Node) 4、删除节点:elment.removeChild(Node)
JS由3个部分组成,ECMAScript+DOM+BOM。 ECMAScript简称ES5/6,描述JS的语法和基本对象 DOM是Document-Object-Model的简写,就是文档对象模型,处理网页内容的方法和接口。 BOM是Browser-Object-Model的简写,就是浏览器对象模型,提供浏览器交互的方法和接口。 BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。 例如计时器和location对象,location.href获取或者设置整个URL
什么是cookie? 众所周知,http协议是一种无状态的协议,它不保存客户端的历史请求记录,所以客户端和服务端互相不认识。 所以设置了Cookies,是一种记录客户状态的机制,它存储在用户电脑上,用来保存一些用户信息 为的就是让服务端认识到客户端,为客户定制内容。 比如Cookie中存储了用户所在地理位置,以后每次进入地图就可以默认定位到该地点。 cookie的执行原理:就是当客户端访问服务器的时候(服务器运用cookie), 服务器会生成一份cookie传输给客户端,客户端会自动把cookie保存起来, 以后客户端每次访问服务器,都会自动的携带着这份cookie。 cookie的好处就是:保存到客户端,简单易懂好用。 缺点就是:保存的数据量有限的,本身最大4kb,而且在保存到客户端,容易被篡改(删除、禁用)。 什么是session? Session是另一种记录客户状态的机制,不同的是Cookie保存在客户端浏览器中, 而Session保存在服务器上。客户端浏览器访问服务器的时候, 服务器把客户端信息以某种形式记录在服务器上。这就是Session。 客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。 session是一种特殊的cookie。cookie是保存在客户端的,而session是保存在服务端。 因为cookie放在客户端中不安全,而且存储数据有限,所以就设置了session。 session原理: 当客户端第一次请求服务器的时候,服务器生成一份session保存在服务端, 将该数据(session)的id以cookie的形式传递给客户端; 以后的每次请求,浏览器都会自动的携带cookie来访问服务器(session数据id)。 cookie和session的共同点:都是用来跟踪浏览器用户身份的会话方式。 不同点在于: (1)存储位置:cookie数据存放在客户的浏览器上,session数据放在服务器上。 (2)安全性:cookie数据容易修改不安全,session比较安全(重要的信息放在session中) (3)数据大小:cookie只有4KB,存储量不多。session比较大。 (4)服务器性能:session会在一定时间内保存在服务器上。 当访问增多,会比较占用你服务器的性能,考虑性能方面,应当使用cookie。
相同点:都是临时保存到客户端中,用来保存用户信息数据的。 不同点在于: (1)存储的时间有效期不同 1、cookie的有效期是可以设置的,默认的情况下是关闭浏览器后失效 2、sessionStorage的有效期是仅保持在当前页面,关闭当前会话页或者浏览器后就会失效 3、localStorage的有效期,在不进行手动删除的情况下是一直有效的 (2)存储的大小不同 1、cookie的存储是4kb左右,存储量较小,一般页面最多存储20条左右信息 2、localStorage和sessionStorage的存储容量是5Mb (3)与服务端的通信 1、cookie会参与到与服务端的通信中,一般会携带在http请求的头部中。 2、localStorage和sessionStorage是单纯的前端存储,不参与与服务端的通信
(1)indexOf():输出结果为该元素第一次出现的位置,-1为没有出现,没有出现就push添加到新数组 (2)对象属性:创建一个新的对象,用来记录元素的出现次数,没有出来就push添加到新数 (3)ES6中的set方法:set的一个最大的特点就是数据不重复。书写:return […new Set(arr1)]; (4)Array.from与set组合:Array.from方法可以将Set结构转换为数组。书写:return Array.from(new Set(arr1));
(1)原型链继承,通过原型prototype将一个引用类型继承另一个引用类型的属性和方法,缺点,引用类型数据共享 (2)构造函数继承,在子构造函数中利用call()把父类的 this 指向子类,实现继承, (3)组合继承,将原型链和借用构造函数的技术组合在一块,缺点,执行两次父类构造函数 (4)寄生组合继承,通过借用函数来继承属性,通过Object.create(People.prototype)实现继承。 (5)ES6的class继承,子类通过extends实现继承,super 指向父类的原型对象
1、防抖就是将多次触发转为一次触发,去除多余的操作,优化性能,可以用setTimeOut计时器来实现。在输入框中输入数据判断之前有没有数据,如果有就删除clearTimeOut()之前的数据,保留最新的,1秒后没有数据传过来就触发一次。 2、节流就是在一定时间内只能触发一次。也可以用setTimeOut计时器来实现。当数据输入,1秒后就触发一次,触发完就把timerOut判断有无触发的值改为false,等待下一次数据输入。
浅拷贝:就是复制的是引用地址,如果修改复制后的对象,原对象也会跟着改变 深拷贝:就是复制的是对象的值,新建一个引用地址,复制后的对象修改不影响原对象。 浅拷贝的方法: (1)newObejct=oldObject (2)Object.assign(newObejct, OldObject); (3)扩展运算符newObejct={…oldObject} 深拷贝的方法: (1)用for in和递归:for in就是把值循环给新的对象,如果对象值里面有对象的话, 就用递归,把对象里面的值赋值完之后再遍历赋值。 (2)JSON:用JSON.stringift转为JSON字符串,再用JSON.parse转为对象。
首先我们要知道JS是单线程的,因为JS的主要作用是与用户互动以及操作DOM节点, 这就决定了JS只能是单线程的,不可以进行多线程,比如说在一个线程中添加DOM节点内容, 在另一个线程中删除这个节点,这是不可以的,所以JS运行操作是单线程的。 单线程就会导致有很多任务需要排队一个个去执行,如果某个任务执行时间太长,就会出现阻塞。 为了解决这个问题,JS引入了事件循环机制,这个机制也叫做Event Loop(事件循环) 事件循环有两个任务,一个是宏任务,一个是微任务,都是异步请求 关键步骤如下: 1、执行一个宏任务 2、执行过程串如果遇到微任务,就将它添加到微任务的队列中 3、宏任务执行完成之后,立即执行当前所有的微任务 4、当宏任务执行完毕之后,开始检查渲染,渲染完毕之后,JS线程继续接管
首先我们要知道什么是事件流? 事件流就是从页面中接收事件的顺序(Window->Document->Html->Div),就叫事件流。 它有三个阶段:捕获阶段、目标阶段、冒泡阶段 捕获阶段:就是事件响应从最外层的Window开始,逐级向内层前进,直到找到具体的事件目标元素。 目标阶段:就是触发事件的最底层的元素。 冒泡阶段:与捕获阶段正好相反,事件的响应从最底层开始一层一层往外传递到最外层的Window。
什么是箭头函数? ES6中允许使用箭头=>来定义箭头函数,箭头函数省去了function关键字, 函数的参数放在=>前面的括号中,函数体放在{}中,这就叫箭头函数。 区别: 1、箭头函数语法更加简洁清晰 2、箭头函数不会创建自己的this,而是它会捕获外层执行环境的this来继承使用,所以箭头函数的this指向是固定的。 3、call、apply、bind无法改变箭头函数中的this值 4、箭头函数不能作为构造函数使用,因为构造没有自己的this, 所以箭头函数不能作为构造函数使用。否则new会报错。所以箭头函数也没有原型Prototype。
相同点:都可以修改this的上下文指向,都在第一个参数上修改。 不同点: 1、传参不同,call和bind是逐个列举传参,apply是数组传参 2、执行机制不同,call和apply会立即执行函数, bind不会立即执行,bind会得到一个修改this后的新函数,你要调用它才能执行。
async/await 是建立在 Promises上的,不能被使用在普通回调以及节点回调 async/await相对于promise来讲,写法更加优雅 async/await 和 Promises 很像,不阻塞 async/await 代码看起来像同步代码
同步:指发送一个请求,需要等待返回,然后才能够发送下一个请求,有等待过程。 异步:指发送一个请求,不需要等待返回,随时可以再发发下一个请求。 最大的区别就是:同步需要等待,异步不需要等待。 优缺点:同步执行效率比较低,耗时间,但有利于控制流程,避免意外情况。 异步的执行效率高,节省时间,但会占用更多的资源,也不利于我们对进程的掌控。
1、 join,数组转字符串,参数为分割符,原数组不受影响 。arr.join(‘-’); 2、split,字符串转数组,参数为分割符,原数组不受影响。str.split(‘-’); 3、 push,数组尾部添加一或多个元素,arr.push(值)。 4、pop,数组尾部删除一或多个元素,arr.pop(值)。 5、unshift,数组头部添加一或多个元素,arr.unshift(值)。 6、shift,数组头部删除一或多个元素,arr.shift(值)。 7、 reverse,翻转数组。arr.reserse() 8、sort,对数组进行排序。 9、concat,数组的拼接,原数组不受影响。arr1.concat(arr2) 10.、slice,截取出来,原数组不受影响。 arr.slice(start,end) ;从start下标开始截取,一直到end结束,不包括end arr.slice(start) ;从start下标开始截取,一直到最后 arr.slice() ;全部截取相当于复制。 11、splice,删除或增加元素,原数组受影响。 arr.splice(start,deletedCount) 纯删除 arr.splice(start,deletedCount,item) 替换 arr.splice(start,0,item) 纯添加
1、for 2、array.forEach((item, index, array) 3、array.map((item, index, array) 4、for of,遍历值 5、for in,遍历索引
普通函数:谁调用的函数,函数的this就指向谁,不调用就指向全局。 箭头函数:箭头函数没有 this,箭头函数 this 是定义箭头函数时父级作用域的 this,谁定义指向谁 call/apply/bind:可以改变函数内部的this指向,不可以改变箭头函数。 对象调用:当函数作为对象的方法被调用时,this指向该对象
Set 对象可以存储任何类型的数据。值是唯一的,没有重复的值。 Map对象保存键值对,任意值都可以成为它的键或值。
共同点: (1)只能遍历数组 (2)都是循环遍历数组中的每一项 (3)每一次执行匿名函数都支持三个参数,数组中的当前项item,当前项的索引index,原始数组input (4)匿名函数中的this都是指window 区别: forEach没有返回值,map有返回值,可以return出来
1、变量提升:var存在变量提升。let和const没有 2、块级作用域:var没有块级作用域。let和const有 3、重复声明:var可以重复声明。let和const不可以。 4、修改声明变量:var和let可以,const是常量,不能修改。
数组: let [a] =[1] [变量名]:变量名可随意 对象: let {name} = {name} {变量名}:变量名必须是对象中的属性名
vue是一个用于创建用户界面的渐进式的JavaScript框架。 它有三个优点: 1、采用了组件化的模式,实现了 html 的封装和重用,这样提高了代码的利用率,而且维护起来会更加方便。 2、声明式编码,不用再手动操作DOM节点,提高开发效率。 3、采用了虚拟DOM了,尽量复用DOM操作节点,优化性能。
首先我们要知道什么是响应式? 响应式就是视图渲染时使用到了一个数据,当数据更新时,视图就会响应是否更新,这就叫响应式。 Vue的响应式原理的关键是Object.defineProperty 简单来说,Vue通过Object.defineProperty对data的所有属性进行重新定义, 给数据的获取和设置进行一个拦截功能(就是数据劫持),当getter获取数据的时候,就会给当前数据一个依赖收集,当数据setter更新时,就会通知对应的依赖,进行视图更新,这就是Vue的响应式原理。 具体来说,就是vue初始化的时候,会利用initData()函数初化data的所有属性,然后new Observer对数据进行检测,如果数据类型是对象的话,就会调用this.walk()这个方法对对象进行一个依赖收集处理。它的内部会调用defineRective循环对象属性,定义响应式变化,核心就是通过Object.defineProperty来实现的。 如果数据类型是数组的话,我们首先要知道改变数据的7种方法,分别是pop、push、shift、unshift、sort、reverse、splice。当使用其中的一个的时候,就会改变数组内容。 然后来检测数组变化的时候,就采用函数劫持的方法,具体来说就是,重新定义数组的原型方法,通过原型链获取我们定义的原型方法。当数组变化时,就会通知视图更新。如果数组里面有对象的话,就会深度循环遍历,用Observer进行检测。 其实Vue3是可以通过Proxy直接监听对象数组的变化的。
MVC是Model-View-Controller的简写,Model就是模型,对应后端数据,View就是视图对应用户界面,Controller就是控制器,对应页面的业务逻辑。MVC的工作机制原理就是,用户操作会请求服务器路由,路由就会调用对应的控制器来处理,控制器就会获取后台数据,将结果返回给前端,进行页面渲染。 MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版,M和C是一样的,ViewModel的存在目的是抽离Controller中展示的业务逻辑,其它的业务逻辑还是在控制器中,整体和MVC差不多,最大的区别就是MVC是单向的,而MVVM是双向的,并且是自动的,也就是数据发生变化自动同步视图,视图发生变化自动同步数据,第二个是解决了 MVC 中大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。第三个和当数据频繁发生变化,视图是自动更新的,这样开发者就减少了DOM的操作,可以更多的关注业务逻辑。
MVVM即Model-View-ViewModel,Model就是模型,对应Vue实例中的data,View就是视图,对应模板,ViewModel就是Vue实例,它是连接View和Model之间的桥梁。它有两个方向,第一个是Model的数据会挂载到ViewModel中,自动渲染到View视图中。第二个是View视图数据变化时,ViewModel也会通知Model中数据进行更新。实现了一个数据双向绑定的过程。 MVVM的好处就是: 简化了View和Model之间的依赖,实现低耦合性。而且解决了数据频繁更新的问题,不用再用选择器写DOM节点操作,这样我们可以更加专注于数据的变化,提高开发效率。 缺点也很明显,Bug很难被调试: 因为使⽤双向绑定的模式,当你看到界⾯异常了,有可能是你View的代码有Bug,也可能是Model的代码有问题,而且比较占内存。
采用数据劫持结合发布者-订阅者模式的方式来Vue数据双向绑定。 简单来说就是,通过Object.defineProperty对data的所有属性进行重新定义, 给数据的获取和设置进行一个拦截功能(就是数据劫持), 当getter获取数据的时候,就会给当前数据一个依赖收集(就是订阅者Watcher), 当数据setter更新时,就会通知对应的订阅者,进行视图更新 如何视图更新呢?这我们需要一个,compile 解析模板指令,将模板中的变量替换成数据, 绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。 具体就三个步骤 1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。 2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。 3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,根据初始化模板数据。
computed和methods的区别主要有两个 第一个是属性、方法调用。computed是属性调用,在定义函数时以属性的形式调用, methods是方法调用,在定义函数时以方法的形式调用,要加() 第二个是缓存功能,computed是计算属性,是有缓存的,当它的依赖属性改变的时候, 才会进行重新计算,如果数据没有改变,它是不会运行的。 而methods是方法,没有缓存功能,只要你调用一次,不管数据是否改变,它都是执行。 所以,性能方面的比较的话,computed是比methods的性能会好一点,避免重复执行。
computed是计算属性,watch是监听属性。 它们的共同点都是用来监听数据变化白。 它们有三个区别: 1、是否有缓存功能,computed是有缓存的,只有它依赖的属性值改变的时候,它才会进行计算。而watch是没有缓存功能的,只要监听的数据变化了,它就会触发相应的操作。 2、是否支持异步,computed是不支持异步的,当computed内有异步操作的时候,它是监听不到数据变化的。watch是支持异步操作的,适合监听路由和设置计时器等。
vue的生命周期,用一句话来概述就是,一个vue实例从开始创建到销毁的过程,就叫做vue的生命周期 vue的生命周期的关键阶段有8个vue生命周期函数,也叫做生命周期方法/钩子。 可以分为3类: 第一类是创建期间的生命周期函数: 1、beforeCreate:这个时期,已经初始化好了vue实例,但是数据和方法还没有被初始化,还没有够被调用。 2、created:这个时期,vue中的数据和方法已经初始化好了,这是第一个可以调用数据和方法的函数 3、BeforeMoute:这个时期,vue中的数据已经预编译好了,但是还没有渲染到模板中。 4、Mouted:这个时期,数据已经渲染到了模板中,可以获取页面中的数据,这里Vue实例已经创建完成。 第二类是运行期间的生命周期函数: 1、beforeUpdate:这个时期,Vue中的数据改变时,视图还没有更新。 2、Updated:这个时期,视图已经更新完毕。 第三类是销毁期间的生命周期函数: 1、beforeDestroy:这是最后一个可以调用Vue中的数据和方法 2、Destroyed:Vue组件销毁,生命周期结束。
首先我们要知道Vue数据更新是异步操作的,就是数据改变后,视图不会立即更新, 而是Vue会创建一个异步队列,把更新的数据放到队列中,只有当队列中的数据全部更新完成后,才会进行视图更新。而nextTick在视图更新完成之后,就会自动执行,获取DOM内容,删除之前的异步队列,等待下一次数据更新。 nextTick的使用场景:就是数据改变之后你想立即操作节点内容的话,你就可以使用nextTick。 注意:Vue生命周期的created()钩子函数进行DOM操作时一定要放在nextTick()的回调函数中,因为此时模板还没有被渲染,所以此时操作DOM是没有用的,一定到放在nextTick中,等到mounted钩子函数,挂载完DOM之后才使用。 nextTick的原理,就是将传进去的回调函数推入到callbacks队列中, 然后判断pending是否为false,pending表示当前是否有异步任务正在执行, 如果pending为false时,就调用timerFunc函数,执行callbacks队列中的函数, 当timerFunc函数还没有结束时,重复调用nextTick只会触发一次执行。 等到执行完毕后,就会清空之前的异步队列,等待下一次数据更新。
主要有3个区别: 第一个是渲染,v-if不成立的时候是不渲染元素的,而v-show成不成立都会渲染到页面中。 第二个是隐藏显示,v-if切换是动态的向DOM添加或者删除元素,而v-show只是简单的css的display切换 第三个是性能:v-if切换消耗性能高,而v-show初始化渲染消耗性能比较高 使用场景:v-if适合数据变化不大的情况下使用,v-show适合数据需要多次频繁切换
因为v-for比v-if的优先级高,所以每次渲染都会先执行循环再判断条件, 无论如何循环都不可避免浪费了性能。所以要避免出现这种情况, 则在外层嵌套template,进行v-if判断,然后在内部进行v-for循环。 如果v-if出现在v-for内部,可通过computed计算属性提前过滤掉那些不需要显示的项
v-model的本质就是v-bind数据绑定和v-on处理函数绑定的语法糖 在input输入框输入数据时,就会绑定data数据显示出来, 然后当数据改变时,就会绑定处理函数,修改data数据,渲染到页面中,实现双向数据绑定。
组件实例对象data必须为函数,因为如果一个组件有多个实例,这样就会造成多个组件实例对象之间共用一个data, 产生数据污染。而采用函数的形式,initData初始化data时,就会会返回全新data对象 而在Vue根实例创建过程中则不存在该限制,也是因为根实例只能有一个,不需要担心这种情况
vue常用的组件间通信方式有3种,分别是父子传值,兄弟传值还有任意组件传值 第一个是父传子,在父组件的子标签中自定义属性,把数据/方法传给该属性 子组件通过props获取属性,接收父组件传过来的数据/方法,实现父传子。 第二个是子传父,在子组件中通过$emit把数据传给父组件的自定义函数, 然后在父组件中的子标签中绑定方法来获取自定义函数传过来的数据,这就实现了子传父。或者可以通过$refs来获取子组件的数据/方法也可以。 第三个是兄弟传值,就用eventBus,来作为消息传递的对象,兄弟组件引入这个对象,然后在created生命周期函数中通过$on定义事件来获取数据,在methods中通过$emit穿参来修改数据,实现兄弟传值。 最后一个任意组件传值,创建一个事件中心,相当于中转站,可以用来传递事件和接收事件。如果业务逻辑复杂,很多组件之间需要同时处理一些公共的数据,这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ,vuex 的思想就是将这一些公共的数据抽离出来,将它作为一个全局的变量来管理,然后其他组件就可以对这个公共数据进行读写操作, 这样达到了解耦的目的。
$emit
$refs
eventBus
created
$on
Vuex就是实现组件全局状态(数据)管理的一种机制,实现组件之间数据的共享。 首先我们要知道组件之间的通信方法, 一种是父传子,使用属性绑定。一种是子传父,使用事件绑定。 还有一种是兄弟传值,用EvenBus。但是这3种方法只适合小范围的数据共享。 如果我们需要频繁地、大范围地数据共享,那么就要使用Vuex进行数据共享。 它有五个核心属性,分别是State、Getter、Mutation、Action、Module state:存放公共数据的地方; getter:对state值进行加工包装,形成新的数据,不会影响state值; mutations:唯一修改state的方法,修改过程是同步的; action:异步处理,通过分发操作触发mutation中的函数; module:模块化管理store; 它的好处就是: 1、能够在vuex中集中管理共享的数据,易于开发和后期维护。 2、能够高效地实现组件之间的数据共享,提高开发效率。 3、存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步。 适用场景:登录的状态、购物车、收藏的信息等。
组件就是自定义标签,是把页面当中的可以重复使用的内容进行封装,实现代码重用, 提高开发效率和代码质量,以及代码维护起来会更加方便。 如何封装组件? 首先,使用Vue.extend()创建一个组件。然后,使用Vue.component()方法注册组件 接着,如果子组件需要数据,可以在props中接受定义。 最后,子组件修改好数据之后,想把数据传递给父组件,可以使用$emit()方法。
SPA是Single-Page-Application的简写,就是单页面应用。仅在Web页面初始化时加载相应的HTML、CSS和JS。 一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新渲染或者跳转。 取而代之的是,复用路由1机制实现HTML内容的变换,UI与用户的交互,避免页面的重新加载。 优点:用户体验快,不需要改变的内容就不需要重新加载,避免不必要的跳转和渲染。 缺点: (1)初次消耗多,为实现单页面Web应用功能及显示效果, 需要在加载页面的时候,将JS、CSS统一加载,部分页面按需要加载。 (2)SEO难度大,因为所有的内容都在一个页面中动态替换,所以在SEO上有弱势。
keep-alive是一个缓存组件,它的作用就是避免组件内的数据重复渲染,直接在页面中调用。 优点:组件切换的时候,组件被保存到了内存中,防止重复渲染减少加载时间,提高运行效率。 缺点:如果遇到二次路由访问页面,需要使用到路由守卫(before-routerleave),把二级路由保存起来即可。
使用key来给每个节点做一个唯一标识,这样的话,Diff算法就可以正确地识别此节点,可以高效地更新虚拟DOM
vue-router是Vue官网推出的路由管理器,主要用于管理URL,实现URL和组件之间的对应, 以及通过URL进行组件之间的切换,从而使构建SPA单页面应用变得更加简单。 vue-router的原理: 单页面应用SPA的核心思想之一,就是更新视图而不重新页面,简单来说,它在加载页面时, 不会再加载整个页面,而只是更新某个指定的容器中的内容。 对于大多数单页面应用,都推荐使用vue-router。
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用), 需要引入前端路由系统,这也就是 Vue-Router 存在的意义。 前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。 Hash模式: 即地址栏 URL 中的 # 符号,hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中, 对后端完全没有影响,因此改变 hash 不会重新加载页面。 History模式:history利用ES6中新增添的pushState()和replaceState()方法,它们提供了对历史记录修改的功能。 虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。 因此可以说,hash模式和history模式都属于浏览器自身的属性,vue-router只是利用了这两个特性来实现路由。 区别在于: (1)hash带#号,比较丑。history带#号 (2)hash不会请求后端。但history就要去请求服务器。而且服务器没有相应的响应或者资源,则会刷新出来404页面。
vue-router有3种导航钩子 第一种是全局导航钩子:router.beforeEach((to, from, next) 第二种是组件内导航钩子,分别是beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave, 他们是直接在路由组件内部直接进行定义的 第三种是单独路由独享组件: 即单个路由独享的导航钩子,它是在路由配置上直接进行定义的beforeEnter: (to, from ,next)
我们可以通过params和query两种方式获取动态参数 第一种params的类型,通过/router/:参数名,传参,用$route.params.参数名,来获取 第一种query的类型,通过/router?参数名=123,传参,用$route.query.参数名,来获取
$route.params.参数名
$route.query.参数名
$router
$route
1.$router是VueRouter的实例方法,可以认为是全局的路由对象,包含了所有路由的对象和属性。 2.$route是一个跳转的路由对象,可以认为是当前组件的路由管理,指当前激活的路由对象, 包含当前url解析得到的数据,可以从对象里获取一些数据。如name,path等。
.$router
图片资源懒加载、路由懒加载、第三方插件的按需引入
使用Proxy替换Object.defineProperty,重构响应式系统,使用Proxy优势: 1、可直接监听数组类型的数据变化 2、监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升 3、可拦截apply、ownKeys、has等13种方法,而Object.defineProperty不行 4、直接实现对象属性的新增/删除
1、使用this.$set()方法重置属性 2、数据修改后调用this.$forceUpdate()强制更新视图
this.$set()
this.$forceUpdate()
v-if :判断是否隐藏 v-for:数据循环 v-bind:class:绑定一个属性 v-model:实现数据双向绑定 v-show:判断隐藏显示
获取dom节点可以用ref属性,这个属性就是来获取dom对象的,this.$refs.属性名
this.$refs.属性名
虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象状态变更时,记录新树和旧树的差异 最后把差异更新到真正的dom中。 优点:虚拟DOM具有批处理和高效的Diff算法,最终表现在DOM上的修改只是变更的部分,可以保证非常高效的渲染,优化性能。 缺点:首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢。
diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方, 最后用patch记录的消息去局部更新Dom。 Diff算法步骤: (1)用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文 档当中 (2)当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff),记录两棵树差异 (3)把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch),视图就更新了
全家桶,顾名思义,对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架。 (1)vue-cli,脚手架,Vue.js 开发的标准工具。 (2)vueRoute,路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。 (3)vuex,应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 (4)Axios,基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
(1).stop 阻止事件继续传播 (2).prevent 阻止标签默认行为 (3).capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 (4).self 只当在 event.target 是当前元素自身时触发处理函数 (5).once 事件将只会触发一次 (6).passive 告诉浏览器你不想阻止事件的默认行为 详情:https://blog.csdn.net/weixin_43638968/article/details/108635864
(1)vue2 和vue3双向数据绑定原理不同: vue2的数据绑定是利用Object.definePropet()对数据进行劫持 结合 发布订阅模式实现 vue3利用Proxy API对数据代理实现 defineProperty只能监听某个属性,ProxyAPI可以进行全局监听。 两者区别: proxy可以监听数组,不用单独对数组进行异性操作,可以检测到数组内部的变化 proxy可以直接绑定整个对象,省去for in 闭包等内容来提升效率 (2) vue3默认进行懒观察 vue2.0中数据一开始就创建了观察者,数据很大的时候,就会出现问题, vue3中进行了优化 只有用于渲染初始化可见部分的数据,才会创建观察者,效率更高。 (3)更精准的变更通知 2.x 版本中,你使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行; 3.x 版本中,只有依赖那个属性的 watcher 才会重新运行
用自己想用或者能用的功能特性,不想用的部分功能可以先不用。
axios它是基于promise的http库,可运行在浏览器端和node.js中 a作用:用于向后台发起请求的,还有在请求中做更多是可控功能。 步骤: 1、安装axios:npm install axios 2、在App.vue中引入axios:import axios from ‘axios’ 3、修改为 Vue 的原型属性,Vue.prototype.$axios = axios 核心对象:XMLHttpRequest ajax的原理: 由客户端请求ajax引擎,再由ajax引擎请求服务器, 服务器作出一系列响应之后返回给ajax引擎, 由ajax引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。 ajax请求的五个步骤: 1、创建XMLHttpRequest异步对象 2、设置回调函数 3、使用open方法与服务器建立连接 4、向服务器发送数据 5、在回调函数中针对不同的响应状态进行处理
Ajax是对原生XHR的封装,为了达到我们跨越的目的,增添了对JsonP的支持。 异步的javascript和xml,ajax不是一门新技术,而是多种技术的组合, 用于快速的创建动态页面,能够实现无刷新更新数据从而提高用户体验。 Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中;是请求资源的模块;通过promise对ajax的封装。 axios和ajax的区别: axios是通过Promise实现对ajax技术的一种封装,就像jquery对ajax的封装一样。 简单来说就是ajax技术实现了局部数据的刷新,axios实现了对ajax的封装, axios有的ajax都有,ajax有的axios不一定有。 总结一句话就是axios是ajax,ajax不止axios。
1、new Vue的时候调用会调用_init方法 2、调用$mount进行页面的挂载 3、挂载的时候主要是通过mountComponent方法 4、定义updateComponent更新函数 5、执行render生成虚拟DOM 6、_update将虚拟DOM生成真实DOM结构,并且渲染到页面中
HTTP是HyperText-Transfer-Protocol的简写,就是超文本传输协议。 主要作用就是,它规定了只能由客户端主动发起请求,服务器接收请求处理后返回响应结果。 同时HTTP是一种无状态的协议,所以协议本身是不记录客户端的历史请求记录。
浏览器从一个域名的网页去请求另一个域名的资源时, 协议、域名、端口任一个不同,都是跨域。 协议、域名、端口都相同叫同源策略,为了防止别人恶意访问。 如何解决跨域问题? 1、jsonp跨域 将返回数据以资源的方式放在标签里面返回,由于返回的不是JSON数据,就没有跨域的限制了, 类似对页面添加的js引用,这样就解决了跨域的问题。 2、cors 放开服务端跨域限制,通过添加response的header的方法。header(‘Access-Control-Allow-Origin:*’); 3、代理 将请求资源的操作通过一层代理,然后取回数据,再从代理层把数据返给浏览器, 由于代理层和浏览器是同源的,这样就解决了跨域的问题。
1、get请求的参数数据放在URL中,post请求的参数放在body中,看不到,所以post比get安全。 2、get请求一般用来获取服务器资源,比如查询用户信息。post请求一般与服务器交互相关相关的,比如添加删除。 3、get请求可以缓存在浏览器中,post请求不能缓存。
200 : 成功,表示访问成功,正常状态。 301 : 永久移动,表示本网页已经永久性的移动到一个新的地址,在客户端自动将请求地址改为服务器返回的新地址。 302 : 临时重定向,表示网页暂时性的转移到一的新的地址,客户端在以后可以继续向本地址发起请求。 303 : 表示必须临时重定向,并且必须使用GET方式请求。 304 : 重定向至浏览器本身,当浏览器多次发起同一请求,且内容未更改时,使用浏览器缓存,这样可以减少网络开销。 401 : 表示协议格式出错,可能是此IP地址被禁止访问该资源,与403类似。 403 : 表示没有权限,服务器拒绝访问请求。 404 : 这是最常见的错误,表示找不到系统资源,但是只是暂时性地。 500 : 表示服务器程序错误,一个通用的错误信息。
实现懒加载的关键就是,在图片没有进入可视区域时,先不给的src赋值, 这样浏览器就不会发送请求了,等到图片进入可视区域再给src赋值。 实现懒加载有四个步骤,如下: 1.加载loading图片,src=“loading.gif”,src先为空 2.判断哪些图片要加载 3.隐形加载图片 4.替换真图片,data-src=“4.jpg”,存放真的图片路径