前端面试基础内容一

2023-11-09 21:43:52

一、Css

@support@media\calc()的兼容性

1.@support 主要检查浏览器是否兼容css的某个属性
```
    @support 兼容性为ie9以及ie9以下不兼容
    https://www.cnblogs.com/yuxuan007/p/10892452.html 参考网站
```
2.@media 不同的媒体类型定义不同的样式定义兼容性还比较好
```
参考我的另一篇文章关于兼容ie 
https://www.cnblogs.com/qishitaozi/p/15181584.html
```
3.calc() 函数支持“ + - * /” 兼容性 ie9以及ie9以上兼容

B.垂直水平居中的写法

1.垂直居中

  I.line-height 行内元素
  II.Position:absolute;top:50%;transform:translateY(-50%)
  III.Display:flex;justify-content:center;align-items:center;
  IV.Display:table;display:table-cell;vertical-align:middle;

2.水平居中

I.Text-align:center;
II.Position:absolute;left:50%;transform:translateX(-50%) 
III.Margin:0 auto;
IV.Display:flex;

C. 1rem \ 1em \ 1vh \ 1px

1rem: 相对于根元素html通常是给html设置一个字体的大小然后其他元素的单位长度就是rem
1em: 相对于父元素的字体大小 font-size
1vh：相对于屏幕的宽度和高度
1px:  像素px是相对于显示器屏幕分辨率而言的

D.盒子模型

a) Width+border+padding+margin 是w3c的盒子模型
b) Box-sizing:Border-box; ie盒子模型 = content+padding+border

E. 三角形css画法

a) Width:0px; height:0px;border-width:100px;border-style:solid;border-color:（上 右 下 左）
b)Width:100px;四个border:width solid (颜色根据三角形位置否则为透明)

F.清除浮动的几种方式

a)Float:left之后父元素:after{clear:both}
b)父元素设置height
c)父元素 overflow:hidden

二、js

递归

  简单的 1+100的求和？
  var sum=0; for(var i=1;i<=100;i++){ sum = sum+i} 
   function add(num1,num2){  // 1+2 =总数  num2+1 下一个数   总数num+ num2+1
        var num = num1+num2;
        if(num2+1>100){
            return num
        }else{
            return add(num,num2+1)
        }
  }

事件代理

定义：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
原理：事件委托是指将事件绑定到目标元素的父元素上，利用冒泡机制触发该事件
闭包

闭包的定义即：函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包
es6常用的功能
1. let 或者 const
2. 文本模板 ``
3. 字符串插值 ${}
4. 多行字符串使用反引号 ``解决
5. 解构赋值
6. 继承 extends
7. 用 promise 替代回调
8. 箭头函数（）=>{}
9. for .. of
10. 展开操作符 ...

DOM对象中的方法

 1. document.getElementById() 返回对拥有指定 id 的第一个对象的引用
 2. document.getElementsByClassName() document.getElementsByName() document.getElementsByTagName()
        共同点： 返回文档中集合，作为 NodeList 对象；需要指定节点索引号

数组去重

 1. es5
       function getArr(arr){
             var newArr =[]
             for(var n=0;n<arr.length;n++){
                 if(newArr.indexOf(arr[n])<0){
                     newArr.push(arr[n])
                 }
             }
             return newArr
         }
 2. es6
       a.return Array.from(new Set(数组))
       b.[... new Set(数组)]

三、浏览器基本知识点

JSON & JSONP

JSON:JSON 就是一种有规则字符串。

     JSON 就是Key/Vaule存储，理论上Key支持String、Number，Value几乎支持所有类型。
     JSON 因为语言都支持字符串（String）类型，所以都支持JSON格式作为交互。。
     JSON 是存储和交换文本信息的语法。类似 XML。
     JSON 比 XML 更小、更快，更易解析。
例如：{
     "Name":"赵丽颖",
     "Stature":"165cm",
     "Birthday":"1987年10月16日",
     "Birthplace":"河北省廊坊市",
     "Info":"喜欢电视剧版《知否知否应是绿肥红瘦》中赵丽颖扮演的盛明兰，该剧改编自关心则乱同名小说，通过北宋官宦家庭少女明兰的成长、爱情、婚姻故事，展开了一幅由闺阁少女到侯门主母的生活画卷，讲述一个家宅的兴荣，古代礼教制度下的女性奋斗传奇",                  
 }
   star_male表示三个对象的数组，每个对象有名字和年龄
   {
       "star_male": [
           {
               "name": "赵丽颖",
               "age": 26
           },
           {
               "name": "杨蓉",
               "age": 29
           },
           {
               "name": "李健",
               "age": 31
           }
       ]
   }

JSON.parse() 可以把JSON规则的字符串转换为JSONObject

   ‘{"domain" : "sojson.com","author":"soso"}‘  转换为：{"domain" : "sojson.com","author":"soso"}

JSON.stringify()可以把JSONObject 转化为 JSON 规则的字符串

     {"domain" : "sojson.com","author":"soso"} 转化为 ： ‘{"domain" : "sojson.com","author":"soso"}‘

JSON.parse()、JSON.stringify() 兼容性

   Firefox 3.5 + （目前已经50+版本了）
   Internet Explorer 8 +（这个...）
   Chrome（一直支持）
   Opera 10 +
   Safari 4 +

JSONP 为解决跨域而诞生。是为了基于浏览器Web请求不通源之间的请求。

 具体讲，是解决不同源，被浏览器监管Javascript的安全限制。
 在https://www.sojson.com调用https://www.sojson.com/json/是不会跨域的。
 在https://www.sojson.com 调用http://www.itboy.net/json/是跨域的，因为不同域名。
 在https://www.sojson.com调用http://a.sojson.com/search1_baidu.com.html 是跨域的。因为是不同二级域名。
 在https://www.sojson.com:8080调用https://www.sojson.com:8081 是跨域的。因为是不同端口。
 在https://www.sojson.com调用http://www.sojson.com 是跨域的。因为是不同请求协议，http和https。
 在188.188.188.20调用199.199.199.99 是跨域的。因为不同IP。
 在localhost调用127.0.0.1 也是跨域的。其实他也是不同域名。 
 JSONP只能实现GET请求

CORS

定义：跨域访问资源时浏览器和服务器之间如何通信
基本思想：是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。
兼容性：IE6,IE7,Opera min 不支持CORS
参考文档： https://www.ruanyifeng.com/blog/2016/04/cors.html

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

    可以在在前端解决跨域问题
      【vue.config.js】
        module.exports = {
            devServer: {
                proxy: {
                    ‘/api‘: {
                        // 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
                        target: ‘https://www.baidu.com/‘,
                        // 允许跨域
                        changeOrigin: true,
                        ws: true,
                        pathRewrite: {
                            ‘^/api‘: ‘‘
                        }
                    }}}

前端面试基础内容一

码农公寓

相关文章