分类目录归档：javascript

jQuery.Deferred对象

2014年9月7日 chen

一、什么是deferred对象？

开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。
通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。
但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。

1、生成Deferred对象

var dfd = $.Deferred();

1	var dfd = $.Deferred();

2、deferred对象状态以及改变状态

pending: 表示还没有完成
resolved: 表示操作成功
rejected: 表示操作失败

可以通过state方法来获取状态

    $.Deferred().state();    // pending
    $.Deferred().resolve().state();  // resolved
    $.Deferred().reject().state();    // rejected

$.Deferred().state(); // pending

$.Deferred().resolve().state(); // resolved

$.Deferred().reject().state(); // rejected

3、绑定回调方法

resolve方法对应着done方法，reject方法对于着fail方法。

var dfd = $.Deferred().done(f1).fail(f2).always();
dfd.resolve();   // 会执行done方法
dfd.reject();    // 会执行fail方法
// always方法，不论结果怎么样都会执行。

另外还有notify方法对于这progress方法。不同于resolve和reject只能执行一次，notify可以执行多次。
可以用于通知和进度条等方面。

var dfd = $.Deferred();
dfd.progress( function( str ) {
    console.log( str );
} );
// do someting...
dfd.notify( '准备完毕,开始执行' );
// do someting...
dfd.notify( '执行了50%' );
// do someting...
dfd.notify( '执行成功' );

var dfd = $.Deferred().done(f1).fail(f2).always();

dfd.resolve(); // 会执行done方法

dfd.reject(); // 会执行fail方法

// always方法，不论结果怎么样都会执行。

另外还有notify方法对于这progress方法。不同于resolve和reject只能执行一次，notify可以执行多次。

可以用于通知和进度条等方面。

var dfd = $.Deferred();

dfd.progress( function( str ) {

console.log( str );

} );

// do someting...

dfd.notify( '准备完毕,开始执行' );

// do someting...

dfd.notify( '执行了50%' );

// do someting...

dfd.notify( '执行成功' );

4、then方法

then方法的作用也是设置回调方法。他可以接受三个参数。按顺序为 done, fail, progress 这3个方法。
自jQuery1.8后，then方法有一个返回值就是promise对象。而done()返回的是原有的deferred对象。如果then()指定的回调函数有返回值，该返回值会作为参数，传入后面的回调函数。

var dfd = $.Deferred();
dfd.then( function() { // done }, function() { // fail }, function() { // progress } );

var dfd = $.Deferred();

dfd.then( function() { // done }, function() { // fail }, function() { // progress } );

5、pipe方法

大致的作用是将resolve、reject、notify传入的参数再做一下处理。

var dfd = $.Deferred();
dfd.pipe( function(e) { return e * 2; // resolve  }, function(e) { return e * 3; // reject },  function( e ) { return e * 4; // notify } ).done( function(e) { console.log( e ) } );

dfd.resolve( 2 ); // 4

var dfd = $.Deferred();

dfd.pipe( function(e) { return e * 2; // resolve }, function(e) { return e * 3; // reject }, function( e ) { return e * 4; // notify } ).done( function(e) { console.log( e ) } );

dfd.resolve( 2 ); // 4

6、promise对象

简单说，promise对象就是不能改变状态的deferred对象，也就是deferred的只读版。或者更通俗地理解成，promise是一个对将要完成的任务的承诺，排除了其他人破坏这个承诺的可能性，只能等待承诺方给出结果。

你可以通过promise对象，为原始的deferred对象添加回调函数，查询它的状态，但是无法改变它的状态，也就是说promise对象不允许你调用resolve和reject方法。

var dfd = $.Deferred();
console.log( dfd&amp;amp;#39; );
/*
Object {resolve: function, resolveWith: function, reject: function, rejectWith: function, notify: function…}
always: function () {
done: function () {
fail: function () {
notify: function () {
notifyWith: function ( context, args ) {
pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
progress: function () {
promise: function ( obj ) {
reject: function () {
rejectWith: function ( context, args ) {
resolve: function () {
resolveWith: function ( context, args ) {
state: function () {
then: function ( /* fnDone, fnFail, fnProgress */ ) {
__proto__: Object
*/
var p = dfd.promise();
console.log( p );
/*
Object {state: function, always: function, then: function, promise: function, pipe: function…}
always: function () {
done: function () {
fail: function () {
pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
progress: function () {
promise: function ( obj ) {
state: function () {
then: function ( /* fnDone, fnFail, fnProgress */ ) {
__proto__: Object
*/

var dfd = $.Deferred();

console.log( dfd&amp;#39; );

Object {resolve: function, resolveWith: function, reject: function, rejectWith: function, notify: function…}

always: function () {

done: function () {

fail: function () {

notify: function () {

notifyWith: function ( context, args ) {

pipe: function ( /* fnDone, fnFail, fnProgress */ ) {

progress: function () {

promise: function ( obj ) {

reject: function () {

rejectWith: function ( context, args ) {

resolve: function () {

resolveWith: function ( context, args ) {

state: function () {

then: function ( /* fnDone, fnFail, fnProgress */ ) {

__proto__: Object

var p = dfd.promise();

console.log( p );

Object {state: function, always: function, then: function, promise: function, pipe: function…}

always: function () {

done: function () {

fail: function () {

pipe: function ( /* fnDone, fnFail, fnProgress */ ) {

progress: function () {

promise: function ( obj ) {

state: function () {

then: function ( /* fnDone, fnFail, fnProgress */ ) {

__proto__: Object

7、$.when方法

$.when()接受多个deferred对象作为参数，当它们全部运行成功后，才调用resolved状态的回调函数，但只要其中有一个失败，就调用rejected状态的回调函数。它相当于将多个非同步操作，合并成一个。实质上，when方法为多个deferred对象，返回一个单一的promise对象。

$.when(
    $.ajax( '/main.php' ),
    $.ajax( '/modules.php' ),
    $.ajax( '/lists.php' )
).then(successFunc, failureFunc);

$.when(
    $.ajax( &quot;/main.php&quot; ),
    $.ajax( &quot;/modules.php&quot; ),
    $.ajax( &quot;/lists.php&quot; )
).then(function (resp1, resp2, resp3){
    console.log(resp1);
    console.log(resp2);
    console.log(resp3);
});

$.when(

$.ajax( '/main.php' ),

$.ajax( '/modules.php' ),

$.ajax( '/lists.php' )

).then(successFunc, failureFunc);

$.when(

$.ajax( "/main.php" ),

$.ajax( "/modules.php" ),

$.ajax( "/lists.php" )

).then(function (resp1, resp2, resp3){

console.log(resp1);

console.log(resp2);

console.log(resp3);

});

参考链接：
http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
http://www.web-tinker.com/article/20154.html
http://javascript.ruanyifeng.com/jquery/deferred.html

javascript、jquery

三级（多级）联动自动赋值

2014年9月6日 chen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
    <select name="one" id="one">
    </select>
    <select name="two" id="two">
    </select>
    <select name="three" id="three">
    </select>
    <script src="./jquery-1.11.1.js"></script>
    <script>

        function clear( obj ) {
            obj.length = 0;
        }

        function make( obj, data ) {
            for( var i in data ) {
                obj.options.add( new Option( data[i], i ) );
            }
        }

        function ajax( url, obj, val ) {
            var dfd = $.Deferred();
            obj = $('#'+obj).get(0);
            $.ajax(url,{cache:false}).done(function(rss) {
                clear( obj );
                make( obj, rss );
                obj.value = val;
                dfd.resolve();
            });
            return dfd.promise();
        }

        var arr = [
                    {"url":"data_1.json","obj":"one","val":"021"},
                    {"url":"data_2.json","obj":"two","val":"2"},
                    {"url":"data_3.json","obj":"three","val":"3"}
                ];

        function r( arr ) {
            var a = arr.shift();
            ajax( a.url, a.obj, a.val ).done(function() {
                if( arr.length ) r( arr );
            });
        }

        r(arr);

        // 方法二
        var onv = '021', twv = '2', thv = '3';
        // $.ajax( "data_1.json" ).then(function( rss ) {
        //     clear( one );
        //     make( one, rss );
        //     one.value = onv;
        //     return $.ajax( "data_2.json" );
        // }).then(function( rss ) {
        //     clear( two );
        //     make( two, rss );
        //     two.value = twv;
        //     return $.ajax( "data_3.json" );
        // }).then(function( rss ) {
        //     clear( three );
        //     make( three, rss );
        //     three.value = thv;
        // });

        // 方法三
        // $.when( 
        //     $.ajax( "data_1.json" ),
        //     $.ajax( "data_2.json" ),
        //     $.ajax( "data_3.json" )
        // ).then( function( a, b, c ) {
        //     clear( one ); clear( two ); clear( three );
        //     make( one, a[0] ); make( two, b[0] ); make( three, c[0] );
        //     one.value = onv; two.value = twv; three.value = thv;
        // } );

    </script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</select>

</select>

</select>

function clear( obj ) {

obj.length = 0;

}

function make( obj, data ) {

for( var i in data ) {

obj.options.add( new Option( data[i], i ) );

}

function ajax( url, obj, val ) {

var dfd = $.Deferred();

obj = $('#'+obj).get(0);

$.ajax(url,{cache:false}).done(function(rss) {

clear( obj );

make( obj, rss );

obj.value = val;

dfd.resolve();

});

return dfd.promise();

}

var arr = [

{"url":"data_1.json","obj":"one","val":"021"},

{"url":"data_2.json","obj":"two","val":"2"},

{"url":"data_3.json","obj":"three","val":"3"}

];

function r( arr ) {

var a = arr.shift();

ajax( a.url, a.obj, a.val ).done(function() {

if( arr.length ) r( arr );

});

}

r(arr);

// 方法二

var onv = '021', twv = '2', thv = '3';

// $.ajax( "data_1.json" ).then(function( rss ) {

// clear( one );

// make( one, rss );

// one.value = onv;

// return $.ajax( "data_2.json" );

// }).then(function( rss ) {

// clear( two );

// make( two, rss );

// two.value = twv;

// return $.ajax( "data_3.json" );

// }).then(function( rss ) {

// clear( three );

// make( three, rss );

// three.value = thv;

// });

// 方法三

// $.when(

// $.ajax( "data_1.json" ),

// $.ajax( "data_2.json" ),

// $.ajax( "data_3.json" )

// ).then( function( a, b, c ) {

// clear( one ); clear( two ); clear( three );

// make( one, a[0] ); make( two, b[0] ); make( three, c[0] );

// one.value = onv; two.value = twv; three.value = thv;

// } );

</script>

</body>

</html>

测试连接

参考：

http://api.jquery.com/jQuery.ajax/

http://api.jquery.com/jQuery.Deferred/

backbone

backbone.js（六）后台交互

2014年8月3日 chen

backbone与后台交互，使用RESTFUL风格，

后台使用tinkphp进行接收请求。

一、添加

/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // 后台url
    url: '/backbone/Home/Note.json',

    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );
        // 监听所有属性发生变化
        this.on( 'change', function( model, options ) {
            console.log( 'note 属性发生变化' );
        } );
        // 监听title属性发生变化
        this.on( 'change:title', function( model, options ) {
            console.log( 'title 属性值变为：' + options );
        } );

        // 监听验证事件
        this.on( 'invalid', function( model, error ) {
            console.log( model );
            console.log( error );
        } );
    },
    // 验证
    validate: function( attr, options ) {
        if( attr.title.length < 3 ) {
            return  '笔记标题需要大于3个字符串';
        }
    }
});

在Model中，定义url属性，是其可以后台进行交互

// 创建模块
var note = new Note( {title: '学习backbone'} );
// 发送请求
note.save();


# php

/**
     * @desc 插入数据
     */
    public function insert_post_json() {
        $data = json_decode( $GLOBALS["HTTP_RAW_POST_DATA"], true );

        $data['id'] = D( 'Note' ) -> add( $data );

        $this -> response( $data, 'json' );
    }

/**

* 模型

var Note = Backbone.Model.extend({

// 后台url

url: '/backbone/Home/Note.json',

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

// 监听所有属性发生变化

this.on( 'change', function( model, options ) {

console.log( 'note 属性发生变化' );

} );

// 监听title属性发生变化

this.on( 'change:title', function( model, options ) {

console.log( 'title 属性值变为：' + options );

} );

// 监听验证事件

this.on( 'invalid', function( model, error ) {

console.log( model );

console.log( error );

} );

// 验证

validate: function( attr, options ) {

if( attr.title.length < 3 ) {

return '笔记标题需要大于3个字符串';

}

});

在Model中，定义url属性，是其可以后台进行交互

// 创建模块

var note = new Note( {title: '学习backbone'} );

// 发送请求

note.save();

# php

/**

* @desc 插入数据

public function insert_post_json() {

$data = json_decode( $GLOBALS["HTTP_RAW_POST_DATA"], true );

$data['id'] = D( 'Note' ) -> add( $data );

$this -> response( $data, 'json' );

}

二、查找

/**
 * Collection 集合
 */

var NoteCollection = Backbone.Collection.extend({
    // model 类型
    model: Note,
    // 获取后台数据连接
    url: '/backbone/Home/Note.json',
    // 初始化
    initialize: function() {
        // 监听事件
        this.on( {
            // 添加事件
            add: function( model, collection, options ) {
                console.log( 'ID: ' + model.id + '模型添加了到集合里' );
            },
            // 移除事件
            remove: function( model, collection, options ) {
                console.log( 'ID: ' + model.id + '模型从集合里移除了' );
            },
            // 属性变化事件
            change: function( model, options ) {
                console.log( '集合里的模型发生了变化' );
            }
        } );
    }
});

/**
 * 路由器  Router
 */
var NoteRouter = Backbone.Router.extend({
    // 定义路由规则
    routes: {
        'notes(/page/:page)': 'index',
        'notes/:id': 'show'
    },
    // 具体实现操作
    index: function( page ) {
        // 设置分页
        var page = page || 1;

        /**
         * 在Collection中定义url属性
         * 触发index规则后
         * 创建collection，并通过fetch方法从后台获取数据
         */
        var noteCollection = new NoteCollection();
        noteCollection.url = noteCollection.url + '?' + jQuery.param( { p: page } );
        var noteCollectionView = new NoteCollectionView( {collection: noteCollection} );
        noteCollection.fetch();

        jQuery( '#note_list' ).html( noteCollectionView.el );
        console.log( '笔记列表' );
    },
    // 实现带有参数的方法
    show: function( id ) {
        var note = noteCollection.get( id ),
            noteView = new NoteView( {model: note} );

        jQuery( '#note_list' ).html( noteView.render().el );
        console.log( '笔记: ' + id );
    }
});

/**

* Collection 集合

var NoteCollection = Backbone.Collection.extend({

// model 类型

model: Note,

// 获取后台数据连接

url: '/backbone/Home/Note.json',

// 初始化

initialize: function() {

// 监听事件

this.on( {

// 添加事件

add: function( model, collection, options ) {

console.log( 'ID: ' + model.id + '模型添加了到集合里' );

// 移除事件

remove: function( model, collection, options ) {

console.log( 'ID: ' + model.id + '模型从集合里移除了' );

// 属性变化事件

change: function( model, options ) {

console.log( '集合里的模型发生了变化' );

}

} );

}

});

/**

* 路由器 Router

var NoteRouter = Backbone.Router.extend({

// 定义路由规则

routes: {

'notes(/page/:page)': 'index',

'notes/:id': 'show'

// 具体实现操作

index: function( page ) {

// 设置分页

var page = page || 1;

/**

* 在Collection中定义url属性

* 触发index规则后

* 创建collection，并通过fetch方法从后台获取数据

var noteCollection = new NoteCollection();

noteCollection.url = noteCollection.url + '?' + jQuery.param( { p: page } );

var noteCollectionView = new NoteCollectionView( {collection: noteCollection} );

noteCollection.fetch();

jQuery( '#note_list' ).html( noteCollectionView.el );

console.log( '笔记列表' );

// 实现带有参数的方法

show: function( id ) {

var note = noteCollection.get( id ),

noteView = new NoteView( {model: note} );

jQuery( '#note_list' ).html( noteView.render().el );

console.log( '笔记: ' + id );

}

});

三、获取单条记录并修改

/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // url: '/backbone/Home/Note',
    // 必须设置urlRoot，不然无法获取单挑数据
    urlRoot: '/backbone/Home/Note',
    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );
        // 监听所有属性发生变化
        this.on( 'change', function( model, options ) {
            console.log( 'note 属性发生变化' );
        } );
        // 监听title属性发生变化
        this.on( 'change:title', function( model, options ) {
            console.log( 'title 属性值变为：' + options );
        } );

        // 监听验证事件
        this.on( 'invalid', function( model, error ) {
            console.log( model );
            console.log( error );
        } );
    },
    // 验证
    validate: function( attr, options ) {
        if( attr.title.length < 3 ) {
            return  '笔记标题需要大于3个字符串';
        }
    }
});

/**
 * 修改
 */
// 获取id为1的数据
var note = new Note( {id: 1} );
note.fetch();
// 设置属性
note.set( 'title', '学习backbone，并写博客记录学习内容' );
// 发送请求保存
note.save();

/**

* 模型

var Note = Backbone.Model.extend({

// url: '/backbone/Home/Note',

// 必须设置urlRoot，不然无法获取单挑数据

urlRoot: '/backbone/Home/Note',

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

// 监听所有属性发生变化

this.on( 'change', function( model, options ) {

console.log( 'note 属性发生变化' );

} );

// 监听title属性发生变化

this.on( 'change:title', function( model, options ) {

console.log( 'title 属性值变为：' + options );

} );

// 监听验证事件

this.on( 'invalid', function( model, error ) {

console.log( model );

console.log( error );

} );

// 验证

validate: function( attr, options ) {

if( attr.title.length < 3 ) {

return '笔记标题需要大于3个字符串';

}

});

/**

* 修改

// 获取id为1的数据

var note = new Note( {id: 1} );

note.fetch();

// 设置属性

note.set( 'title', '学习backbone，并写博客记录学习内容' );

// 发送请求保存

note.save();

四、删除

/**
 * 删除
 */

var note = new Note( {id: 1} );
note.destroy();

/**

* 删除

var note = new Note( {id: 1} );

note.destroy();

五、路由设置

'URL_ROUTER_ON' => true, // 是否开启URL路由
'URL_ROUTE_RULES' => array(
        array( 'Note/:id', 'Note/read', '', array( 'method' => 'GET' ) ),
        array( 'Note', 'Note/list', '', array( 'method' => 'GET' ) ),
        array( 'Note', 'Note/insert', '', array( 'method' => 'POST' ) ),
        array( 'Note/:id', 'Note/update', '', array( 'method' => 'PUT' ) ),
        array( 'Note/:id', 'Note/delete', '', array( 'method' => 'DELETE' ) ),
    ),

'URL_ROUTER_ON' => true, // 是否开启URL路由

'URL_ROUTE_RULES' => array(

array( 'Note/:id', 'Note/read', '', array( 'method' => 'GET' ) ),

array( 'Note', 'Note/list', '', array( 'method' => 'GET' ) ),

array( 'Note', 'Note/insert', '', array( 'method' => 'POST' ) ),

array( 'Note/:id', 'Note/update', '', array( 'method' => 'PUT' ) ),

array( 'Note/:id', 'Note/delete', '', array( 'method' => 'DELETE' ) ),

backbone

backbone.js（五）Router

2014年8月3日 chen

一、基本用法

/**
 * 路由器  Router
 */
var NoteRouter = Backbone.Router.extend({
    // 定义路由规则
    routes: {
        notes: 'index',
    },
    // 具体实现操作
    index: function() {
        jQuery( '#note_list' ).html( noteCollectionView.el );
        console.log( '笔记列表' );
    }
});


// 路由
var noteRouter = new NoteRouter();
// 开始监视hashchange事件
Backbone.history.start();

/**

* 路由器 Router

var NoteRouter = Backbone.Router.extend({

// 定义路由规则

routes: {

notes: 'index',

// 具体实现操作

index: function() {

jQuery( '#note_list' ).html( noteCollectionView.el );

console.log( '笔记列表' );

}

});

// 路由

var noteRouter = new NoteRouter();

// 开始监视hashchange事件

Backbone.history.start();

假设域名为www.notes.com，当域名变化为www.notes.com/#notes时，就会触发notes指向的index操作。如下图，

域名后缀不是#notes时，没有触发index的操作，没有将数据放入页面。

域名后缀为#notes时，触发index操作，将数据放入页面

二、路由传参数

其实是需要定义相应的路由规则就可以进行传参

/**
 * 路由器  Router
 */
var NoteRouter = Backbone.Router.extend({
    // 定义路由规则
    routes: {
        'notes': 'index',
        'notes/:id': 'show'
    },
    // 具体实现操作
    index: function() {
        jQuery( '#note_list' ).html( noteCollectionView.el );
        console.log( '笔记列表' );
    },
    // 实现带有参数的方法
    show: function( id ) {
        var note = noteCollection.get( id ),
            noteView = new NoteView( {model: note} );

        jQuery( '#note_list' ).html( noteView.render().el );
        console.log( '笔记: ' + id );
    }
});

/**

* 路由器 Router

var NoteRouter = Backbone.Router.extend({

// 定义路由规则

routes: {

'notes': 'index',

'notes/:id': 'show'

// 具体实现操作

index: function() {

jQuery( '#note_list' ).html( noteCollectionView.el );

console.log( '笔记列表' );

// 实现带有参数的方法

show: function( id ) {

var note = noteCollection.get( id ),

noteView = new NoteView( {model: note} );

jQuery( '#note_list' ).html( noteView.render().el );

console.log( '笔记: ' + id );

}

});

三、可选参数（分页）

/**
 * 路由器  Router
 */
var NoteRouter = Backbone.Router.extend({
    // 定义路由规则
    routes: {
        'notes(/page/:page)': 'index',
        'notes/:id': 'show'
    },
    // 具体实现操作
    index: function( page ) {
        // 分页
        var page = page || 1,
            low = ( page - 1 ) * 3,
            high = page * 3,
            // 获取相关数据
            pageNoteCollection = new NoteCollection( noteCollection.slice( low, high ) ),
            pageNoteCollectionView = new NoteCollectionView({collection: pageNoteCollection});

        jQuery( '#note_list' ).html( pageNoteCollectionView.el );
        console.log( '笔记列表,第' + page + '页' );
    },
    // 实现带有参数的方法
    show: function( id ) {
        var note = noteCollection.get( id ),
            noteView = new NoteView( {model: note} );

        jQuery( '#note_list' ).html( noteView.render().el );
        console.log( '笔记: ' + id );
    }
});

/**

* 路由器 Router

var NoteRouter = Backbone.Router.extend({

// 定义路由规则

routes: {

'notes(/page/:page)': 'index',

'notes/:id': 'show'

// 具体实现操作

index: function( page ) {

// 分页

var page = page || 1,

low = ( page - 1 ) * 3,

high = page * 3,

// 获取相关数据

pageNoteCollection = new NoteCollection( noteCollection.slice( low, high ) ),

pageNoteCollectionView = new NoteCollectionView({collection: pageNoteCollection});

jQuery( '#note_list' ).html( pageNoteCollectionView.el );

console.log( '笔记列表,第' + page + '页' );

// 实现带有参数的方法

show: function( id ) {

var note = noteCollection.get( id ),

noteView = new NoteView( {model: note} );

jQuery( '#note_list' ).html( noteView.render().el );

console.log( '笔记: ' + id );

}

});

backbone

backbone.js（四）Collection

2014年8月3日 chen

Collection是一些model的集合。

一、模型集合

/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );
        // 监听所有属性发生变化
        this.on( 'change', function( model, options ) {
            console.log( 'note 属性发生变化' );
        } );
        // 监听title属性发生变化
        this.on( 'change:title', function( model, options ) {
            console.log( 'title 属性值变为：' + options );
        } );

        // 监听验证事件
        this.on( 'invalid', function( model, error ) {
            console.log( model );
            console.log( error );
        } );
    },
    // 验证
    validate: function( attr, options ) {
        if( attr.title.length < 3 ) {
            return  '笔记标题需要大于3个字符串';
        }
    }
});


/**
 * Collection 集合
 */

var NoteCollection = Backbone.Collection.extend({
    model: Note
});

// 模型
var note1 = new Note({
    id: 1,
    title: '学习backbone'
});

var note2 = new Note({
    id: 2,
    title: '学习angular'
});

var note3 = new Note({
    id: 3,
    title: '学习golang'
});

// 集合
var noteCollection = new NoteCollection([note1, note2]);
console.log( noteCollection );    // child {length: 2, models: Array[2], _byId: Object, constructor: function, model: function…}


// 添加模型
noteCollection.add( note1 );
// 或者添加多个
noteCollection.add( [note1, note2] );

// 这样是不会覆盖id为1的模型
noteCollection.add( {id: 1, title: 'Hello'} );
// 设置merge: true ，就会对id为1的模型进行覆盖
noteCollection.add( {id: 1, title: 'Hello'}, {merge: true} );

// 删除模型
noteCollection.remove( note1 );
// 清空集合, 并重新赋值
noteCollection.reset( [note1, note2] );

// 弹出最后一个模型
noteCollection.pop();
// 弹出第一个模型
noteCollection.shift();

// 添加模型到最后
noteCollection.push( note1 );
// 添加模型到第一个位置
noteCollection.unshift( note1 );
// 添加模型到某个位置
noteCollection.add( note1, {at: 1} );


// set 方法
// 如果原集合里存在note2，note3。则会修改原属性
// 如果不存在note3，note3.则会新增
// 并且删除除了note3，note3以为的模型
noteCollection.set( [note2, note3] );
// 不删除 除了note3，note3以为的模型
noteCollection.set( [note2, note3], {remove: false} );
// 还有 {add: false}， {merge: false} 参数可以设置

// 获取模型
console.log( noteCollection.get( 2 ) );         // 通过id获取
console.log( noteCollection.get( note2 ) );     // 通过模型获取
console.log( noteCollection.at( 1 ) );          // 通过下标序号获取

100

101

102

103

104

105

106

/**

* 模型

var Note = Backbone.Model.extend({

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

// 监听所有属性发生变化

this.on( 'change', function( model, options ) {

console.log( 'note 属性发生变化' );

} );

// 监听title属性发生变化

this.on( 'change:title', function( model, options ) {

console.log( 'title 属性值变为：' + options );

} );

// 监听验证事件

this.on( 'invalid', function( model, error ) {

console.log( model );

console.log( error );

} );

// 验证

validate: function( attr, options ) {

if( attr.title.length < 3 ) {

return '笔记标题需要大于3个字符串';

}

});

/**

* Collection 集合

var NoteCollection = Backbone.Collection.extend({

model: Note

});

// 模型

var note1 = new Note({

id: 1,

title: '学习backbone'

});

var note2 = new Note({

id: 2,

title: '学习angular'

});

var note3 = new Note({

id: 3,

title: '学习golang'

});

// 集合

var noteCollection = new NoteCollection([note1, note2]);

console.log( noteCollection ); // child {length: 2, models: Array[2], _byId: Object, constructor: function, model: function…}

// 添加模型

noteCollection.add( note1 );

// 或者添加多个

noteCollection.add( [note1, note2] );

// 这样是不会覆盖id为1的模型

noteCollection.add( {id: 1, title: 'Hello'} );

// 设置merge: true ，就会对id为1的模型进行覆盖

noteCollection.add( {id: 1, title: 'Hello'}, {merge: true} );

// 删除模型

noteCollection.remove( note1 );

// 清空集合, 并重新赋值

noteCollection.reset( [note1, note2] );

// 弹出最后一个模型

noteCollection.pop();

// 弹出第一个模型

noteCollection.shift();

// 添加模型到最后

noteCollection.push( note1 );

// 添加模型到第一个位置

noteCollection.unshift( note1 );

// 添加模型到某个位置

noteCollection.add( note1, {at: 1} );

// set 方法

// 如果原集合里存在note2，note3。则会修改原属性

// 如果不存在note3，note3.则会新增

// 并且删除除了note3，note3以为的模型

noteCollection.set( [note2, note3] );

// 不删除除了note3，note3以为的模型

noteCollection.set( [note2, note3], {remove: false} );

// 还有 {add: false}， {merge: false} 参数可以设置

// 获取模型

console.log( noteCollection.get( 2 ) ); // 通过id获取

console.log( noteCollection.get( note2 ) ); // 通过模型获取

console.log( noteCollection.at( 1 ) ); // 通过下标序号获取

二、事件

var NoteCollection = Backbone.Collection.extend({
    // model 类型
    model: Note,
    // 初始化
    initialize: function() {
        // 监听事件
        this.on( {
            // 添加事件
            add: function( model, collection, options ) {
                console.log( 'ID: ' + model.id + '模型添加了到集合里' );
            },
            // 移除事件
            remove: function( model, collection, options ) {
                console.log( 'ID: ' + model.id + '模型从集合里移除了' );
            },
            // 属性变化事件
            change: function( model, options ) {
                console.log( '集合里的模型发生了变化' );
            }
        } );
    }
});

var NoteCollection = Backbone.Collection.extend({

// model 类型

model: Note,

// 初始化

initialize: function() {

// 监听事件

this.on( {

// 添加事件

add: function( model, collection, options ) {

console.log( 'ID: ' + model.id + '模型添加了到集合里' );

// 移除事件

remove: function( model, collection, options ) {

console.log( 'ID: ' + model.id + '模型从集合里移除了' );

// 属性变化事件

change: function( model, options ) {

console.log( '集合里的模型发生了变化' );

}

} );

}

});

三、集合视图

# html
<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>Backbone</title>
    <link rel="stylesheet" href="__PUBLIC__/bootstrap/css/bootstrap.css">
</head>
<body>
    <div class="container">
        <h1 class="page-header">Collection View</h1>
        <div id="note_list"></div>
    </div>

    <script type="text/template" id="list-template" >
        <span><%= title %></span><small class="pull-right"><%= create_at %></small>
    </script>


    <script src="__PUBLIC__/js/lib/jquery-1.11.1.js"></script>
    <script src="__PUBLIC__/js/lib/underscore.js"></script>
    <script src="__PUBLIC__/js/lib/backbone.js"></script>
    <script src="__PUBLIC__/bootstrap/js/bootstrap.js"></script>
    <script src="__PUBLIC__/js/app.js"></script>
</body>
</html>


# js
/**
 * Collection View 集合视图
 */

var NoteCollectionView = Backbone.View.extend({
    tagName: 'ul',

    // 初始化
    initialize: function() {
        this.collection.on( 'add', this.addOne, this );
        this.render();
    },

    // 绘制
    render: function() {
        // 循环 underscore 方法
        this.collection.each(this.addOne, this);
        return this;
    },
 
    // 自定义方法
    addOne: function(note) {
        // 创建视图
        var noteView = new NoteView({model: note});
        this.$el.append( noteView.render().el );
    }

});



// 模型
var note1 = new Note({
    id: 1,
    title: '学习backbone'
});

var note2 = new Note({
    id: 2,
    title: '学习angular'
});

var note3 = new Note({
    id: 3,
    title: '学习golang'
});

// 集合
var noteCollection = new NoteCollection([note1, note2, note3]);
// 集合视图
var noteCollectionView = new NoteCollectionView({collection: noteCollection});
// 将绘制后的html插入页面
$( '#note_list' ).html( noteCollectionView.el );

# html

<!DOCTYPE html>

<head>

<title>Backbone</title>

</head>

<body>

<h1 class="page-header">Collection View</h1>

</div>

</script>

</body>

</html>

# js

/**

* Collection View 集合视图

var NoteCollectionView = Backbone.View.extend({

tagName: 'ul',

// 初始化

initialize: function() {

this.collection.on( 'add', this.addOne, this );

this.render();

// 绘制

render: function() {

// 循环 underscore 方法

this.collection.each(this.addOne, this);

return this;

// 自定义方法

addOne: function(note) {

// 创建视图

var noteView = new NoteView({model: note});

this.$el.append( noteView.render().el );

}

});

// 模型

var note1 = new Note({

id: 1,

title: '学习backbone'

});

var note2 = new Note({

id: 2,

title: '学习angular'

});

var note3 = new Note({

id: 3,

title: '学习golang'

});

// 集合

var noteCollection = new NoteCollection([note1, note2, note3]);

// 集合视图

var noteCollectionView = new NoteCollectionView({collection: noteCollection});

// 将绘制后的html插入页面

$( '#note_list' ).html( noteCollectionView.el );

随后，紧跟着多创建一个model，并加入collection，html页面马上随之变化。

var note4 = new Note({
    id: 4,
    title: '深入精通php'
});

noteCollection.add( note4 );

var note4 = new Note({

id: 4,

title: '深入精通php'

});

noteCollection.add( note4 );

backbone

backbone.js（三）View

2014年8月2日 chen

一、基本方法

/**
 * View 试图
 */

var NoteView = Backbone.View.extend({
    // 标签名
    tagName : 'li',
    // 类
    className: 'item',
    // 属性
    attributes: {
        'data-role': 'list'
    }
});


var noteView = new NoteView();
console.log( noteView.el );         // <li data-role="list" class="item"></li>

/**

* View 试图

var NoteView = Backbone.View.extend({

// 标签名

tagName : 'li',

// 类

className: 'item',

// 属性

attributes: {

'data-role': 'list'

}

});

var noteView = new NoteView();

console.log( noteView.el ); // <li data-role="list" class="item"></li>

二、视图绑定模型

/**
 * View 试图
 */

var NoteView = Backbone.View.extend({
    // 标签名
    tagName : 'li',
    // 类
    className: 'item',
    // 属性
    attributes: {
        'data-role': 'list'
    },
    // 绘制
    render: function() {
        this.$el.html( this.model.get( 'title' ) );
    }
});

// 模型
var note = new Note({
    title: '学习backbone'
});

// 视图
var noteView = new NoteView({model: note});     // 视图绑定模型
console.log( noteView.el );         // <li data-role="list" class="item">学习backbone</li>

/**

* View 试图

var NoteView = Backbone.View.extend({

// 标签名

tagName : 'li',

// 类

className: 'item',

// 属性

attributes: {

'data-role': 'list'

// 绘制

render: function() {

this.$el.html( this.model.get( 'title' ) );

}

});

// 模型

var note = new Note({

title: '学习backbone'

});

// 视图

var noteView = new NoteView({model: note}); // 视图绑定模型

console.log( noteView.el ); // <li data-role="list" class="item">学习backbone</li>

三、模板

# html
<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>Backbone</title>
    <link rel="stylesheet" href="__PUBLIC__/bootstrap/css/bootstrap.css">
</head>
<body>
    <script type="text/template" id="list-template" >
        <span><%= title %></span><small class="pull-right"><%= create_at %></small>
    </script>


    <script src="__PUBLIC__/js/lib/jquery-1.11.1.js"></script>
    <script src="__PUBLIC__/js/lib/underscore.js"></script>
    <script src="__PUBLIC__/js/lib/backbone.js"></script>
    <script src="__PUBLIC__/bootstrap/js/bootstrap.js"></script>
    <script src="__PUBLIC__/js/app.js"></script>
</body>
</html>


# js
/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );
        // 监听所有属性发生变化
        this.on( 'change', function( model, options ) {
            console.log( 'note 属性发生变化' );
        } );
        // 监听title属性发生变化
        this.on( 'change:title', function( model, options ) {
            console.log( 'title 属性值变为：' + options );
        } );

        // 监听验证事件
        this.on( 'invalid', function( model, error ) {
            console.log( model );
            console.log( error );
        } );
    },
    // 验证
    validate: function( attr, options ) {
        if( attr.title.length < 3 ) {
            return  '笔记标题需要大于3个字符串';
        }
    }
});


/**
 * View 试图
 */

var NoteView = Backbone.View.extend({
    // 标签名
    tagName : 'li',
    // 类
    className: 'item',
    // 属性
    attributes: {
        'data-role': 'list'
    },
    // 绘制
    render: function() {
        this.$el.html( this.template( this.model.attributes ) );
    },
    // 模板
    template: _.template( jQuery( '#list-template' ).html() )
});

// 模型
var note = new Note({
    title: '学习backbone'
});

// 视图
var noteView = new NoteView({model: note});     // 视图绑定模型
noteView.render();
console.log( noteView.el );         
// <li data-role="list" class="item">
//     <span>学习backbone</span>
//     <small>Sat Aug 02 2014 17:29:58 GMT+8000(中国标准时间)</small>
// </li>

# html

<!DOCTYPE html>

<head>

<title>Backbone</title>

</head>

<body>

</script>

</body>

</html>

# js

/**

* 模型

var Note = Backbone.Model.extend({

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

// 监听所有属性发生变化

this.on( 'change', function( model, options ) {

console.log( 'note 属性发生变化' );

} );

// 监听title属性发生变化

this.on( 'change:title', function( model, options ) {

console.log( 'title 属性值变为：' + options );

} );

// 监听验证事件

this.on( 'invalid', function( model, error ) {

console.log( model );

console.log( error );

} );

// 验证

validate: function( attr, options ) {

if( attr.title.length < 3 ) {

return '笔记标题需要大于3个字符串';

}

});

/**

* View 试图

var NoteView = Backbone.View.extend({

// 标签名

tagName : 'li',

// 类

className: 'item',

// 属性

attributes: {

'data-role': 'list'

// 绘制

render: function() {

this.$el.html( this.template( this.model.attributes ) );

// 模板

template: _.template( jQuery( '#list-template' ).html() )

});

// 模型

var note = new Note({

title: '学习backbone'

});

// 视图

var noteView = new NoteView({model: note}); // 视图绑定模型

noteView.render();

console.log( noteView.el );

// <li data-role="list" class="item">

// <span>学习backbone</span>

// <small>Sat Aug 02 2014 17:29:58 GMT+8000(中国标准时间)</small>

// </li>

backbone

backbone.js（二）Model

2014年8月2日 chen

一、基本方法

/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );
    }
});

// 创建note1实例
var note1 = new Note( { 
    title: 'Hello',
    author: 'cc'
} );

// 获取属性
console.log( note1.get( 'title' ) );    // Hello
console.log( note1.get( 'notitle' ) );  // undefined 

// 获取所有属性
console.log( note1.toJSON() );          // Object {title: "Hello", author: "cc"} 
console.log( note1.attributes );        // Object {title: "Hello", author: "cc"} 

// 是否存在某个key值
console.log( note1.has( 'title' ) );    // true
console.log( note1.has( 'notitle' ) );  // false 

// 删除属性
note1.unset( 'title' );

// 设置属性
note1.set( 'hello', 'world' );
note1.set( {
    content: 'nihao, 第一个笔记',
    title: 'Hello'
} );

console.log( note1.toJSON() );          // Object {author: "cc", hello: "world", content: "nihao, 第一个笔记", title: "Hello"} 

// 清空所有属性
note1.clear();

/**

* 模型

var Note = Backbone.Model.extend({

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

}

});

// 创建note1实例

var note1 = new Note( {

title: 'Hello',

author: 'cc'

} );

// 获取属性

console.log( note1.get( 'title' ) ); // Hello

console.log( note1.get( 'notitle' ) ); // undefined

// 获取所有属性

console.log( note1.toJSON() ); // Object {title: "Hello", author: "cc"}

console.log( note1.attributes ); // Object {title: "Hello", author: "cc"}

// 是否存在某个key值

console.log( note1.has( 'title' ) ); // true

console.log( note1.has( 'notitle' ) ); // false

// 删除属性

note1.unset( 'title' );

// 设置属性

note1.set( 'hello', 'world' );

note1.set( {

content: 'nihao, 第一个笔记',

title: 'Hello'

} );

console.log( note1.toJSON() ); // Object {author: "cc", hello: "world", content: "nihao, 第一个笔记", title: "Hello"}

// 清空所有属性

note1.clear();

二、事件

当使用set方法改变属性时，就会触发change时间。

/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );

        // 监听所有属性发生变化
        this.on( 'change', function( model, options ) {
            console.log( 'note 属性发生变化' );
        } );
        // 监听title属性发生变化
        this.on( 'change:title', function( model, options ) {
            console.log( 'title 属性值变为：' + options );
        } );
    }
});

var note2 = new Note();
note2.set( 'title', '你好' );
// title 属性值变为：你好
// note 属性发生变化

/**

* 模型

var Note = Backbone.Model.extend({

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

// 监听所有属性发生变化

this.on( 'change', function( model, options ) {

console.log( 'note 属性发生变化' );

} );

// 监听title属性发生变化

this.on( 'change:title', function( model, options ) {

console.log( 'title 属性值变为：' + options );

} );

}

});

var note2 = new Note();

note2.set( 'title', '你好' );

// title 属性值变为：你好

// note 属性发生变化

三、验证（validate）

/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );
        // 监听所有属性发生变化
        this.on( 'change', function( model, options ) {
            console.log( 'note 属性发生变化' );
        } );
        // 监听title属性发生变化
        this.on( 'change:title', function( model, options ) {
            console.log( 'title 属性值变为：' + options );
        } );
    },
    // 验证
    validate: function( attr, options ) {
        if( attr.title.length < 3 ) {
            return  '笔记标题需要大于3个字符串';
        }
    }
});



var note2 = new Note();
console.log( note2.set( 'title', '你好', {validate: true} ) );    // false
console.log( note2.validationError );                             // 笔记标题需要大于3个字符串 
console.log( note2.get( 'title' ) );                              // one note

/**

* 模型

var Note = Backbone.Model.extend({

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

// 监听所有属性发生变化

this.on( 'change', function( model, options ) {

console.log( 'note 属性发生变化' );

} );

// 监听title属性发生变化

this.on( 'change:title', function( model, options ) {

console.log( 'title 属性值变为：' + options );

} );

// 验证

validate: function( attr, options ) {

if( attr.title.length < 3 ) {

return '笔记标题需要大于3个字符串';

}

});

var note2 = new Note();

console.log( note2.set( 'title', '你好', {validate: true} ) ); // false

console.log( note2.validationError ); // 笔记标题需要大于3个字符串

console.log( note2.get( 'title' ) ); // one note

四、验证事件（invalid）

/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );
        // 监听所有属性发生变化
        this.on( 'change', function( model, options ) {
            console.log( 'note 属性发生变化' );
        } );
        // 监听title属性发生变化
        this.on( 'change:title', function( model, options ) {
            console.log( 'title 属性值变为：' + options );
        } );

        // 验证事件
        this.on( 'invalid', function( model, error ) {
            console.log( model );
            console.log( error );
        } );
    },
    // 验证
    validate: function( attr, options ) {
        if( attr.title.length < 3 ) {
            return  '笔记标题需要大于3个字符串';
        }
    }
});



var note2 = new Note();
note2.set( 'title', '你好', {validate: true} )
// child {cid: "c1", attributes: Object, _changing: false, _previousAttributes: Object, changed: Object…}
// 笔记标题需要大于3个字符串

/**

* 模型

var Note = Backbone.Model.extend({

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

// 监听所有属性发生变化

this.on( 'change', function( model, options ) {

console.log( 'note 属性发生变化' );

} );

// 监听title属性发生变化

this.on( 'change:title', function( model, options ) {

console.log( 'title 属性值变为：' + options );

} );

// 验证事件

this.on( 'invalid', function( model, error ) {

console.log( model );

console.log( error );

} );

// 验证

validate: function( attr, options ) {

if( attr.title.length < 3 ) {

return '笔记标题需要大于3个字符串';

}

});

var note2 = new Note();

note2.set( 'title', '你好', {validate: true} )

// child {cid: "c1", attributes: Object, _changing: false, _previousAttributes: Object, changed: Object…}

// 笔记标题需要大于3个字符串

参考链接：

官方手册

http://blog.csdn.net/the_fire/article/details/7445448

backbone

backbone.js（一）初识

2014年8月2日 chen

backbone.js提供了一套web开发的框架，通过Models进行key-value绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互.它是基于jquery和underscore的一个js框架。

整体上来说，backbone.js是一个web端javascript的mvc框架，算得上是重量级的框架。它能让你像写java代码一些写js代码，定义类，类的属性以及方法。更重要的是它能够优雅的把原本无逻辑的javascript代码进行组织，并且提供数据和逻辑相互分离的方法，减少代码开发过程中的数据和逻辑混乱。

通过backbone，你可以把你的数据当作Models，通过Models你可以创建数据，进行数据验证，销毁或者保存到服务器上。当界面上的操作引起model中属性的变化时，model会触发change的事件;那些用来显示model状态的views会接受到model触发change的消息，进而发出对应的响应，并且重新渲染新的数据到界面。在一个完整的backbone应用中，你不需要写那些胶水代码来从DOM中通过特殊的id来获取节点，或者手工的更新HTML页面，因为在model发生变化时，views会很简单的进行自我更新。

Backbone 的优点和一些经验 Tip：

View 的划分将页面上的视图元素解耦，粒度细化。View 间通过事件和 Model 通讯，避免了 DOM 事件的滥用。
Model 和 Restful 的通讯方式对于后端人员非常友好。
MVC 架构清晰，我有个常年写 Java 没写过 JS 的同事看 Backbone 很快就了解了整体设计，虽然这时候他还是不会写 JS。
Collection/Model 抽象了以前杂乱的 AJAX 请求，CRUD 请求变得非常非常方便。
强烈建议 View -> Model 单向依赖，世界会美好很多。
配上一个模块化加载器例如 SeaJS 会很爽。

Backbone 的一些缺点，或者说一些尚未实现的 Feature：

Model 层比较简单，如果要支持 One-To-One 或者 One-To-Many 等复杂数据关系时有些力不从心。还有一个 Model 只能属于一个 Collection 这个设计，页面复杂的时候会很受局限。例如这个问题： http://www.zhihu.com/question/19843899 （补充：Backbone.Relations 插件是这个问题的一个解决方案 https://github.com/PaulUithol/Backbone-relational By zjhiphop）
同上，Model 只有基本的 CRUD 操作，不能很好的扩展，Backbone.sync 方法写的不太灵活，要想扩展就得重写 sync 方法。
View 层没有很强的 Page 管理机制，比如通过 URL 切换改变整个页面时，页面上尚存的 View 如何处理？直接销毁的话，是否要销毁关联的 Model、Collection？Cache 住？如何管理 Cache？
内存管理需要比较小心，缺乏机制避免创建重复 Model。
extends override 父类方法的时候得写一串的 SuperClass.prototype.someMethod.apply 什么的，就不能实现个 _super 方法么……
对调试非常不友好。
作者有代码洁癖（也是加分项），this.$el 大家呼唤了这么久才加上，估计今生也看不到 this._super。
更新慢。

参考链接：

知乎-Backbone.js 的最佳应用场景有哪些？

初识backbone.js

官方手册

Websocket

WebSocket（四） —— 传输图片

2014年6月30日 chen

前文解析数据帧中图，

 0                   1                   2                   3
  0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
 +-+-+-+-+-------+-+-------------+-------------------------------+
 |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
 |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
 |N|V|V|V|       |S|             |   (if payload len==126/127)   |
 | |1|2|3|       |K|             |                               |
 +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
 |     Extended payload length continued, if payload len == 127  |
 + - - - - - - - - - - - - - - - +-------------------------------+
 |                               |Masking-key, if MASK set to 1  |
 +-------------------------------+-------------------------------+
 | Masking-key (continued)       |          Payload Data         |
 +-------------------------------- - - - - - - - - - - - - - - - +
 :                     Payload Data continued ...                :
 + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
 |                     Payload Data continued ...                |
 +---------------------------------------------------------------+

0 1 2 3

0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1

+-+-+-+-+-------+-+-------------+-------------------------------+

|F|R|R|R| opcode|M| Payload len | Extended payload length |

|I|S|S|S| (4) |A| (7) | (16/64) |

|N|V|V|V| |S| | (if payload len==126/127) |

| |1|2|3| |K| | |

+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +

| Extended payload length continued, if payload len == 127 |

+ - - - - - - - - - - - - - - - +-------------------------------+

| |Masking-key, if MASK set to 1 |

+-------------------------------+-------------------------------+

| Masking-key (continued) | Payload Data |

+-------------------------------- - - - - - - - - - - - - - - - +

: Payload Data continued ... :

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +

| Payload Data continued ... |

+---------------------------------------------------------------+

现在再看左上角上面的图标，左上角的四个小列，也就是4位，第一位是FIN，后面三位是RSV1到3。官方文档上说RSV是预留的空间，正常为0，这就意味着，正常情况下他们可以当做0填充，那么前4位只有第一位的FIN需要设置，FIN表示帧结束，由于这篇中它不重要就不特别介绍了。接着后面的四位是储存opcode的值，这个opcode是标识数据类型的。这样数据的第一个字节我们就能理解它的含义了，看上面16进制的数据的第一个字节81换成二进制是1000001，第一个1是FIN的值，最后一个1是opcode的值。

Opcode是用来确定传输数据类型的。具体如下：

 |Opcode  | Meaning                             | Reference |
-+--------+-------------------------------------+-----------|
 | 0      | Continuation Frame                  | RFC 6455  |
-+--------+-------------------------------------+-----------|
 | 1      | Text Frame                          | RFC 6455  |
-+--------+-------------------------------------+-----------|
 | 2      | Binary Frame                        | RFC 6455  |
-+--------+-------------------------------------+-----------|
 | 8      | Connection Close Frame              | RFC 6455  |
-+--------+-------------------------------------+-----------|
 | 9      | Ping Frame                          | RFC 6455  |
-+--------+-------------------------------------+-----------|
 | 10     | Pong Frame                          | RFC 6455  |
-+--------+-------------------------------------+-----------|

|Opcode | Meaning | Reference |

-+--------+-------------------------------------+-----------|

| 0 | Continuation Frame | RFC 6455 |

-+--------+-------------------------------------+-----------|

| 1 | Text Frame | RFC 6455 |

-+--------+-------------------------------------+-----------|

| 2 | Binary Frame | RFC 6455 |

-+--------+-------------------------------------+-----------|

| 8 | Connection Close Frame | RFC 6455 |

-+--------+-------------------------------------+-----------|

| 9 | Ping Frame | RFC 6455 |

-+--------+-------------------------------------+-----------|

| 10 | Pong Frame | RFC 6455 |

-+--------+-------------------------------------+-----------|

可以看出，1为传输文本，2为传输二进制（可以用来传输图片）。

第一个字节0x81 （10000001/129）为文本

第一个字节0x82 （10000010/130）为二进制

根据opcode改写frame函数：

function frame($message, $messageType='text') {
        switch ($messageType) {
            case 'continuous':
                $b1 = 0;
                break;
            case 'text':
                $b1 = 1;
                break;
            case 'binary':
                $b1 = 2;
                break;
            case 'close':
                $b1 = 8;
                break;
            case 'ping':
                $b1 = 9;
                break;
            case 'pong':
                $b1 = 10;
                break;
        }
        
        $b1 += 128;

        $length = strlen($message);
        $lengthField = "";
        if ($length < 126) {
            $b2 = $length;
        } 
        elseif ($length <= 65536) {
            $b2 = 126;
            $hexLength = dechex($length);
            if (strlen($hexLength)%2 == 1) {
                $hexLength = '0' . $hexLength;
            } 
            $n = strlen($hexLength) - 2;

            for ($i = $n; $i >= 0; $i=$i-2) {
                $lengthField = chr(hexdec(substr($hexLength, $i, 2))) . $lengthField;
            }
            while (strlen($lengthField) < 2) {
                $lengthField = chr(0) . $lengthField;
            }
        } 
        else {
            $b2 = 127;
            $hexLength = dechex($length);
            if (strlen($hexLength)%2 == 1) {
                $hexLength = '0' . $hexLength;
            } 
            $n = strlen($hexLength) - 2;

            for ($i = $n; $i >= 0; $i=$i-2) {
                $lengthField = chr(hexdec(substr($hexLength, $i, 2))) . $lengthField;
            }
            while (strlen($lengthField) < 8) {
                $lengthField = chr(0) . $lengthField;
            }
        }

        return chr($b1) . chr($b2) . $lengthField . $message;
    }

function frame($message, $messageType='text') {

switch ($messageType) {

case 'continuous':

$b1 = 0;

break;

case 'text':

$b1 = 1;

break;

case 'binary':

$b1 = 2;

break;

case 'close':

$b1 = 8;

break;

case 'ping':

$b1 = 9;

break;

case 'pong':

$b1 = 10;

break;

}

$b1 += 128;

$length = strlen($message);

$lengthField = "";

if ($length < 126) {

$b2 = $length;

}

elseif ($length <= 65536) {

$b2 = 126;

$hexLength = dechex($length);

if (strlen($hexLength)%2 == 1) {

$hexLength = '0' . $hexLength;

}

$n = strlen($hexLength) - 2;

for ($i = $n; $i >= 0; $i=$i-2) {

$lengthField = chr(hexdec(substr($hexLength, $i, 2))) . $lengthField;

}

while (strlen($lengthField) < 2) {

$lengthField = chr(0) . $lengthField;

}

else {

$b2 = 127;

$hexLength = dechex($length);

if (strlen($hexLength)%2 == 1) {

$hexLength = '0' . $hexLength;

}

$n = strlen($hexLength) - 2;

for ($i = $n; $i >= 0; $i=$i-2) {

$lengthField = chr(hexdec(substr($hexLength, $i, 2))) . $lengthField;

}

while (strlen($lengthField) < 8) {

$lengthField = chr(0) . $lengthField;

}

return chr($b1) . chr($b2) . $lengthField . $message;

}

现在进行测试：

#php 

$msg = file_get_contents( 'a.jpg' );
$msg = $this->frame($msg, 'binary');
socket_write($client, $msg, strlen($msg));

#php

$msg = file_get_contents( 'a.jpg' );

$msg = $this->frame($msg, 'binary');

socket_write($client, $msg, strlen($msg));

#html

<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>Websocket</title>
</head>
<body>
    <canvas id="myCanvas" style="width: 350px; height: 350px;"></canvas>
    <script>
        var ws = new WebSocket( 'ws://127.0.0.1:8000' );

        ws.onerror = function(e) {
          console.log(e);
        };

        ws.onopen = function() {
            console.log( '握手成功' );
            ws.send( '老陈是一个文艺的二逼青年' );
            console.log( ws );
        };

        ws.onmessage = function( e ) {
            console.log( e );
            var canvas = document.getElementById("myCanvas"); 
            var context = canvas.getContext("2d"); 
            var image = new Image();  
            image.onload = function () {  
                context.clearRect( 0, 0, canvas.width, canvas.height );  
                context.drawImage( image, 0, 0, canvas.width, canvas.height );  
            }  
            image.src = URL.createObjectURL(e.data);  

        };
    </script>
</body>
</html>

#html

<!DOCTYPE html>

<head>

<title>Websocket</title>

</head>

<body>

var ws = new WebSocket( 'ws://127.0.0.1:8000' );

ws.onerror = function(e) {

console.log(e);

};

ws.onopen = function() {

console.log( '握手成功' );

ws.send( '老陈是一个文艺的二逼青年' );

console.log( ws );

};

ws.onmessage = function( e ) {

console.log( e );

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

var image = new Image();

image.onload = function () {

context.clearRect( 0, 0, canvas.width, canvas.height );

context.drawImage( image, 0, 0, canvas.width, canvas.height );

}

image.src = URL.createObjectURL(e.data);

};

</script>

</body>

</html>

同理也可以传输音频文件。

#php

$msg = file_get_contents( 'Glenn Frey - The One You Love.mp3' );
$msg = $this->frame($msg, 'binary');
socket_write($client, $msg, strlen($msg));

#php

$msg = file_get_contents( 'Glenn Frey - The One You Love.mp3' );

$msg = $this->frame($msg, 'binary');

socket_write($client, $msg, strlen($msg));

# html
var blob = URL.createObjectURL(e.data),
                audio = new Audio()
                ;

            audio.src = blob;
            audio.play();

# html

var blob = URL.createObjectURL(e.data),

audio = new Audio()

;

audio.src = blob;

audio.play();

参考链接：

http://my.oschina.net/u/1187419/blog/281974?p=%7B%7BcurrentPage+1%7D%7D

http://www.web-tinker.com/article/20309.html

Websocket

WebSocket（三） —— 生成数据帧

2014年6月29日 chen

接收消息时需要解析数据帧，发送消息时一样需要生成数据帧。

方法如下：

function frame($s){
        $a = str_split($s, 125);
        if (count($a) == 1){
            return "\x81" . chr(strlen($a[0])) . $a[0];
        }
        $ns = "";
        foreach ($a as $o){
            $ns .= "\x81" . chr(strlen($o)) . $o;
        }
        return $ns;
    }

function frame($s){

$a = str_split($s, 125);

if (count($a) == 1){

return "\x81" . chr(strlen($a[0])) . $a[0];

}

$ns = "";

foreach ($a as $o){

$ns .= "\x81" . chr(strlen($o)) . $o;

}

return $ns;

}

返回数据：

            if ( empty( $handshake[ $clientID ] ) ) {
                // 如果没有握手，先握手回应
                $handshake = doHandShake( $handshake, $clientID, $socket, $buffer );
            } else {
                // 如果已经握手，直接接受数据，并处理
                $msg = frame( decode( $buffer ) );
                socket_write( $socket, $msg, strlen( $msg ) );
            }

if ( empty( $handshake[ $clientID ] ) ) {

// 如果没有握手，先握手回应

$handshake = doHandShake( $handshake, $clientID, $socket, $buffer );

} else {

// 如果已经握手，直接接受数据，并处理

$msg = frame( decode( $buffer ) );

socket_write( $socket, $msg, strlen( $msg ) );

}

html：

# html

<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>Websocket</title>
</head>
<body>
    <script>
        var ws = new WebSocket( 'ws://127.0.0.1:8000' );

        ws.onerror = function(e) {
          console.log(e);
        };

        ws.onopen = function() {
            console.log( '握手成功' );
            ws.send( '老陈是一个文艺的二逼青年' );
            console.log( ws );
        };

        ws.onmessage = function( e ) {
            console.log( e.data );
        };
    </script>
</body>
</html>

# html

<!DOCTYPE html>

<head>

<title>Websocket</title>

</head>

<body>

var ws = new WebSocket( 'ws://127.0.0.1:8000' );

ws.onerror = function(e) {

console.log(e);

};

ws.onopen = function() {

console.log( '握手成功' );

ws.send( '老陈是一个文艺的二逼青年' );

console.log( ws );

};

ws.onmessage = function( e ) {

console.log( e.data );

};

</script>

</body>

</html>

参考地址：

http://www.cnblogs.com/hustskyking/p/websocket-with-php.html

老陈是一个普通的文艺二逼青年

分类目录归档：javascript

jQuery.Deferred对象

一、什么是deferred对象？

1、生成Deferred对象

2、deferred对象状态以及改变状态

3、绑定回调方法

4、then方法

5、pipe方法

6、promise对象

7、$.when方法

三级（多级）联动自动赋值

backbone.js（六）后台交互

一、添加

二、查找

三、获取单条记录并修改

四、删除

五、路由设置

backbone.js（五）Router

一、基本用法

二、路由传参数

三、可选参数（分页）

backbone.js（四）Collection

一、模型集合

二、事件

三、集合视图

backbone.js（三）View

一、基本方法

二、视图绑定模型

三、模板

backbone.js（二）Model

一、基本方法

二、事件

三、验证（validate）

四、验证事件（invalid）

backbone.js（一）初识

WebSocket（四） —— 传输图片

WebSocket（三） —— 生成数据帧

For The Dream

一、什么是deferred对象？

1、生成Deferred对象

2、deferred对象状态 以及 改变状态

3、绑定回调方法

4、then方法

5、pipe方法

6、promise对象

7、$.when方法

一、添加

二、查找

三、获取单条记录并修改

四、删除

五、路由设置

一、基本用法

二、路由传参数

三、可选参数（分页）

一、模型集合

二、事件

三、集合视图

一、基本方法

二、视图绑定模型

三、模板

一、基本方法

二、事件

三、验证（validate）

四、验证事件（invalid）

For The Dream

2、deferred对象状态以及改变状态