content.json

{"meta":{"title":null,"subtitle":null,"description":null,"author":null,"url":"https://limosir.github.io","root":"/"},"pages":[{"title":"[404]","date":"2019-11-03T07:05:27.795Z","updated":"2019-07-11T06:49:56.501Z","comments":true,"path":"404.html","permalink":"https://limosir.github.io/404.html","excerpt":"","text":""}],"posts":[{"title":"日常场景解决-iframe标签","slug":"日常场景解决-iframe标签","date":"2019-11-03T07:22:18.000Z","updated":"2019-11-03T08:17:47.349Z","comments":true,"path":"2019/11/03/日常场景解决-iframe标签/","link":"","permalink":"https://limosir.github.io/2019/11/03/日常场景解决-iframe标签/","excerpt":"","text":"  最近需要将各个微服务即各个项目整合到一个项目中，自己负责写Portal项目，需要内嵌各个子系统页面，由于经验不足，思来想去使用了iframe来实现 iframe标签原理iframe标签是什么？HTML内联框架元素表示嵌套的浏览上下文，通常指选项卡，但也有可能是页面中的窗口或框架。它能够将另一个HTML页面嵌入到当前页面中。每个嵌入的浏览上下文都有自己的会话历史记录（导致项目中的浏览器后退有问题） iframe标签属性主要使用了height、width、src等基础属性 iframe动态高度由于使用vue写的Portl项目，需要height自适应使用两种解决方案1.监听window对象上的resize方法，实时计算高度，再传入iframe 123window.addEventListener('resize',() => {'需要做的事'});//需要在销毁前，使用removeEventListener()销毁事件window.addEventListener('resize',() => {'需要做的事'}); 2.使用css计算属性calc()1)支持加减乘除2)运算符前后必须留有空格 height: calc(100% - 100px); F5刷新解决方案由于一开始时间很紧，对于一些场景没有想到，比如F5刷新页面刷新页面会触发Portal项目的初始化，并不是通过点击菜单，传url地址到iframe组件需要将当前iframe的url做缓存使用了session将当前菜单选中值，iframe的src进行缓存，来解决该问题，应该也不是很完美的方案。。。还有一种场景是将地址栏复制链接打开新页面这种场景，目前是在header组件中，通过判断session中是否有缓存的约定字段和路由来做判断，其实也可以写到vue路由守卫中 浏览器后退由于前面说到的iframe有自己独立地会话历史记录，所以使用传统的监听pushState并不能够阻止到iframe标签 window.addEventListener('popstate', function(ev){ window.history.pushState(null, null, location.href); }); 当传入iframe标签的src变化时，销毁旧iframe标签，再dom创建新的iframe标签还没有试过，有机会一试","categories":[{"name":"HTML","slug":"HTML","permalink":"https://limosir.github.io/categories/HTML/"}],"tags":[{"name":"标签特性","slug":"标签特性","permalink":"https://limosir.github.io/tags/标签特性/"}]},{"title":"JavaScript小题总结","slug":"JavaScript小题总结","date":"2019-07-15T06:38:49.000Z","updated":"2019-07-16T07:55:04.066Z","comments":true,"path":"2019/07/15/JavaScript小题总结/","link":"","permalink":"https://limosir.github.io/2019/07/15/JavaScript小题总结/","excerpt":"","text":"  对于js的知识点还是有很多不明白的地方，经过一些小题测试，将不明白的知识点总结归纳，让自己印象更深刻，也想培养自己利用博客将总结养成习惯。 该题集是github项目 javascript-questions 1.哪一个是无效的？12345678const bird = { size: 'small'}const mouse = { name: 'Mickey', small: true} A: mouse.bird.size B: mouse[bird.size] C: mouse[bird["size"]] D: All of them are valid 答案 答案:A在js中，对象的所有key都会被底层转换为字符串；当我们使用中括号语法([])，JavaScript会解释语句，从第一个开始括号[并继续前进直到找到结束括号]。这时才会去计算这个中括号语句的值。 2.输出是什么？12345678910111213class Chameleon { static colorChange(newColor) { this.newColor = newColor return this.newColor } constructor({ newColor = 'green' } = {}) { this.newColor = newColor }}const freddie = new Chameleon({ newColor: 'purple' })freddie.colorChange('orange') A: orange B: purple C: green D: TypeError 答案 答案:DcolorChange是一个静态方法。静态方法被设计为只能被创建他们的构造器使用（也就是Chameleon），并且不能传递给实例。因为freddie是一个实例，静态方法不能被实例使用，因此抛出了TypeError错误。 3.输出是什么？1234567891011function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName;}const member = new Person(\"Lydia\", \"Hallie\");Person.getFullName = function () { return `${this.firstName} ${this.lastName}`;}console.log(member.getFullName()); A: TypeError B: SyntaxError C: Lydia Hallie D: undefined undefined 答案 答案:A不能像普通对象那样来为构造函数添加属性。想一次性给所有实例添加特性，应该使用原型。因此本例中，使用如下方式： 123Person.prototype.getFullName = function () { return `${this.firstName} ${this.lastName}`;} 这么做的好处：也许并不是每个Person实例都需要这个方法，将方法添加到；构造函数中，会浪费大量内存，因为它们仍然具有该属性，这将占用每个实例的内存空间。如果我们只将它添加到原型中，那么它只存在于内存中的一个位置，但是所有实例都可以访问它！ 4.输出是什么？12345678910function Person(firstName, lastName) { this.firstName = firstName this.lastName = lastName}const lydia = new Person('Lydia', 'Hallie')const sarah = Person('Sarah', 'Smith')console.log(lydia)console.log(sarah) A: Person {firstName: "Lydia", lastName: "Hallie"} and undefined B: Person {firstName: "Lydia", lastName: "Hallie"} and Person {firstName: "Sarah", lastName: "Smith"} C: Person {firstName: "Lydia", lastName: "Hallie"} and {} D: Person {firstName: "Lydia", lastName: "Hallie"} and ReferenceError 答案 答案:A对于sarah，我们没有使用new关键字。当使用new关键字时，this引用我们创建的空对象。未使用new时，this引用的是全局对象所以sarah的this.firstName = 'Sarah'实际是window.firstName = 'Sarah' 5.输出是什么？12345678910function getPersonInfo(one, two, three) { console.log(one) console.log(two) console.log(three)}const person = 'Lydia'const age = 21getPersonInfo`${person} is ${age} years old` A: "Lydia" 21 ["", " is ", " years old"] B: ["", " is ", " years old"] "Lydia" 21 C: Person {firstName: "Lydia", lastName: "Hallie"} and {} D: "Lydia" ["", " is ", " years old"] 21 答案 答案:B如果使用标记模板字面量，第一个参数的值总是包含字符串的数组。其余的参数获取的是传递的表达式的值! js判断是否相等在测试相等性时，基本类型通过它们的值（Value）进行比较，而对象通过它们的引用（reference）进行比较。JavaScript 检查对象是否具有对内存中相同位置的引用。 6.输出是什么？12345678const a = {}const b = { key: 'b' }const c = { key: 'c' }a[b] = 123a[c] = 456console.log(a[b]) A: 123 B: 456 C: undefined D: ReferenceError 答案 答案:B对象的键会自动转化未字符串，当a[b]时，b为对象，对象的字符串化为"[object Object]"。所以两次a[b],a[c]其实是a["[object Object]"] = 123，a["[object Object]"] = 456，所以结果为456。 事件处理在事件传播哪个阶段？在事件传播期间，有三个阶段：捕获、目标和冒泡。默认情况下，事件处理程序在冒泡阶段执行（除非将 useCapture 设置为 true）。它从嵌套最深的元素向外传播。 typeof返回内置类型内置类型只有七种：null，undefined,object,number,boolean,string,symbol. typeof返回值为字符串 返回false值：只有6中falsy值： undefined null '' (空字符串) 0 NaN falseFunction构造函数，比如new Number和new Boolean,是truly。 Set构造函数，返回值为对象，参数为数组或空 7.输出是什么？123456const person = { name: \"Lydia\" };Object.defineProperty(person, \"age\", { value: 21 });console.log(person);console.log(Object.keys(person)); A: { name: "Lydia", age: 21 }，["name", "age"] B: { name: "Lydia", age: 21 }，["name"] C: { name: "Lydia" }，["name", "age"] D: { name: "Lydia" }，["age"] 答案 答案:B通过definedProperty方法，我们可以给对象添加一个新的属性，或者修改已经存在的属性。使用definedProperty给对象添加的属性，默认不可枚举、不可修改。相比于赋值添加的属性，definedProperty方法添加的属性有了更多的控制权。 8.输出是什么？12345678910const value = { number: 10 };const multiply = (x = { ...value }) => { console.log(x.number *= 2);};multiply();multiply();multiply(value);multiply(value); A: 20，40，80，160， B: 20，40，20，40， C: 20，20，20，40， D: NaN，NaN，20，40， 答案 答案:C在ES6中，我们可以使用默认值初始化参数。如果没有给函数传参，或者传的值为"undefined"，那么参数的值僵尸默认值。x的默认值为{number:10}。默认参数在调用时才会进行计算，每次调用函数时，都会创建一个新的对象。我们前两次调用multiply函数且不传递至，那么每一次x的默认值都为{number:10}，因此打印值为20。第三次调用multiply时，我们传递了一个参数，即对象value。*=运算符实际上是x.number = x.number * 2的简写，我们修改了x.number的值，并打印出值20。第四次，我们再次传递value对象。x.number之前被修改为20，所以x.number *= 2打印为40。 9.输出什么？1[1, 2, 3, 4].reduce((x, y) => console.log(x, y)); A: 1 2，3 3and6``4 B: 1 2，2 3and3``4 C: 1 undefinedand2 undefinedand3 undefinedand4 undefined D: 1 2andundefined 3andundefined 4 答案 答案:Dreducer函数接收4个参数：  1.Accumulator(acc)(累计器)  2.Current Value(cur)(当前值)  3.Current Index(idx)(当前索引)  4.Source Array(src)(源数组)reducer函数的返回值将会分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。reducer函数还有一个可选参数initialValue，该参数将作为第一次调用回调函数时的第一个参数的值。如果没有此参数，则默认使用数组第一个元素。在上述例子中，x代表累计器，y为当前值。第一次调用时，x = 1,y = 2该回调函数无return返回值，所以返回值为undefined第二次调用时，x = undefined,y = 3第三次调用时，x = undefined,y = 4 10.输出什么？12345678// index.jsconsole.log('running index.js');import { sum } from './sum.js';console.log(sum(1, 2));// sum.jsconsole.log('running sum.js');export const sum = (a, b) => a + b; A: running index.js,running sum.js，3 B: running sum.js,running index.js，3 C: running sum.js,3,running sum.js D: running index.js,undefined,running sum.js 答案 答案:Bimport命令是编译阶段执行的，在代码运行之前。这意味着被导入的模块会先运行，而导入模块的文件会后执行。这是CommonJS中require()和import之间的区别。使用require(),可以在运行代码时根据需要加载依赖项。使用require而不是import,打印顺序running index.js,running sum.js,3.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://limosir.github.io/categories/JavaScript/"}],"tags":[{"name":"谜之知识点","slug":"谜之知识点","permalink":"https://limosir.github.io/tags/谜之知识点/"}]}]}