2021.3.5 前端题

最新推荐文章于 2024-09-22 11:17:00 发布

ein5702

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量104

点赞数

分类专栏：前端基础文章标签： javascript html

本文链接：https://blog.csdn.net/ein5702/article/details/114446266

版权

前端基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文深入探讨了HTML元素的alt和title属性的区别，CSS中的FOUC现象及其避免方法，JavaScript中的闭包概念及其优缺点，并通过实例展示了Vue中如何重置data。同时，文章通过代码示例详细解释了JavaScript闭包的运用及常见陷阱，对于前端开发者具有较高的参考价值。

摘要由CSDN通过智能技术生成

【HTML】元素的alt和title有什么区别？

alt属性可用于<img>、、<area>元素中，最常用于<img>标签上，是图片无法正常显示时的替代文本。
用于<input>标签时，是用来替换点击按钮的图片。
title属性规定了元素的额外信息，在鼠标悬停在元素上一段时间后出现的提示文本。通常与<a><from>元素一同使用，为链接添加描述性信息

<img class="" src="" alt="这里是1024个字符长度内的字符串" title="悬停在图片上会出现的提示文字">

<title> 元素可定义文档的标题。
浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。标签是标签中唯一要求包含的东西。

<head>
 <title="文档标题">
</head>

【CSS】什么是FOUC？如何避免FOUC的？

FOUC(Flash Of Unstyled Content)无样式内容闪烁。
指在加载页面时短暂的出现CSS样式失效。
不同的浏览器有不同的渲染规则，但总的来说就是两部分：元素和样式。IE浏览器会先加载HTML的DOM，然后在CSS全部加载出来后渲染页面样式。如果样式使用@import导入，或将样式表置于页面底端，中间不可避免的有一段时间是没有样式的。
可以使用link引入样式，将样式表置于<head>中

【JS】什么是闭包？优缺点分别是什么？

什么是闭包
可以访问另一个函数作用域的变量的函数。可以认为是定义在函数内的函数。由于JS的特性，外层函数不能访问内层函数的变量，但内层函数可以访问外层函数的变量。

# 一个普通函数
fuction one(a){
	console.log(a)
}
# 在函数里定义的函数
function two(){
	var a
	# 没有名字，这个就是闭包函数，它可以访问fuction two()的变量
	two=function(){
		console.log(a)
	}
	return two
}

加俩题：
（1）

var name = "the window";
var obj = {                    
    name : "myObject",          // 属性
    getNameFunc:function(){     // 方法
        return function(){
            return this.name;
        };
    }
};
alert(obj.getNameFunc()());        // 输出了 “the window”;

没有形成闭包环境
（2）

var name2 = "the window";
var obj2 = {                            
    name2:"my name is a obj",
    getNameFunc2 :function fn1(){
        var that = this;    
        return function(){
            return that.name2;  
        };
    }
}
alert(obj2.getNameFunc2()());    // 输出 my name is a obj

两个条件：1、函数嵌套；2、父函数里有变量给闭包引用。形成了闭包环境。

闭包的优缺点
优点：
缺点：
- 闭包会携带父函数的变量的作用域，所有变量都存在内存，内存占用多，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
- 引用的变量可能已经变化

function outer() {
      var result = [];
      for （var i = 0； i<10; i++）{
        result.[i] = function () {
            console.info(i)
        }
     }
     return result
}

不会输出1，2，。。。10，因为每个闭包函数访问变量i是outer执行环境下的变量i，随着循环的结束，i已经变成10了，所以执行每个闭包函数，结果打印10， 10， …, 10
解决办法：

function outer() {
      var result = [];
      for （var i = 0； i<10; i++）{
        result.[i] = function (num) {
             return function() {
                   console.info(num);    // 此时访问的num，是上层函数执行环境的num，数组有10个函数对象，每个对象的执行环境下的number都不一样
             }
        }(i)
     }
     return result
}