摘要：原型原型的实际应用原型如何实现它的扩展性原型的实际应用和的简单使用是原型方法是原型方法是原型方法是原型方法如何使用原型空对象源码中，这里的处理情况比较复杂。
原型
原型的实际应用原型的实际应用
原型如何实现它的扩展性
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 + " |
