黑马程序员技术交流社区

标题: 【西安校区】分享一些前端的面试题 [打印本页]

---

作者: 逆风TO    时间: 2019-11-5 15:57
标题: 【西安校区】分享一些前端的面试题
1.列举css的几种选择器 以及各种选择器的优先级
标签选择器=1    h1 span p
类选择器=10     .acitive
id选择器=100    #myapp
属性选择器=10    [name="uname"]
内联样式>1000    style="color:#f00"
!important      大于1000  是最高选择器 高于内联样式
标签选择器<类选择器=属性选择器<id选择器

后代选择器  h1 span   
子代选择器  h1>span  
伪类选择器  :hover :link :visited  :active
相邻兄弟选择器  span+span   
通用兄弟选择器  span~span  不一定紧跟着 但是必须有一个共同的父元素
通用选择器    *  很少使用
群组选择器   span,p,h1
结构伪类选择器   :first-child  :nth-child(n)   :last-child

伪元素选择器     :after   :before

内部样式和外部样式 采用就近原则

2.权重计算规则
!important  >1000
内联        =1000
id            =100
类            =10
伪类        =10
元素        =1
*            =0
继承         无

3.阐述清除浮动的几种方式,以及他们的优缺点
   1)非父元素设置高度  但这种情况 有些时候不能精确的计算出父元所需要的高度
   2)父元素也浮动   这又会影响父类元素的同级元素了
   3)父元素写 overflow:hidden  如果父元素需要 溢出显示的话  就不行了
   4）在父元素的后面加空的div元素   设置样式clear:both
4.列举js的几种数据类型
undefined null number string boolean object es7中的 symbol
null是原型链的起点  math没构造方法 没有constructor
5.如何使用原生的js给一个按钮绑定多个onclick事件
    elem.addEventListener("click",handler1);
    elem.addEventListener("click",handler2);
    function handler1(){
        console.log("事件添加!");
    }
    function handler2(){
        console.log("事件添加!");
    }
6.阐述cookies,sessionStorage和localstroage区别

    cookies是用来跟踪浏览器上用户身份的会话方式,Cookie是服务器发给客户端的特殊信息，
    cookie是以文本的方式保存在客户端,单个cookie保存的数据不能超过4kb,
    应用：判断用户是否登陆过网站，以便下次能够实现直接登陆
    sessionStorage和localstroage是html5的新特性

    sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

    localStorage：将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

    两者都保存在客户端,不会发送到服务器端
    sessionStorage为临时保存，而localStorage为永久保存
    cookie的存储限制是  4kb  但是 localStorage是 5MB
    cookie每次都随着http请求到服务器端  占带宽和网速

7.编写一个方法去掉数组里面重复的内容
     function qc(arr){
         var obj={};
         for(val of arr){
            obj[val]=val;
         }
         arr=[];
         var i=0;
         for(var val in obj){
            arr[i++]=val;
         }
         return arr;
      }
8.简述get和post的相同点和不同点
  相同点:都可以向服务器发送带参数的请求,HTTP请求底层协议都是TCP/IP,所以两者没有本质的区别
  不同点:GET提交的数据放在URL中，POST则不会。这是最显而易见的差别。这点意味着GET更不安全（POST也不安全，因为HTTP是明文传输抓包就能获取数据内容，要想安全还得加密）
  GET回退浏览器无害，POST会再次提交请求（GET方法回退后浏览器再缓存中拿结果，POST每次都会创建新资源）
  GET提交的数据大小有限制（是因为浏览器对URL的长度有限制，GET本身没有限制），POST没有
  GET可以被保存为书签，POST不可以。这一点也能感受到。
  GET能被缓存，POST不能
  GET只允许ASCII字符，POST没有限制
  GET会保存再浏览器历史记录中，POST不会。这点也能感受到。

9.阐述mvc和mvvm的原理和区别
MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。模型（Model）指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型(ViewModel)是mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

  MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，只是在MVC的基础上增加了一层VM，只不过是弱化了C的概念，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2