今日份前端の问题解决

1.async与defer的区别。

答：当浏览器遇到script脚本时，没有defer和async。浏览器会立即加载并执行指定的脚本。立即指读到script标签的文档元素，不会等待后续文档元素，读到就加载并执行。

 有async如下：

<script async src="my.js"></script>

有async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）；

有defer如下：

<script defer src="my.js"></script>

有defer，加载后续文档的过程将和 script.js的加载并行进行（异步）；但 script.js 的执行要在所有元素解析完成后，DOMContentLoaded事件触发之前完成。

总结：defer与async在网络读取是都是异步的。（相较于html解析来说）。差别在于脚本下载完后何时执行，defer是在html解析完后执行，而async则在script脚本加载完后即刻执行，无须等待html解析完。

2.cookie，localStorage，sessionStorage的区别。

答：（在网页刷新时，所有数据都会被清空，此时需要用到本地存储的技术，以上三种即为本地存储的方式）。

区别：（生命周期、存放数据大小、http请求、易用性）

cookie：可设置失效时间，若未设置时间，默认浏览器关闭后失效；存放数据4kb；每次都会携带在http头中，如果使用cookie保存过多数据会带来性能问题；需要程序员自己封装，源生cookie接口不友好。

localStorage：除非被手动清除，否则将会永远保存；可保存5MB信息；仅在客户端（浏览器）中保存，不参与和服务器的通信；源生接口可以接受，也可再次封装来对Object和Array有更好的支持。

sessionStorage：仅在当前网页会话下有效，关闭页面或关闭浏览器即被清除；同localStorage。

3.谈谈事件冒泡与事件捕获。（两种事件流处理方式）

事件冒泡：子元素嵌套在父元素内部，点击子元素同时默认点击到了父元素，此时会先触发子元素的处理器，再触发父元素的处理器，如果父元素的父元素还有处理器，那就一直向上触发，直到body。

事件捕获：与事件冒泡相反，点击时从body往下找，如果父级元素有事件处理器，先触发父级的，再向下一层触发子级元素事件处理器，直至点击位置的最底层，即target。

DOM 2级规范统一了事件流的过程，总共分为三个阶段，事件捕获，在目标元素上，事件冒泡。

定义了两个方法： addEventListener() 和 removeEventListener()。这两个方法都接收三个参数：事件名称、事件处理器函数和一个布尔值。默认情况下布尔值是 false，表示事件处理器是在冒泡阶段触发。当布尔值为 true 的时候则事件处理器是在捕获阶段触发。

4.写出一个sum函数满足sum(4)(5)，sum(4,5)结果都为9。（函数的隐式参数）

<script>
    var sum=function(){
        var cache;
        if (arguments.length==1){
            cache=arguments[0];
            return function(number){
                return cache+number;
            }
        }
        else{
            return arguments[0]+arguments[1]
        }
    }
    console.log(sum(4)(5));
    console.log(sum(4,5));
</script>


//要求更多


function sum(...args){//这里的三个点...是扩展运算符，该运算符将一个数组，变为参数序列。
	if([...args].length==1){//判断参数个数的形式是否为1个，即第二种形式
		var cache = [...args][0];//将第一个参数的值暂存在cache中
		var add = function (y){//创建一个方法用于实现第二个条件，最后并返回这个方法
			cache += y;
			console.log(cache)
			return add; 
		}
	return add; 
	}
	else{//这里就是参数的第一种形式
		var res = 0;//这里最好先声明要输出的变量，并给其赋值，不然值定义而不赋值会输出NaN，因为js将undefined+number两个数据类型相加结果为NaN
		for(var i = 0;i<[...args].length;i++){
			res += [...args][i]; //参数累加
		}
	console.log(res)//输出最后的累加结果
	} 
} 
sum(2,3,4);//9
sum(2)(3)(4)(5)
————————————————
原文链接：https://blog.csdn.net/Charles_Tian/article/details/80737997

5.了解XML吗？

       xml 即可扩展标记语言，是Internet环境中跨平台的、依赖于内容的技术，是当前处理结构化文档信息的有力工具，满足了Web内容发布与交换的需要，适合作为各种存储与共享的通用平台。

     使用xml 标记语言可以做到数据或数据结构在任何编程语言环境下的共享。例如我们在某个计算机平台上用某种编程语言编写了一些数据或数据结构，然后用xml标记语言进行处理，那样的话，其他人就可以在其他的计算机平台上来访问这些数据或数据结构，甚至可以用其他的编程语言来操作这些数据或数据结构了。这就是xml标记语言作为一种数据交换语言存在的价值。

    xml可以理解为一辆没有发动机的车。xml把所有部件按照一定规则集合在一起，就等编译器这个发动机去启动这个车。现在用的比较多的是配置和数据结构定义。

【xml的优势】
 xml文档的内容和结构完全分离
     在xml文档中，数据的显示样式已从文档中分离出来，而被放入相关的样式表文件中。这样一来，如果要改动数据的表现形式，就不需要改动数据本身，只要改动控制数据显示的样式表文件就可以了。xml能够确保同一网络站点的数据信息能够在不同的设备上成功显示。

 轻松地跨平台应用
      xml文档是基于文本的，所以很容易被人和机器阅读，也非常容易使用，纯文本文件可以方便地穿越防火墙，便于不同设备和不同系统间的信息交换。

 支持不同文字、不同语种间的信息交互
      xml所以来的Unicode标准，是一个支持世界上所有主要语言的混合文字符号编码系统，xml技术不但使得各种信息能在不同的计算机系统之间交互，还能跨语种、跨文化进行交流。

 便于信息的检索
       由于xml通过给数据内容贴上标记来描述其含义，并且把数据的显示格式分离出去，所以对xml文档数据的搜索就可以简单高效地进行。在此情况下，搜索引擎没有必要再去遍历整个文档，只需查找制定标记的内容就可以了。

 可扩展性
               xml 允许各个组织或个人简历适合他们自己需要的标记集合或标记库，并且这些标记集合可以快速地投入到互联网的使用中。比较典型的有化学标记语言CML、数据标记语言MathML、矢量图形标记语言VML、无线通信标记语言WML等。

 适合面向对象的程序开发
      xml文档是非常容易阅读的，对机器也是如此。xml文档数据的逻辑结构是一种树形的层次结构，文档中的每一个元素都可以映射为一个对象，同时也可以有相应的属性和方法，因而非常适合使用面向对象的程序设计方式来开发处理这些xml文档的应用程序。

【小结】
    xml不是要来取代html的，是对html的补充，用来与html协同工作的语言，基于上面这些优势，xml将来成为所有的数据处理和数据传输的常用工具非常可观。

原文链接：https://blog.csdn.net/zt15732625878/article/details/54629596

6.jQuery和vue的区别。

jQuery是web前端js库，逐渐被其他库所取代。

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。

 jquery适用的场景：比如说一些html5的动画页面，一些需要js来操作页面样式的页面

 

vue也是前端js库，是一个精简的mvvm，它通过数据双向绑定将view层和model层连接起来。

vue通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。

vue适用的场景：复杂数据操作的后台页面，表单填写页面