資訊專欄INFORMATION COLUMN
摘要：原型原型的實際應用原型如何實現它的擴展性原型的實際應用和的簡單使用是原型方法是原型方法是原型方法是原型方法如何使用原型空對象源碼中，這里的處理情況比較復雜。
原型
原型的實際應用原型的實際應用
原型如何實現它的擴展性
jquery和zepto的簡單使用
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如何使用原型
//空對象
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實現
(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
原型的擴展性
如何體現原型的擴展性
總結zepto和jquery原型的使用
插件機制
為什么要把原型放在$.fn上
init.prototype = jQuery.fn;
zepto.Z.prototype = Z.prototype = $.fn
因為要擴展插件
//做一個簡單的插件
$.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之后
第一種寫法：
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對象
第二種寫法：
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函數
var wait = function(){
var task = function(){
console.log("執行完成");
}
setTimeout(task,2000)
}
wait();
新增需求：要在執行完成之后進行某些特別復雜的操作，代碼可能會很多，而且分好幾步
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()試一下后果
使用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的成功和失敗
可以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
初始狀態：pending
pending變為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
- 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,因為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 = $("| name | age | address |
| " + item.name + " | " + item.age + " | " + item.address + " |
