longzorg_cn的博客

大家都知道我们在前端学习的时候都接触过img标签，这个是前端开发常用标签，我们在前端培训班学习的时候经常会遇到加背景图片出现显示不全或者是留白的问题，接下来我们就简单分析一下前端培训学习中常遇到的图片问题。其实，从英文的意思来说：cover意味着“遮罩、遮盖”—此处理解为“填满”较恰当，contain意为“包含”–也就是：我图片虽然缩放了，但是整个图是被“包含”在你里面的，显示是必须完整的、不能有一点隐藏。contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；

如果你需要订制自己的 task ，可以参考文档。不过，自己定义的 task 只是在本项目中使用。对于前端开发者来说，经常使用的命令可以添加到 package.json 中。接下来，我们可以通过 task 来执行某个 npm 脚本了。当我们需要运行命令的时候，需要调出命令行工具，然后再执行某个命令操作。但是有了tasks之后，我们可以直接在编辑器中运行。关于Emmet，我们已经很熟悉了，vscode中内置的，这里就不多阐述了。，输入vue，选择代码片段文件为 vue.json。为什么要用tasks?

比如你在 Promise 中，在不主动 catch 的情况下，如果使用 throw new Error() 或者 reject(‘error’)，都会变成 Uncaught (in promise) Error 而不会被 window.onerror 捕获。在 Promise 中发生的未捕获异常不会被 window.onerror 捕获，如果你的页面使用了 前端异常监控平台 这样的东西，会导致无法自动收集未捕获的 Promise 异常。Promise捕获异常这里有两种方式。

如果你需要订制自己的 task ，可以参考文档。不过，自己定义的 task 只是在本项目中使用。对于前端开发者来说，经常使用的命令可以添加到 package.json 中。接下来，我们可以通过 task 来执行某个 npm 脚本了。当我们需要运行命令的时候，需要调出命令行工具，然后再执行某个命令操作。但是有了tasks之后，我们可以直接在编辑器中运行。关于Emmet，我们已经很熟悉了，vscode中内置的，这里就不多阐述了。，输入vue，选择代码片段文件为 vue.json。为什么要用tasks?

用{}包含起来, 其元素必须由key-value组成, key是一个字符串, value可以是任意类型数据, key与value之间用:号隔开, 两个key-value之间用,号隔开.(DOM对象) 2.3. jquery中(DOM对象)2.3.jquery中.get()提交和$.post()提交的区别？.get() 方法使用GET方式提交请求,而.get()方法使用GET方式提交请求,而.post()使用POST方式。3.ajax的原则是“按需取数据”，最大程度的减少冗余请求，减少服务器的负荷。

在我们日常的书写代码中,经常使用到float:left/right和position:absoulte/fixed,我们都知道这几个CSS样式都能使HTML中的元素脱离文档流(normal-flow),但是他们脱离文档流之后的效果是否相同呢?文档流与文本流文本流文本流,简单来说就是元素内部的一系列的字符的排列规则。文档流文档流,英文是normal flow,又翻译为常规流,标准流,正常流,普通流等。

所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。· 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。

alternate-reverse动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。alternate动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。animation-direction 属性定义是否停止播放动画。注意：如果把动画设置为只播放一次，则该属性没有效果。initial设置该属性为它的默认值。学习更多技术知识相关内容欢迎关注小编！normal默认值。inherit从父元素继承该属性。reverse动画反向播放。**CSS 语法**

但是由于我自己的需求，想往返回的对象里面添加一个字段，于是我用push一个字段进去,添加是添加进去了，但是页面渲染却没有变化。后来才意识到不是响应式的。this.$set( target, key, value ) target：表示数据源，即是你要操作的数组或者对象，key：要操作的的字段，value：更改的数据。当技术中vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。我们能看见添加的数据是响应式的。

例：将下面数组去除重复元素（以多种数据类型为例）Set对象：是值的集合，你可以按照插入的顺序迭代它的元素。Set中的元素只会出现一次，即Set中的元素是唯一的。Array.from() 方法：对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。注意：以上去方式对NaN和undefined类型去重也是有效的，是因为NaN和undefined都可以被存储在Set中， NaN之间被视为相同的值（尽管在js中：NaN!== NaN）。

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。vue-router是vuex.js官方的路由管理器，它和vue.js的核心深度集成，让构建但页面应用变得易如反掌。组件支持用户在具有路由功能的应用中 (点击) 导航。组件是一个 functional 组件，渲染路径匹配到的视图组件。介绍了路由守卫及用法，在项目中路由守卫起到的作用等等。to: Route: 即将要进入的目标 路由对象。from: Route: 当前导航正要离开的路由。

当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。Zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。了解更多web前端技术内容欢迎关注小编！

更关键的一点是，因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，同时点击后退时，页面字体颜色也会发生变化。主要使用HTML5的pushState()和replaceState()这两个api来实现的,pushState()可以改变url地址且不会发送请求,replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改。这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。选择使用类的一些原因：1.语法更简单，更不容易出错。2. 使用新语法比使用旧语法更容易(而且更不易出错)地设置继承层次结构。3.class 可以避免构造函数中使用new的常见错误（如果构造函数不是有效的对象，则使构造函数抛出异常）。4.用新语法调用父原型方法的版本比旧语法要简单得多，

WEB基本攻击大致可以分为三大类—— “资源枚举”、“参数操纵” 和 “其它攻击”资源枚举：遍历站点所有可访问的目录，然后把一些常见的备胎文件名（比如“sql.bak”、“index-副本.html”）一个个都枚举一下，如果运气好枚举到了就直接下载。参数操纵：包括了SQL注入、XPath注入、cgi命令执行，还有XXS和会话劫持等，xxs攻击指的是恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入的恶意html代码会被执行，从而达到恶意用户的特殊目的cookie劫持：通过获取页面的

1.如果咱们想要确保对象被深冻结，就必须创建一个递归函数来冻结对象类型的每个属性：2.没有深冻结> let person = {> name: "Leonardo",> profession: {> name: "developer"> } }; Object.freeze(person); person.profession.name = "doctor"; console.log(person); //output { name: 'Leonardo',

我一直在寻找有关jQuery性能优化方面的小窍门，能让我那臃肿的动态网页应用变得轻便些。找了很多文章后，我决定将最好最常用的一些优化性能的建议列出来一、选择器性能优化建议1.总是从#id选择器来继承这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了。2.在class前面使用tagjQuery中第二快的选择器就是tag选择器（如$(‘head’)），因为它和直接来自于原生的Javascript方法getElementByTagName()。所以最好总是用tag来修饰

随着互联网的不断发展，越来越多的人都在学习计算机编程开发技术，而今天我们就通过案例分析来了解一下，HTTP的几种请求方法用途。1、GET方法发送一个请求来取得服务器上的某一资源2、POST方法向URL指定的资源提交数据或附加新的数据3、PUT方法跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有4、HEAD方法只请求页面的首部5、DELETE方法删除服务器上的某资源6、OPTIONS方法它用于获取当前URL所支持的方法。如果请求成功，会有一个Al

出色的DOM操作的封装：jQuery封装了大量常用DOM操作，使你编写DOM操作相关程序的时候能够得心应手，优雅的完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。从上面的介绍可以看出 jquery的优点很多，当然任何一个框架都不是完美的，jQuery也有自身的缺陷，下面就罗列下jQuery的缺点和劣势。丰富的插件：基于jQuery开发的插件种类很多，能解决大部分问题，前端工程师还可以根据项目需要自行封装不同需求的插件。轻量级，最新的版本压缩的jquery代码只有十几k。

当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。了解更多前端课相关技术知识欢迎关注小编！

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。> router.beforeEach((to, from, next) => { console.log(to) => //到哪个页面去？> 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例 next(vm => {}) }vue中路由守卫一共有三种，一个全局路由守卫，一个是组件内路由守卫，一个是router独享守卫。

因为 只要刷新 这个url（www.ff.ff/jjkj/fdfd/fdf/fd）就会请求服务器，然而服务器上根本没有这个资源，所以就会报404，解决方案就 配置一下服务器端。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；HTML5推出的history API，由pushState()记录操作历史，监听popstate事件来监听到状态变更；vue-router 有 3 种路由模式：hash、history、abstract。了解学习更多web前端先技术知识欢迎关注小编专栏！

⼀旦⻚⾯加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。1）首屏（初次）加载慢：为实现单页面 Web 应用功能及显示效果，需要在加载资源的时候将JavaScript、CSS 统一加载，部分页面按需加载；2）不利于 SEO：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。1）用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；

两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。keep-alive 主要是组件缓存，采用的是LRU算法。vnode.data.keepAlive = true // 标记走了缓存。常用的两个属性include/exclude，允许组件有条件的进行缓存。if(cache[key]) { // 通过key 找到缓存，获取实例。abstract: true, // 抽象组件。了解更多前端面试相关问题欢迎关注小编技术专栏！

数组考虑性能原因没有用defineProperty对数组的每一项进行拦截，而是选择重写数组 方法以进行重写。当数组调用到这 7 个方法的时候，执行 ob.dep.notify() 进行派发通知 Watcher 更新；需要通过以下7种变异方法修改数组才会触发数组对应的wacther进行更新。重写数组方法：push/pop/shift/unshift/splice/reverse/sort。ob.dep.notify() // 调用方法时更新视图；// 取出原型方法；// 拷贝原型方法；// 重写数组方法；

相对定位方式，相对于其父级元素（无论父级元素此时为何种定位方式）进行定位，准确地说是相对于其父级元素所剩余的未被占用的空间进行定位（在父元素由多个相对定位的子元素时可以看出），且会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。注意：当元素设置为绝对定位时，在没有指定top，bottom，left，right的值时，他们的值并不是0，这几个值是有默认值的，默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。

如何将template转换成render函数(这里要注意的是我们在开发时尽量不要使用template，因为将template转化成render方法需要在运行时进行编译操作会有性能损耗，同时引用带有complier包的vue体积也会变大) 默认.vue文件中的 template处理是通过vue-loader 来进行处理的并不是通过运行时的编译。const ast = parse(template.trim(), options) // 将代码解析成ast语法树。欢迎大家关注小编前端专栏学习更多技术知识！

⼀旦⻚⾯加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。1）首屏（初次）加载慢：为实现单页面 Web 应用功能及显示效果，需要在加载资源的时候将JavaScript、CSS 统一加载，部分页面按需加载；2）不利于 SEO：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。1）用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；

为什么$set可以触发更新，我们给对象和数组本身都增加了dep属性，当给对象新增不存在的属性则触发对象依赖的watcher去更新，当修改数组索引时我们调用数组本身的splice方法去更新数组。如果是数组，就选择数组的长度和key值取较大值作为数组的新的length值，并且替换目标值。splice方法，重写了，所以执行splice，会双向数据绑定。2.判断是否为数组，并且key值是否为有效的key值。如果不是响应式的数据，就是普通的修改对象操作。了解更多前端面试问题欢迎关注小编专栏！

2）当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；了解更多前端面试问题欢迎关注小编面试专栏！

Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。简单说，Vue的编译过程就是将template转化为render函数的过程。编译的最后一步是将优化后的AST树转换为可执行的代码。了解更多前端面技术问题欢迎关注小编WEB前端专栏！