Backbone.js系列教程九：Backbone实用程序库

利用Backbone.noConflict()存储和创建一个特殊的（就是自定义命名空间）引用到Backbone

当Backbone被浏览器解析时，Backbone做的第一件事就是存储一个引用到包含在全局作用域（也就是window.Backbone）中 的Backbone的值。这是因为Backbone重写或占据了这个命名空间，希望给开发者机会去存储在Backbone被解析之前使用的初值。这就是 Backbone.noConflict()起作用的时候了。调用Backbone.noConflict()将会返回Backbone命名空间到初始所 有者，然后返回一个引用到最新解析的Backbone.js版本，于是你就可以为它创建一个新的命名空间。在下面的代码中，我在Backbone.js加 载之前创建了一个虚拟的Backbone版本。并在给Backbone最新解析的版本一个新的命名空间时，利用 Backbone.noConflict()确保这个版本保留Backbone引用。



    

  1. <script>
    2. 

  2.  
    3. 

  3. this.Backbone
    
						=
    
						{
    4. 

  4. "I'm the previous owner of Backbone in the global scope":
    
						true
    5. 

  5. };
    6. 

  6.  
    7. 

  7. </script>
    8. 



提示：


    

  • 如果你调用了Backbone.noConflict()，但不存储回调函数返回的引用值，将会丢失一个引用到浏览器解析最新的Backbone.js代码。 
    • 





    

  1. /*在加载最新Backbone.js版本之前，存储初始引用到Backbone*/
    2. 

  2. var lastBackboneParsed =
    
						Backbone.noConflict();
    3. 

  3.  
    4. 

  4. //验证全局作用域中的Backbone指向初始版本
    5. 

  5. console.log(Backbone["I'm the previous owner of Backbone in the global scope"]);
    
						//logs true
    6. 

  6.  
    7. 

  7. /*验证Backbone.js包含在新的lastBackboneParsed命名空间里，而不是在Backbone命名空间里*/
    8. 

  8. console.log(lastBackboneParsed.VERSION)
    
						//logs 1.0.0
    9. 



利用Backbone.$分配DOM与XHR库


Backbone能够在内部自动依次运用在全局作用域中找到的任何版本的jQuery、Zepto或ender等用于DOM处理和XHR（也称为AJAX）的库，通过在Backbone.$中存储一个引用到这些库中的某一个。参考说明。


如果在全局作用域中都没有找到这些库，Backbone则会尝试使用能在全局作用域中找到的任意值给$。如果你不包含之前提到的库中任何一个的话，也不使用$作为一个命名空间或其他名字定义你自己的库，就将是undefined。


当Backbone被解析之后，你还可以手动给Backbone.$提供一个值。在下面的代码中，我展示了设定Backbone.$的两种方法。




    

  1. <!DOCTYPE html>
    2. 

  2. <html
    
						lang="en">
    3. 

  3. <body>
    4. 

  4. <!-- 函数式编程实用程序库 -->
    5. 

  5. <script
    
						src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.underscore.js"></script>
    6. 

  6. <!-- 老式浏览器没有window.JSON的情况下使用 -->
    7. 

  7. <script
    
						src="http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
    8. 

  8. <!-- DOM & XHR 实用程序库 -->
    9. 

  9. <script>
    10. 

  10. //如果jQuery, Zepto和ender不需要$，Backbone将会利用以下
    11. 

  11. var $ =
    
						{version:'0.0.1',name:'MyReCreateTheWheelDOM&AJAXLib'}
    12. 

  12. </script>
    13. 

  13. <!-- Backbone.js -->
    14. 

  14. <script
    
						src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
    15. 

  15. <!-- DOM & XHR utility -->
    16. 

  16. <script>
    17. 

  17. //或者在Backbone加载之后手动设置
    18. 

  18. Backbone.$ =
    
						{version:'0.0.1',name:'MyReCreateTheWheelDOM&AJAXLib'}
    19. 

  19. </script>
    20. 

  20. </body>
    21. 

  21. </html>
    22. 



小结


我曾阅读和浏览过大量关于Backbone.js的教程，没有哪一个能详细说明清楚到底Backbone.Model、Backbone.Collection和Backbone.View函数是用来干什么的。所以我写了本系列文章希望能彻底解释清楚有关Backbone的基础知识。


有了前面几篇系列文章的介绍，接下来我们将进入重要内容，关于Backbone.Model、Backbone.Collection、Backbone.View以及Backbone.sync函数的使用。


以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索backbone

                    ，                版本

                    ，                空间

                    ，                zepto fullpage js

                    ，                全局

                    ，                pen enderer

                    ，                backbone js

                    ，                一个

                    ，                noconflict

                    ，                js实用代码

                    ，                js实用自定义函数

                                    js命名空间

                                    ，以便于您获取更多的相关知识。
				


				
时间： 2024-12-19 05:24:49

		
		


		


	

	
	

		


		
Backbone.js系列教程九：Backbone实用程序库的相关文章


						

		

			

                Backbone.js系列教程一 - Backbone.js简介
			

		

		

									

				JavaScript在web应用程序开发前端技术和后端技术的逻辑与运行一块占有越来越大的比重.为了帮助维护和循环访问前期逻辑和模块性,MVC模式在近几年中渐渐普及.其中一种运用广泛的MVC框架就是Backbone.js. Backbone中的Models(模型).Views(视图)和Controller(控制器) Backbone.js包含以下几个主要功能: 创建模型(以及模型集合): 创建视图: 管理绑定,管理事件兼用不同的模型以及视图与框架其他部分的联系: 在模型中使用观察者模式,一旦模型触			

		

	

						

		

			

                Backbone.js系列教程十：Backbone.View
			

		

		

									

				在前几节中我们介绍了Backbone基础知识,如果你还没有阅读过,那么我建议你从第一节开始学习--Backbone.js系列教程一:Backbone.js初探,尤其希望你能完全理解构造Backbone对象相 关知识,这对于学习今后的内容有很大帮助.在接下来的几个小节中,我们将深入Backbone,讨论Backbone views.models和collections.相信大家在阅读前文之后,已经对Backbone.View.Backbone.Model. Backbone.Collection构			

		

	

				

		

			

                Backbone.js系列教程二：Backbone.js深入解析之基础要求
			

		

		

									

				在网上关于Backbone的描述很少,现有的关于Backbone的内容五花八门,基本上都不同程度的提到了如何运用Backbone来实现应用程序的创建,当然也有很多的是讨论它是否匹配Model/View/Whatever.有挺多华而不实的视频教程是讲程序设计的,但其实没有什么太大的价值.我认为关键是缺少了关于Backbone本身的详细介绍,以及对于每行代码的真正用意的细节描述.有篇文档专门讲述Backbone各部分的功能,在一定程度上解答了上述问题,并且提供带有注释的源代码,还有更多相关Backb			

		

	

				

		

			

                Backbone.js系列教程四：Backbone全面介绍
			

		

		

									

				Backbone的原理 Backbone的初衷在于单页面应用程序中添加架构,尤其是在创造DocumentCloud应 用程序的过程中,以避免重复性的DOM交叉以及DOM中用于保持UI同步的数据发生混乱.Backbone通过一套构造函数来完成这个步骤,于是就形成了 模型.集合与视图对象,目的在于组织应用程序的数据.逻辑和显示.一旦这些对象被具现化,它们彼此之间就存在特殊的关系,共同保证了应用程序的模块化.松 耦合性(利用event系统沟通).可扩展性. Backbone提供应用程序架构,还能帮助构			

		

	

				

		

			

                Backbone.js系列教程三：深入解析之框架,模型视图
			

		

		

									

				Backbone下的框架设想 Backbone是用于开发SPA(AKA单页应用)环境.你可能想要知道这些是什么.简单的讲,SPA就是一个加载了一个页面 (index.html或者app.html)的web应用,整个应用通过自定义事件,自定义URL句柄,和异步HTTP检索,存储资源来发送到客户端, 这样避免了页面的重复加载.基本上,SPA框架只加载一个HTML页面,因此JavaScript可以用于仿写/重写/编排浏览器上传统web应用框架的 默认属性. 让我们检验Backbone SPA的框架假设			

		

	

				

		

			

                Backbone.js系列教程六：构造Backbone对象
			

		

		

									

				Backbone构造函数 我之所以说Backbone很简单,是因为Backbone只有四个构造函数能被典型的实例化(基本上,它们首先被继承或子分类).这四种构造函数包括: Backbone.Model = function(attributes, {options}){}; Backbone.Collection = function([models], {options}){}; Backbone.Router = function({options}){}; //只能被具现化一次  Back			

		

	

				

		

			

                Backbone.js系列教程十二：Backbone.Collection
			

		

		

									

				Backbone.Collection概述 一个Backbone集合表示了一组模型逻辑有序的组合,并提供使用(组合,分类,过滤)这些模型组的方法与属性.在本文中为了说明这样的联系关系 (模型=表单中的一行有标签的联系数据),你可以把一个集合看做是整张表单,其中包含了很多行联系数据.下面我更新了表单中联系内容的细节,在上一章节开 头我们讲述过,于是整张表单能够被当作一个联系表单. 当然,一个Backbone.Collection不仅仅是一个像之前表单表现的那种标签.集合还可以捕捉模型以及集合上被触			

		

	

				

		

			

                Backbone.js系列教程五：Backbone.Events
			

		

		

									

				Backbone.Events概述 Backbone.Events对象包含的方法有助于observer设计模式和一个调用pub/sub的可变observer模式.这些功能允许Backbone创建的不同类的对象(JavaScript对象)彼此解耦而相互通信.这是通过扩展(也就是_.extend(Model.prototype, Backbone.Events);)以下构造函数而完成的,所使用的函数都属于Backbone.Events: Backbone.Model() Backbone.Colle			

		

	

				

		

			

                Backbone.js系列教程七：Backbone.Router
			

		

		

									

				Backbone.router()概述 一个Backbone route是一个JavaScript字符串,类似于传统认识中的URL路径名. 这个像字符串的路径名是一个函数的属性名(或引用命名函数),当在浏览器中有url与字符串匹配时被调用.举例来说,下例中的url包含路径名 "help" ,在一个单独的Backbone应用页面中它将通告Backbone调用一个函数,这个函数关联了名为'help"的路由. http://www.hostname.com/#help 请注意,路径