暴力分析backbone.js(2)

浏览数：34 / 时间：2015年06月09日

继续上一节内容，带着疑问和简单的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: doc.getElementsByTagName(‘body‘),
 8 
 9                 initialize: function(){
10                     _.bindAll(this, ‘render‘);
11 
12                     this.render();
13                 },
14 
15                 render: function(){
16                     var ListUl = doc.createElement(‘ul‘);
17                     ListUl.innerHTML = ‘<li>hello world</li>‘;
18                     this.el.appendChild(ListUl);
19                 }
20             });
21 
22             var listView = new ListView();
23         })(document);
24     </script>
25 </body>

　　然后打开网页，报错了！！！从错误开始着手！！！

技术分享

　　点击backbone.js:224 定位报错位置

技术分享

　　断点了一下，这种写法，_ 其实是一个对象，each属于_对象的一个方法，我们打印了一下，发现为undefined，继续往上面排查。

技术分享

　　会发现_对象是函数的传参，因为没传进来，所以是undefined，所以现在我们继续找，看哪里执行这个函数！

　　在这之前我们先来看一下backbone的外壳。一个自执行函数，参数root、factory，分别对应 this 、 func()。不难发现this指向的就是 window，然而我们要找的是在哪里执行了func()，func()作为参数赋给了形参factory，也就是说我们要在这个自执行函数内寻找调用factiory的位置，看factiory的4个参数传对了没有？

1 (function (root, factory) {
2 　　
3 }(this, function () {
4      /***/
5 }))

　　自执行函数内是if语句，我给每个if语句的开始加了断点 debugger，看就引用了backbone是执行哪个？结果是执行了最后一个，然后往上看一下2个条件：

　　　　1.typeof define === ‘function‘ && define.amd

　　　　2.typeof exports !== ‘undefined‘

　　如果你细心的看注释不难发现define 和 exports是2个依赖库，如果它们都有引用，那么 define的优先级最高。就算不看注释，细心看，你会发现原生根本没这2个东西，百度搜一下就知道了，如果你如果你用过就跟不用说了。

　　我什么都没引用走的就是优先级最低的咯。

　　继续走下去，还是断点。

　　　　root === window

　　　　root._ === ？？？ window下面没有这个对象啊！(怎么办，回头看一下别人dome引用的库，除了jQuery之外还有underscore 和 json2)

　　　　在看func()的形参$ 对应的是这样一串表达式 (root.jQuery || root.Zepto || root.ender || root.$)，也就是说backbone必须要有依赖库，这句表达式的意思就是，window.jQuery有的话，就引用window.jQuery，依次类推，全部没有就是undefined，什么库都不要引用直接执行这句表达式试试看。

　　所以走最后一条路，backbone所依赖的 jQuery 和 undercore 是必不可少的，老老实实把它们引用进来吧

 1 (function(root, factory) {
 2 
 3   if (typeof define === ‘function‘ && define.amd) {
 4     debugger;
 5     define([‘underscore‘, ‘jquery‘, ‘exports‘], function(_, $, exports) {
 6       root.Backbone = factory(root, exports, _, $);
 7     });
 8 
 9   } else if (typeof exports !== ‘undefined‘) {
10     debugger;
11     var _ = require(‘underscore‘);
12     factory(root, exports, _);
13     
14   } else {
15     debugger;
16     root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender || root.$));
17   }
18 
19 }(this,function(root, Backbone, _, $){
20     /**/
21 })