摘要：那个率先改变的实例的返回值，就会传递给的回调函数。函数对函数的改进，体现在以下四点内置执行器。进一步说，函数完全可以看作多个异步操作，包装成的一个对象，而命令就是内部命令的语法糖。中的本质就是没有的隐藏的组件。
1、原型 - jquery使用
注释 : 实例虽然不同，但是构造函数是同一个。
jquery源码中，原型的使用：
为什么要把原型方法放在$.fn上？
好处:
只有 $ 会暴露在window全局变量
将插件扩展统一到$.fn.xxx这一个接口，方便使用
2、原型 - Zepto - 1 使用
3、什么是单线程，和异步的关系：
单线程 - 只有一个线程，只做一件事
原因 - 避免DOM渲染的冲突
解决方案 - 异步
4、 js单线程的原因
原因 - 避免DOM渲染冲突
浏览器需要渲染DOM
js可以修改DOM结构
js执行的时候，浏览器DOM渲染会暂停
两段js也不能同时执行(都修改DOM就冲突了)
webworker支持多线程，但是不能访问DOM
解决方案 - 异步
比如：
单线程 - 总结
问题解答： 单线程就是同时间只能做一件事，两段js不能同时执行 原因就是为了避免DOM渲染的冲突 异步是一种“无奈”的解决方案，虽然有很多问题 解决方案 - 异步 问题1：没按照书写顺序执行，可读性差 问题2：callback中不容易模块化
5、event -loop 事件轮询
什么是event-loop：
事件轮询，js实现异步的具体解决方案
同步代码，直接执行
异步函数先放在异步队列中
待同步函数执行完毕，轮询执行异步队列的函数
实例分析1：
实例分析2：
注释：javascript引擎，轮询机制会一直监视异步队列，当异步队列中有函数时，会拿到主线程中执行，然后再回来继续监视异步队列，当异步队列有函数时，再拿到主线程中执行，然后回来继续监视异步队列....
6、jqueryy-deferred-介绍
jquery 1.5 的变化：
无法改变js异步和单线程的本质
只能从写法上杜绝callback这种形式
它是一种语法糖形式，但是解耦了代码
开放封闭原则(对扩展开放，对修改封闭)的很好体现
7、jquery - defered - 应用-1
改造后：
使用 dtd.promise
8、promise - 语法回顾
9、promise - 串联
10、 promise-all-race
Promise.all()方法：最终promise的状态有result1、result2决定，分成两种情况：
1.只有result1、result2的状态都变成fullfilled，promise的状态才会变成fullfilled，此时result1、result2的返回值组成一个数组，传递给promise的回调函数
2.只要result1、result2之中有一个被rejected，promise的状态就会变成rejected，此时第一个被reject的实例的返回值，会传递给promise的回调函数
Promise.race()方法：
只要result1、result2中有一个实例率先改变状态，promise的状态就跟着改变。那个率先改变的Promise实例的返回值，就会传递给promise的回调函数。
11、async-await
then只是将callback拆分了
async/await 是最直接的同步写法
Generator函数，依次读取两个文件：
改写成async函数，如下
一比较就会发现，async函数就是将Generator函数的星号(*)替换成async，将yield替换成await，仅此而已。
async函数对Generator函数的改进，体现在以下四点：
1.内置执行器。
2.更好的语义。
3.更广的适用性。
4.返回值是Promise。
进一步说，async函数完全可以看作多个异步操作，包装成的一个Promise对象，而await命令就是内部then命令的语法糖。
12、什么是vdom
virtual dom,虚拟DOM
用js模拟DOM结构
DOM变化的对比，放在js层来做(图灵完备语言:能实现高复杂逻辑的语言)，提高效率
提高重绘性能
用js来模拟dom
vdom - 总结
DOM操作是“昂贵”的，js运行效率高
尽量减少DOM操作，而不是“推倒重来”
项目越复杂，影响就越严重
vdom即可解决这个问题
13、使用 vdom-snabbdom-1
介绍 snabbdom：
介绍snabbdom - h函数：
介绍snabbdom - patch 函数
14、使用vdom -snabbdom 示例
15、使用vdom - 总结
16、Diff算法 - vdom 为何要使用Diff
DOM操作是“昂贵”的，因此尽量减少DOM
找出本次DOM必须跟新的节点来更新，其他的不更新
这个“找出”的过程，就需要diff算法
17、Diff算法 - 实现-1
18、Diff算法 - 总结
知道什么是diff算法，是linux的基础命令
vdom中应用diff算法是为了找出需要更新的节点
diff实现，patch(container,vnode) patch(vnode,newVnode)
核心逻辑，createElement 和updateChildren
19、从jQuery 到框架 - 总结
数据和视图的分离，解耦(开放封闭原则：对扩展开放，对修改封闭)
以数据驱动视图，只关心数据变化，DOM操作给封装
20、如何理解MVVM -MVC
MVC：
21、如何理解MVVM -MVVM
Model -模型、数据
View - 视图、模板(视图和模板是分离的)
ViewModel - 连接Model和View的桥梁
图解：
注释：View通过事件绑定来操作Model，Model通过数据绑定来操作View
关于ViewModel：
MVVM不算是一种创新
但其中的ViewModel却是一种创新
真正结合前端场景应用的创建
22、Vue三要素(MVVM框架的三大要素)
响应式：vue如何监听到data的每个属性变化？
模板引擎：vue的模板如何被解析，指令如何处理？
渲染：vue的模板如何被渲染成html？以及渲染过程
23、响应式-介绍：修改data属性之后，vue立刻监听到。实现的核心函数：Object.defineProperty (vue2.0)
重写 get和set函数。
响应式 - 模拟:
24、模板解析 - 模板是什么
本质：字符串
有逻辑，如v-if,v-for等
与html格式很像，但有很大区别
最终还要转换为html来显示
模板最终必须转换成js代码，因为：
模板有逻辑，必须用js才能实现(图灵完备语言)
转换为html渲染页面，必须用js才能实现
因此，模板最终要转换成一个js函数(render函数)
25、 render函数 - with的用法
26、render函数 - 讲解
render函数：
模板中所有信息都包含在了render函数中
this即vm
price即this.price即vm.price,即data中的price
_c即this._c 即vm._c
如下图：
27、如何在源码中查找生成的render函数：
1.先写一个简单的vue-demo示例：
2.在未压缩的源码中搜索“code.render”。
3.打印出来。
此时，模板已经变成了render函数了。
render函数和vdom
vm._c 其实就相当于snabbdom中的h函数。
render函数执行之后，返回的是vnode。
渲染页面：updateComponent
updateComponent中 实现了vdom的patch
页面首次渲染执行updateComponent
data中每次修改属性，执行updateComponent
28、vue的整个实现流程：
第一步：解析模板成render函数
第二步：响应式开始监听
第三步：首次渲染，显示页面，且绑定依赖
第四步：data属性变化，触发rerender
第一步：
第二步：
第三步：
什么要监听get，直接监听set不行吗:
data中有很多属性，有些被用到，有些可能不被用到。被用到的会走到get，不被用到的不会走到get。未走到get中的属性，set的时候我们也无需关心。避免不必要的重复渲染
第四步：
附加：
vuex的工作原理：
其本质就是讲我们传入的state作为一个隐藏的vue组件的data，也就是说：我们的commit操作，本质上其实就是修改这个组件的data的值。vuex中的store本质就是没有template的隐藏的vue组件。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106918.html
摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...
摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...
摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...
摘要：在上百种语言中算是命好的一个，还有就是最近纳入高考体系的。由以下三个部分构成。就是对实现该标准规定的各个方面内容的语言的描述。是针对但经过扩展的用于的应用程序编程接口。将页面映射为由节点构成的树状结构。 JavaScript的历史这里就不再赘述了，当然JavaScript的历史还是比较有意思的。在上百种语言中JavaScript算是‘命’好的一个，还有就是最近纳入高考体系的python...
摘要：前言今天和大家一起聊聊的推荐书籍，每一本都是精选，做前端开发的朋友们如果没读过，可以尝试一下。如果怕麻烦，也可以关注晓舟报告，发送获取书籍，四个字，就可以得到电子书的提取码。 前言 今天和大家一起聊聊JavaScript的推荐书籍，每一本都是精选，做前端开发的朋友们如果没读过，可以尝试一下。下面给大家简单介绍了书的内容，还有读书的方法，希望可以帮大家提升读书效率。 一、《JavaScr...
阅读 1450·2021-11-25 09:43
阅读 1585·2021-11-24 10:41
阅读 2988·2021-09-27 13:36
阅读 699·2019-08-30 15:53
阅读 3443·2019-08-30 15:44
阅读 724·2019-08-30 14:03
阅读 2466·2019-08-29 16:38
阅读 892·2019-08-29 13:23
