昨天一个我崇拜的朋友,徐飞送我一本名为《Backbone.js实战》书,让我心中狂喜,于是带着这份浓厚的兴趣,开始研究Backbone.js之路。

打开这本书的第一句话就很有哲理,“授人以鱼,不如授之以渔。”,我花了一段时间仔细的看完了的第一章节,今天通过自己所理解的,

记录下我自学的第一步。其他不多说,进入主题:

首先在学习Backbone.js之前要了解Backbone.js是什么?

在我看来它是一个处理前端MVC很好的js框架,Backbone是一个非常轻量级的javascript库,自身具备以下几个方面:

1. MVC结构化(这个是Backbone的核心结构,大家都对java开发的MVC很熟悉,但对前端js的MVC或许有些人听都没听过,只能说不同领域,不同理解。)

2.继承特性(在js的世界里,没有类的概念,所以这个继承概念就变得模糊,而Backbone既能以面向对象方式编写数据,集合,视图模型,又具有可继承性,概念清晰化。)

3.事件统一管理

4.绑定页模板(这个后续研究)

5.服务端无缝交互(这个概念在以后的文章中专门详解)

以上5种就是Backbone.js的主要特点,要全理解透彻,需要花大量时间和精力。

代码块编写:

在开始写第一段代码之前,需要把框架环境搭建好,首先要引用一个JQuery,和underscore.js,然后在引用Backbone.js,一开始我觉得奇怪,为什么还要引用jQuery,后来在编写代码的时候,发现一些获取dom元素的写法,还是以jQuery方式获取,毕竟jQuery是对dom封装操作很优秀的库,兼容,轻巧。然后还要引用underscore.js,据我学习的了解underscore.js是Backbone的依赖库,只要使用Backbone就必须先导underscore.js,因为underscore.js是一个最基础的函数库,该库按类别又可以划分为(集合,数组,函数,对象,实用工具等),了解这些之后,只要将其引用即可,但引用的时候要注意顺序,先引入jQuery,其次是underscore.js,最后才是Backbone.js。切记!

进入了我第一次编写Backbone代码记录,非常的兴奋。

首先我想实现一个小操作,说明下,在页面显示“点击我”的字样,

当我鼠标点击“点击我”操作的时候,字马上换成“hello,蒯灵敏,您好!”

代码如下:

在这段代码的实现思路不难,先创建一个object类型的变量klm,然后通过_.bindAll函数去把onClick方法绑定到klm对象中,而这个_.bindAll是在

underscore.js中实现的,

这就是封装的_.bindAll源码,会判断元素的长度,如果长度小于等于‘1’的时候会抛出异常“bindAll must be passed function names”,

如果长度大于1的时候会进行一个循环操作调用_.bind()函数,这个函数源码的详细解析在http://www.cnblogs.com/mxw09/archive/2012/07/06/2579329.html 这里就不多说了,用_.bindAll函数给对象绑定onClick事件之后,再添加到jQuery中的bind函数绑定,绑定的事件为'click',绑定的值为klm.onClick,绑定的对象就是,感觉绑定了很多次,不过功能就这么实现了。

在这个小程序中我还学习到一个知识点,_()方法,因为underscore没有对原生的js进行封装,而是调用_()方法进行封装,一旦使用这个_()方法封装就成了underscore对象。

在这里定义一个object属性,然后放入到_()方法中去,

转换underscore对象的object是怎么获取里面的name和text值呢,underscore.js提供了value()方法,只要写成object.vlaue().name就能把值获取到。

如图:这段代码是我一个实现过程,在underscore.js还有很多函数去学习,去理解,

今天就分享这些,走完学习Backbone.js的第一步!激情的前进着。。。

转载于:https://www.cnblogs.com/kuailingmin/p/3845223.html

Backbone.js学习之一相关推荐

  1. backbone.js学习笔记

    backbone.js学习笔记 之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...

  2. Backbone.js学习笔记 Hello World!

    使用Backbone.js 和 MVC 架构创建一个典型的Hello world项目.虽然是"杀鸡用牛刀了",毕竟是我第一次使用Backbone.js 依赖 jQuery 1.9. ...

  3. backbone js学习笔记之第三篇Model (续)

    上一篇文章只是介绍了简单的一些关于Model层的知识. 这次我们将涉及到validate验证,silent设置,数据回滚等. 一.validate验证 如果为对象重置的属性/方法不符合验证条件,则会触 ...

  4. Backbone.js入门学习资源

    backbone.js提供了一套web开发的框架,通过Models进行key-value绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件 ...

  5. node.js学习总结

    NodeJS介绍 1.概述: Node.js是基于Chrome JavaScript运行时建立的一个平台,实际上它是对Google Chrome V8引擎 进行了封装,它主要用于创建快速的.可扩展的网 ...

  6. 用Backbone.js创建一个联系人管理系统(一)

    原文 Build a Contacts Manager Using Backbone.js: Part 1 在这个教程里我们将会使用Backbone.js,Underscore.js,JQuery创建 ...

  7. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录...

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  8. ArcGIS JS 学习笔记4 实现地图联动

    原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇 守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...

  9. 程序员的高速学习法——以JS学习为例,进行图解

    近期一直在忙着学习,感觉做总结的时间太少了,听起来挺好玩儿的,就像<倾城之恋>里面.范柳原说:那时候都忙着谈恋爱了哪里有时间恋爱.  学习和总结也是一样.不能一直忙着学习而导致自己没有时间 ...

最新文章

  1. 车和家李想:在智能电动车的红海里,这是我唯一能够胜出的机会所在...
  2. 为 CefSharp 应用内置 C++ 运行环境并启用 AnyCPU 支持
  3. MySQL故障检测_检测MySQL的表的故障的方法
  4. 王者荣耀服务器未响应8月5日苹果,王者荣耀:世冠小组赛8月5日前瞻预测
  5. PHP 命令行?是的,您可以!
  6. ASP.NET核心之路微服务第02部分:查看组件
  7. linux释放内存后设备起不来,Linux-Memory小记
  8. 机器学习ai选股_机器学习技术能够有效用于选股吗?(下)
  9. HCIE Security 2020.12.04面试战报
  10. 高速下载文件的方法(对百度,城通等网盘无效)
  11. matlab中readfid函数,matlab中textscan和textread函数的比较使用
  12. Bilibili到底有多少御坂妹?(二)
  13. 转载《利用Windows系统自带命令手工搞定病毒》_原水_新浪博客
  14. 面试PHP的尴尬经历以及今后的职业规划
  15. Beosin EOS-IDE 升级用户体验及常见问题答疑
  16. Camera tuning岗位面试总结
  17. #一、股市预测数学概念
  18. TNFBA治疗强柱达8年的放射学评估
  19. 小易涂棋盘 C++实现
  20. node.js基础学习

热门文章

  1. Linux安装qt完整版教程
  2. 问:发电机允许变为电动机运行吗?为什么?
  3. DELL服务器如何做raid-5
  4. 《Soft-NMS – Improving Object Detection With One Line of Code》论文翻译
  5. cie规定的标准光源_标准光源的专业术语定义及光源的选择
  6. crc16的c语言函数 计算ccitt_CCITT CRC-16计算原理与实现CRC-ITU
  7. 新手站长如何利用管理面板快速建站?
  8. Blender-剪辑
  9. 鞍钢自主知识产权连铸连轧生产线
  10. 实验五 二叉树的递归及非递归的遍历及其应用