从 BackboneJS 的源码开始说事件模型

z2xy 发布于2019-08-19 14:19 / 388人阅读

摘要：最终期待的参数是事件名称，回调函数，回调函数上下文，最终期待的参数是事件名称，回调函数，回调函数上下文，最终期待的参数是时间名称，。

为什么要事件模型

先从 BackboneJS 开始说起。BackboneJS 设计的比较好的一部分代码就是事件相关的内容，传送门：
http://backbonejs.org/docs/backbone.html#section-13

jQuery 里面用到最多的就是bind相关的操作，为一个按钮绑定点击事件，给他解绑一个事件或者解绑所有事件，这一类的事件都是面向Dom对象。富应用中还需要一类孤立于DOM的事件，他们也需要类似添加事件、删除事件、解绑事件和触发事件。例如监测URL的变化，在其他地方可能绑定了很多事件，但是真实变化的时候只需要触发一下边能执行所有方法。

事件模型的代码

最终我自己框架里面写的事件很大部分参考了 BackboneJS ,具体代码传送门：
https://github.com/vincenting/HaiyiYun/blob/master/src/vintjs.js#L175

主要的功能包括绑定 on ，解绑 off ，触发 trigger 。on 最终期待的参数是(事件名称，回调函数，回调函数上下文），off最终期待的参数是（事件名称[，回调函数][，回调函数上下文]），trigger 最终期待的参数是(时间名称[，args...])。但是为了灵活，还需要一些灵活的参数，例如时间名称允许是多个事件名称以空格分开，以及以对象的形式同时传入名称和回调函数。于是 BackboneJS 中使用了eventsApi 进行统一的处理。

题外话－内存洁癖

Javascript 里面写[]实际上是 new Array，因此很容易无意中产生很多使用很临时的列表对象，例如一些临时列表，作为参数使用 apply 传递给函数。对于一个列表来说，最快的清空方法就是修改他的length，如下

var arr = [1,2,3,4];
arr.length = 0;
console.log(arr);

之后 arrObj 内容便会被释放。这样的对象可以多次使用，但是非临时的变量一定不能使用。原因如下：

var arr = [1,2,3,4];
var new_list = arr;
arr.length = 0;
console.log(new_list[0]);

相同的 Object 也可以运用类似的方法来重复使用。这些都是为了尽量减少对象的新建，页面一直开着什么情况都有可能发生，其他对象也是如此，字符串、函数、正则对象。

可能用到事件的地方

之前有提到的url变化的时候会触发事件，这些事件可能包括去寻找对应的路由并解析，对当前状态存在的事件统一解绑，删除Dom等等。

控制器间的通信也会用到事件模型。一个控制器中触发了一个事件，然后事件被触发去和其他控制器通信。

数据和视图的绑定也需要使用事件。一个数据更新了调用什么方法去更新视图，一个列表删除或者添加数据了又去调用什么方法去更新视图。

还有就是系统内部的解耦等等。

完成事件之后就需要去监听url的变化并且解析，以及一些类似于后台的url处理方法。（更新待续）

云服务器 GPU云服务器解析域名从哪里开始云计算从零开始大数据从零开始学java从什么开始

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77921.html

给自己挖个坑，开始去开发javascript富应用框架

摘要：是目前项目中正在用的框架。现在前端这块再次到了这样的瓶颈，所以决定自己开始开发和维护自己的一个框架。不强制绑定，但是会制定其他规则来避免用户手动请求。项目目前完成板块事件绑定及触法地址处理以及路由处理。为什么要框架随着电脑运算能力的不断提升，越来越多的网站开始将一些数据处理，简单的业务逻辑交予前端。于是前端，特别是所谓的 Webapp 中,出现了大量的数据处理以及业务逻辑，前端的...

lidashuang 2019-08-19 14:19 评论0 收藏0
富应用中 URL 管理以及 Javascript 测试

摘要：一个是使用锚链接，即的方式实现。做程序的人大多了解测试。传统的测试方法就是在完成后手动去触发事件，然后手动输入来检测是否得到预期的效果。引入了测试框架后工作简单了很多。前篇传送门给自己挖个坑，开始去开发富应用框架从的源码开始说事件模型 URL 存在的意义在于使用者可以使用一段字符串就可以找到对应的资源。富应用中的内容改变都是通过 Javascript 去改变文档内容，某种角度上来说整个...

kid143 2019-08-19 14:21 评论0 收藏0
Backbone.js学习笔记（一）

摘要：它通过数据模型进行键值绑定及事件处理，通过模型集合器提供一套丰富的用于枚举功能，通过视图来进行事件处理及与现有的通过接口进行交互。本人兼职前端付费技术顾问，如需帮助请加本人微信hawx1993或QQ345823102，非诚勿扰 1.为初学前端而不知道怎么做项目的你指导 2.指导并扎实你的JavaScript基础 3.帮你准备面试并提供相关指导性意见 4.为你的前端之路提供极具建设性的...

FrancisSoung 2019-08-21 10:21 评论0 收藏0
【译】JavaScript 框架的探索与变迁（上）

摘要：正文在年，框架的选择并不少。特别的，通过思考这些框架分别如何处理状态变化是很有用的。本文探索以下的数据绑定，的脏检查的虚拟以及它与不可变数据结构之间的联系。当状态产生变化时，只有真正需要更新的部分才会发生改变。译者言近几年可谓是 JavaScript 的大爆炸纪元，各种框架类库层出不穷，它们给前端带来一个又一个的新思想。从以前我们用的 jQuery 直接操作 DOM，到 Backb...

Jaden 2019-08-21 17:22 评论0 收藏0
Redux、Flux、Vuex

摘要：结构和数据流一个单向数据流是模式的核心，上面示图应该是程序员心中主要的模型图。前言这篇文章不会用具体的代码去阐述redux、flux或者vuex，因为我觉得它们所带来的更是一种编程思想。前端进化和框架演变在很久以前，前端没有MVVM的概念，MVVM是对MVC细化的说法（个人觉得两者区别不大），MVC的模式一直在后台使用，效果和优点都很明显。后来前端工程师仿照MVC模式开发了很...

joy968 2019-08-21 14:35 评论0 收藏0