20021.3.6前端题

【HTML】table的作用和优缺点是什么？

• 作用：1、布局 2、展示数据
  布局可适配所有浏览器，缺点是加载全部数据后才可以显示页面，往往会有一段时间的空白。现在一般使用div+css的方式展示页面。

• 总结：
  ·Tables的缺点

  1、Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源。)

  2、Tablle会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间。)

  3、Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。)

  4、在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦。)

  5、Table会影响其内部的某些布局属性的生效(比如里的元素的height:100%)(这会限制你页面设计的自由性。)

  6、一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。(先花时间学一些CSS知识，会省去你以后大量的时间。)

  7、table对对于页面布局来说，从语义上看是不正确的。(它描述的是表现，而不是内容。)

  8、table代码会让阅读者抓狂。(不但无法利用CSS，而且会你不知所云)

  9、table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。

  Tables的优点

  在某些场合，使用Table是100%的适合、恰当和正确。比如，用table做表格是完全正确的。

<table>
   <caption></caption>
   <thead>
      <tr>
         <th></th>
      </tr>
   <thead>
   <tbody>
        <tr>
         <td></td>
      </tr>
   </tbody>
   <tfoot></tfoot>
</table>

【CSS】css的属性content有什么作用呢？有哪些场景可以用到？

css的content属性专门应用在 before/after 伪元素上，在元素头或尾部来插入生成内容。

说明： 该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的盒子类型可以用属性 display 控制。最常见的应用是利用伪类清除浮动。

• content: string value 字符串。

<a class="demo" href="https://www.xunlei.com/" title="精彩，一下就有">精彩，一下就有</a>

.demo:after{
	content: "↗"
}

• content: uri value 外部资源
  用于引用媒体文件，图片，图标，SVG等
  （.demo css选择器，选中了class为demo的元素。上面那个~）

.demo:after{
	content: url(https://img-vip-ssl.a.88cdn.com/img/xunleiadmin/5b9889e14dcdc.png);
}

• content: attr() value 属性值的引用
  调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。

//当前元素的href属性
.demo:after{
	content: attr(href);
}

.demo:after{
	content.attr(class)
}

• content: values
  调用计数器，可以不使用列表元素实现序号功能。需要配合 counter-increment和 counter-reset 一起使用。
• content: open-quote;
  实现自定义的引号，一般用来匹配多语言的情况。
  比较全的总结

【JS】写一个数组去重的方法（支持多维数组）

js…运算符

function flat(arr, target) {
  arr.forEach(item => {
    if (Array.isArray(item)) {
      flat(item, target)
    } else {
      target.push(item)
    }
  })
}

function flatArr(arr) {
  let result = []
  flat(arr, result)
  return result
}

function uniqueArr(arr) {
  return [...new Set(flatArr(arr))]
}

【Vue】style加scoped属性的用途和原理？

scoped是style标签的一个属性，属性值为布尔值，表示当前style里的样式仅作用于当前模块。

在对应模块的js中引入css样式文件，这个css的作用域仍然是全局的，为了避免css中其他模块的部分污染当前模块的部分，需要在css文件中加上对应模块的html的id/class，使用css选择器使得css的作用域不会变成全局的，各个模块使用自己那一部分的css。

在vue中，引入了scoped属性，目的是让当前组件的样式不会影响到其他组件。使用data-v-hash的方式使css有它对应的模块标识。
举了例子：
postcss转换前：

<style scoped>
.example {
  color: red;
}
</style>
 
<template>
  <div class="example">hi</div>
</template>

通过使用postcss（是一个用 JavaScript 工具和插件(推荐：Autoprefixer，vscode里有这个插件)转换 CSS 代码的工具）实现转换后：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>
 
<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>