資訊專(zhuān)欄INFORMATION COLUMN
摘要：原型原型的實(shí)際應(yīng)用原型如何實(shí)現(xiàn)它的擴(kuò)展性原型的實(shí)際應(yīng)用和的簡(jiǎn)單使用是原型方法是原型方法是原型方法是原型方法如何使用原型空對(duì)象源碼中，這里的處理情況比較復(fù)雜。
原型
原型的實(shí)際應(yīng)用原型的實(shí)際應(yīng)用
原型如何實(shí)現(xiàn)它的擴(kuò)展性
jquery和zepto的簡(jiǎn)單使用
jquery test1
jquery test2
jquery test3
jquery test in 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如何使用原型
//空對(duì)象
var zepto = {}
zepto.init = function(){
//源碼中，這里的處理情況比較復(fù)雜。但因?yàn)槭潜敬沃皇轻槍?duì)原型，因此這里就弱化了
var slice = Array.prototype.slice
var dom = slice.call(document.querySelectorAll(selector))
return zepto.Z(dom,selector)
}
//即使用zepto時(shí)候的$
var $ = function(selector){
return zepto.init(selector)
}
//這就是構(gòu)造函數(shù)
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
簡(jiǎn)單的zepto實(shí)現(xiàn)
myZepto.js實(shí)現(xiàn)
(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關(guān)鍵字，第一步就找到了構(gòu)造函數(shù)
return new jQuery.fn.init(selector);
}
//定義構(gòu)造函數(shù)
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
原型的擴(kuò)展性
如何體現(xiàn)原型的擴(kuò)展性
總結(jié)zepto和jquery原型的使用
插件機(jī)制
為什么要把原型放在$.fn上
init.prototype = jQuery.fn;
zepto.Z.prototype = Z.prototype = $.fn
因?yàn)橐獢U(kuò)展插件
//做一個(gè)簡(jiǎn)單的插件
$.fn.getNodeName = function(){
return this[0].nodeName
}
好處
只有$會(huì)暴露在window全局變量上
將插件擴(kuò)展統(tǒng)一到$.fn.xxx這一接口，方便使用
異步
什么是單線(xiàn)程，和異步有什么關(guān)系
單線(xiàn)程：只有一個(gè)線(xiàn)程，同一時(shí)間只能做一件事，兩段JS不能同時(shí)執(zhí)行
原因：避免DOM渲染的沖突
解決方案：異步
為什么js只有一個(gè)線(xiàn)程：避免DOM渲染沖突
瀏覽器需要渲染DOM
JS可以修改DOM結(jié)構(gòu)
JS執(zhí)行的時(shí)候，瀏覽器DOM渲染會(huì)暫停
兩端JS也不能同時(shí)執(zhí)行(都修改DOM就沖突了)
webworker支持多線(xiàn)程，但是不能訪問(wèn)DOM
?
什么是event-loop
事件輪詢(xún)，JS實(shí)現(xiàn)異步的具體解決方案
同步代碼，直接執(zhí)行(主線(xiàn)程)
異步函數(shù)先放在異步隊(duì)列中（任務(wù)隊(duì)列）
待同步函數(shù)執(zhí)行完畢，輪詢(xún)執(zhí)行異步隊(duì)列的函數(shù)
setTimeout(function(){
console.log(1);
},100); //100ms之后才放入異步隊(duì)列中，目前異步隊(duì)列是空的
setTimeout(function(){
console.log(2); //直接放入異步隊(duì)列
})
console.log(3) //直接執(zhí)行
//執(zhí)行3之后，異步隊(duì)列中只有2，把2拿到主線(xiàn)程執(zhí)行
//2執(zhí)行完之后，異步隊(duì)列中并沒(méi)有任務(wù)，所以一直輪詢(xún)異步隊(duì)列
//直到100ms之后1放入異步隊(duì)列，將1拿到主線(xiàn)程中執(zhí)行
$.ajax({
url:"./data.json",
success:function(){ //網(wǎng)絡(luò)請(qǐng)求成功就把success放入異步隊(duì)列
console.log("a");
}
})
setTimeout(function(){
console.log("b")
},100)
setTimeout(function(){
console.log("c");
})
console.log("d")
//打印結(jié)果：
//d //d
//c //c
//a //b
//b //a
//真實(shí)環(huán)境不會(huì)出現(xiàn)dacb
解決方案存在的問(wèn)題
問(wèn)題一：沒(méi)按照書(shū)寫(xiě)方式執(zhí)行，可讀性差
問(wèn)題二：callback中不容易模塊化
是否用過(guò)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); //返回一個(gè)XHR對(duì)象
?
jQuery1.5之后
第一種寫(xiě)法：
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對(duì)象
第二種寫(xiě)法：
var ajax = $.ajax("./data.json");
ajax.then(function(){
console.log("success1")
},function(){
console.log("error1");
})
.then(function(){
console.log("success2");
},function(){
console.log("error");
})
無(wú)法改變JS異步和單線(xiàn)程的本質(zhì)
只能從寫(xiě)法上杜絕callback這種形式
它是一種語(yǔ)法糖，但是解耦了代碼
很好的提現(xiàn)：開(kāi)放封閉原則(對(duì)擴(kuò)展開(kāi)放對(duì)修改封閉)
使用jQuery Deferred
給出一段非常簡(jiǎn)單的代碼，使用setTimeout函數(shù)
var wait = function(){
var task = function(){
console.log("執(zhí)行完成");
}
setTimeout(task,2000)
}
wait();
新增需求：要在執(zhí)行完成之后進(jìn)行某些特別復(fù)雜的操作，代碼可能會(huì)很多，而且分好幾步
function waitHandle(){
var dtd = $.Deferred(); //創(chuàng)建一個(gè)deferred對(duì)象
var wait = function(dtd){ // 要求傳入一個(gè)deferred對(duì)象
var task = function(){
console.log("執(zhí)行完成");
dtd.resolve(); //表示異步任務(wù)已完成
//dtd.reject() // 表示異步任務(wù)失敗或者出錯(cuò)
};
setTimeout(task,2000);
return dtd;
}
//注意，這里已經(jīng)要有返回值
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
總結(jié)：dtd的API可分成兩類(lèi)，用意不同
第一類(lèi)：dtd.resolve 、 dtd.reject
第二類(lèi)：dtd.then、dtd.done、dtd.fail
這兩類(lèi)應(yīng)該分開(kāi)，否則后果嚴(yán)重！
可以在上面代碼中最后執(zhí)行dtd.reject()試一下后果
使用dtd.promise()
function waitHandle(){
var dtd = $.Deferred();
var wait = function(){
var task = function(){
console.log("執(zhí)行完成");
dtd.resolve();
}
setTimeout(task,2000)
return dtd.promise(); //注意這里返回的是promise，而不是直接返回deferred對(duì)象
}
return wait(dtd)
}
var w = waitHandle(); //promise對(duì)象
$.when(w).then(function(){
console.log("ok1");
},function(){
console.log("err1");
})
//w.reject() //w.reject is not a function
監(jiān)聽(tīng)式調(diào)用：只能被動(dòng)監(jiān)聽(tīng)，不能干預(yù)promise的成功和失敗
可以jQuery1.5對(duì)ajax的改變舉例
說(shuō)明如何簡(jiǎn)單的封裝、使用deferred
說(shuō)明promise和Defrred的區(qū)別
要想深入了解它，就需要知道它的前世今生
Promise的基本使用和原理
基本語(yǔ)法回顧
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)
})
異常捕獲
規(guī)定：then只接受一個(gè)函數(shù)，最后統(tǒng)一用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) {
//最后統(tǒng)一捕獲異常
console.log(ex)
})
多個(gè)串聯(lián)
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("第一個(gè)圖片加載完成", img1.width);
return result2; //重要
}).then(function(img2) {
console.log("第二個(gè)圖片加載完成", img2.width);
}).catch(function(ex) {
console.log(ex);
})
Promise.all和Promise.race
Promise.all接收一個(gè)promise對(duì)象的數(shù)組
待全部完成后，統(tǒng)一執(zhí)行success
Promise.all([result1, result2]).then(datas => {
//接收到的datas是一個(gè)數(shù)組，依次包含了多個(gè)promise返回的內(nèi)容
console.log(datas[0]);
console.log(datas[1]);
})
Promise.race接收一個(gè)包含多個(gè)promise對(duì)象的數(shù)組
只要有一個(gè)完成，就執(zhí)行success
Promise.race([result1, result2]).then(data => {
//data即最先執(zhí)行完成的promise的返回值
console.log(data);
})
Promise標(biāo)準(zhǔn)
狀態(tài)
三種狀態(tài)：pending,fulfilled,rejected
初始狀態(tài)：pending
pending變?yōu)?b>fulfilled,或者pending變?yōu)?b>rejected
狀態(tài)變化不可逆
then
promise必須實(shí)現(xiàn)then這個(gè)方法
then()必須接收兩個(gè)函數(shù)作為標(biāo)準(zhǔn)
then返回的必須是一個(gè)promise實(shí)例
沒(méi)有return就是默認(rèn)返回的result
Promise總結(jié)
基本語(yǔ)法
如何異常捕獲(Error和reject)
多個(gè)串聯(lián)-鏈?zhǔn)綀?zhí)行的好處
Promise.all和Promise.race
Promise標(biāo)準(zhǔn) - 狀態(tài)變化、then函數(shù)
介紹一下async/await(和Promise的區(qū)別、聯(lián)系)
es7提案中，用的比較多，babel也已支持
koa框架 generator替換async/await
解決的是異步執(zhí)行和編寫(xiě)邏輯
then只是將callback拆分了
var w = watiHandle()
w.then(function(){...},function(){...})
.then(function(){...},function(){...})
async/await是最直接的同步寫(xiě)法
const load = async function(){
const result1 = await loadImg(src1)
console.log(result1)
const result2 = await loadImg(src2)
console.log(result2)
}
load()
用法
使用await，函數(shù)后面必須用async標(biāo)識(shí)
await后面跟的是一個(gè)Promise實(shí)例
需要balbel-polyfill(兼容)
特點(diǎn)
使用了Promise，并沒(méi)有和Promise沖突
完全是同步的寫(xiě)法，再也沒(méi)有回調(diào)函數(shù)
但是：改變不了JS單線(xiàn)程、異步的本質(zhì)
總結(jié)一下當(dāng)前JS異步的方案
虛擬DOM
vdom 是什么？為何會(huì)存在 vdom？
什么是vdom
virtual dom,虛擬DOM
用JS模擬DOM結(jié)構(gòu)
DOM變化的對(duì)比，放在JS層來(lái)做(圖靈完備語(yǔ)言:能實(shí)現(xiàn)各種邏輯的語(yǔ)言)
提高重繪性能
DOM
- Item 1
- Item 2
虛擬DOM
{
tag: "ul",
attrs: {
id: "list"
},
children: [{
tag: "li",
attrs: { className: "item" },
children: ["item1"]
},
{
tag: "li",
attrs: { className: "item" },
children: ["item2"]
}
]
}
//className代替class,因?yàn)閏lass是js的保留字
瀏覽器最耗費(fèi)性能就是DOM操作，DOM操作非常昂貴
現(xiàn)在瀏覽器執(zhí)行JS速度非?？?br>這就是vdom存在的原因
一個(gè)需求場(chǎng)景
//將該數(shù)據(jù)展示成一個(gè)表格
//隨便修改一個(gè)信息，表格也隨著修改
[
{
name: "zhangsan",
age: 20,
address: "beijing"
},
{
name: "lisi",
age: 21,
address: "shanghai"
},
{
name: "wangwu",
age: 22,
address: "guangzhou"
}
]
用jQery實(shí)現(xiàn)
//渲染函數(shù)
funciton render(data) {
//此處省略n行
}
//修改信息
$("#btn-change").click(function(){
data[1].age = 30;
data[2].address = "shenzhen";
render(data);
})
//初始化時(shí)渲染
render(data)
//render函數(shù)具體寫(xiě)法
function render(data) {
$container = $("#container");
//清空現(xiàn)有內(nèi)容
$container.html("");
//拼接table
var $table = $("| name | age | address |
| " + item.name + " | " + item.age + " | " + item.address + " |
