前端杂记2

最新推荐文章于 2020-09-25 13:25:09 发布

深海霸主丶痞老板

最新推荐文章于 2020-09-25 13:25:09 发布

阅读量196

点赞数 1

本文链接：https://blog.csdn.net/qq_38062409/article/details/99705116

版权

Life 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

vue中插槽的作用：传送门

vue组件的data方法为什么是函数形式：函数返回的是新对象不会出现多个组件应用同一个对象（地址）避免修改数据带来的连锁反应。

v-for中 key值的作用：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

This的指向问题：谁调用function(),就指向谁。而Vue中一般指向的是this所在的组件Vue实例本身。

数据请求应该在vue生命周期的那个阶段？

<template>
    <div>
        这是一个示例
    </div
</template>

<script>
    export default {
        data() {
            return {
            
            }
        },
        methods: {
            getData() {
                // 请求数据
            }
        },
        mounted() {
            // 调用请求数据的方法
            this.getData()
        }
    }
</script>

JS数组遍历方法有哪些：

for循环

for(j = 0,len=arr.length; j < len; j++) {
    
}

foreach循环

//1 没有返回值
arr.forEach((item,index,array)=>{
    //执行代码
})
//参数：value数组中的当前项, index当前项的索引, array原始数组；
//数组中有几项，那么传递进去的匿名回调函数就需要执行几次；

map循环

arr.map(function(value,index,array){
　　//do something
　　return XXX
})

forof遍历

for (var value of myArray) {
console.log(value);
}

filter遍历

var arr = [
  { id: 1, text: 'aa', done: true },
  { id: 2, text: 'bb', done: false }
]
console.log(arr.filter(item => item.done))

every遍历

var arr = [ 1, 2, 3, 4, 5, 6 ]; 
console.log( arr.every( function( item, index, array ){ 
        return item > 3; 
    })); 
false

some遍历

var arr = [ 1, 2, 3, 4, 5, 6 ]; 
    console.log( arr.some( function( item, index, array ){ 
        return item > 3; 
    })); 
true

reduce

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});

reduceRight

var arr = [0,1,2,3,4];
 
arr.reduceRight(function (preValue,curValue,index,array) {
    return preValue + curValue;
}); // 10

find

var stu = [
    {
        name: '张三',
        gender: '男',
        age: 20
    },
    {
        name: '王小毛',
        gender: '男',
        age: 20
    },
    {
        name: '李四',
        gender: '男',
        age: 20
    }
]

function getStu(element){
   return element.name == '李四'
}
 
stu.find(getStu)
//返回结果为
//{name: "李四", gender: "男", age: 20}

findIndex

[1,2,3].findIndex(function(x) { x == 2; });

keys，values，entries

for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"

详细的介绍——传送门

<!DOCTYPE html> 规定了浏览器文档使用哪种html或者xhtml规范。

New Date（）可以获取的是PC本地的时间。

vueAPP适配是怎么写的，用的什么单位？

document.ready以及和window.onload的先后顺序

document.ready 和 window.onload 的区别是：document.ready方法在DOM树加载完成后就会执行，而window.onload是在页面资源（比如图片和媒体资源，它们的加载速度远慢于DOM的加载速度）加载完成之后才执行。

html网页元素加载完后触发哪个事件：选项有onready onchange onload onblur ？Onready是先于onload执行的，onload是要等所有元素包括img之类的加载完成之后才会执行的，而onready是只要DOM结构绘制完成就能执行。如果有多个onload函数，它只会执行最后一个函数，而onready是有多少个执行多少个。

html5增加了<main><header><footer><aside><section><video><audio><time><data>之类的语义化标签, 搜索引擎会利用爬虫分析抓取页面结构内容，有利于SEO，页面结构更加清晰，利于维护.提高页面可访问性，不会在样式加载不正常的时候一团乱，维持基本结构。利于部分残障人士页面阅读器解析。

cookie sessionStorage localStorage indexDb,cookie按设定的时间内有效，最多4k, 两个storage都是html5新api,存储键值对,sessionStorage会话存储,页面访问时间内有效，关闭页面失效,localStorage一直有效，关闭页面不会失效，两个都是最大5M，indexdb也是h5新api，浏览器内置小型数据库

浮动脱离了正常文档流,会导致父元素高度塌陷，后面元素会挤到浮动元素下方，造成布局错乱。清除浮动:1.父元素创建BFC，使其处于单独的块级渲染区域 overflow不为visible,float不为none,display值为flex grid inline-box table, position为absolute或fixed都可以创建。2.父元素的伪元素::after display:block,heght:0,visbility:hidden,clear:both,content:'.'

发布者订阅者模式：

属性document.body.scrollWidth,表示的是网页中滚动条的宽度吗？不是的，它表示的是网页正文全文的宽度。
offsetsetWidth clientWidth分别代表可见区域的宽度，还有高度等。

在JS里，两个整数进行除法，得到的数是小数，要得到整数则用parseInt和Math.round等等。

form可以包含包括input,文本，单选，复选，textarea等。

闭包：

闭包指的是有权访问另一个函数作用域中的变量的函数 | 闭包是在在外部可以访问函数内部的变量或者方法。

优点：一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

缺点：1.由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。2.闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

计算属性和监听器有什么区别

我们可以使用方法达到和计算属性同样的效果，
区别在于计算属性具有缓存，只有当计算属性所依赖的属性发生改变时，才会重新去计算，而方法每次都会去重新计算结果。

Watch VS Computed

watch是观察某一个属性的变化，重新计算属性值。computed是通过所依赖的属性的变化重新计算属性值。
大部分情况下watch和computed几乎没有差别。但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。

JS的执行机制：传送门

vuecli如何使用json 数据模拟：传送门

行内块元素盒子之间的3px空白间距（代码换行符导致）：传送门

跨域怎么实现：1.jsonp 2.代理 3.php header写允许跨域。

eval函数，它可以解释由JS原码组成的字符串
然后这个函数不能用调式工具的断点来调试
这个函数是js自带的函数，使用的话它会引起XSS攻击，
还有一个就是这个函数，它会不会有效率问题，该函数是动态解释字符串，会不会存在效率问题：效率问题主要还是在自身逻辑上面

div采用绝对定位，需要z-index 设置层叠关系；

v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。：传送门

Jquery的bind跟on绑定事件的区别：主要是事件冒泡(事件代理)；

jquery文档中bind和on函数绑定事件的用法：

.bind(events [,eventData], handler)

.on(events [,selector] [,data], handler)

从文档中可以看出，.on方法比.bind方法多一个参数'selector'

.on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：

$('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定click事件；

那么这个selector参数的好处是什么?

好处在于.on方法

原理是事件冒泡，进行事件委托，子元素把事件委托给父元素进行事件处理；

这样的好处

1.万一子元素非常多，给每个子元素都添加一个事件，会影响到性能；

2.为动态添加的元素也能绑上指定事件；

在非箭头函数下， this 指向调用其所在函数的对象

改变this的指向：1.箭头函数 2.that 3.apply,call,bind 4.new。

盒子上下居中：定位和弹性盒子

addEventListener可以多次给DOM对象添加监听事件（简述：一个监听对象一般只会有一个监听事件，多余的会移除掉）

如果要删除的话，用removeEvent 、

onclick和addEventListener区别

box.onclick = function(){ console.log('1') }
box.onclick = function(){ console.log('2') }   //会覆盖1

box.addEventListener('click',function(){ console.log('1') })
box.addEventListener('click',function(){ console.log('2') })  //不会覆盖

传送门

flex弹性盒模型

clear:both;
// 元素左侧和右侧均不允许出现浮动元素

windows的status对象是用来指定用来指定浏览器状态栏里面的临时消息

在JavaScript中，有三种常用的绑定事件的方法：

1、在DOM元素中直接绑定；

2、在JavaScript代码中绑定；

3、绑定事件监听函数；

可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。但不符合样式、行为、结构三者分离的概念

事件对象有一个方法可以阻止事件的传播：stopPropagation()

$("?").click(function(e){
        alert("4396")
        e.stopPropagation()
    });

父作用域以及父作用域的父作用域，一直到顶层作用域，这样的一个条链叫作用域链

bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被bind的第一个参数指定，其余的参数将作为新函数的参数供调用时使用。

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。

call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。

深海霸主丶痞老板

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端杂记2

vue中插槽的作用：传送门vue组件的data方法为什么是函数形式：函数返回的是新对象不会出现多个组件应用同一个对象（地址）避免修改数据带来的连锁反应。v-for中 key值的作用：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。This的指向问题：谁调用function(),就指向谁。而Vue中一般指向的是this...
复制链接

扫一扫

专栏目录