2021迅雷web实习生面试经验

最新推荐文章于 2024-07-14 12:56:18 发布

Tom_boy_

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量430

点赞数

文章标签： js vue javascript

本文链接：https://blog.csdn.net/Tom_boy_/article/details/118800716

版权

问了一些个人技术掌握情况
js事件冒泡原理及示例
冒泡排序
插入排序
希尔排序
堆排序
归并排序
快速排序
选择排序
不稳定：快选堆希
稳定：插冒归基
vue双向绑定
vue父子组件通信
MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：
该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

（1）View

View是视图层，也就是用户界面。前端主要由HTH L和csS来构建，为了更方便地展现vi eu to del或者Hodel层的数据，已经产生了各种各样的前后端模板语言，比如FreeMarker，Thyme leaf等等，各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用来构建用户界面的内置模板语言。

（2）Model

Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则

（3）ViewModel

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model数据进行转换处理，做二次封装，以生成符合View层使用预期的视图数据模型。
需要注意的是View Model所封装出来的数据模型包括视图的状态和行为两部分，而Model层的数据模型是只包含状态的
2.v-model是什么？怎么使用？vue中标签怎么绑定事件？

答案：v-model可以实现双向绑定，指令（v-bind:class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：<input @click=doLog()/>

v-model的实现具体步骤共分为四步：
第一步：
需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

个人回答太菜不再进行现场编码考试了。

问了js的冒泡事件原理及示例

**
事件的处理过程主要有三个阶段：捕获阶段，目标阶段，冒泡阶段；
在这里插入图片描述

捕获阶段：当我们在 DOM 树的某个节点发生了一些操作（例如单击、鼠标移动上去），就会有一个事件发射过去。这个事件从 Window 发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段（Capture Phase）。事件由页面元素接收，逐级向下，到具体的元素。

目标阶段：当事件不断的传递直到目标节点的时候，最终在目标节点上触发这个事件，就是目标阶段。具体的元素本身。

冒泡阶段：事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点。跟捕获相反，具体元素本身，逐级向上，到页面元素（我们平时用的事件绑定就是利用的事件冒泡的原理）。

在这里插入图片描述

事件捕获：当使用事件捕获时，父级元素先触发，子元素后触发。

事件冒泡：当使用事件冒泡时，子级元素先触发，父元素后触发。

W3C ：任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达事件源，再从事件源向上进行事件捕获（事件冒泡）。

标准浏览器：addEventListener(“click”,function,“true”)方法,若第三参数为true,则采用事件捕获。若为false，则采用事件冒泡。

IE浏览器只支持事件冒泡，不支持事件捕获，所以它不支持addEventListener(“click”,function,“true”)方法,所以ie浏览器使用ele.attachEvent(“onclick”,doSomething)。

事件传播的阻止方法:

在W3C中，使用stopPropagation()方法。

在IE下使用cancelBubble = true方法。

阻止默认行为：

在W3c中，使用preventDefault（）方法。

在IE下return false。

问了vue的双向绑定及原理

在这里插入图片描述

这里为其他csdn作者的解释

事件捕获和事件冒泡属于两个相反的过程，这里可以有一个我感觉十分恰当的比喻，当你把一个可以漂浮在水面上的物品，使劲向水里砸下去，它会首先有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后由于浮力大于物体自身的重力，物体会在到达最低点（最具体元素）之后漂浮到水面上，这个过程相对于事件捕获是一个回溯的过程，即事件冒泡。
好了，对于事件捕获和事件冒泡有了一个概念上的理解，那我们就可以开始考虑实际的编码过程中的实际应用了。先贴上本文所需要的代码

<!DOCTYPE html>
<html>
<head>
    <title>event</title>
</head>
<body>
    <div id="obj1">
        welcome
        <h5 id="obj2">hello</h5>
        <h5 id="obj3">world</h5>
    </div>
    <script type="text/javascript">
        var obj1=document.getElementById('obj1');
        var obj2=document.getElementById('obj2');
        obj1.addEventListener('click',function(){
            alert('hello');
        },false);
        obj2.addEventListener('click',function(){
            alert('world');
        })
    </script>
</body>
</html>

点击文字hello时，先弹出world，再弹出hello。
具体冒泡的过程如下图所示
在这里插入图片描述

点击world时，弹出hello。
具体冒泡过程和第二种情况类似，如下图

如上所示，这是一个十分简单地文档结构：document > html > body > div > h5
并且分别在obj1,obj2上绑定了一个点击事件，由于addEventListener的第三个参数为false,所以页面是在冒泡阶段处理绑定事件。此时整个页面可以有三种行为出现

点击文字welcome时，弹出hello。
此时就只触发了绑定在obj1上的点击事件。具体冒泡实现过程如下：welcome 属于文本节点，点击后，开始从文本节点查找，当前文本节点没有绑定点击事件，继续向上找，找到父级（id为obj1的div），有绑定的点击事件，执行，再向上找，body，没有绑定点击事件，再到html,document,都没再有绑定的点击事件，好，整个冒泡过程结束。
点击文字hello时，先弹出world，再弹出hello。
具体冒泡的过程如下图所示

点击world时，弹出hello。
具体冒泡过程和第二种情况类似，如下图

理解了以上的内容，我们可以接着来讨论事件代理机制。
比如上面的代码，我们想要在点击每个h5标签时，弹出对应的innerHTML 。常规做法是遍历每个h5,然后在每个h5上绑定一个点击事件，这种做法在h5较少的时候可以使用，但如果有一万个h5，那就会导致性能降低。这时就需要事件代理出场了。
先贴代码

obj1.addEventListener(‘click’,function(e){
var e=e||window.event;
if(e.target.nodeName.toLowerCase()==‘h5’){
alert(e.target.innerHTML);
}

    },false);

事件冒泡：当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 。

<div id="div1">  <div id="div2">    <div id="div3">    </div>  </div></div><style>    #div1{      width: 300px;      height: 200px;      background-color: red;    }    #div2{      width: 250px;      height: 150px;      background-color: green;    }    #div3{      width: 200px;      height: 100px;      background-color: blue;    }</style>my$("div1").onclick=function () {    console.log(this.id);  };//div3 div2 div1
  my$("div2").onclick=function () {    console.log(this.id);  };//div2 div1
  my$("div3").onclick=function () {    console.log(this.id);  };//div1

代码很简单，就是三个父子关系的div,然后分别加了点击事件，当我们在div3里面点击的时候，会发现弹出了一次3，接着又弹出了2，最后又弹出了1，这说明点击的时候，不仅div3的事件被触发了，它的父级div2 与div1的点击事件也触发了，这种现象就叫做冒泡。

取消事件冒泡有两种方式：

1、标准的W3C 方式：e.stopPropagation(); 这里的stopPropagation是标准的事件对象的一个方法，调用即可（谷歌和火狐支持,IE不支持）

my$("div3").onclick=function (e) {    console.log(this.id);    e.stopPropagation();  };

2、非标准的IE方式:window.event.cancelBubble=true; 这里的cancelBubble是 IE事件对象的属性，设为true就可以了（IE特有的,谷歌支持,火狐不支持）

my$("div2").onclick=function () {    console.log(this.id);    window.event.cancelBubble=true;};

为了兼容解决事件冒泡的方式：

function stopBubble(e) {      //如果提供了事件对象，则这是一个非IE浏览器      if (e && e.stopPropagation)        //因此它支持W3C的stopPropagation()方法        e.stopPropagation();      else        //否则，我们需要使用IE的方式来取消事件冒泡        window.event.cancelBubble = true;    }    my$("div2").onclick = function (e) {      console.log(this.id);      stopBubble(e)    };
    my$("div3").onclick = function (e) {      console.log(this.id);      stopBubble(e)    };

Tom_boy_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
2021迅雷web实习生面试经验

问了一些个人技术掌握情况js事件冒泡原理及示例冒泡排序插入排序希尔排序堆排序归并排序快速排序选择排序不稳定：快选堆希稳定：插冒归基vue双向绑定vue父子组件通信MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：该层向上与视图层进行双向数据绑定向下与Model层通过接口请求进行数据交互（1）ViewView是视图层，也就是用户界
复制链接

扫一扫