前端面试题汇总 2018/12/04

盒模型

标准盒模型：由里向外content,padding,border,margin
IE怪异和模型：宽高是内容(content)+填充(padding)+边框(border)的总宽高

通过JS获取盒模型对应的宽和高，有以下几种方法：

为了方便书写，以下用dom来表示获取的HTML的节点。

1.  dom.style.width/height 

　　这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。

 2. dom.currentStyle.width/height 

　　这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。

　　但这种方式只有IE浏览器支持。

 3. window.getComputedStyle(dom).width/height

　　这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。

 4. dom.getBoundingClientRect().width/height

　　这种方式是根据元素在视窗中的绝对位置来获取宽高的

 5.dom.offsetWidth/offsetHeight

　　这个就没什么好说的了，最常用的，也是兼容最好的。

弹性布局的使用

① 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；

② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；

③ display:flex; 容器添加弹性布局后，显示为块级元素；

display:inline-flex; 容器添加弹性布局后，显示为行级元素；

④ 设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

行快标签

一、块级标签

1.独占一行，不和其他元素待在同一行

2.能设置宽高

常见的块级标签：div,? p,? h1-h6,? ul,? li,? dl,? dt,? dd

二、行级标签

1.能和其他元素待在同一行

2.不能设置宽高

常见的行级标签：a， span,? strong,? u,? em-->

三、行内块标签
1.能和其他元素待在一行

2.能设置宽高

常见的行内块标签：img,? input,? ?textarea

空标签

没有闭合标签的标签被称作为空标签。
常见的有
<input />  <img />   <area /> <col /> <link />  <bgsound /> <base />

JQuery版本区别

   1.3一般功能够

             1.4.2一般功能够而且稳定

            1.7+比较新特性

            2不支持老IE

            兼容的话最好选 1.x。稳定性就用1.7或者1.4，其中1.4的体积相对小

            另外更加情况选用1系列还是2系列，2系列不支持ie6，7，8
常用1.4和1.7  详细信息自己看  https://www.cnblogs.com/vivijiang/p/6121003.html

Js基本类型，怎么检测类型

应用数据类型 Array Object function
基本数据类型  number String null undefined  Boolean
检测方法：
1.typeof    返回类型
console.log(typeof "");
console.log(typeof 1);
2.instanceof   返回1或0  不考虑null  undefined
console.log("1" instanceof String);
console.log(1 instanceof Number);
3.constructor  返回1 或0
console.log(("1").constructor === String);
console.log((1).constructor === Number);
4.Object.prototype.toString.call()  返回   [object +具体类型]
var a = Object.prototype.toString;
console.log(a.call("aaa"));
console.log(a.call(1));

巧用 localStorage 实现跨浏览器tab页互动

跨浏览器tab页的互动，比如说一个网站有一个模块是通过超链接_blank在一个新tab页打开，但是这是点击新tab页的内容需要网站也有反应，这时就可以运用localStorage。只要是同一个域名下就都能访问到。
新tab页里的表格有个点击事件，点击完后网站页弹出这行的信息。可以这样操作：

//表格点击事件回调
function clkTb(row) {
    localStorage.setItem('curRowId', row.id);//前面是键，后面是值
}

//网站页接收
$(function() {
    window.addEventListener('storage', function(ev) {
        console.log(ev);//在这里可以找到你刚刚设置的值。
    })
})

Commonjs require.js 区别

https://blog.csdn.net/crystal6918/article/details/74906757/

冒泡捕获

事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。

Vue相关问题？

http://www.cnblogs.com/Renyi-Fan/p/9419742.html

h5如何做浏览器适配

1、viewport 简单粗暴的方式
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
2、ip6+ 的CSS media query
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ /*iphone 6*/ }
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ /*iphone 6 plus*/ }
3、REM布局
REM是CSS3新增的一种单位，并且移动端的支持度很高，android2.x+，ios5+都支持。REM是相对于dom结构的根元素来设置大小，也就是html这个元素。相较于em单位，rem使用上更容易理解及运用。
4、百分比布局--面临图片自适应
刚说完REM布局，那么用百分比布局也能实现一样的效果，但是用百分比布局，必须要面临一个问题：图片宽度100%，页面加载时会存在高度塌陷的问题。
那么可以用padding-top设置百分比值来实现自适应。
公式如下：
padding-top = (Image Height / Image Width) * 100%
原理：padding-top值为百分比时，取值是是相对于宽度的。
5、移动端适配解决方案-rem

Vuex怎么用?

https://www.cnblogs.com/liningstyle/p/8335129.html

闭包？应用场景

https://blog.csdn.net/qq_21132509/article/details/80694517
setTimeout callback 封装变量 为节点循环绑定click事件

原型 原型链

https://www.cnblogs.com/shuiyi/p/5305435.html

Webpack打包流程

https://www.jianshu.com/p/b47616a75f82

面向对象

https://www.cnblogs.com/chiangchou/p/js-oop1.html

跨域

https://www.cnblogs.com/heson/p/10015794.html

未知宽高元素水平垂直居中方法

https://www.cnblogs.com/heson/p/10019794.html

window.onload和$.ready区别

$(document).ready:是DOM结构绘制完毕后就执行，不必等到加载完毕。 意思就是DOM树加载完毕，就执行，不必等到页面中图片或其他外部文件都加载完毕。并且可以写多个.ready。

window.onload:是页面所有元素都加载完毕，包括图片等所有元素。只能执行一次。

所以，$(document).ready的执行时间要早于window.onload。并且可以写多个

AJAX get() 和 post() 方法

https://www.cnblogs.com/heson/p/10014471.html

session,cookie,sessionStorage,localStorage的区别及应用场景

https://www.cnblogs.com/heson/p/10029857.html

深拷贝和浅拷贝

https://www.cnblogs.com/echolun/p/7889848.html

H5的新标签有哪些 链接里有兼容情况

https://blog.csdn.net/a772116804/article/details/80625385

ES的新特性

去博客看 https://www.cnblogs.com/heson/default.html?page=2

数组去重的方法

1.最基本的去重方法
思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。

function unique(arr){

　　var res = [arr[0]];

　　for(var i=1;i<arr.length;i++){

　　　　var repeat = false;

　　　　for(var j=0;j<res.length;j++){

　　　　　　if(arr[i] == res[j]){

　　　　　　　　repeat = true;

　　　　　　　　break;

　　　　　　}

　　　　}

　　　　if(!repeat){

　　　　　　res.push(arr[i]);

　　　　}

　　}

　　return res;

}

2.先排序在去重
思路：先将原数组排序，在与相邻的进行比较，如果不同则存入新数组

function unique(arr){

　　var arr2 = arr.sort();

　　var res = [arr2[0]];

　　for(var i=1;i<arr2.length;i++){

　　　　if(arr2[i] !== res[res.length-1]){

　　　　　　res.push(arr2[i]);

　　　　}

　　}

　　return res;

}

3.利用对象的属性去重（推荐）
思路：每次取出原数组的元素，然后再对象中访问这个属性，如果存在就说明重复

function unique(arr){

　　var res =[];

　　var json = {};

　　for(var i=0;i<arr.length;i++){

　　　　if(!json[arr[i]]){

　　　　　　res.push(arr[i]);

　　　　　　json[arr[i]] = 1;

　　　　}

　　}

　　return res;

}

4.利用下标查询
  function unique(arr){
   　　var newArr = [arr[0]];
  　　 for(var i=1;i<arr.length;i++){
　　　　if(newArr.indexOf(arr[i]) == -1){
          　　 newArr.push(arr[i]);
    　　  }
        }
        return newArr;
   }

排序算法

https://www.cnblogs.com/onepixel/articles/7674659.html

REST ful

REST ful
Representational State Transfer，翻译是”表现层状态转化”。
面向资源是REST最明显的特征，对于同一个资源的一组不同的操作。资源是服务器上一个可命名的抽象概念，资源是以名词为核心来组织的，首先关注的是名词。REST要求，必须通过统一的接口来对资源执行各种操作。对于每个资源只能执行一组有限的操作。（7个HTTP方法：GET/POST/PUT/DELETE/PATCH/HEAD/OPTIONS）

原文地址：https://www.cnblogs.com/heson/p/10068235.html

时间： 2024-10-08 14:07:58

前端面试题汇总 2018/12/04的相关文章

前端笔试题汇总 2018/12/04 （1）

一. console.log(data) var data = "aaa"; var obj={ data:"bbb", prop:{ data:"ccc", fn:function(){ return this.data } } } console.log(obj.prop.fn()) var test = obj.prop.fn; console.log(test()); 输出 undefined ccc aaa 二.前端优化 三. setT

前端面试题汇总（主要为 Vue）

前端面试题汇总 1. 谈谈你对MVVM开发模式的理解 MVVM分为Model.View.ViewModel三者. 1)Model:代表数据模型,数据和业务逻辑都在Model层中定义: 2)View:代表UI视图,负责数据的展示: 3)ViewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作: Model和View并无直接关联,而是通过ViewModel来进行联系的,Model和ViewModel之间有着双向数据绑定的联系.因此当Model中的数据改变时会触发View

IMWEB 前端面试题汇总

1.什么是盒子模型? CSS中的思维模型,每一个元素都包含margin,padding,boder,content区域,占一个盒子形状,整体称为盒模型. 2.简述一下src与href的区别? Href 超文本链接,指向网络资源所在位置,如果我们在文档添加<link href="common.css" rel="stylesheet"/>浏览器会下载资源并且不会停止对当前文档的处理. Src source,指向外部资源的位置,如果我们添加<scrip

前端面试题汇总

原文地址:https://www.cnblogs.com/sugartang/p/11525134.html

Web前端面试题集锦

Web前端面试题集锦 前端开发面试知识点大纲: 注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScript: 数据类型.面向对象.继承.闭包.插件.作用域.跨域.原型链.模块化.自定义事件.内存泄漏.事件机制.异步装载回调.模板

web前端面试题系列：（一）

1.作用域问题 var a = 6; setTimeout(function () { alert(a); a = 666; }, 1000); a = 66; 结果:66 2.语义化标签 1)tite与h1的区别 2)b与strong的区别 3)i与em的区别 PS:不要小看这些题,80%人答不上来 3.事件绑定 addEventListener,第三个参数是用来表示事件是以事件冒泡还是事件捕获这个各位都知道!但是他问的问题是: 我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你

各大互联网公司前端面试题（js）

对于巩固复习js更是大有裨益.    初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,Boolean,Number,Undefined, Null 引用数据类型:Object(Array,Date,RegExp,Function) 那么问题来了,如何判断某变量是否为数组数据类型? 方法一.判断其是否具有“数组性质”,如slice()方法.可自己给该变量定义slice方

前端面试题关于JavaScript 这些你都会吗？

昨天我们一起分享了关于html和css的面试题<前端面试题之Html和CSS>,今天我们来分享关于javascript有关的面试题.我面试的时候最害怕面试官问我js了,因为我真心不擅长这个.不过我在努力的学习中. 本宝宝第一次面试的时候比这个还紧张呢!!! 1.介绍js的基本数据类型 Undefined.Null.Boolean.Number.String 2.js有哪些内置对象? 数据封装类对象:Object.Array.Boolean.Number 和 String 其他对象:Functi

前端面试题 之 JavaScript

原文:前端面试题 之 JavaScript 昨天我们一起分享了关于html和css的面试题<前端面试题之Html和CSS>,今天我们来分享关于javascript有关的面试题.我面试的时候最害怕面试官问我js了,因为我真心不擅长这个.不过我在努力的学习中. 本宝宝第一次面试的时候比这个还紧张呢!!! 1.介绍js的基本数据类型 Undefined.Null.Boolean.Number.String 2.js有哪些内置对象? 数据封装类对象:Object.Array.Boolean.Numbe