前端面試之路三(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. 面試高頻（三：前端路由）