前端基础知识

Xie666-byte

HTML

如何理解HTML语义化

HTML语义化就是使用正确的HTML标签,比如说段落标签使用p标签,文章标签使用article标签,章节标签使用action标签,视频标签使用video标签。

meta viewport是做什么的

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
viewport表示独立设备,device-width表示独立设备的像素宽度,initial-scale表示页面初始缩放比例,maximum表示页面放大比例,minimum表示页面缩小比例。

你用过哪些HTML5标签

举例:

  • article标签
  • header标签
  • footer标签
  • section标签

H5是什么

H5是基于HTML5实现的,通俗地讲,H5是移动端页面,就像一个很大的容器,里面可以放文本、图片、音视频等媒体格式的文件。

CSS

两种盒模型

分别是border-box和content-box。border-box,width和weight表示border以内的宽度。content-box,width和height表示元素content的宽高。
两者不同的是计算最大尺寸是否包含边距,用起来border-box更好一些,用起来更方便。

如何垂直居中

如果.parent的height不写死

.parent{
    padding:50vh 0;
}

如果.parent的height写死

第一种:table自带功能

//HTML
<table class="parent">
    <tr>
      <td>
      文字内容
      </td>
    </tr>
</table>

//CSS
.parent{
  height: 600px;
}

第二种:100%高度的befort、after,加上inline block

//HTML
<div class="parent">
    <span class="before"></span>
    <div class="child">
        文字内容
    </div>
    <span class="after"></span>
</div>

//CSS
.parent{
  height: 600px;
}

.child{
  display: inline-block;
  width: 300px;
  vertical-align: middle;
}

.parent .before{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.parent .after{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

第三种:div装成table

//HTML
<div class="table">
      <div class="tr">
        <div class="td">
          一串文字
        </div>
    </div>
</div>

//CSS
div.table{
  display: table;
  height: 600px;
}
div.tr{
  display: table-row;
}
div.td{
  display: table-cell;
  vertical-align: middle;
}  

第四种:margin-50%

//HTML
<div class="parent">
    <div class="child">
      一串文字
    </div>
</div>

//CSS
.parent{
  height: 600px;
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
}

第五种:translate-50%

//HTML
<div class="parent">
    <div class="child">
      一串文字
    </div>
</div>

//CSS
.parent{
  height: 600px;
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

第六种:absolute,margin:auto

//HTML
<div class="parent">
    <div class="child">
      一串文字
    </div>
</div>

//CSS
.parent{
  height: 600px;
  position: relative;
}
.child{
  position: absolute;
  height: 100px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

第七种:flex

//HTML
<div class="parent">
    <div class="child">
      一串文字
    </div>
</div>

//CSS
.parent{
  height: 600px;
  display: flex;
  align-items: center;
}

flex布局怎么用?常用的属性有哪些?

flex用来对页面进行布局。常用的属性有:

  • flex-direction——子元素的排列方向
  • flex-wrap——控制子元素是否换行
  • justify-content——子元素横向对齐方式
  • align-items——子元素纵向对齐方式
  • order——控制子元素的排列顺序
  • flex-grow,flex-shrink——控制子元素的空间

BFC是什么?

BFC的全称是块级格式化上下文。触发条件包括:

  1. 浮动元素(元素的 float 不是 none)
  2. 绝对定位元素(元素的 position 为 absolute 或 fixed)
  3. 行内块元素(元素的 display 为 inline-block)
  4. overflow 值不为 visible 的块元素
  5. 弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)

CSS选择器的优先级?

  1. !import的优先级最高
  2. 内联样式>内部样式>外部样式
  3. 优先级相同,写到后面的覆盖前面的

如何清除浮动

//把.clearfix加到父元素上
.clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容*/
 }

原生JS

ES6语法

  • 块级变量有let 、const;
  • 箭头函数
  • 默认参数值:函数默认值允许在没有值或者undefined被传入时,使用默认形参。
  • 剩余参数:允许我们将一个不定数量的参数表示为一个数组。
  • 展开运算符:可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。
  • 多行字符串
  • 字符串插值
  • 带标签的模板字面量
  • 对象属性定义支持短语法 obj = { x, y }
  • 对象属性名支持表达式 obj = {["baz" + quux() ]: 42}
  • 对象添加__proto__属性
  • 数组匹配 [ b, a ] = [ a, b ]
  • 对象匹配 let { a, b, c } = objABC
  • 参数匹配 function g ({ name: n, val: v }) {}
  • import导入
  • export导出
  • export default默认导出

手写函数防抖和函数节流

函数节流:理解成冷却时间

//放技能
function fn(){}
let cd=false
button.onclick=function(){
    if(cd){
        //not  to  do
    }else{
        fn()
        cd=true
        let timerId=setTimeout(()=>{
            cd=false
        },3000)
    }
}

函数防抖

//一个外卖小哥等到一单外卖,再等五分钟,如果没有单子,就去送。如果有单子,接单之后,再等五分钟。
let timerId=null
button.click=function(){
    if(timerId){
        window.clearTimeout(timerId)
    }
    timerId=setTimeout(()=>{
        fn()
        timerId=null
    },5000)
}

手写AJAX

完整版

 var request = new XMLHttpRequest()
 request.open('GET', '/xxx');
 request.onreadystatechange = function () {
   if(request.readyState === 4 ) {
       console.log('请求完成')
       if(request.response.status>=200){
           console.log('请求成功')
       }
   }};
 request.send();

简化版

var request = new XMLHttpRequest()
 request.open('GET', '/xxx')
 request.onload = ()=> console.log('请求成功')
 request.send()

如何实现深拷贝?

关键点:

  1. 递归
  2. 判断类型
  3. 检查循环引用
  4. 需要忽略原型(__proto__)

如何用正则实现trim()?

String.prototype.trim = function(){
    return this.replace(/^\s+|\s+$/g, '')
}
//或者 
function trim(string){
    return string.replace(/^\s+|\s+$/g, '')
}

不用class如何实现继承?用class如何实现继承?

不用class实现继承

function  Animial(){
     this.a=1
 }
 Animial.prototype.move=function(){}
 //Dog继承Animial的类
 function  Dog(){
     //考察点一,在Dog函数调用Animial函数,同时把所有参数传过去
     Animial.apply(this,argument)
     this.d=2
 }
 //下面三句话是考察点二,让Dog的原型继承Animial的原型
 let f=function(){}
 f.prototype=Animial.prototype
 Dog.prototype=new f()
 //考察点三
 Dog.prototype.constructor=Dog
 Dog.say=function(){}

用class实现继承

 class Animal{
     constructor(color){
         this.color = color
     }
     move(){}
 }
 class Dog extends Animal{
     constructor(color, name){
         super(color)
         this.name = name
     }
     say(){}
 }

如何实现数组去重

第一种:哈希

//数组去重
function arrSame(arrSame){
        var hash = {};
        var result = [];
        for(var i = 0, len = arrSame.length;i < len; i++){
            if(!hash[arrSame[i]]){
                result.push(arrSame[i]);
                hash[arrSame[i]] = true;
            }
        }
        return result;
    }

测试一下:

//数组去重
function arrSame(arrSame){
        var hash = {};
        var result = [];
        for(var i = 0, len = arrSame.length;i < len; i++){
            if(!hash[arrSame[i]]){
                result.push(arrSame[i]);
                hash[arrSame[i]] = true;
            }
        }
        return result;
    }

var array1=[1,1,2,3,4,5,5];
 var result1=arrSame(array1);
 console.log(result1)

控制台打印:
[1,2,3,4,5]

第二种:Set
[...new Set(array)]

阅读 304
1 声望
0 粉丝
0 条评论
你知道吗?

1 声望
0 粉丝
宣传栏