Nodejs与Backbone学习笔记分享

Nodejs与Backbone学习笔记分享

木有 Markdown 界面好丑…

7 回复

Node.js 与 Backbone 学习笔记分享

引言

在现代 Web 开发中，Node.js 和 Backbone.js 都是非常流行的工具。Node.js 是一个基于 Chrome V8 JavaScript 引擎的 JavaScript 运行环境，而 Backbone.js 是一个轻量级的前端框架，用于构建结构化的 JavaScript 应用程序。本文将通过一些简单的示例代码，分享一些关于如何使用 Node.js 和 Backbone.js 进行开发的经验。

安装与配置

首先，确保你已经安装了 Node.js 和 npm（Node 包管理器）。你可以从 Node.js 官网 下载并安装最新版本。

接下来，我们需要创建一个新的项目目录，并初始化 npm：

mkdir myapp
cd myapp
npm init -y

然后，我们安装必要的依赖包。我们将使用 Express 作为后端服务器，以及 Backbone.js 作为前端框架。

npm install express --save
npm install backbone --save

后端设置

我们使用 Express 框架来搭建一个简单的 RESTful API。创建一个 server.js 文件，并添加以下代码：

const express = require('express');
const app = express();
const port = 3000;

// 假设我们有一个简单的数据存储
let todos = [
    { id: 1, title: 'Learn Node.js' },
    { id: 2, title: 'Learn Backbone.js' }
];

// 获取所有待办事项
app.get('/todos', (req, res) => {
    res.json(todos);
});

// 创建新的待办事项
app.post('/todos', (req, res) => {
    const newTodo = req.body;
    todos.push(newTodo);
    res.status(201).json(newTodo);
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

这段代码创建了一个简单的 Express 服务器，监听 3000 端口，并提供了两个基本的 REST 路由：获取所有待办事项和创建新的待办事项。

前端设置

现在我们转向前端，使用 Backbone.js 来展示这些待办事项。首先，在 HTML 文件中引入 Backbone.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Backbone Todo List</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <ul id="todo-list"></ul>
</body>
</html>

接下来，在 app.js 中实现一个简单的 Backbone 模型、集合和视图：

// 定义模型
const Todo = Backbone.Model.extend({
    defaults: {
        title: ''
    }
});

// 定义集合
const TodosCollection = Backbone.Collection.extend({
    model: Todo,
    url: '/todos'
});

// 定义视图
const TodoView = Backbone.View.extend({
    tagName: 'li',
    template: _.template('<%= title %>'),
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

const todos = new TodosCollection();

todos.fetch({
    success: function() {
        todos.each(function(todo) {
            let view = new TodoView({ model: todo });
            $('#todo-list').append(view.render().el);
        });
    }
});

以上代码定义了一个简单的待办事项模型 Todo，一个包含这些模型的集合 TodosCollection，以及一个显示每个待办事项的视图 TodoView。最后，我们从服务器获取数据，并将其渲染到页面上。

结论

通过上述示例，我们可以看到 Node.js 和 Backbone.js 的结合可以快速构建出功能完备的 Web 应用。希望这篇笔记能帮助你更好地理解和应用这两个强大的工具。


//代码1
//console.log(_.functions(Backbone));//["Collection","History","Model","Router","View","noConflict","setDomLibrary","sync","wrapError"]
//console.log(_.functions(Backbone.Events));//["bind","off","on","trigger","unbind"]

//console.log(function(){} == function(){});//false???

/*代码2
var obj = {};
_.extend(obj,Backbone.Events);

obj.on('hack',function(data){
	console.log('I\'m hacked by '+data);
});

obj.trigger('hack','Musikar');//I'm hacked by Musikar
*/

/*代码3
var obj = {
	handler:function(){
		console.log(this === obj);
	}
};
_.extend(obj,Backbone.Events);

obj.on('hacker:start hacker:stop',obj.handler,obj);

obj.trigger('hacker:start','Musikar');//true
obj.trigger('hacker:stop','Musikar');//true
*/

/*代码4
var obj = {};
_.extend(obj,Backbone.Events);

obj.on('all',function(){
	console.log(Math.random());
});

obj.trigger('fuck');
obj.trigger('fuck:me');
*/

/*代码4
var obj = {};
_.extend(obj,Backbone.Events);

obj.on('connection message disconnect',function(){
	console.log('connection');
});

obj.trigger('connection message disconnect');
*/

//console.log(Backbone.Model.toString());
/*

function (attributes, options) {
    var defaults;
    attributes || (attributes = {});
    if (options && options.parse) {
        attributes = this.parse(attributes);
    }
    if ((defaults = getValue(this, "defaults"))) {
        attributes = _.extend({}, defaults, attributes);
    }
    if (options && options.collection) {
        this.collection = options.collection;
    }
    this.attributes = {};
    this._escapedAttributes = {};
    this.cid = _.uniqueId("c");
    this.changed = {};
    this._silent = {};
    this._pending = {};
    this.set(attributes, {silent: true});
    this.changed = {};
    this._silent = {};
    this._pending = {};
    this._previousAttributes = _.clone(this.attributes);
    this.initialize.apply(this, arguments);
}

*/

console.clear();
//console.dir(Backbone.Model.prototype);
/*

_pending
	null

_silent
	null

changed
	null

idAttribute
	"id"

	
constructor
	function()
	
_validate
	function()
	
bind
	function()
	
change
	function()
	
changedAttributes
	function()
	
clear
	function()
	
clone
	function()
	
destroy
	function()
	
escape
	function()
	
fetch
	function()
	
get
	function()
	
has
	function()
	
hasChanged
	function()
	
initialize
	function()
	
isNew
	function()
	
isValid
	function()
	
off
	function()
	
on
	function()
	
parse
	function()
	
previous
	function()
	
previousAttributes
	function()
	
save
	function()
	
set
	function()
	
toJSON
	function()
	
trigger
	function()
	
unbind
	function()
	
unset
	function()
	
url
	function()

*/


/*
var Sidebar = Backbone.Model.extend({
	setColor:function(color){
		this.set({
			color:color
		});
	}
});

window.sidebar = new Sidebar;

sidebar.on('change:color', function(model, color) {
	$('#sidebar').css({background: color});
});

$('#color').keyup(function(){
	
	sidebar.setColor(this.value);
	$('#sidebar').html('<span style="background:#fff;color:'+this.value+';">'+this.value+'</span>');
});



<div id="sidebar" style="height:50px;background:#e8efff;"></div>
<input type="text" name="" id="color" />

*/

/* constructor / initializenew Model([attributes], [options]) 
var demo = Backbone.Model.extend({
	constructor:function(){
		console.log('constructing...');
	},
	initialize:function(){
		console.log('initilizing...');
	},
	property:function(x,y){
		console.log(arguments.callee.length);//2
	}
},{
	classMethod:function(x,y,z){
		console.log(arguments.callee.length);//3
	}
});

console.log(typeof demo.property);//undefined
console.log(typeof (new demo).property);//function
console.log(typeof demo.classMethod);//function

demo.classMethod();//3
(new demo).property();//2
*/

/*

var Demo1 = Backbone.Model.extend({
	hello:function(){
		console.log('hello');
	}
});

var Demo2 = Demo1.extend({
	hello:function(){
		console.log('world');
	}
});

var d1 = new Demo1();
var d2 = new Demo2();

console.log(d1 instanceof Demo1);//true
console.log(d2 instanceof Demo2);//true
console.log(d2 instanceof Demo1);//true

//d2.hello();//world

var Demo2 = Demo1.extend({
	hello:function(){
		Demo1.prototype.hello.call(this);
		console.log('world');
	}
});

var d2 = new Demo2();

d2.hello();//world

*/

/*
var Demo = Backbone.Model.extend({
	constructor:function(){
		console.log('Demo\'s constructor.');
	}
});

var D = Demo.extend({
	constructor:function(){
		console.log(Demo.prototype.constructor.toString());
		console.log('D\'s constructor.');
	}
});

new D;
*/

/*Backbone.Model.get
var Demo = Backbone.Model.extend({
	
});

var d = new Demo({
	name:'PG',
	age:21
},{
	collection:'beauty'	
});

console.log(d.get('name'));//PG
console.log(d.get('age'));//21

*/


/*Backbone.Model.set / Backbone.Model.on
var Demo = Backbone.Model.extend({
	
});

var d = new Demo({
	name:'PG',
	age:21
},{
	collection:'beauty'	
});

d.on('change:name change:age',function(){
	
	console.log(arguments[0] === d);//true
	console.log(arguments[1]);//new data
	console.log(arguments[2]);//changes
	

	console.log(Math.random());
});

d.set('name','Hacker');//用法1 

d.set({
	'name':'Musikar',
	'age':'31'
});//用法2 触发两次change事件

*/

/* Backbone.Model.validate / Backbone.Model.
var Demo = Backbone.Model.extend({
	validate:function(attrs){
		if(attrs.name.length > 2){
			return '不能设置大于2的值';
		}

		if(attrs.age > 30){
			return '年龄太大了';
		}
	}
});

var d = new Demo({
	name:'PG',
	age:21
},{
	collection:'beauty'	
});

d.on('change:name change:age',function(){

	console.log(Math.random());
});


var ret = d.set({
	name:'a',
	age:40
});

console.log('返回值：',ret);//false

var ret = d.set({
	name:'a',
	age:22
});

console.log('返回值：',ret === d);//true 返回Model的引用
*/



/*Backbone.Model.set
var Demo = Backbone.Model.extend({
	validate:function(attrs){
		console.log(attrs);
		if(attrs.age > 30){
			return '年龄太大了';
		}

		if(attrs.name != 'PG'){
			return '你不是PG';
		}
	}
});

var d = new Demo({
	name:'PG',
	age:100
});

d.on('error',function(m,errorMsg,obj){
	console.log(errorMsg);
});

d.set({
	age:31
},{
	silent:true,
	error:function(){
		console.log('不会触发error事件');//不会触发error事件
	}
});

d.set('name','Musikar');//年龄太大了
console.log(d.get('age'));//31
*/


/*Backbone.Model.escape
var hacker = new Backbone.Model({
	name:'<script>alert("xss");</script>'
});

console.log(hacker.get('name'));//<script>alert("xss");</script>
console.log(hacker.escape('name'));//&lt;script&gt;alert(&quot;xss&quot;);&lt;&#x2F;script&gt;
*/


/*Backbone.Model.has
var hacker = new Backbone.Model({
	name:'PG',
	age:30
});

console.log(hacker.has('name'));//true
console.log(hacker.has('gender'));//false
*/

/*Backbone.Model.unset
var hacker = new Backbone.Model({
	name:'PG',
	age:21
});

console.log(hacker.has('name'));//true
hacker.unset('name');
console.log(hacker.has('name'));//false
*/

/*Backbone.Model.clear
var hacker = new Backbone.Model({
	name:'Musikar',
	age:22
});

hacker.on('change',function(){
	//console.log(arguments[0] === hacker);//true
	console.log(arguments[1].changes);//Object { name=true,age=true }
});

hacker.clear({
	//silent:true
});

console.log(hacker.get('name'));//undefined
*/


/*Backbone.Model.id
var hacker = new Backbone.Model({
	name:'Musikar',
	id:'hacker'
});

console.log(hacker.name);//undefined
console.log(hacker.id);//hacker
*/

/*Backbone.Model.idAttribute
var Hacker = Backbone.Model.extend({
	idAttribute:'_id'
});

var hacker = new Hacker({
	'_id':1,
	'name':'Musikar'
});

console.log(hacker.id);//1
*/


/*Backbone.Model.cid
var Hacker = Backbone.Model.extend({
	idAttribute:'_id'
});

var hacker = new Hacker({
	'_id':1,
	'name':'Musikar'
});

var hacker2 = new Hacker({
	'_id':1,
	'name':'Musikar'
});

console.log(hacker.cid,hacker2.cid);//c0,c1
*/


/*Backbone.Model.attributes
var Hacker = Backbone.Model.extend({
	
});

var hacker = new Hacker({
	name:'Musikar',
	age:100
});

console.log(hacker.attributes);//Object { name="Musikar",age=100 }
*/


/*Backbone.Model.changed
var Hacker = Backbone.Model.extend({
	
});

var hacker = new Hacker({
	name:'Musikar',
	age:100
});

hacker.on('change:name',function(){
	console.log(this.changed);//Object { name="Hacker" }
	console.log(hacker.changedAttributes());//Object { name="Hacker" }
});

hacker.set('name','Hacker');
*/


/*Backbone.Model.attributes
var Hacker = Backbone.Model.extend({
	defaults:{
		name:'PG',
		age:21,
		gender:'female'
	}
});

var hacker = new Hacker({
	name:'Musikar'
});
console.log(hacker.attributes);//Object { name="Musikar",age=21,gender="female" }
console.log(hacker.defaults);//Object { name="PG",age=21,gender="female" }
*/

/*Backbone.Model.toJSON
var hacker = new Backbone.Model({
	name:'Musikar',
	age:100
});

console.log(hacker.toJSON());//Object { name="Musikar",age=100 }
*/

/* savemodel.save([attributes], [options])  */
/*
Backbone.sync = function(method,model,options){
	console.log(model.isNew());
	console.log(method + ' : ' +JSON.stringify(model));
	model.id = 1;
};

var Hacker = Backbone.Model.extend({
	validate:function(attrs){
		console.log('validate:',attrs);
		//return '验证失败';
	}
});

var hacker = new Hacker({
	name:'PG',
	age:21
});

hacker.on('change',function(){
	console.log('change:',arguments);
});

hacker.on('sync',function(){
	console.log('sync:',arguments);
});

hacker.save();
console.clear();
//true 
//create : {"name":"PG","age":21}
hacker.save();
//console.clear();
//false
//update : {"name":"PG","age":21}
hacker.save({name:'Musikar'},{
	success:function(){
		console.log('success:',arguments);
	},
	error:function(){
		console.log('error:',arguments);
	}
});
//Object { name="Musikar",age=21 }
//changes
//Object { name=true }
//false
//update : {"name":"PG","age":21}
*/

/*destroy   model.destroy([options]) */
/*
Backbone.sync = function(method,model){
	console.log(method + ' : ' +JSON.stringify(model));
};

var Hacker = Backbone.Model.extend({
	validate:function(attrs){
		console.log('validate:',attrs);
		//return '验证失败';
	}
});

var hacker = new Hacker({
	name:'PG',
	age:21
});

hacker.on('destroy',function(){
	console.log('destroy:',arguments);
});

hacker.on('sync',function(){
	console.log('sync',arguments);
});

hacker.destroy({
	wait:true,
	success:function(){
		console.log('success:',arguments);
	},
	error:function(){
		console.log('error:',arguments);
	}
});
*/

/* validate  model.validate(attributes) */
/*
var Hacker = Backbone.Model.extend({
	validate:function(attrs){
		if(attrs.name.length < 4){
			return 'name不能少于4个字符';
		}

		if(attrs.age > 30){
			return 'age不能大于30';
		}
	}
});

var hacker = new Hacker({
	name:'hacker',
	age:21
});

hacker.on('error',function(){
	console.log('on-error:',arguments);
});

hacker.set({
	name:'PG'
},{
	error:function(){
		console.log('set-error:',arguments);
	}
});
*/


/* isValid   model.isValid() */
/*
var Hacker = Backbone.Model.extend({
	validate:function(attrs){
		if(attrs.name.length < 4){
			return 'name不能少于4个字符';
		}

		if(attrs.age > 30){
			return 'age不能大于30';
		}
	}
});

var hacker = new Hacker({
	name:'hacker',
	age:21
});

hacker.set({
	name:'PG',
	age:100
},{
	silent:true	
});

console.log(hacker.attributes);
console.log(hacker.isValid());//false
*/

/* url   model.url() */
/*
var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php/'
});

var hacker = new Hacker({
	id:1,
	name:'PG',
	age:21
});

console.log(hacker.url());//ajax.php/1
hacker.save();
hacker.fetch();
*/

/* urlRoot  model.urlRoot or model.urlRoot() */
/*
var Hacker = Backbone.Model.extend({
	//urlRoot:'/hacker'
	urlRoot:function(){
		return '/hacker';
	}
});

var hacker = new Hacker({id:1});
console.log(hacker.url());// /hacker/1
*/

/* parse  model.parse(response) */
/*
var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php',
	parse:function(data,xhr){
		return data;
	}
});

var hacker = new Hacker({
	id:1,
	name:'PG',
	age:21
});

hacker.fetch({
	success:function(){
		console.log(hacker.attributes);//Object { id=1,name="Musikar",age=22 }
	}
});

/*ajax.php内容*/
/*

<?php

	$id = trim($_SERVER['PATH_INFO'],'/');

	$arr = array(
		1=>array(
			'name'=>'Musikar',
			'age'=>22
		),
		2=>array(
			'name'=>'PG',
			'age'=>21
		)
	);


	echo json_encode($arr[$id]);

*/

/* clone  model.clone() */
/*
var Hacker = Backbone.Model.extend({
	
});

var hacker = new Hacker({
	id:1,
	name:'PG',
	age:21,
	contacts:{
		qq:'389443626',
		email:'admin@w3hacker.com',
		tel:'18686128512'
	}
});

hacker.attributes.contacts.email = '389443626@qq.com';

console.log(hacker.clone().attributes.contacts.email);//389443626@qq.com
*/

/* isNew  model.isNew() */
/*
var hacker =  new Backbone.Model({
	name:'PG',
	age:21
});

console.log(hacker.isNew());//true
hacker.id = 1;
console.log(hacker.isNew());//false
*/

/* change  model.change() */
/*
var hacker =  new Backbone.Model({
	name:'PG',
	age:21
});

hacker.on('change',function(){
	console.log('change:',arguments);
});

hacker.on('change:name',function(){
	console.log('change:name',arguments);
});

hacker.on('change:age',function(){
	console.log('change:age',arguments);
});


hacker.set({
	name:'Musikar',
	age:22
},{
	silent:true	
});

hacker.change();
*/

/* hasChanged  model.hasChanged([attribute]) */
/*
var hacker =  new Backbone.Model({
	name:'PG',
	age:21
});

hacker.on('change',function(){
	console.log(hacker.hasChanged('name'));//true
	console.log(hacker.hasChanged('age'));//true
});

hacker.set({
	name:'Musikar',
	age:22
});
*/


/* changedAttributes  model.changedAttributes([attributes]) */
/*
var hacker =  new Backbone.Model({
	name:'PG',
	age:21
});

hacker.on('change',function(){
	console.log(hacker.changedAttributes());//Object { name="Musikar" }
});

hacker.set({
	name:'Musikar',
	age:21
});

*/

/* previous  model.previous(attribute) */
/*
var hacker =  new Backbone.Model({
	name:'PG',
	age:21
});

hacker.on('change',function(){
	console.log(this.previous('name'));//PG
});

hacker.set({
	name:'Musikar',
	age:21
});
*/


/* previousAttributes  model.previousAttributes() */
/*
var Hacker = Backbone.Model.extend({
	validate:function(attrs){
		console.log('validate:',attrs);
		return 'validate fails';
	}
});

var hacker = new Hacker({
	name:'PG',
	age:21
});

hacker.on('change',function(){
	console.log(this.previousAttributes());//Object { name="PG",age=21 }
});

hacker.set({
	name:'Musikar',
	age:22
},{
	error:function(){
		console.log(hacker.attributes);
	}	
});

*/

//=================================Backbone.Collection========================================


/* extend  Backbone.Collection.extend(properties, [classProperties]) */
/*
var Hackers = Backbone.Collection.extend({
	property:'value'
},{
	classProperty:'value'
});

var hackers = new Hackers();
console.log(hackers.property);//value
console.log(Hackers.classProperty);//value
*/

/* model  collection.model */
/*
var Hacker = Backbone.Model.extend({
	
});

var hacker = new Hacker({
	name:'PG',
	age:21
});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers();
hackers.add(hacker);
hackers.add({name:'Musikar',age:22});
console.log(hackers.models.length);//2
console.log(hackers.models[0].attributes);//Object { name="PG",age=21 }
*/

/* constructor / initializenew Collection([models], [options]) */
/*
var Hacker = Backbone.Model.extend({
	
});

var hacker1 = new Hacker({
	name:'PG',
	age:21
});

var hacker2 = new Hacker({
	name:'Musikar',
	age:22
});

var Hackers = Backbone.Collection.extend({
	initialize:function(){
		console.log('initialize..');
	}
});

var hackers = new Hackers([hacker1,hacker2]);
console.log(hackers.models[1].attributes);//Object { name="Musikar",age=22 }

var hackers = new Hackers([hacker1,hacker2],{
	comparator:function(hacker){
		return hacker.get('age');
	}
});

console.log(hackers.toJSON());
*/

/* toJSON  collection.toJSON() */
/*
var collection = new Backbone.Collection([
	{name: "PG", age: 21},
	{name: "Musikar", age: 22}
]);

console.log(collection.models);
console.log(JSON.stringify(collection));
console.log(collection.toJSON());
*/

/* sync  collection.sync(method, collection, [options]) */



/* add  collection.add(models, [options]) */
/*
var hackers = new Backbone.Collection({
	
});

hackers.on('add',function(model,collection,options){
	console.log(options.index);
});

hackers.add([{name:'PG'},{name:'Musikar'}],{
	//silent:true
});

hackers.add({name:'黑客'},{at:0});
console.log(hackers.toJSON());
*/

/* remove  collection.remove(models, [options]) */
/*
var Hacker = Backbone.Model.extend({});

var hacker1 = new Hacker({
	name:'Musikar',
	age:22
});

var hacker2 = new Hacker({
	name:'Musikar',
	age:22
});

var hackers = new Backbone.Collection({
	model:Hacker
});

hackers.on('remove',function(model,collection,options){
	console.log(hackers.models.length);//2??
});

hackers.add([hacker1,hacker2]);
hackers.remove(hacker1);
*/

/* get  collection.get(id) */
/*
var Hacker = Backbone.Model.extend({});

var hacker1 = new Hacker({
	id:1,
	name:'Musikar',
	age:22
});

var hacker2 = new Hacker({
	id:2,
	name:'Musikar',
	age:22
});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers();

hackers.add([hacker1,hacker2]);

console.log(hackers.get(1).get('name'));//Musikar
console.log(hackers.get(hacker1).get('name'));//Musikar
*/


/* getByCid  collection.getByCid(cid) */
/*
var Hacker = Backbone.Model.extend({});

var hacker1 = new Hacker({
	id:1,
	name:'Musikar',
	age:22
});

var hacker2 = new Hacker({
	id:2,
	name:'Musikar',
	age:22
});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers();

hackers.add([hacker1,hacker2]);

console.log(hackers.getByCid('c0').attributes);//Object { id=1, name="Musikar", age=22 }
console.log(hackers.getByCid(hacker1).attributes);//Object { id=1, name="Musikar", age=22 }
*/

/* at  collection.at(index) */
/*
var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers([{
	id:1,
	name:'PG',
	age:21
},{
	id:2,
	name:'Musikar',
	age:22
}]);

console.log(hackers.at(0).attributes);//Object { id=1, name="PG", age=21 }
console.log(hackers.at(100));//undefined
*/


/* push  collection.push(model, [options]) */
/*
var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers([{
	id:1,
	name:'PG',
	age:21
},{
	id:2,
	name:'Musikar',
	age:22
}]);

hackers.push({
	id:3,
	name:'黑客',
	age:110
});

console.log(hackers.at(hackers.models.length-1).attributes);//Object { id=3, name="黑客", age=110 }
*/


/* pop  collection.pop([options]) */
/*
var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers([{
	id:1,
	name:'PG',
	age:21
},{
	id:2,
	name:'Musikar',
	age:22
}]);

hackers.pop();
console.log(hackers.at(hackers.models.length-1).attributes);//Object { id=1, name="PG", age=21 }
*/


/* unshift  collection.unshift(model, [options]) */
/*
var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers([{
	id:1,
	name:'PG',
	age:21
},{
	id:2,
	name:'Musikar',
	age:22
}]);

hackers.unshift({
	id:0,
	name:'黑客',
	age:119
});

console.log(hackers.at(0).attributes);//Object { id=0, name="黑客", age=119 }
*/


/* shift  collection.shift([options]) */
/*
var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers([{
	id:1,
	name:'PG',
	age:21
},{
	id:2,
	name:'Musikar',
	age:22
}]);

hackers.shift();

console.log(hackers.at(0).attributes);//Object { id=2, name="Musikar", age=22 }
*/


/* length  collection.length */
/*
var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers([{
	id:1,
	name:'PG',
	age:21
},{
	id:2,
	name:'Musikar',
	age:22
}]);

console.log(hackers.length);//2
*/


/* comparator  collection.comparator */
/*代码1
var Hacker = Backbone.Model;

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	comparator:function(hacker){
		return hacker.get('age');
	}
});

var hackers = new Hackers();
hackers.add({name:'PG',age:20});
hackers.add({name:'Musikar',age:18});
hackers.add({name:'Hacker',age:21});

console.log(hackers.pluck('age'));//[18,20,21]
*/

/*代码2
var Hacker = Backbone.Model;

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	comparator:function(hacker){
		return hacker.get('name').length;
	}
});

var hackers = new Hackers();
hackers.add({name:'PG',age:20});
hackers.add({name:'Musikar',age:18});
hackers.add({name:'Hacker',age:21});

console.log(hackers.pluck('name'));//["PG","Hacker","Musikar"]
*/

/*代码3
var Hacker = Backbone.Model;

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	comparator:function(hacker){
		return hacker.get('name').length;
	}
});

var hackers = new Hackers();
hackers.add({name:'PG',age:20});
hackers.add({name:'Musikar',age:18});
hackers.add({name:'Hacker',age:21});

console.log(hackers.pluck('name'));

hackers.at(0).set('name','Penelope Garcia');//["PG", "Hacker", "Musikar"]
console.log(hackers.pluck('name'));//["Penelope Garcia", "Hacker", "Musikar"]

hackers.sort();
console.log(hackers.pluck('name'));//["Hacker", "Musikar", "Penelope Garcia"]
*/

/*代码4
var Hacker = Backbone.Model;

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	comparator:function(hacker1,hacker2){
		if(hacker1.get('name').length > hacker2.get('name').length){
			return 1;
		}else if(hacker1.get('name').length < hacker2.get('name').length){
			return -1;
		}else{
			return 0;
		}
	}
});

var hackers = new Hackers();
hackers.add({name:'PG',age:20});
hackers.add({name:'Musikar',age:18});
hackers.add({name:'Hacker',age:21});

console.log(hackers.pluck('name'));//["PG","Hacker","Musikar"]

*/

/* sort  collection.sort([options]) */
/*
var Hacker = Backbone.Model;

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	comparator:function(hacker){
		return hacker.get('name').length;
	}
});

var hackers = new Hackers();
hackers.add({name:'PG',age:20});
hackers.add({name:'Musikar',age:18});
hackers.add({name:'Hacker',age:21});

console.log(hackers.pluck('name'));

hackers.at(0).set('name','Penelope Garcia');//["PG", "Hacker", "Musikar"]
console.log(hackers.pluck('name'));//["Penelope Garcia", "Hacker", "Musikar"]

hackers.on('reset',function(){
	console.log('reset...');
});

hackers.sort();
console.log(hackers.pluck('name'));//["Hacker", "Musikar", "Penelope Garcia"]
*/

/* pluck  collection.pluck(attribute) */
/*
var hackers = new Backbone.Collection([
	{name:'PG'},
	{name:'Hacker'},
	{name:'Musikar'}
]);

console.log(hackers.pluck('name'));//["PG", "Hacker", "Musikar"]
*/


/* where  collection.where(attributes) */
/*
var hackers = new Backbone.Collection([
	{name:'张三',age:21},
	{name:'李四',age:20},
	{name:'王五',age:22},
	{name:'赵六',age:20},
	{name:'马七',age:20}
]);

console.log(hackers.where({age:20}).length);//3
*/


/* url  collection.url or collection.url() */
/*
var Hacker = Backbone.Model.extend({
	//url:'test.php/'
});

var hacker = new Hacker({
	id:2,
	name:'Musikar',
	age:22
});

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	url:'ajax.php/'
});

var hackers = new Hackers(hacker);
hacker.fetch();//http://www.demo.com/ajax.php/2
*/


/* parse  collection.parse(response) */

/*
var Hacker = Backbone.Model.extend({
	
});

var hacker1 = new Hacker({
	id:0,
	name:'',
	age:0
});

var hacker2 = new Hacker({
	id:0,
	name:'',
	age:0
});

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	url:'ajax.php/',//[{"id":1,"name":"Musikar","age":22},{"id":2,"name":"PG","age":21}]
	parse:function(response){
		console.log(response);
	}
});

var hackers = new Hackers();
hackers.fetch({
	success:function(){
		//console.log(arguments);
		//console.log(hackers.toJSON());
	}
});
*/


/* fetch  collection.fetch([options]) */
/* reset  collection.reset(models, [options]) */
/*
var Hackers = Backbone.Collection.extend({
	url:'ajax.php'//[{"id":1,"name":"Musikar","age":22},{"id":2,"name":"PG","age":21}]
});

var hackers = new Hackers({
	id:0,
	name:'Hacker',
	age:20
});

hackers.on('reset',function(){
	//console.log('reset',arguments);
});

var xhr = hackers.fetch({
	data:{page:3},
	add:true,
	success:function(){
		//hackers.reset();
		console.log(hackers.toJSON());//[Object { id=1, name="Musikar", age=22}, Object { id=2, name="PG", age=21}]
	}
});

//console.log(xhr);
*/


/* create  collection.create(attributes, [options]) */

//====================================Backbone.Router==========================================




//====================================Backbone.sync==========================================

//console.log(Backbone.ajax);//undefined
//console.log(Backbone.sync);


/* emulateHTTP  Backbone.emulateHTTP = true */
/*
Backbone.emulateHTTP = true;

var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php'
});

var hacker = new Hacker({
	id:1,
	name:'Musikar'
});

hacker.save();//X-HTTP-Method-Override	PUT
*/

/* emulateJSON  Backbone.emulateJSON = true*/
/*
Backbone.emulateJSON = true;

var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php'
});

var hacker = new Hacker({
	id:1,
	name:'Musikar'
});

hacker.save();//model {"id":1,"name":"Musikar"}
*/


//====================================Backbone.View==========================================

//console.log(_.functions(new Backbone.View));//["$", "_configure", "_ensureElement", "bind", "delegateEvents", "initialize", "make", "off", "on", "remove", "render", "setElement", "trigger", "unbind", "undelegateEvents"]

/*
console.log(new Backbone.View({
	el:'body'
}));

console.log(new Backbone.View({
	tagName:'li'
}));

console.log(new Backbone.View({
	className:'demo'
}));

console.log(new Backbone.View({
	id:'demo'
}));

console.log(new Backbone.View({
	attributes:{
		style:'color:red;'
	}
}).$el.constructor === jQuery);//true


new Backbone.View({
	id:'demo',
	className:'demo',
	tagName:'span',
	attributes:{
		style:'color:red;',
		href:'http://www.w3hacker.com/'
	}
}).$el.text('demo').appendTo('body');
*/

/* make  view.make(tagName, [attributes], [content]) */
/*
var view = new Backbone.View();
var el = view.make('b',{'class':'demo'},'Bold!');
console.log(el.constructor);//HTMLElement {}
$('#demo').append(el);
*/

//=================================Utility================================

/* Backbone.noConflict */
/*
console.log(Backbone.noConflict());
console.log(Backbone);//undefined
*/

/* Backbone.$ */
/*
Backbone.$ = function(id){return document.getElementById(id);}

console.log(Backbone.$.toString());
/*
function (id) {
    return document.getElementById(id);
}
*/


/*Hello World
var Hacker = Backbone.Model.extend({
	name:'undefined'
});

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	initialize:function(models,options){
		this.bind('add',options.view.addHacker);
	}
});

var HackerList = Backbone.View.extend({
	el:$(document),
	initialize:function(){
		this.hackers = new Hackers(null,{view:this});
	},
	events:{
		'keyup':'add'
	},
	add:function(evt){
		//delete
		if(evt.keyCode==8){
			$('#hackers li:last').remove();
			return;	
		}
		var hacker = new Hacker({name:String.fromCharCode(evt.keyCode)});
		this.hackers.add(hacker);
	},
	addHacker:function(model){
		$('#hackers').append('<li>'+model.get('name')+'</li>');
	}
});

new HackerList();

/*HTML代码

<div id="hack">Add One Hacker</div>
<ul id="hackers"></ul>

*/

/* initialize、defaults、set
var Hacker = Backbone.Model.extend({
	initialize:function(){
		console.log('initialize...');
	},
	defaults:{
		name:'Hacker',
		qq:'389443626'
	}
});

var hacker = new Hacker();
hacker.set({
	name:'Musikar'
});
console.log(hacker.toJSON());//Object { name="Musikar", qq="389443626" }
*/

/* Backbone.Model里的方法
var Hacker = Backbone.Model.extend({
	defaults:{
		name:'Hacker'
	},
	hack:function(website){
		console.log(this.get('name')+' is hacking '+website);
	}
});

var hacker =  new Hacker();
hacker.hack('www.w3hacker.com');//Hacker is hacking www.w3hacker.com
*/

/*监听属性的改变
var Hacker = Backbone.Model.extend({
	initialize:function(){
		this.bind('change:name',function(){
			console.log(arguments);
		});	
	},
	defaults:{
		name:'Hacker'
	}
});

var hacker = new Hacker();
hacker.set({
	name:'Musikar'
});
*/


/*属性验证
var Hacker = Backbone.Model.extend({
	initialize:function(){
		this.bind('error',function(model,errorMsg){
			document.title = errorMsg;
		});
	},
	validate:function(attrs){
		if(attrs.name==''){
			return 'name不能为空';
		}else{
			document.title = 'name设置正确';
		}
	}
});

var hacker = new Hacker();
hacker.set({
	name:'Musikar'
});
*/

/*对象的获取和保存*/
/*
var Hacker = Backbone.Model.extend({
	url:'ajax.php/'
});

var hacker = new Hacker({
	name:'Musikar',
	qq:'389443626'
});

hacker.save();//POST {"name":"Musikar","qq":"389443626"}
*/

/*
var hacker = new Hacker({
	id:1,
	name:'Musikar',
	qq:'389443626'
});

hacker.save();//PUT {"id":1,"name":"Musikar","qq":"389443626"}
*/

/*
var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php'
});

var hacker = new Hacker({
	id:2,
	name:'PG',
	age:21,
	gender:1
});

hacker.save();
*/

/* fetch
var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php'
});

var hacker = new Hacker({
	id:2,
	name:'',
	age:'',
	gender:''
});

hacker.fetch({
	success:function(model,json){
		console.log(hacker.toJSON());//Object { id="2", name="PG", age="21", gender="1" }
	}
});

*/

/*
var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php'
});

var hacker = new Hacker({
	id:2,
	name:'',
	age:'',
	gender:''
});

hacker.fetch({
	url:'test.php'
});
*/

//===============================Backbone.Collection=====================================
/*
var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php',
	defaults:{
		
	}
});

var Hackers = Backbone.Collection.extend({
	url:'ajax.php',
	model:Hacker
});

var h1 = new Hacker({title:'Musikar'});
var h2 = new Hacker({title:'PG'});
var h3 = new Hacker({title:'黑客'});

var hackers = new Hackers();
//添加
hackers.add([h1,h2,h3]);
console.log(hackers.toJSON());//[Object { title="Musikar"}, Object { title="PG"}, Object { title="黑客"}]
//删除
hackers.remove(h1);
console.log(hackers.toJSON());//[Object { title="PG"}, Object { title="黑客"}]
//遍历
hackers.each(function(model){
	console.log(model.toJSON());
});

hackers.bind('reset',function(){
	hackers.each(function(hacker){
		$('#hackers').append('<li>'+hacker.get('name')+'</li>');
	});
});

hackers.fetch();
*/

//================================Backbone.Router========================================
/* Hello World
var Router = Backbone.Router.extend({
	routes:{
		'*actions':'defaultRoute'
	},
	defaultRoute:function(){
		console.log(arguments);
	}
});

var router = new Router();
Backbone.history.start();
*/

//传递参数
/*
var Router = Backbone.Router.extend({
	routes:{
		"get/:id":"defaultRoute"
	},
	defaultRoute:function(){
		console.log(arguments);//["1"]
	}
});

var router = new Router();
Backbone.history.start();
*/

/*
var Router = Backbone.Router.extend({
	routes:{
		":id/:name":"defaultRoute"
	},
	defaultRoute:function(){
		console.log(arguments);//["1", "Musikar"]
		//http://www.demo.com/#1/Musikar
	}
});

var router = new Router();
Backbone.history.start();
*/

//================================Backbone.View=====================================
/* What's this?? underscore 
console.log(_.template($('#template').text())({label:'Hello World'}));

<script type="text/template" id="template">
	<label for=""><%=label%></label>
	<input type="text" name="input" id="input" />	
	<input type="button" value="Search" id="search" />
</script>
*/

/* 创建一个view
var View = Backbone.View.extend({
	initialize:function(){
		console.log(arguments);
	}
});

var view = new View();
console.log(_.functions(view));//["$", "_configure", "_ensureElement", "bind", "constructor", "delegateEvents", "initialize", "make", "off", "on", "remove", "render", "setElement", "trigger", "unbind", "undelegateEvents"]
*/

/*
var View = Backbone.View.extend({
	el:$('#search'),
	initialize:function(){
		this.render({
			label:'标签：'
		});
	},
	render:function(obj){
		var t = _.template($('#template').text(),obj);
		$(this.el).html(t);
	},
	events:{
		'click #search':'search'
	},
	search:function(){
		alert($('#input').val());
	}
});

var view = new View();
*/

额… 楼主你的笔记一般人很难看懂啊… 条理性有点…那啥

果然是笔记，不过这里是论坛啊。

看来值得动用 admin 账户… 不过那个账户在哪?

天书啊,你该总结点精华出来的.

当然可以！以下是关于“Node.js与Backbone学习笔记分享”的内容。我会尽量提供一些示例代码并进行简要说明。

Node.js与Backbone学习笔记分享

1. 前言

本文将分享一些使用Node.js和Backbone进行Web开发的学习笔记。Node.js用于后端处理，而Backbone则用于前端框架，两者结合起来可以构建强大的单页应用（SPA）。

2. 环境搭建

首先，确保安装了Node.js和npm（Node包管理器）。你可以通过以下命令检查是否已安装：

node -v
npm -v

接下来，安装必要的依赖库：

npm install express backbone underscore

3. 示例代码

3.1. Node.js后端代码

创建一个简单的Express服务器：

// server.js
const express = require('express');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.get('/api/data', (req, res) => {
    res.json({ message: 'Hello from the server!' });
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

这段代码启动了一个简单的Express服务器，并提供了一个静态文件服务和一个API接口 /api/data，返回一个JSON对象。

3.2. Backbone前端代码

在前端，我们可以使用Backbone来创建一个简单的模型和视图：

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Backbone Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
</head>
<body>
    <div id="app"></div>

    <script>
        // public/js/app.js
        const AppModel = Backbone.Model.extend({
            urlRoot: '/api/data'
        });

        const AppView = Backbone.View.extend({
            el: '#app',
            initialize() {
                this.model = new AppModel();
                this.model.fetch().then(() => {
                    this.render();
                });
            },
            render() {
                this.$el.text(JSON.stringify(this.model.attributes));
            }
        });

        $(document).ready(() => {
            new AppView();
        });
    </script>
</body>
</html>

在这个示例中，我们创建了一个Backbone模型 AppModel 并指定了其URL为 /api/data。然后我们创建了一个视图 AppView，该视图会从服务器获取数据并显示在页面上。

4. 运行项目

启动Node.js服务器：

node server.js

然后打开浏览器访问 http://localhost:3000，你应该能看到从服务器返回的数据。

结论

以上是使用Node.js和Backbone的一些基本示例代码。希望这些笔记对你有所帮助！

希望这个示例对你有帮助！如果你有任何具体问题或需要进一步的解释，请告诉我。

回到顶部