技术最前端,专注 Web 技术学习与总结。JavaScript, JS, ES6, TypeScript, Vue, PHP, CSS3, Html5, Node, Git, Markdown 等技术文章。
使用过 AngularJS 的朋友应该最感兴趣的是它的指令。现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能,并且AngularJS 是目前唯一提供Web应用可复用能力的框架。
目前有很多 JavaScript 产品提供插件给Web开发人员。例如,Bootstrap 就是当前比较流行的提供样式和 JavaScript 插件的前端开发工具包。但是开发人员在使用 Booostrap 中的插件时, 必须切换到 JavaScript 模式来写 jQuery 代码来激活插件虽然 jQuery 代码写起来十分简单,但是必须和 HTML 进行同步,这是一个单调乏味且容易出错的过程。
双向数据绑定指的就是,绑定对象属性的改变到用户界面的变化的能力,反之亦然。换种说法,如果我们有一个 user 对象和一个 name 属性,一旦我们赋了一个新值给 user.name,在 UI 上就会显示新的姓名了。同样地,如果 UI 包含了一个输入用户姓名的输入框,输入一个新值就应该会使 user 对象的 name 属性做出相应的改变。
很多热门的 JS 框架客户端如 Ember.js,Angular.js 或者 KnockoutJS,都在最新特性上刊登了双向数据绑定。这并不意味着从零实现它很难,也不是说需要这些功能的时候,采用这些框架是唯一的选择。下面的想法实际上很基础,可以被认为是3步走计划:
第一次翻译外文,就拿这篇作为第一次练习。加上一些自己的理解并且做了些删减。
正文开始:
我的实践经验证明有两种好方法来学习一项新技术
自己重新实现这个项目
分析那些你所知道的技术概念是如何运用在这个项目里的
在一些情况下第一种方式很难做到。比如,如果你为了理解 kernel(linux内核)的工作原理而去重新实现一次它会很困难很慢。往往更有效的是你去实现一个轻量的版本,去除掉那些你没兴趣的技术细节,只关注核心功能。
第二种方法一般是很有效的,特别是当你具有一些相似的技术经验的时候。最好的证明就是我写的 angularjs-in-patterns
前端的视图层和数据层有时需要实现双向绑定(two-way-binding),例如 mvvm 框架,数据驱动视图,视图状态机等,研究了几个目前主流的数据双向绑定框架,总结了下。目前实现数据双向绑定主要有以下三种。
比较老的实现方式,有点像观察者编程模式,主要思路是通过在数据对象上定义 get 和 set 方法(当然还有其它方法),调用时手动调用 get 或 set 数据,改变数据后出发 UI 层的渲染操作;以视图驱动数据变化的场景主要应用于 input、select、textarea 等元素,当 UI 层变化时,通过监听 dom 的 change,keypress,keyup 等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成。