![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
面试题
AAA_86
这个作者很懒,什么都没留下…
展开
-
web安全及防护(XSS、CSRF、sql注入)
个人理解:web安全防护分为三种XSSCSRFSQL注入XSSXSS攻击原理: 说的是攻击者往web页面插入恶意的html标签或者js代码 然后获取用户的私密信息 这时候我会对用户输入的地方做出相对应的过滤 比如<> ,等CSRFCSRF攻击原理: 跨站请求伪造 是一种常见的web攻击 攻击者发送个A超链接 然后用户点进去到A超链接的页面中 A页面会获取到用户存到本地的个人信息 比如说验证码 在程序和用户交互过程中 账户交易这种核心步骤 强制用户输入验原创 2020-11-02 10:22:56 · 291 阅读 · 1 评论 -
前端JS面试题简约版
1. javascript原型与原型链:原型:js中每一个函数都有一个proto属性,而且对应的是自身的原型,被称为隐式原型函数中除了proto属性之外还有一个prototype属性,被称为显示原型原型链:当一个对象调用自身不存在的属性和方法时就会去自己的proto的前辈prototype对象上去找,如果没找到就会去prototype的前辈上去找 直到找到或者返回undefiend 这个查找的过程就是原型链最顶层的原型对象:object.prototypeobject.protot原创 2020-11-01 21:56:45 · 560 阅读 · 0 评论 -
ES6箭头函数
箭头函数是匿名函数,不能作为构造函数,不能使用new 箭头函数没有原型属性 箭头函数中的this 指向父级上下文原创 2020-10-27 14:53:05 · 76 阅读 · 0 评论 -
vue Router
下面的内容自己理解 简约的不能再简约vue router有两种模式:Hash:Hash:在url中多个#号history:在url中是/new VueRouter 设置路由模式Hash里面还有 HashHistory 它里面有 两个方法 push、replace。HashHistory.push() : 将新路由添加到浏览器访问历史中。HashHistory.replace():跟push的区别就是 push是把路由添加到浏览器访问历史中 replace原创 2020-10-27 14:38:12 · 83 阅读 · 0 评论 -
项目混合开发到打包优化的流程
个人理解:1. 项目用的混合开发:混合开发说白了就是-----网页端调用安卓的原生接口或者功能 安卓原生调用网页的功能 网页端调用安卓用addJavaScriptInterface方法把安卓暴露给页面 页面通过add 还有showToast两种方法调用 方法前面是本地方法类的名称 这样就能嵌套进去 安卓调用网页的话就简单了 直接使用webview里的loadURl (JavaScript+网页方法名) 但是方法一多 就乱了 所以还得创建一个专门管理类的点 就是nati原创 2020-10-27 10:53:36 · 268 阅读 · 1 评论 -
vue打包优化及项目上线流程(简洁版)
一.打包优化:1. 去除生产环境sourceMapsourceMap文件,存的是打包前后的代码,方便开发使用 。 这个文件也占用不少部分空间module.exports = { // 根据你的实际情况更改这里 publicPath, assetsDir: 'assets', lintOnSave: true, productionSourceMap: false,}2. 对资源文件进行压缩需要下载 compression-webpack-plugin 插件cnp原创 2020-10-24 14:49:51 · 397 阅读 · 0 评论 -
浏览器兼容性解决方案
什么是浏览器兼容性?不同浏览器的内核不一定相同,所以每个浏览器对网页的解析也有一定的差异浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎浏览器兼容性问题一般指:css兼容、js兼容css兼容:不同浏览器的标签默认的margin和padding不同1.可以用CSS里 *{margin:0;padding:0;}但是性能不好2. 一般我们用引入reset.css样式进行重置1. CSS新属性兼容问题:css3新属性需要加浏览器前缀 ,然后兼容早期浏览器-moz----- 火原创 2020-10-22 22:38:37 · 444 阅读 · 0 评论 -
JS事件委托简洁版
概念:事件委托说白了就是利用事件冒泡,指定一个事件处理程序,可以管理某一类型的所有事件。当然,如果子元素阻止了事件冒泡,那么委托也就没法实现了。好处:可以大量节省内存占用,减少事件注册,比如在ul上代理所有li的click事件就非常棒例子:<ul id="myLinks"> <li id="goSomewhere">Go somewhere</li> <li id="doSomething">Do something</li>原创 2020-10-22 21:41:52 · 102 阅读 · 0 评论 -
前端html面试题简约版
1. 盒模型:盒模型可以说是装内容的容器,这个容器由 内容----外边距----内边距----边框组成。盒模型又分为两种:标准盒模型(W3C标准的盒子模型)标准盒模型在页面中的总宽度是由= width +margin+padding+border组成怪异盒模型(IE浏览器)怪异盒模型在页面中的总宽度是由=width+margin组成 (因为在IE浏览器 width里面已经包含了padding、border)标准盒模型与怪异盒模型的转换:box-sizing:conten原创 2020-10-21 21:57:26 · 378 阅读 · 0 评论 -
清除浮动
前端清除浮动为什么要清除浮动?浮动元素会脱离文档流,导致父元素塌陷;举个例子:一个橡皮筋绑了10根筷子,此时橡皮筋就被撑开;当把筷子从橡皮筋中拿出来时,橡皮筋就变回原样。这样当话,父元素中如果有背景图片或是其他样式,就会受到影响。清除浮动的方法:1.结尾处加空div标签 clear:both:<div class="div1"> <div class="left">Left</div> <div class="right">Right原创 2020-08-30 21:23:55 · 95 阅读 · 0 评论 -
CSS Hack
什么是CSS Hack?一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。CSS Hack常见的有三种形式:属性Hack、选择符Hack、条件注释Hack, Hack主要针对IE浏览器例如:1、条件Hack<!--[if IE]> <p>你在非IE中将看不到我的身影</p><![endif]--><!--[if IE]><style> .test{color:red;}</原创 2020-10-19 09:36:11 · 122 阅读 · 1 评论 -
vue-cli4打包优化
一、去除生产环境sourceMapsourceMap资源映射文件,存的是打包前后的代码位置,方便开发使用,这个占用相当一部分空间module.exports = { // 根据你的实际情况更改这里 publicPath, assetsDir: 'assets', lintOnSave: true, productionSourceMap: false,}12345678二、对资源文件进行压缩需要下载 compression-webpack-plugincnpm i co原创 2020-10-15 20:29:14 · 985 阅读 · 3 评论 -
vue项目优化
一、代码优化1. 使用keep-alive缓存不活动的组件keep-alive是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。在动态组件中的应用<keep-alive :include="whiteList" :exclude="blackList" :max="amount"> <component :is="currentComponent"></原创 2020-10-15 20:27:35 · 111 阅读 · 0 评论 -
methods computed watch的区别
computed:computed 计算属性 计算结果会缓存,只有当依赖值改变才会重新计算应用场景(购物车计算价格的时候)watch:watch 监听属性 一个值的改变 需要另一个值的改变而改变,结果不会缓存应用场景(搜索数据)methods:methods 事件方法 调用一次,执行一次,结果不会缓存computed 和 watch 都可以观察页面的数据变化。当处理页面的数据变化时,我们有时候很容易滥用watch。 而通常更好的办法是使用computed属性...原创 2020-10-14 10:06:44 · 110 阅读 · 0 评论 -
简述href 与 src 的区别
href:href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。src:src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部...原创 2020-10-14 09:01:41 · 85 阅读 · 0 评论 -
作用域
作用域(定义)变量作用域:就是一个变量可以使用的范围。作用域 (种类)js中首先有一个最外层的作用域,全局作用域;js中可以通过函数来创建一个独立作用域称为函数作用域,函数可以嵌套,所以作用域也可以嵌套;es6中新增了块级作用域(大括号,比如:if{},for(){},while(){}…);如下图所示:es6作用域,只适用于const,let自由变量自由变量的概念: 当前作用域没有定义的变量作用域链自由变量的向上级作用域一层一层查找,直到找到为止,最高找到全原创 2020-10-11 19:04:51 · 152 阅读 · 0 评论 -
vue组件中data为什么必须是函数
下面的属于自己的理解 适合小白因为组件是复用的 如果我第一个组件是以对象的形式调用公共组件的话 当我第二个组件还想调用这个公共组件 这时 这两个组件的内容会一致 但是我不想要这种结果 所以必须得是函数...原创 2020-10-09 16:52:43 · 186 阅读 · 2 评论 -
微信小程序api封装
1.目录结构在根目录下创建http目录及api.js文件fetch.js以及http.js文件;在根目录下创建env目录,创建index.js配置并导出多个开发环境module.exports={ //开发环境 Dev:{ "BaseUrl":"https://www.develep.com" }, //测试环境 Test:{ "BaseUrl":"https://www.test.com" }, //生产环境 Prod:{ "BaseUrl原创 2020-10-09 15:16:10 · 267 阅读 · 1 评论 -
浅谈javascript原型与原型链
原型:js规定每一个函数都有一个proto属性,而且对应的是自身的原型 是一个隐式原型每个函数都有一个prototype属性,被称为显示原型原型链:当一个对象调用自身不存在的属性和方法时就会去自己的proto的前辈prototype对象上去找,如果没找到就会去prototype的前辈上去找 直到找到或者返回undefiend 这个查找的过程就是原型链最顶层的原型对象:object.prototypeobject.prototype最常用的两种方法(tostring 、valueof)..原创 2020-10-09 14:35:28 · 93 阅读 · 0 评论 -
浅谈JS中的Promise
名词约定:promise(首字母小写)对象指的是Promise实例对象Promise首字母大写且单数形式,表示Promise构造函数Promises首字母大写且复数形式,用于指代Promises规范promise是什么?Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,promise 是一个对象,从它可以获取异步操作的的最终状态(成功或失败)Promise是一个构造函数,对外提供统一的 API,自己身上有all、reject、re原创 2020-10-09 11:29:44 · 609 阅读 · 0 评论 -
浅谈JS闭包
闭包怎么产生的:当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数的内部变量,且在外部被执行,就产生了闭包闭包的三大特性:函数套函数内部函数可以直接访问外部函数的参数或变量变量不会被垃圾回收机制回收 (垃圾回收机制的算法称为标记 清除,除标记的对象或引用外全部清除)闭包的优点和缺点:优点:变量长期驻扎在内存中避免全局变量的污染私有成员的存在缺点:增大内存使用量可能造成内存泄漏解决方法是,在退出函数之前,将不使用的局部变量全部删除...原创 2020-10-09 09:48:51 · 136 阅读 · 0 评论 -
vue 组件父子,子父,兄弟通信
父传子:在父组件中给子组件标签上绑 定一个属性, 属性上挂载需要传递的值在子组件通过props:[“自定义属性名”]来接收数据子传父:(1) 在父组件中给子组件绑定一个自定义事件,给这个事件挂载需要调用的方法(2) 在子组件的方法通过this.$emit(‘自定义事件名’)来调用这个方法兄弟传值:(1)创建一个空的vue实例USB(2)通过USB.emit(‘事件名’)传到空的vue实例中(3)通过USB.emit(‘事件名’)传到空的vue实例中(3) 通过USB.emit(‘事件名’原创 2020-10-08 09:14:37 · 186 阅读 · 0 评论 -
宏任务and微任务
先看一到题写出console.log的输出顺序console.log(100);setTimeout(()=>{ console.log(200);})setTimeout(()=>{ console.log(201);})Promise.resolve().then(()=>{ console.log(300);})console.log(400);// 100 400 300 200 201// 为什么300比200先打原创 2020-10-06 22:33:09 · 117 阅读 · 0 评论 -
图片懒加载
什么是图片懒加载?当打开一个有很多图片的页面时,先只加载页面上可视区域的图片,等滚动到页面下面时,再加载所需的图片。这就是图片懒加载。图片懒加载的作用减少或延迟请求数,缓解浏览器的压力,增强用户体验。图片懒加载的基本原理1、设置图片src属性为同一张图片,同时自定义一个data-src属性来存储图片的真实地址2、 页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中3、 当图片在视野中时,通过js自动改变该区域的图片的src属性为真实地址1.document.documentEl原创 2020-10-05 22:05:21 · 71 阅读 · 0 评论 -
小程序中的生命周期
1,应用生命周期App:App()函数用来注册一个小程序。接受一个object参数,其指定小程序的生命周期函数等。**关于小程序的退出:**当用户点击小程序左上角关闭,或者按设备Home键离开微信,小程序并没有直接销毁,而是触发onHide方法进入了后台,短时间内当再次进入微信或者再次打开小程序,小程序会从后台状态进入前台,此为“热启动”。注意当小程序进入后台状态一定时间后,或者系统资源占用过高,微信会真正销毁小程序。用户第一次进入小程序或者在小程序销毁后再次进入小程序是为“冷启动”。**小程序的转载 2020-10-05 22:03:08 · 432 阅读 · 0 评论 -
Vue2与Vue3的区别
参考文档:Vue2和Vue3开发组件有什么区别vue2和vue3双向数据绑定的区别总结:1. vue2和vue3双向数据绑定原理发生了改变vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。vue3 中使用了 es6 的 ProxyAPI 对数据代理。相比于vue2.x,使用proxy的优势如下defineProperty只能监听某个属性,不能对全对象监听可以省去for in、闭包等内容来提原创 2020-09-28 22:14:42 · 13890 阅读 · 0 评论 -
Vue.js中this.$nextTick()
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。案例一:<template> <section> <div ref="hello"> <h1>Hello World ~</h1> </div> <el-but.原创 2020-09-28 22:13:23 · 139 阅读 · 0 评论 -
MVVM和MVC
mvvm概念:MVVM是 Model-View-ViewModel 的缩写,分别对应着:数据,视图,视图模型。Model是我们应用中的数据模型,View是我们的UI视图层,通过ViewModle,可以把我们Modle中的数据映射到View视图上,同时,在View层修改了一些数据,也会反应更新我们的Modle。简单理解就是双向数据绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。以vue为例:view 对应 template,vm 对应 new Vue({…})原创 2020-09-27 22:03:06 · 99 阅读 · 0 评论 -
放大镜
分析难点列出1.鼠标在图片区域时,透明小区域出现,放大的区域出现2.鼠标移出图片时,透明小区域小时,放大区域消失3.透明小区域随着鼠标移动难点解决关键(对应解决回答)1.通过鼠标onmourseover监听鼠标的略过图片,改变透明小区域和放大区域的display,置为block2.通过鼠标onmourseover监听鼠标的略过图片,改变透明小区域和放大区域的display,置为none3.通过event对象获取鼠标的当前坐标位置,即方法event.layerX,event.layer.Y,原创 2020-09-23 08:08:00 · 121 阅读 · 0 评论 -
Vue中的provide和inject(依赖注入)
一、名词解析:provide:Object | () => Object``inject:Array<string> | { [key: string]: string | Symbol | Object }provide:提供依赖``是一个对象,或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西,也就是属性和属性值。inject: 注入依赖一个字符串数组,或者是一个对象。属性值可以是一个对象,包含from和default默认值。说明:provide 和 inject原创 2020-09-22 22:07:37 · 276 阅读 · 0 评论 -
Vue 自定义指令
背景除了核心功能默认内置的指令 (如v-model 和 v-show等),Vue 也允许注册自定义指令。有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。如何自定义指令1.创建局部指令var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 dir1: { inserted(e原创 2020-09-22 08:24:25 · 100 阅读 · 0 评论 -
Vue自定义过滤器
过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种:局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })1234567var a.原创 2020-09-20 22:22:50 · 285 阅读 · 0 评论 -
Vue自定义指令背景
使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令但是,对于大幅度的 DOM 变动,还是应该使用组件常用案例1、 输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-focus&原创 2020-09-18 22:11:43 · 273 阅读 · 0 评论 -
Vue 虚拟Dom 和 Diff算法原理
vue的虚拟DOM和diff算法,是Vue面试的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念:用js来模拟DOM中的节点。传说中的虚拟DOM。是不是一下子秒懂 没懂再来一张Virtual Dom就先这样,理解了就OK,下面我们了解一下Diff,老规矩先来一句概念:diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。换句话来说diff的过程就是调用名为patch的函数,比较新旧节点原创 2020-09-18 22:10:36 · 196 阅读 · 0 评论 -
Vue之filter
过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种:局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })1234567var a.原创 2020-09-18 22:06:09 · 145 阅读 · 0 评论 -
Vue事件修饰符
一、事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件原创 2020-09-17 22:17:42 · 10413 阅读 · 0 评论 -
vue组件封装
我用vue开发的所有项目,都是采用组件化的思想开发的。一般我在搭建项目的时候,会创建一个views目录和一个commen目录和一个feature目录,views目录中放页面级的组件,commen中放公共组件(如:head(公共头组件),foot(公共底部组件)等),feature目录内放功能组件(如:swiper(轮播功能组件),tabbar(切换功能组件)、list(上拉加载更多功能组件))首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、原创 2020-09-17 22:13:21 · 77 阅读 · 0 评论 -
Vue中双向数据绑定
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。具体步骤:第一步: 需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化第二步: compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每原创 2020-09-16 22:13:04 · 330 阅读 · 0 评论 -
Vue中常用指令
v-model 多用于表单元素实现双向数据绑定v-for 格式: v-for="(item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容 同上v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false)v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误..原创 2020-09-17 08:21:56 · 83 阅读 · 0 评论 -
VUE的生命周期和方法
vue生命周期可以分为八个:beforeCreate(创建前)created(创建后)beforeMount(载入前)mounted(载入后)beforeUpdate(更新前)updated(更新后)beforeDestroy(销毁前)destroyed(销毁后)1,创建前(beforeCreate)对应的钩子函数为beforeCreate。实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性2,创建后(created)对应的钩子函数为原创 2020-09-15 22:35:04 · 2126 阅读 · 0 评论