JavaScript 进阶之深入理解数据双向绑定

作者/分享人:小青年
向 Ta 提问
目前就任于赞同科技研究院,参与赞同移动云生态产品研发,担任移动端项目组负责人,负责混合式开发架构设计和核心功能开发。

谈起当前前端最热门的JS 框架,必少不了 Vue、React、Angular,对于大多数人来说,我们更多的是在使用框架,对于框架解决痛点背后使用的基本原理往往关注不多,近期在研读 Vue.js 源码,也在写源码解读的系列文章。和多数源码解读的文章不同的是,我会尝试从一个初级前端的角度入手,由浅入深去讲解源码实现思路和基本的语法知识,通过一些基础事例一步步去实现一些小功能。

本场 Chat 是系列 Chat 的开篇,我会首先讲解一下数据双向绑定的基本原理,介绍对比一下三大框架的不同实现方式,同时会一步步完成一个简单的 mvvm 示例。读源码不是目的,只是一种学习的方式,目的是在读源码的过程中提升自己,学习基本原理,拓展编码的思维方式。

实录提要:

  • 如何在 Vue、React、Angular 中作出技术选型吗,各自的优劣是什么?
  • 如何有效的读源码?
  • Vue 的双向绑定带来的数据注入的速度是由什么注入的?
  • Angular 和 Vue 的数据双向绑定的原理有什么不同?
  • 如何学习 JS,怎么能做到如此深入剖析框架的源码?
  • 如何提高 Vue H5 应用的首次加载速度及性能?
已有508人预订
预订达标
文章出炉
交流日期
     
17.06.12
17.06.27
17.07.04 20:30
查看文章评论/提问
leotao
现在主流都是数据驱动,能不能说说ng1的service数据注入,react-redux,vuex这三着不同点和共同点吗?还有就是数据驱动的好处是什么?
小青年: 首先对于共同点而言,不管是Angular的服务,还是redux/vuex都是为了解决组件数据共享和状态管理的问题。对于实现而言,Angular通过依赖注入(Dependency Injection)实现,redux 是 React 生态环境中最流行的 Flux 的实现,vuex受到 Elm 启发的状态管理库。redux/vuex在用法上类似之处。对于具体原理和源码暂未做深入学习,也不便于误导大家,后面学习了再可以分享一下。之前写过一篇文章[Angular系列学习笔记(一)—— 聊聊angular的模块化](http://www.jianshu.com/p/0fc26c75f089),对Angular和Vue.js有一些对比,可以参考一下。数据驱动的好处最大的优势,一方面解放了前端频繁操作DOM实现页面交互,通过数据模型的变动影响页面中的状态,状态更加方便管理,对于前后端对接后端API也更加方便了,数据结构变动修改也更加方便。
静安
最近公司想搞混合式开发,提高开发效率,目前流行几种有,react、Angular,vue,以及ionic,请问选择哪个来做混合开发会比较适合国情?
小青年: 没有绝对好的框架和平台,要结合团队的技术栈和项目来谈。比如有些团队有原生开发人员,自己写原生插件都不难,找自己相对熟悉的技术架构或者社区比较好的框架可能更加合适。混合式开发最关键的部分是调用js与原生层交互,对于前端开发来说,对于原生的部分可能比较生疏,所以开发过程中难免会涉及和原生开发人员交接。就生态而言React Native可能更加成熟,但就开发工具而言ionic(Angular+cordova)可能比较方便,weex(Vue.js生态的原生拓展)目前初步看还不够成熟,生态和完善程度还不够。如果团队没有原生开发人员,不妨可以看看html5plus标准,可以结合vue.js做一些实践。
哈比
太认真了_(:з」∠)_
Xhavit🍭
可以聊聊如何在 Vue、React、Angular 中作出技术选型吗,他们各自的优劣是什么?
小青年: Vue、React、Angular其实是解决前端同一个领域的问题,基本上都是为了解决前端组件化、工程化的问题提出的问题。三个框架有很多共同点,比如都有基于web components的实现,也有很多不同,比如数据变动依赖收集的方式也有所不同。
问一个和本文内容关系不大的问题。读源码是程序员一种重要的学习方式,但我感觉我读源码缺乏一些技巧,效率不高,获取到的信息有些零散,没有联系起来。请老师给一些建议,分享一些读源码的技巧。
小青年: 作为一个程序员,写代码是我们工作的一部分,读源码则是提升自己非常好的途经。只写代码不读代码往往代码缺乏通用的规范性、处理问题的思路过于单一、对理论理解不深。读源码一般主要是读框架或者库源码。两者的复杂程度、抽象性可能有很大的区别。一般而言框架的源码都分为一些模块,我们不可能一下子读懂所有的代码,所以先要从一些简单模块开始,对于库首先需要明白相关的封装技巧。至于技巧,我一般用一下几个方法: - 使用IDE代码折叠功能,配合脑图工具和写注释分模块,理清楚整体结构,然后分模块阅读; - 把源码的部分文件先拿出来,删除一些不太重要的代码,先把最简情况实现 - 先整体后局部,先主要后次要,对于源码中涉及的重要代码查阅相关文档,比如MDN这种查阅核心知识点。
你可能还喜欢
哪些算法和数据结构是需要程序员必须掌握的?
zhen.guo
ACT 敏捷教练培养体系
Chat 三人行
Spring Cloud Consul 从入门到精通
如梦技术 dreamlu
技术部门 Leader 与团队那些事
Eason
Spring Data JPA 晋级提升篇:复杂场景实战用法与优化
张振华
高并发、高性能 Web 架构解决方案
Array老师
微信扫描登录