前端面试之路三(javascript高级篇)
原型
- 原型的实际应用
- 原型如何实现它的扩展性
原型的实际应用
jquery和zepto的简单使用
<p>jquery test1</p>
<p>jquery test2</p>
<p>jquery test3</p>
<div id="div1">
<p>jquery test in div</p>
</div>
var $p = $("p")
$p.css('font-size','40px') //css是原型方法
console.log($p.html()) //html是原型方法
var $div1 = $("#div1")
$div1.css('color','blue') //css是原型方法
console.log($div1.html()) //html是原型方法
zepto如何使用原型
//空对象
var zepto = {}
zepto.init = function(){
//源码中，这里的处理状况比较复杂。但由于是本次只是针对原型，所以这里就弱化了
var slice = Array.prototype.slice
var dom = slice.call(document.querySelectorAll(selector))
return zepto.Z(dom,selector)
}
//即便用zepto时候的$
var $ = function(selector){
return zepto.init(selector)
}
//这就是构造函数
function Z(dom, selector) {
var i, len = dom ? dom.length : 0
for (i = 0; i < len; i++) {
this[i] = dom[i]
}
this.length = len
this.selector = selector || ''
}
zepto.Z = function(dom, selector) {
return new Z(dom, selector)
}
$.fn = {
constructor:zepto.Z,
css:function(key,value){},
html:function(value){}
}
zepto.Z.prototype = Z.prototype = $.fn
简单的zepto实现
myZepto.js实现javascript
(function(window) {
var zepto = {};
function Z(dom, selector) {
var i, len = dom ? dom.length : 0;
for (i = 0; i < len; i++) {
this[i] = dom[i];
}
this.length = len;
this.selector = selector || '';
}
zepto.Z = function(dom, selector) {
return new Z(dom, selector);
}
zepto.init = function(selector) {
var slice = Array.prototype.slice;
var dom = slice.call(document.querySelectorAll(selector));
return zepto.Z(dom, selector);
}
var $ = function(selector) {
return zepto.init(selector);
}
window.$ = $;
$.fn = {
css: function(key, value) {
console.log(key, value);
},
html: function() {
return "html";
}
}
Z.prototype = $.fn
})(window)
jquery如何使用原型
var jQuery = function(selector){
//注意new关键字，第一步就找到了构造函数
return new jQuery.fn.init(selector);
}
//定义构造函数
var init = jQuery.fn.init = function(selector){
var slice = Array.prototype.slice;
var dom = slice.call(document.querySelectorAll(selector));
var i,len=dom?dom.length:0;
for(i = 0;i<len;i++) this[i] = dom[i];
this.length = len;
this.selector = selector || '';
}
//初始化jQuery.fn
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
css: function(key, value) {},
html: function(value) {}
}
//定义原型
init.prototype = jQuery.fn
原型的扩展性
如何体现原型的扩展性
- 总结
zepto和jquery原型的使用 - 插件机制
为何要把原型放在
$.fn上
init.prototype = jQuery.fn;css
zepto.Z.prototype = Z.prototype = $.fnhtml
由于要扩展插件前端
//作一个简单的插件
$.fn.getNodeName = function(){
return this[0].nodeName
}
好处
- 只有
$会暴露在window全局变量上 - 将插件扩展统一到
$.fn.xxx这一接口，方便使用
异步
什么是单线程，和异步有什么关系
- 单线程：只有一个线程，同一时间只能作一件事，两段JS不能同时执行
- 缘由：避免DOM渲染的冲突
- 解决方案：异步
为何js只有一个线程：避免DOM渲染冲突
- 浏览器须要渲染DOM
- JS能够修改DOM结构
- JS执行的时候，浏览器DOM渲染会暂停
- 两端JS也不能同时执行(都修改DOM就冲突了)
- webworker支持多线程，可是不能访问DOM
什么是event-loop
- 事件轮询，JS实现异步的具体解决方案
- 同步代码，直接执行(主线程)
- 异步函数先放在异步队列中（任务队列）
- 待同步函数执行完毕，轮询执行异步队列的函数
setTimeout(function(){
console.log(1);
},100); //100ms以后才放入异步队列中，目前异步队列是空的
setTimeout(function(){
console.log(2); //直接放入异步队列
})
console.log(3) //直接执行
//执行3以后，异步队列中只有2，把2拿到主线程执行
//2执行完以后，异步队列中并无任务，因此一直轮询异步队列
//直到100ms以后1放入异步队列，将1拿到主线程中执行
$.ajax({
url:'./data.json',
success:function(){ //网络请求成功就把success放入异步队列
console.log('a');
}
})
setTimeout(function(){
console.log('b')
},100)
setTimeout(function(){
console.log('c');
})
console.log('d')
//打印结果：
//d //d
//c //c
//a //b
//b //a
//真实环境不会出现dacb
解决方案存在的问题
- 问题一：没按照书写方式执行，可读性差
- 问题二：callback中不容易模块化
是否用过jQuery的Deferred
- jQuery1.5的变化
- 使用jQuery Deferred
- 初步引入Promise概念
jQuery1.5以前
var ajax = $.ajax({
url:'./data.json',
success:function(){
console.log('success1');
console.log('success2');
console.log('success3');
},
error:function(){
console.log('error');
}
})
console.log(ajax); //返回一个XHR对象
jQuery1.5以后
第一种写法：vue
var ajax = $.ajax('./data.json');
ajax.done(function(){
console.log('success1')
})
.fai(function(){
console.log('fail')
})
.done(function(){
console.log('success2');
})
console.log(ajax); //deferred对象
第二种写法：java
var ajax = $.ajax('./data.json');
ajax.then(function(){
console.log('success1')
},function(){
console.log('error1');
})
.then(function(){
console.log('success2');
},function(){
console.log('error');
})
- 没法改变JS异步和单线程的本质
- 只能从写法上杜绝callback这种形式
- 它是一种语法糖，可是解耦了代码
- 很好的提现：开放封闭原则(对扩展开放对修改封闭)
使用jQuery Deferred
给出一段很是简单的代码，使用setTimeout函数node
var wait = function(){
var task = function(){
console.log('执行完成');
}
setTimeout(task,2000)
}
wait();
新增需求：要在执行完成以后进行某些特别复杂的操做，代码可能会不少，并且分好几步jquery
function waitHandle(){
var dtd = $.Deferred(); //建立一个deferred对象
var wait = function(dtd){ // 要求传入一个deferred对象
var task = function(){
console.log("执行完成");
dtd.resolve(); //表示异步任务已完成
//dtd.reject() // 表示异步任务失败或者出错
};
setTimeout(task,2000);
return dtd;
}
//注意，这里已经要有返回值
return wait(dtd);
}
//使用
var w = waithandle()
w.then(function(){
console.log('ok1');
},function(){
console.log('err2');
})
.then(function(){
console.log('ok2');
},function(){
console.log('err2');
})
//还有w.wait w.fail
总结：dtd的API可分红两类，用意不一样
- 第一类：
dtd.resolve、dtd.reject - 第二类：
dtd.then、dtd.done、dtd.fail - 这两类应该分开，不然后果严重！
能够在上面代码中最后执行dtd.reject()试一下后果linux
使用
dtd.promise()
function waitHandle(){
var dtd = $.Deferred();
var wait = function(){
var task = function(){
console.log('执行完成');
dtd.resolve();
}
setTimeout(task,2000)
return dtd.promise(); //注意这里返回的是promise，而不是直接返回deferred对象
}
return wait(dtd)
}
var w = waitHandle(); //promise对象
$.when(w).then(function(){
console.log('ok1');
},function(){
console.log('err1');
})
//w.reject() //w.reject is not a function
监听式调用：只能被动监听，不能干预promise的成功和失败git
- 能够jQuery1.5对ajax的改变举例
- 说明如何简单的封装、使用deferred
- 说明promise和Defrred的区别
要想深刻了解它，就须要知道它的前世此生
Promise的基本使用和原理
基本语法回顾
fucntion loadImg() {
var promise = new Promise(function(resolve,reject) {
var img = document.getElementById("img")
img.onload = function(){
resolve(img)
}
img.onerror = function(){
reject()
}
})
return promise
}
var src = ""
var result = loadImg(src)
result.then(function() {
console.log(1, img.width)
return img
}, fucntion() {
console.log('error 1')
}).then(function(img) {
console.log(1, img.width)
})
异常捕获
规定：then只接受一个函数，最后统一用catch捕获异常
var src = ""
var result = loadImg(src)
result.then(function() {
console.log(1, img.width)
return img
}).then(function(img) {
console.log(1, img.width)
}).catch(function(ex) {
//最后统一捕获异常
console.log(ex)
})
多个串联
var scr1 = 'https://www.imooc.com/static/img/index/logo_new.png';
var result1 = loadImg(src1);
var src2 = 'https://www.imooc.com/static/img/index/logo_new1.png';
var result2 = loadImg(src2);
result1.then(function(img1) {
console.log('第一个图片加载完成', img1.width);
return result2; //重要
}).then(function(img2) {
console.log('第二个图片加载完成', img2.width);
}).catch(function(ex) {
console.log(ex);
})
Promise.all和Promise.race
Promise.all接收一个promise对象的数组- 待所有完成后，统一执行
success
Promise.all([result1, result2]).then(datas => {
//接收到的datas是一个数组，依次包含了多个promise返回的内容
console.log(datas[0]);
console.log(datas[1]);
})
Promise.race接收一个包含多个promise对象的数组- 只要有一个完成，就执行
success
Promise.race([result1, result2]).then(data => {
//data即最早执行完成的promise的返回值
console.log(data);
})
Promise标准
状态
- 三种状态：
pending,fulfilled,rejected- 初始状态：
pendingpending变为fulfilled,或者pending变为rejected- 状态变化不可逆
then
promise必须实现then这个方法then()必须接收两个函数做为标准then返回的必须是一个promise实例
没有return就是默认返回的result
Promise总结
- 基本语法
- 如何异常捕获(
Error和reject) - 多个串联-链式执行的好处
-
Promise.all和Promise.race -
Promise标准 - 状态变化、then函数
介绍一下async/await(和Promise的区别、联系)
es7提案中，用的比较多，babel也已支持
koa框架 generator替换async/await
解决的是异步执行和编写逻辑
then只是将callback拆分了
var w = watiHandle()
w.then(function(){...},function(){...})
.then(function(){...},function(){...})
async/await是最直接的同步写法
const load = async function(){
const result1 = await loadImg(src1)
console.log(result1)
const result2 = await loadImg(src2)
console.log(result2)
}
load()
用法
- 使用
await，函数后面必须用async标识await后面跟的是一个Promise实例- 须要
balbel-polyfill(兼容)特色
- 使用了
Promise，并无和Promise冲突 - 彻底是同步的写法，再也没有回调函数
- 可是：改变不了
JS单线程、异步的本质
总结一下当前JS异步的方案
虚拟DOM
vdom 是什么？为什么会存在 vdom？
什么是vdom
- virtual dom,虚拟DOM
- 用JS模拟DOM结构
- DOM变化的对比，放在JS层来作(图灵完备语言:能实现各类逻辑的语言)
- 提升重绘性能
DOM
<ul id="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
</ul>
虚拟DOM
{
tag: 'ul',
attrs: {
id: 'list'
},
children: [{
tag: 'li',
attrs: { className: 'item' },
children: ['item1']
},
{
tag: 'li',
attrs: { className: 'item' },
children: ['item2']
}
]
}
//className代替class,由于class是js的保留字
浏览器最耗费性能就是DOM操做，DOM操做很是昂贵
如今浏览器执行JS速度很是快
这就是vdom存在的缘由
一个需求场景
//将该数据展现成一个表格
//随便修改一个信息，表格也随着修改
[
{
name: 'zhangsan',
age: 20,
address: 'beijing'
},
{
name: 'lisi',
age: 21,
address: 'shanghai'
},
{
name: 'wangwu',
age: 22,
address: 'guangzhou'
}
]
用jQery实现
//渲染函数
funciton render(data) {
//此处省略n行
}
//修改信息
$('#btn-change').click(function(){
data[1].age = 30;
data[2].address = 'shenzhen';
render(data);
})
//初始化时渲染
render(data)
//render函数具体写法
function render(data) {
$container = $("#container");
//清空现有内容
$container.html('');
//拼接table
var $table = $('<table>')
$table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'))
data.forEach(item => {
$table.append($('<tr><td>' + item.name + '</td><td>' + item.age + '</td><td>' + item.address + '</td></tr>'))
$container.append($table)
});
}
//只执行了一次渲染，相对来讲仍是比较高效的
//DOM渲染是最昂贵的，只能尽可能避免渲染
遇到的问题
- DOM操做是“昂贵”的，JS运行效率高
- 尽可能减小DOM操做，而不是"推倒重来"(清空重置)
- 项目越复杂，影响就越严重
- vdom可解决这个问题
var div = document.createElement('div');
var item,result = '';
for(item in div){
result += '|' + item;
}
console.log(result);
//浏览器默认建立出来的DOM节点，属性是很是多的
//result
|align|title|lang|translate|dir|dataset|hidden|tabIndex|accessKey|draggable|spellcheck|autocapitalize|contentEditable|isContentEditable|inputMode|offsetParent|offsetTop|offsetLeft|offsetWidth|offsetHeight|style|innerText|outerText|onabort|onblur|oncancel|oncanplay|oncanplaythrough|onchange|onclick|onclose|oncontextmenu|oncuechange|ondblclick|ondrag|ondragend|ondragenter|ondragleave|ondragover|ondragstart|ondrop|ondurationchange|onemptied|onended|onerror|onfocus|oninput|oninvalid|onkeydown|onkeypress|onkeyup|onload|onloadeddata|onloadedmetadata|onloadstart|onmousedown|onmouseenter|onmouseleave|onmousemove|onmouseout|onmouseover|onmouseup|onmousewheel|onpause|onplay|onplaying|onprogress|onratechange|onreset|onresize|onscroll|onseeked|onseeking|onselect|onstalled|onsubmit|onsuspend|ontimeupdate|ontoggle|onvolumechange|onwaiting|onwheel|onauxclick|ongotpointercapture|onlostpointercapture|onpointerdown|onpointermove|onpointerup|onpointercancel|onpointerover|onpointerout|onpointerenter|onpointerleave|nonce|click|focus|blur|namespaceURI|prefix|localName|tagName|id|className|classList|slot|attributes|shadowRoot|assignedSlot|innerHTML|outerHTML|scrollTop|scrollLeft|scrollWidth|scrollHeight|clientTop|clientLeft|clientWidth|clientHeight|attributeStyleMap|onbeforecopy|onbeforecut|onbeforepaste|oncopy|oncut|onpaste|onsearch|onselectstart|previousElementSibling|nextElementSibling|children|firstElementChild|lastElementChild|childElementCount|onwebkitfullscreenchange|onwebkitfullscreenerror|setPointerCapture|releasePointerCapture|hasPointerCapture|hasAttributes|getAttributeNames|getAttribute|getAttributeNS|setAttribute|setAttributeNS|removeAttribute|removeAttributeNS|hasAttribute|hasAttributeNS|toggleAttribute|getAttributeNode|getAttributeNodeNS|setAttributeNode|setAttributeNodeNS|removeAttributeNode|closest|matches|webkitMatchesSelector|attachShadow|getElementsByTagName|getElementsByTagNameNS|getElementsByClassName|insertAdjacentElement|insertAdjacentText|insertAdjacentHTML|requestPointerLock|getClientRects|getBoundingClientRect|scrollIntoView|scrollIntoViewIfNeeded|animate|computedStyleMap|before|after|replaceWith|remove|prepend|append|querySelector|querySelectorAll|webkitRequestFullScreen|webkitRequestFullscreen|scroll|scrollTo|scrollBy|createShadowRoot|getDestinationInsertionPoints|ELEMENT_NODE|ATTRIBUTE_NODE|TEXT_NODE|CDATA_SECTION_NODE|ENTITY_REFERENCE_NODE|ENTITY_NODE|PROCESSING_INSTRUCTION_NODE|COMMENT_NODE|DOCUMENT_NODE|DOCUMENT_TYPE_NODE|DOCUMENT_FRAGMENT_NODE|NOTATION_NODE|DOCUMENT_POSITION_DISCONNECTED|DOCUMENT_POSITION_PRECEDING|DOCUMENT_POSITION_FOLLOWING|DOCUMENT_POSITION_CONTAINS|DOCUMENT_POSITION_CONTAINED_BY|DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC|nodeType|nodeName|baseURI|isConnected|ownerDocument|parentNode|parentElement|childNodes|firstChild|lastChild|previousSibling|nextSibling|nodeValue|textContent|hasChildNodes|getRootNode|normalize|cloneNode|isEqualNode|isSameNode|compareDocumentPosition|contains|lookupPrefix|lookupNamespaceURI|isDefaultNamespace|insertBefore|appendChild|replaceChild|removeChild|addEventListener|removeEventListener|dispatchEvent
vdom如何应用，核心API是什么
介绍snabbdom
一个实现vdom的库,vue升级2.0借鉴了snabbdom的算法
var container = document.getElementById('container')
var vnode = h('div#container.two.classes', { on: { click: someFn } }, [
h('span', { style: { fontWeight: 'bold' }, 'This is bold' }),
'and this is just normal text',
h('a', { props: { href: '/foo' } }, 'I\'ll take you places')
])
//patch into empty DOM element - this modifies the DOM as a side effect
patch(container, vnode)
var newVnode = h('div#container.two.classes', { on: { click: anotherEventHandle } }, [
h('span', { style: { fontWeight: 'normal', fontStyle: 'italic' } }, 'this is now italic type'),
'and this is still just normal text',
h('a', { props: { href: '/bar' } }, 'I\'ll take you places')
])
//send `patch` invocation
patch(vnode, newVnode); //Snabbdom efficiently updates the old view to the new state
h函数
{
tar: 'ul',
attrs: {
id: 'list'
},
children: [
{
tag: 'li',
attrs: {
className: 'item',
children: ['item1']
}
},
{
tag: 'li',
attrs: {
className: 'item'
},
children: ['item2']
}
]
}
对应的vnode
var vnode = h('ul#list', {}, [
h('li.item', {}, 'Item1'),
h('li.item', {}, 'Item')
])
patch函数
var vnode = h('ul#list', {}, [
h('li.item', {}, 'Item1'),
h('li.item', {}, 'Item2')
])
var container = document.getElementById('container')
patch(container, vnode)
//模拟改变
var btnChange = document.getElementById('btn-change')
btnChange.addEventListener('click', function() {
var newVnode = h('ul#list', {}, [
h('li.item', {}, 'Item 111'),
h('li.item', {}, 'Item 222'),
h('li.item', {}, 'Item 333')
])
patch(vnode, newVnode)
})
<div id="container"></div> <button id="btn-change">change</button> <script src="https://cdn.bootcss.com/snabbdom/0.7.2/snabbdom.js"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.2/snabbdom-class.js"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.2/snabbdom-props.js"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.2/snabbdom-style.js"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.2/snabbdom-eventlisteners.js"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.2/h.js"></script>
<script type="text/javascript">
var snabbdom = window.snabbdom
//定义patch
var patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
])
//定义h函数
var h = snabbdom.h
var container = document.getElementById('container')
//生成vnode
var vnode = h('ul#list',{},[
h('li.list',{},'Item1'),
h('li.list',{},'Item2'),
])
patch(container,vnode)
document.getElementById('btn-change').addEventListener('click',function(){
//生成newVode
var newVnode = h('ul#list',{},[
h('li.list',{},'Item1'),
h('li.item',{},'Item B'),
h('li.item',{},'Item 3')
])
patch(vnode,newVnode)
})
</script>
从新实现前面的demo(用snabbdom实现)
var snabbdom = window.snabbdom
var patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
])
var h = snabbdom.h
var container = document.getElementById('container')
var btnChange = document.getElementById('btn-change')
var vnode
var data = [{
name: 'zhangsan',
age: 20,
address: 'beijing'
},
{
name: 'zhangsan',
age: 20,
address: 'shanghai'
},
{
name: 'zhangsan',
age: 20,
address: 'shenzhen'
}
]
data.unshift({
name:'姓名：',
age:'年龄：',
address:'地址：'
})
render(data);
function render(data){
var newVnode = h('table',{},data.map(function(item){
var tds = [],i
for(i in item){
if(item.hasOwnProperty(i)){
tds.push(h('td',{},item[i]+''))
}
}
return h('tr',{},tds)
}))
if(vnode){
patch(vnode,newVnode)
}else{
patch(container,newVnode)
}
vnode = newVnode //存储当前vnode结果
}
btnChange.addEventListener('click',function(){
data[1].age = 30
data[2].address = '深圳'
//re-render
render(data)
})
核心API
- h函数的用法
h('<标签名>',{...属性...},[...子元素...])
h('<标签名>',{...属性...},'...')
- patch函数用法
patch(container,vnode) patch(vnode,newVnode) //rerender
介绍一下diff算法
什么是diff算法
linux中的diff：找出两个文件中的不一样:
diff log1.txt log2.txt
git diff:修改以前和修改以后版本的差别
git diff xxxx.js
网上的一些在线差别化网站
http://tool.oschina.net/diff/
diff算法并非vdom提出的概念，一直存在
如今应用到vdom中，对比的是两个虚拟dom
去繁就简
-
diff算法很是复杂，实现难度很大，源码量很大 - 去繁就简，讲明白核心流程，不关心细节
- 面试官大部分也不清楚细节，可是很关心核心流程
- 去繁就简以后，依然具备很大的挑战性
vdom为什么要使用
diff
- DOM操做是“昂贵”的，所以尽可能减小DOM操做
- 找出本次DOM必须更新的节点来更新，其余的不更新
- “找出”的过程，就须要
diff算法
diff算法实现
diff实现的过程
- patch(container,vnode)
如何用vnode生成真实的dom节点
{
tag: 'ul',
attrs: {
id: 'list'
},
children: [
{
tag: 'li',
attrs: {
className: 'item'
},
children:['item 1']
}
]
}
<ul id = "list">
<li class='item'>Item 1</li>
</ul>
简单实现算法
function createElement(vnode) {
var tag = vnode.tag;
var attrs = vnode.attrs || {};
var children = vnode.children || [];
if (!tag) {
return null
}
//建立元素
var elem = document.createElement(tag);
//属性
var attrName;
for (attrName in atts) {
if (attrs.hasOwnProperty(attrName)) {
elem.setAttribute(attrName, attrs[attrName])
}
}
//子元素
children.array.forEach(childVnode => {
elem.appendChild(createElement(childVnode))
});
return elem;
}
- patch(vnode,newVnode)
{
tag: 'ul',
attrs: { id: 'list' },
children: [{
tag: 'li',
attrs: { className: 'item' },
children: ["Item 1"]
},
{
tag: 'li',
attrs: {
className: 'item',
children: ['Item 2']
}
}
]
}
对比：
{
tag: 'ul',
attrs: { id: 'list' },
children: [{
tag: 'li',
attrs: { className: 'item' },
children: ["Item 1"]
},
{
tag: 'li',
attrs: {
className: 'item',
children: ['Item 222']
}
},
{
tag: 'li',
attrs: {
className: 'item',
children: ['Item 3']
}
}
]
}
简单实现
function updateChildren(vnode, newVnode) {
var children = vnode.children || [];
var newChildren = newVnode.children || [];
//遍历现有的children
children.forEach((child, index) => {
var newChild = newChildren[index];
if (newChild == null) {
return;
}
if (child.tag === newChild.tag) {
updateChildren(child, newChild)
} else {
replaceNode(child, newChild)
}
});
}
- 节点新增和删除
- 节点从新排序
- 节点属性、样式、事件绑定
- 如何积极压榨性能
MVVM和Vue
使用jQuery和使用框架的区别
数据与视图的分离，解耦(封闭开放原则)
-
jquery中数据与视图混合在一块儿了,不符合开放封闭原则 -
vue:经过Vue对象将数据和View彻底分离开来了
以数据驱动视图
-
jquery彻底违背了这种理念，jquery直接修改视图，直接操做DOM -
vue对数据进行操做再也不须要引用相应的DOM对象，经过Vue对象这个vm实现相互的绑定。以数据驱动视图，只关心数据变化，DOM操做被封装对MVVM的理解
MVC
MVVM
- Model:数据，模型
- View:视图、模板(视图和模型是分离的)
- ViewModel:链接Model和View
MVVM不算是创新，ViewModel算是一种微创新
是从mvc发展而来，结合前端场景的创新
如何实现MVVM
Vue三要素
- 响应式：
vue如何监听到data的每一个属性变化 - 模板引擎：vue的模板如何被解析，指令如何处理
- 渲染
：vue的模板如何渲染成html`，以及渲染过程
vue中如何实现响应式
什么是响应式
- 修改
data属性以后，vue马上监听到(而后马上渲染页面) -
data属性被代理到vm上
Object.defineProperty
ES5中加入的API，因此Vue不支持低版本浏览器(由于低版本浏览器不支持这个属性)
var obj = {};
var _name = 'zhangsan';
Object.defineProperty(obj,"_name",{
get:function(){
console.log("get");
return _name;
},
set:function(newVal){
console.log(newVal);
_name = newVal;
}
});
console.log(obj.name) //能够监听到
obj.name = 'list'
模拟实现
var vm = new Vue({
el: '#app',
data: {
price: 100,
name: 'zhangsan'
}
})
var vm = {}
var data = {
name: 'zhangsan',
price: 100
}
var key, value
for (key in data) {
//命中闭包。新建一个函数，保证key的独立的做用域
(function(key) {
Object.defineProperty(vm, key, {
get: function() {
console.log('get')
return data[key]
},
set: function(newVal) {
console.log('set')
data[key] = newVal
}
})
})(key)
}
vue如何解析模板
模板是什么
- 本质：字符串；有逻辑,如v-if,if-if，嵌入JS变量...
- 与html格式很像，但有很大区别(静态)，最终仍是要转化为html显示
-
模板最终必须转换成JS代码
- 一、由于有逻辑(v-for,v-if)，必须用JS才能实现(图灵完备)
- 二、转换为html渲染页面，必须用JS才能实现
- 所以，模板最重要转换成一个JS函数(render函数)
render函数
先了解with()的使用
function fn1() {
with(obj) {
console.log(name);
console.log(age);
getAddress()
}
}
最简单的一个示例
<div id="app">
<p>{{price}}</p>
</div>
with(this) { //this：vm
return _c(
'div',
{
attrs: { "id": "app" }
},
[
_c('p',[_v(_s(price))] ) //price代理到了vm上
]
)
}
//vm._c
ƒ (a, b, c, d) { return createElement(vm, a, b, c, d, false); }
//vm._v
ƒ createTextVNode (val) {
return new VNode(undefined, undefined, undefined, String(val))
}
//vm._s
ƒ toString (val) {
return val == null? '': typeof val === 'object'? JSON.stringify(val, null,2): String(val)
}
- 模板中全部信息都包含在了render函数中
-
this即vm -
price即this.price,即data中的price -
_c即this._c即vm._c
更复杂的一个例子
<div id="app">
<div>
<input v-model="title">
<button v-on:click="add">submit</button>
</div>
<div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</div>
如何寻找render函数：code.render模板如何生成render函数：
vue2.0开始就支持预编译，咱们在开发环境下写模板，通过编译打包，产生生产环境的render函数(JS代码）
with(this){ // this 就是 vm
return _c(
'div',
{
attrs:{"id":"app"}
},
[
_c(
'div',
[
_c(
'input',
{
directives:[
{
name:"model",
rawName:"v-model",
value:(title),
expression:"title"
}
],
domProps:{
"value":(title)
},
on:{
"input":function($event){
if($event.target.composing)return;
title=$event.target.value
}
}
}
),
_v(" "),
_c(
'button',
{
on:{
"click":add
}
},
[_v("submit")]
)
]
),
_v(" "),
_c('div',
[
_c(
'ul',
_l((list),function(item){return _c('li',[_v(_s(item))])})
)
]
)
]
)
}
//vm._l
function renderList(val,render) {
var ret, i, l, keys, key;
if (Array.isArray(val) || typeof val === 'string') {
ret = new Array(val.length);
for (i = 0, l = val.length; i < l; i++) {
ret[i] = render(val[i], i);
}
} else if (typeof val === 'number') {
ret = new Array(val);
for (i = 0; i < val; i++) {
ret[i] = render(i + 1, i);
}
} else if (isObject(val)) {
keys = Object.keys(val);
ret = new Array(keys.length);
for (i = 0, l = keys.length; i < l; i++) {
key = keys[i];
ret[i] = render(val[key], key, i);
}
}
if (isDef(ret)) {
(ret)._isVList = true;
}
return ret
}
- v-model是怎么实现的？
- v-on:click是怎么实现的
- v-for是怎么实现的
render函数与DOM
- 已经解决了模板中"逻辑"(
v-for,v-if)的问题 - 还剩下模板生成html的问题
-
另外,vm_c是什么?
render函数返回了什么- vm._c其实就至关于
snabbdom中的h函数 -
render函数执行以后，返回的是vnode
- vm._c其实就至关于
vm._update(vnode) {
const prevVnode = vm._vnode
vm._vnode = vnode
if (!prevVnode) {
vm.$sel = vm.__patch__(vm.$sel, vnode) //与snabbdom中的patch函数差很少
} else {
vm.$sel = vm.__patch__(prevVnode, vnode)
}
}
funciton updateComponent() {
//vm._render即上面的render函数，返回vnode
vm._update(vm._render())
}
-
updateComponent中实现了vdom的patch - 页面首次渲染执行
updateComponent -
data中每次修改属性，执行updataCommponent
vue的实现流程
第一步：解析模板成
render函数
- with的用法
- 模板中全部的信息都被
render函数包含 - 模板中用到的
data中的属性，都变成了js变量 - 模板中的
v-model、v-if、v-on都变成了js逻辑 - render函数返回vnode
第二步：响应式监听
Object.defineProperty- 将
data属性代理到vm上
第三步：首次渲染，显示页面，且绑定依赖
- 初次渲染，执行
updateaComponent，执行vm._render() - 执行
render函数，会访问到vm.list和vm.title -
会被响应式的
get方法监听到(为何监听get？直接监听set不就好了吗？)-
data中有不少属性，有些会被用到，有些可能不会被用到 - 被用到的会走到
get，不被用到的不会走get - 未走到
get中的属性，set的时候咱们也无需关系 - 避免没必要要的重复渲染
-
- 执行
updateComponent,会走到vdom的patch方法 -
patch将vnode渲染成DOM，初次渲染完成
第四步：data属性变化，触发rerender
- 属性修改，被响应式的
set监听到 -
set中执行updateaComponetn -
updateComponent从新执行vm._render() - 生成的
vnode和prevVnode，经过patch进行对比 - 渲染到
html中
// ## 组件化和React
Hybrid
- 移动端占大部分流量，已经远远超过pc
- 一线互联网公司都有本身的APP
- 这些APP中有很大比例的前端代码，拿微信举例，你天天浏览微信的内容，不少都是前端
hybrid是什么，为什么用hybrid，如何实现
hybrid文字解释
-
hybrid即“混合”,即前端和客户端的混合开发 - 需前端开发人员和客户端人员配合完成
- 某些环节也可能涉及到
server端
存在价值，为什么会用hybrid
- 能够快速迭代更新【关键】(无须app审核)
- 体验流畅(和NA的体验基本相似)
- 减小开发和沟通成本，双端公用一套代码
webview
- 是app中的一个组件(app能够有
webview，也能够没有) - 用于加载h5页面，即一个小型的浏览器内核
file://协议
-
其实在一开始接触html开发，已经使用file协议了
- 加载本地文件，快
- 网络加载，慢
- “协议”、“标准的重要性”
要作到和原生同样的体验，就必需要求加载速度特别的快，变态的快，和客户端几乎同样的快
hybrid适用场景
- 使用NA：体验要求极致，变化不频繁(如头条的首页)
- 使用hybrid：体验要求高，变化频繁(如头条的新闻详情页)
- 使用h5：体验无要求，不经常使用(如举报，反馈等页面)
hybrid具体实现
- 前端作好静态页面(html js css)，将文件交给客户端
- 客户端拿到前端静态页面，以文件的形式存储在app中
- 客户端在一个webview中
- 使用file协议加载静态页面
app发布以后，如何实时更新
分析
- 要替换每一个客户端的静态文件
- 只能客户端来作(客户端是咱们开发的)
- 客户端去serve下载最新的静态文件
- 咱们维护server的静态文件
具体实现
- 分版本有版本号，如201803211015
- 将静态文件压缩成zip包，上传到服务端
- 客户端每次启动，都去服务端检查版本号
- 若是服务端版本号大于客户端版本号，就去下载最新的zip包
- 下载完以后解压包，而后将现有文件覆盖
hybrid和h5区别
优势：
- 体验更好，跟NA体验基本一致
- 可快速迭代，无须app审核【关键】
缺点：
- 开发成本高。联调、测试、查bug都比较麻烦
- 运维成本高。(参考此前讲过的更新上线的流程)
适用场景：
-
hybrid：产品的稳定功能，体验要求高，迭代频繁 -
h5：单次的运营活动(如xx红包)或不经常使用功能 -
hybrid适合产品型，h5适合运营型
JS和客户端通信
前端如何获取内容
- 新闻详情页适用
hybrid，前端如何获取新闻内容 - 不能用ajax获取。第一跨域(
ajax是http协议)，第二速度慢。 - 客户端获取新闻内容，而后JS通信拿到内容，再渲染。
JS和客户端通信的基本形式
schema协议简介和使用
- 以前介绍了http(s)和file协议
- schema协议--前端和客户端通信的约定
function invokScan() {
window['_invok_scan_callback'] = function(result){
alert(result)
}
var iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = 'weixin://dl/scan?k1=v1&k1=v2&callback=_invok_scan_callback' //重要
var body = document.body
body.appendChild(iframe)
setTimeout(() => {
body.removeChild(iframe)
iframe = none
});
}
document.getElementById('btn').addEventListener('click', function() {
invokScan();
})
schema使用的封装
咱们但愿封装后达到的效果：
/*傻瓜式调用，并且不用再本身定义全局函数 */
window.invok.share({title:'xxxx',content:'xxx'},funciton(result){
if(result.error === 0){
alert('分享成功')
}else{
//分享失败
alert(result.message)
}
})
//分享
function invokeShare(data,callback){
_invoke('share',data,callback)
}
//登陆
function invokeLogin(data,callback){
_invoke('login',data,callback)
}
//打开扫一扫
function invokeScan(data,callback){
_invoke('scan',data,callback)
}
//暴露给全局
window.invoke = {
share:invokeShare,
login:invokeLogin,
scan:invokeScan
}
function _invoke(action,data,callback){
//拼接schema协议
var schema = 'myapp://utils';
scheam += '/' + action;
scheam += '?a=a';
var key;
for(key in data){
if(data.hasOwnProperty(key)){
schema += '&' + key + '=' +data[key]
}
}
}
//处理callback
var callbackName = ''
if(typeof callback == 'string'){
callbackName = callback
}else{
callbackName = action + Date.now()
window[callbackName] = callback
}
schema += '&callback' + callbackName
(function(window, undefined) {
//调用schema封装
function _invoke(action, data, callback) {
//拼装schema协议
var schema = 'myapp://utils/' + action;
//拼接参数
schema += '?a=a';
var key;
for (key in data) {
if (data.hasOwnProperty(key)) {
schema += '&' + key + '=' + data[key];
}
}
//处理callback
var callbackName = '';
if (typeof callback === 'string') {
callbackName = callback
} else {
callbackName = action + Date.now()
window[callbackName] = callback
}
schema += 'allback = callbackName'
}
//暴露到全局变量
window.invoke = {
share: function(data, callback) {
_invoke('share', data, callback)
},
scan: function(data, callback) {
_invoke('scan', data, callback)
},
login: function(data, callback) {
_invoke('login', data, callback)
}
}
})(window)
内置上线
- 将以上封装的代码打包,叫作
invoke.js，内置到客户端 - 客户端每次启动
webview，都默认执行invoke.js - 本地加载，没有网络请求，黑客看到不到
schema协议，更安全
总结
- 通信的基本形式：调用能力，传递参数，监听回调
- 对schema协议的理解和使用
- 调用schema代码的封装
- 内置上线：更快更安全
相关文章
- 1. 前端面试之路三(javaScript高级篇)
- 2. 前端面试-高级篇
- 3. 初级前端的面试之路（三）
- 4. 前端高频面试题 JavaScript篇
- 5. 前端JavaScript高级面试笔记
- 6. 前端面试题总结（三）JavaScript篇
- 7. 前端高级面试题@JS篇
- 8. web前端面试题之JavaScript篇
- 9. 前端面试题之JavaScript篇
- 10. 面试高频（三：前端路由）
- 更多相关文章...
- • XML DOM 高级 - XML 教程
- • Markdown 高级技巧 - Markdown 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • 三篇文章了解 TiDB 技术内幕——说存储
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 前端面试之路三(javaScript高级篇)
- 2. 前端面试-高级篇
- 3. 初级前端的面试之路（三）
- 4. 前端高频面试题 JavaScript篇
- 5. 前端JavaScript高级面试笔记
- 6. 前端面试题总结（三）JavaScript篇
- 7. 前端高级面试题@JS篇
- 8. web前端面试题之JavaScript篇
- 9. 前端面试题之JavaScript篇
- 10. 面试高频（三：前端路由）