前端面试题集合（持续更新）

1.hybrid实现原理
使用webview承载H5页面或者解析js为虚拟Dom，使用原生UI渲染，在H5层和Native层间加一个双向通信层JSBridge，作为H5和native的沟通桥梁，H5通过JsBridge调用native功能，native通过JsBridge回传信息给H5，native一般要实现route、缓存、安全等模块。

2.hybrid跟H5比各自优缺点，以及原因
H5：各平台统一使用H5页面，减少了开发工作，H5页面可以动态更新，功能迭代包括处理bug都灵活。
Native：用户体验好。
原因：混合应用由于Native需要解析H5，所以效率低，但H5层不需要区分机型。

3.position几个值：
(1)absolute： 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
(2)fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
(3)relative: 生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
(4)static: 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
(5)inherit: 规定应该从父元素继承 position 属性的值。

4.居中
(1)直接计算，padding，marging
(2)这个方法使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。
(3)在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;content 清除浮动，并显示在中间。
(4)这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。
(5)这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。
(6)flex

5.flex中的align-item只能垂直居中么，横向可不可以
flex中的align-item定义垂直于flex-driction方向的位置，若设置flex-driction为column，则可以设置横向居中。

6.PWA是怎么做的，实现什么功能了，上线了么，为什么不上线
progressive web app: 浏览器实现了一套web api，pwa可以依托于后台运行的浏览器，离线可用，可在主屏幕添加Icon，上线了

7.webpack会么，webpack3，4对比一下，选一个说说特性
webpack4需要多安装webpack-cli，多一个属性mode，默认入口src、出口dist，移除loaders，支持导入json，压缩es6代码，几个插件替换

8.webpack和fis3对比一下，说一下各自特点
webpack：有entry，根据entry打包
fis3：无entry，生成一个资源表‘sourceMap’，自定义产出规则

9.和端上协作开发的时候是只写前端还是也参与移动端开发
只写前端

10.浏览器样式兼容怎么做
考虑各种兼容性写法

11.预处理语言是在浏览器直接起作用么
不是预处理语言需要预编译为浏览器能识别的语言（html，css，js）才能起作用

12.vue生命周期
beforeCreate ->(init prop, data, computed, method, watch)-> created ->(el exist or $mounted() called)->(has template)->(compile template into render())-> beforeMount ->(create$el and replace el)-> mounted ->
|->(data changed)-> beforeUpdate ->(re-render and patch)-> updated
|->($destory() called)-> beforeDestory ->(teardown watchers, child compnonents and event listeners)-> destoried

13.vue中prop，data，computed他们的数据在页面的加载顺序
prop, data, computed

14.vue中created和mounted区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作

15.position：sticky兼容性
使用scroll事件

16.node，php你会选择哪个（肯定node，有赞大部分都是node）
node，因为对js语法更熟悉

17.数据库用的什么
mongodb

18.登录状态怎么做的（没细问）
JWT(json web tokens)

19.如果让你来做前端监控，你会怎么做
indexDB存储日志

20.讲下async这个库。
async是nodejs里的流程控制模块,也可以用在浏览器端,主要是用来控制多个异步调用时的顺序以及依赖，series, parallel, waterfall, auto

21.编程题(实现函数从而改变对象)

const testData = {
    a_v: 123,
    a_y: [1, 2, 3, 4], 
    a_d: {
        s: 2,
        s_3: 3
    },
    a_f: [{
        a_g: 5
    }],
    a_a_d: 1
}
// a_d => aD
// a_a_d =>aAD

function underscoreToHump(data, isDeep=true) {
  if(!data || (typeof data !== 'object') || Array.isArray(data)){
    return data;
  }
  let newObj = new Object();
  if(isDeep){
    let str = JSON.stringify(data); //{"a_v":123,"a_y":[1,2,3,4],"a_d":{"s":2,"s_3":3},"a_f":[{"a_g":5}],"a_a_d":1}
    str = str.replace(/\"(([a-zA-Z\$]*?)(_[a-zA-Z\$0-9]+?)*?)\":/g, function(word){
      return word.replace(/_[a-zA-Z\$0-9]+?/g, function(word){
        return word.substring(1,2).toUpperCase() + word.substring(2);
      });
      /*
      let ary = word.split('_');
      for(let i = 1, len = ary.length; i < len; i++){
        ary[i] = ary[i].substring(0, 1).toUpperCase() + ary[i].substring(1);
      }
      console.log(ary.join(''));
      */
    });
    newObj = JSON.parse(str);
  }else {
    for(let prop in data){
      let tmpProp = prop.replace(/_[a-zA-Z\$0-9]+?/g, function(word){
        return word.substring(1,2).toUpperCase() + word.substring(2);
      });
      newObj[tmpProp] = data[prop];
    }
  }
  return newObj;
}

const result = underscoreToHump(testData);
console.log(result);

const result2 = underscoreToHump(testData, false);
console.log(result2);

//other answer

// function underscoreToHump(data, isDeep=true) {
//   if(data == null || data == undefined){
//       return ;
//   }
//   let newObj = {};
//   if(typeof data !== 'object'){
//       return data;
//   }else{
//       if(!Array.isArray(data) ){
//           for(let key in data){
//               let keyStr = key.toString();
//               if(keyStr.indexOf("_")>-1){
//                   //转换属性名
//                   let tmp = keyStr.split("_");
//                   let first = tmp[0];
//                   tmp = tmp.map(i => i.toUpperCase());
//                   tmp[0] = first;
//                   let newKey = tmp.join("");
//                   //赋值
//                   newObj[newKey] = underscoreToHump(data[key], isDeep);
//               }else{
//                   //赋值
//                   newObj[key] = underscoreToHump(data[key], isDeep);
//               }
//           }
//       }else{
//           let len = data.length;
//           for(let i = 0; i< len; i++){
//               data[i] = underscoreToHump(data[i], isDeep);
//           }
//           return data;
//       }
//   }
//   return newObj;
// }

22.问项目，先介绍下项目，讲了一下做了什么，自己的角色是什么

23.vuex的理解
Vuex是vue中集中管理状态的机制。有以下作用：让多个vue组件中共享状态，可以实现组件中通讯。actions->mutation->state->compnonents->actions

24.盒模型（IE和标准的）
[margin[border[padding[content]padding]border]margin]
标准模型:width,height 为content
IE模型:width,height 为content+padding+border

25.js的类型判断，几种，区别、原理、使用场景
typeof: undefined, number, object(引用类型，null), function, string, boolean, symbol
instanceof: 自定义对象， 检测的是原型，instanceof 只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪种类型。
constructor:
isArray：ES5
toString:为以下对象自带属性：undefined, number, object, array, regxp, null, date, error, HTMLDocument,function, string, boolean, symbol

26.问了闭包，问了闭包的this指向谁
函数中返回的函数this指向调用者，即时函数中this指向global

27.问了跨域，我讲了很多种方法，问了jsonp熟悉不熟悉，我说很熟悉，讲了一下，然后其他的几种方法也讲了一下
JSON with Padding是 json 的一种”使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
利用了script标签src属性跨域的能力，script标签下载src后就会立即执行，所以服务端需要返回jsonp格式数据：jsonpcallback(some json data), 在客户端实现jsonpcallback函数即可