问了一些个人技术掌握情况
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) };