backbone java_[Java教程]暴力分析backbone.js

[Java教程]暴力分析backbone.js

0 2015-05-03 18:02:50

前言：

1.在这里我先道个歉？——在开始’暴力’的分析backbone.js之前，有一些话我还是得说的，因为人与人之前的理解能力不同，水平也是不同的(有高有低)，如果我说错话，或者是分析的烂，请大家指正咯，共同成长咯。

2.为什么这个标题呢？——因为我也想不到更好的名字，还有就是分析方式，暴力暴力，就是从上往下的分析，有点chuo。

3.会用到的工具？——最最重要的是chrome。

4.需要具备什么知识呢？——Backbone.js是js，所以基本的js知识是必不可少的，还有就是会有那个chrome的F12。

5.分析思路？——决定写博客，决定分析这个backbone.js，所以我用了一晚想了个思路，虽然还有点模糊，待’执行’中改进，优化，清晰。要分析就要写学会用这个backbone.js，然后在从书面写法上来逐步分析深究它。(老实说我也还没用过这个backbone.js，让我们边学边用边分析)

6.还有？——博主是第一次写博客，多多包涵。

好，以完全不懂没用过backbone.js的角度来学习分析！

先从百度上找一个简单的backbone.js示例，先分析完简单的示例，在拿它来逐行分析backbone.js。思路。

注意：我会省略body标签之外的内容

1.本例说明最小化的视图的声明与实例化。效果演示看这里。(这里是直接复制别人博客的dome，我们通过代码和演示来分析)

(function($){//自运行的闭包 var ListView = Backbone.View.extend({ el: $('body'), // attaches `this.el` to an existing element. initialize: function(){ _.bindAll(this, 'render'); // fixes loss of context for 'this' within methods this.render(); // not all views are self-rendering. This one is. }, render: function(){ $(this.el).append("

• hello world

"); } }); var listView = new ListView(); })(jQuery);

好，结合代码和结果我们逐步分析：

1.一个自执行函数，$传参，传的是(jQuery)(function ($) { }(jQuery))

2.这里有2个变量3 var ListView = Backbone.View.extend({ 4 el: $('body'), 5 6 initialize: function(){ 7 _.bindAll(this, 'render'); 8 9 this.render(); 10 },11 12 render: function(){13 $(this.el).append("

• hello world

");14 }15 });16 17 var listView = new ListView();

变量listView，new ListView，可以看出来listView是 ListView的实例化，那么ListView就是一个构造函数。

变量ListView，从上面结论出ListView是构造函数：

(得出以下一系列疑问：

1.它是如何创建的呢？

2.它的属性？

3.它的方法？

)我一看，就看出ListView的属性和方法，却没有找到它是如何用构造出来的，构造函数在哪里啊在哪里！

细心的同学会发现这句 Backbone.View.extend({})，没错这句话就是Backbone构造函数的写法，妈蛋，这不是白说吗？别急，我们来对照原生写法(注意看注释)1 function human(){2 　　this.name = 'cc';　　// this.属性 = 属性值 === {属性:属性值} ， Backbone的属性和方法都是用对象写法{}3 　　this.age = 33;4 }

// function human(){} === var ListView = Backbone.View.extend({}) 其实原生的写法就 等于 Backbone的写法，可能我们懂得原生写法，却不懂Backbone的写法，别急！

5 human.prototype.showInfo = function () {6　　return this.name + ' ' + this.age7 };

// human.prototype.方法 = 函数 === {方法:函数} ， Backbone的属性和方法都是用对象写法{}

8var cc = new human('cc',33);9 console.log(cc.showInfo());

// 这里是原生实例化执行，那么Backbone实例化后执行了？ 仔细看一下Backbone实例化后'表面上看来'并没有执行，我们留个疑问

好，现在我们知道Backbone是如何构造函数，它的属性和方法是通过{}对象方式来写的：

(得出以下一系列疑问：

1.Backbone的构造写法为什么是这样写的Backbone.View.extend({})，它和原生写法有没有关系？

2.Backbone用到底是用来干什么的？

3.Backbone只是实例化了，并没有执行任何方法，按照原生写法，实例化后，我们执行实例化的一个方法？

)

我们先来解决疑问3，Backbone实例化后到底有没有执行方法？而不是解决它怎么去执行方法，这是后面逐步分析源码的事了。解决疑问的方法很多，我用我惯用的思维来解决。我们先来看一下我们复杂的Dome的ListView的2个原型方法：(注意注释)1 el: $('body'), // 获取body元素 2 3 initialize: function(){ 4 　　_.bindAll(this, 'render'); // 这个我们先不管，不懂 5 6 　　this.render(); // 执行 指向自身的render方法，对应下面 7 }, 8 9 render: function(){10 　　$(this.el).append("

• hello world

");11 } // this.el === body，$(body).append(元素)，这里是在body内添加

对照dome的最终效果和render方法，是在body内添加 ul > li:hello world，而render方法是通过initialize方法来调用，好，我们用断点来调试一下看看结果！

其实大家仔细看可以发现，执行listView 其实是没效果的，而new ListView()即又添加了个ul，同样的我们执行实例化的2个方法同样都是各添加一个ul，如果你把Dome copy到本地，在initialize方法内加个提示，就可以看出实例化就会initialize方法。

好，现在我们已经分析完一个简单Backbone的Dome，接下去，一个是我们还有2个疑问，那我们就带着2个疑问和着简单的Dome开始逐行分析Backbone.js。期待下一节吧！

本文网址：http://www.shaoqun.com/a/115972.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

JS

0