Backbone.js学习笔记(一)

发表于 Backbone 分类,标签:
基本概念前言昨天开始学Backbone.js,写篇笔记记录一下吧,一直对MVC模式挺好奇的,也对js中MVC的开创鼻祖怀着敬畏之心,唉,不说了,好虚伪,以下是我的学习心得和笔记。给大家看一下全球js库和框架的使用比例:这是通过搜索引擎抓取script标签统计而来的数据,可信度相当高啊,另外,不要迷恋Angular.js,Avalon.js还是挺不错的。什么是Backbone.js?Backbone.js是十大JS框架之首,Backbone.js 是一个重量级js MVC 应用框架,也是jsMVC框架的鼻祖。它通过Models数据模型进行键值绑定及custom事件处理,通过模型集合器Collections提供一套丰富的API用于枚举功能,通过视图Views来进行事件处理及与现有的Application通过JSON接口进行交互。简而言之,Backbone是实现了...

Backbone源码学习 — Backbone.Events

发表于 Backbone 分类,标签:
Backbone.Events为Backbone的核心部分,它在backbone的其他部分(View、Controller、Model…)被使用,在Backbone的MVC中作为Controller存在,通过事件机制对数据和视图进行控制。backbone.Events的作用Events可以作为一个模块在其他的对象中使用(无论是不是Backbone中定义的),也可以被单独使用varevent={};_.extend(event,Backbone.Events);EventsapiEvents对象提供了以下api所有的方法调用会返回events对象其中除了各种方法之外,会有一个 _events属性存储所有该Events对象中绑定的自定义事件,每个事件包含一个数组,里面存储着所有这个事件名称上定义的回调函数,结构如下:其中 callback 为回调函数...

Backbone源码学习 — Backbone.Model

发表于 Backbone 分类,标签:
Backbone源码学习—Backbone.ModelDEC 4TH, 2014 2:45PM今天我们来谈谈Backbone.jsMVC中的 M ,Model是backbone的核心部分,包含着页面展示内容的数据,还有围绕着数据操作的各种转换,校验,计算,权限控制,服务端交互等等操作,你可以通过 Backbone.Model.extend() 生成你的model,当然生成的model也可以作为一个基类去向下扩展更多的model1234567   var People = Backbone.Model.extend({          &nbs...

Backbone源码学习 — Backbone.Collection

发表于 Backbone 分类,标签:
今天我们继续来说说BackboneMVC中的 M,如果说前面介绍的Backbone.Model像是数据库中的一条记录的抽象的话,那么今天要聊的Backbone.Collection 就像是由若干条Backbone.Model组成的一个数据库表,其api和使用方法和Backbone.Model相似,主要是对models集合进行操作,以下为Backbone.Collection提供的API:我们可以看到很多api和Backbone.Model 的方法是相同的,主要是用于操作数据,进行数据定位等等,方法有:set:作为所有数据操作的基类方法,通过options确定具体的操作,主要是对models集合进行add,remove,merge等操作,默认操作是将传入的models替换原有的models,不进行合并add:封装了set方法,传入的配置默认是remove:f...

Backbone源码学习 — Backbone.View

发表于 Backbone 分类,标签:
我们来看下MVC中的V部分,也就是Backbone.View,View在Backbone中主要用于沟通页面中的DOM和Backbone.Model/Collection,页面的逻辑操作,DOM事件的绑定等,View部分的代码非常简答,加上注释只有110左右。View部分有一下API:方法不多,下面对部分API进行介绍:构造方法123456789   var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'event...

认识 Backbone(一) : 什么是 Model

发表于 Backbone 分类,标签:
文章转自(http://segmentfault.com/a/1190000000465965)Backbone 的作者是这样定义 Model 的:Model是任何一个web应用的核心,它包含了交互的数据以及大部分的逻辑。例如:转化、验证、属性和访问权限等。那么,我们首先来创建一个Model:Person = Backbone.Model.extend({    initialize: function(){        alert("Welcome to Backbone!");    }});var&nb...

浏览器上如何显示title 图标 icon图标

发表于 html5 分类,标签:
浏览器上显示title图标icon图标<linktype="image/x-icon"rel="icon"href="favicon.ico">如果想让图标出现在收藏夹中,就: <linktype="image/x-icon"rel="shortcuticon"href="favicon.ico"><linktype="image/x-icon"rel="bookmark"href="favicon.ico">...

浏览器宽屏的js

发表于 JS 分类,标签:
$(function(){//满屏幕方法$("#fullScreen").click(function(){fullScreen() }).trigger("click")function fullScreen(){varel=document.documentElement; varrfs=el.requestFullScreen||el.webkitRequestFullScreen||el.mozRequestFullScreen||el.msRequestFullScreen; if(typeofrfs!="undefined"&&rfs){  rfs.call...

js阻止选中文本

发表于 JS 分类,标签:
document.onselectstart=function(){returnfalse;}window.getSelection?(window.getSelection().removeAllRanges()):(document.selection.empty());1IE可以使用onselectstart事件来阻止用户选定元素内文本,如下<divonselectstart="returnfalse">accc</div>2Firefox中可以使用CSS"-moz-user-select:none"属性来禁止文本选定3webkit浏览器可以使用“-khtml-user-select”,当然也可以使用方式1[1] 注:Firefox/Opera不支持onselectstart事件c...

Odometer使用JavaScript和CSS制作数字滑动效果

发表于 JS 分类,标签:
Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以运行起来非常的流畅,需要这种效果的朋友不妨试试这个插件。所有的主题都可以自定义文字的大小和Odometer元素的标签。兼容性Odometer能在IE8+,FF4+,Safari6+,Chrome等高级浏览器上完美的运行。功能不仅仅可以让数字滑动,同样的文字也可以实现这样的效果。指定文字的内容还可以用于数学计算的输出结果,感觉很棒的动画效果。显示主题Odometer主题的各种文件样式表中被准备。使用方法首先我们需要引入我们的插件文件<link rel="stylesheet" href="odometer-theme-car.css...