暴力分析backbone.js(8)

继续上一节,这节来分析Backbone.Events.on方法里的if语句。

  先看一下on方法的if语句。

  

  我们先不看它的满足条件,直接先看结果,会执行什么。 return this,在一个函数里,遇到return,那么下面的代码将不会被执行。

  我们在把if语句分块一下

  1. || 逻辑运算符,就是说,2条表达式,其中一条为false 时,执行if语句
  2. !eventsApi(this, ‘on‘, name, [callback, context]):eventsApi这个函数并没有在前面出现过,我来检索一下在分析一下。
  3. !callback: callback是回调函数,就是说,callback为false即都会满足if语句。

  把代码定位到line183,来分析一下 eventsApi,先来看一下图片

  

  先来对比一下形参和实参,看看传进来的是什么东西?

  实参:

eventsApi(this, ‘on‘, name, [callback, context])

  形参:

var eventsApi = function(obj, action, name, rest) {}

  然后在把eventsApi函数内的 return划分出来,原因是Backbone.Events.on方法下的if语句的判断条件内执行了 eventsApi函数 前面是逻辑非运算符,即eventsApi函数执行后,return false,即Backbone.Events.on方法下的if满足条件。

  eventsApi函数内总共有4个return (注意return false的都是地雷)

  1.判断形参 (非name)  name === false即满足条件

if (!name) return true;

  2.检查name形参的类型 === ‘object‘,然后是这个for in,思考一下,一般我们的自定义函数名不会传对象,我试着传递{}对象,空对象没有属性,根本遍历不出东西,所以根本不会执行obj[action].apply(obj, [key, name[key]].concat(rest)); 这个可能适用于其他场景,等以后面遇见了在讲解。

if (typeof name === ‘object‘) {
  for (var key in name) {
    obj[action].apply(obj, [key, name[key]].concat(rest));
  }
  return false;
}

  3. eventSplitter在line177 var eventSplitter = /\s+/;  查找对应的字符串中是否存在,这个也可能是适用于其他的场景,等以后遇见在讲解。

if (eventSplitter.test(name)) {
  var names = name.split(eventSplitter);
  for (var i = 0, l = names.length; i < l; i++) {
    obj[action].apply(obj, [names[i]].concat(rest));
  }
  return false;
}

  4.前面3个条件都没满足,就return true。

return true;

  

  感觉有点不好,就算传参错了,还是返回this。没有异常,不过既然这样写,一定是有这样写的道理吧,待挖掘!

时间: 2024-11-18 16:35:11

暴力分析backbone.js(8)的相关文章

暴力分析backbone.js(2)

继续上一节内容,带着疑问和简单的Dome来分析backbone.js. 这次我把简单Dome Copy到本地,引入backbone.js库.(这里我就不引入其他库了,麻烦,所以要简单修改一下!) 1 <body> 2 <script src="backbone.js"></script> 3 <script> 4 (function(doc){ 5 6 var ListView = Backbone.View.extend({ 7 el:

暴力分析backbone.js(3)

继续上一节内容,上一节发现backbone.js有很多依赖库,还分了3条路,我选择了最基础的装备jQuery 和 undercore,走最后一条.带着疑问和简单的Dome来分析backbone.js. 从最后一条路开始讲解,来看一下代码 1 root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender || root.$)); 仔细看一段,root.Backbone = factory(...

暴力分析backbone.js(5)

好,继续分析Backbone,写完上一节后,我们清晰的分析思路了,这节就按照思路来走. 现在我来区分一下几大块的位置. 作为实参function(root, Backbone, _, $){}函数,它包裹了Backbone的主要功能. 从 line28 —— line1610. Backbone.Events(事件) 从 line68 —— line236. Backbone.Model(模型) 从 line238 —— line587. Backbone.Collection(控制器) 从 l

暴力分析backbone.js(4)

写完了上一节后,突然发现我一开始都(从上往下分析)构思,不合理. 来看几张图 在看看backbone的api结构. 给大家看这些的原因,也是我一个分析的思路.我会先把源码里的8大块划分出来,大概的略过一遍,然后在独个独个的把小功能讲解一边. 当然除了公开的功能,还少不了私有的功能. 看完了这些是不是可以发挥想象力,如果让我们来写这个东西会怎么写? 1 var backbone = { 2 events : { 3 }, 4 5 model : { 6 }, 7 8 collection : {

暴力分析backbone.js(7)

上一节分析到,Backbone.Events.on方法的 return this; 来看一张图: 整个on方法,我把分成了2个部分,正常传参下褐红色框框内的基本语法已经分析完了.但是我们想想是不是缺了什么? 正常传参之外触发这段if语句 虽然分析完基础语法,但是还没分析它为何这样写? 好,我们先来分析它为何这样写? on方法的最基础写法:需要一个对象,它必须'融合'(融合这个词是我复制中文api的)Backbone.Events(绑定功能),说白了就是要可以用Events的功能. 我看一下最基本

Backbone.js源码分析(珍藏版)

源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely distributed under the MIT license. // For all details and documentation: // http://backbonejs.org (function () { // 创建一个全局对象, 在浏览器中表示为w

Backbone.js 0.9.2 源码分析收藏

Backbone 为复杂Javascript应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视图可以声明事件处理函数,并通过RESRful JSON接口连接到应用程序. 源码分析转之网上它人的备注,特收藏一下,以免方便阅读. // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Ba

Backbone.js入门学习笔记目录

//来自 https://www.the5fire.com/backbone-tutorials-catalogue.html 1.初识backbone.js 2.通过helloworld来认识下backbone 3.backbone中的model实例 4.backbone的collection实例 5.backbone中的Router实例 6.backbone中的view实例 7.backbone实例todos分析(一) 8.backbone实例todos分析(二)view的应用 9.back

使用Backbone.js, ExpressJS, node.js, MongoDB的web应用样板工程

这是web应用的一个完整的样板工程,用到了Backbone.js & Marionette, node.js & ExpressJS,MongoDB & Moogoose, Handlebars, Grunt.js, Bower和Browserify! 我建立了一个超级基础的单页面应用程序(SPA),就是一个简单的通讯录管理器, 但麻雀虽小,五脏俱全.我写这篇文章的目的是介绍一下这个应用所用到的整个技术栈:后端,数据,前端,工具和测试.主要包括下面这些技术: 后端: node.js