Nodejs环境下有人用backbone.js 开发吗？

最近发现一个轻量级js的mvc框架——backbone.js 官网链接戳我他的特点是：轻量级，支持jquery，自带路由，对象化视图，强大的sync机制减少页面大小从而加快页面显示。但是用过后发现一些不好的地方：它可以template去绑定视图的内容，虽然是方便编辑了，但是却要把切片改成一个个template是一件很蛋疼的事,假如一个sina门户的话就哭了。用hash来做路由，如果是php开发的话，感觉就像是phper在跟着前端做项目的赶脚。

总之个人的感觉是：很牛逼，搭上node话很不错，是一种不错的趋势。但是商业开发的话，就祈祷老板不要变来变去。以上是个人拙见，希望有了解过backbone的童鞋一起来探讨下。

gougou168 1楼

Node.js 环境下使用 Backbone.js 的探讨

引言

最近我发现了一个轻量级的 JavaScript MVC 框架——Backbone.js。这个框架因其轻量、简洁以及强大的功能而受到很多开发者的青睐。特别是在 Node.js 环境下，Backbone.js 可以很好地与后端数据交互，提供了一种优雅的解决方案。

官网链接

Backbone.js 官方网站

特点

轻量级：Backbone.js 的核心文件很小，只有不到 8KB（压缩后）。
支持 jQuery：Backbone.js 无缝集成 jQuery，可以利用 jQuery 提供的各种功能。
自带路由：Backbone.js 内置了路由功能，使得单页应用（SPA）的开发变得简单。
对象化视图：视图可以被封装成对象，便于管理和维护。
强大的 sync 机制：Backbone.js 的 sync 方法可以简化与服务器的数据交互。

使用体验

虽然 Backbone.js 很强大，但在实际开发中也存在一些挑战：

模板绑定：Backbone.js 支持通过模板来绑定视图内容，这虽然方便了视图的动态更新，但需要将 HTML 切片转换为模板，这在大型项目中可能会增加工作量。
路由机制：Backbone.js 使用 hash 来实现路由，这对于纯前端项目来说很方便，但对于需要与后端紧密配合的项目（如 PHP 项目），可能需要额外的处理。

示例代码

以下是一个简单的示例，展示了如何在 Node.js 环境下使用 Backbone.js 开发一个简单的应用：

// server.js
const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Backbone.js with Node.js</title>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/underscore-min.js"></script>
    <script src="/js/backbone-min.js"></script>
</head>
<body>
    <div id="app"></div>

    <script type="text/template" id="app-template">
        <h1><%= message %></h1>
    </script>

    <script>
        const AppView = Backbone.View.extend({
            el: '#app',
            template: _.template($('#app-template').html()),
            initialize: function() {
                this.model = new Backbone.Model({ message: 'Hello, World!' });
                this.render();
            },
            render: function() {
                this.$el.html(this.template(this.model.toJSON()));
                return this;
            }
        });

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

结论

总的来说，Backbone.js 是一个非常优秀的框架，特别适合与 Node.js 配合使用。它能够帮助开发者快速搭建结构化的前端应用。然而，在实际开发过程中，也需要考虑项目的具体需求，权衡利弊。希望各位开发者能够在实践中不断探索和优化，找到最适合自己的解决方案。

nodeper 2楼

如果你做移动端html开发的话，backbone是个不错的选择。另外现在的页面都趋于简单化和模块化，用backbone 还是很不错的，我现在就用backbone+bootstrap作前端UI.

h691938207 3楼

轻量级优点不敢苟同啊。。。我记得之前看过的backbone的介绍，说其实这是个比较重量级的框架。我之前实习的公司的一个产品使用backbone+requirejs做前端。感觉很不错。然后我们架构师说的最多的一句话就是：要养成面向模型编程的思想。。

caililin 4楼

真正业务复杂的项目还是最好不用这种框架性质的。框架再NB都有一套自己的规矩，就像你要做一辆车，但是他只能给你那种规格的轮子。业务复杂性的项目用工具不要用框架，特别是几个框架混用的时候带来的麻烦可真多。

nodeper 5楼

REST 风格的 API, 上手不大习惯… 觉得面向对象还是比较重的, 条条框框很多

h691938207 6楼

主要是数据解耦碎片化

zlyuanteng 7楼

我是在做移动开发，感觉不错。但是觉得backbone也适用与桌面web开发。现在的客户端存储技术越来越多了，localstorage,cookie,Indexed Database.manifest,所以我觉得会有越来越多的逻辑层放到客户端去做，所以js mvc会越来越受欢迎，js的模块化是势在必行的、

phonegap100 8楼

我是指他的代码小压缩后不到7K，既然用mvc就不会只是给一个页面加个交互功能什么的。他已经上升到框架了。但是在框架来说它是轻量级的了，不知道我的观点对不。

bupafengyu 9楼

我感觉像是重量级的。。

htzhanglong 10楼

可以试试angularjs

gougou168 11楼

是的，有业务去决定该采用什么框架，是否是多种框架混搭。同意你的观点

wuwangju 12楼

我也是，记得当初学php的zend framework时花了好大的劲取适应

gougou168 13楼

这是永恒的话题啊。我目前采取的办法是用一个全局对象来做命名空间，去减少耦合性。不知道你自爱解耦上还有什么别的办法。小弟的工作组要是css切片，都是业余时间去学习js。所以很多东西都是知道不全面。我希望你和我谈谈你们在js解耦和碎片化的方法。谢谢

zlyuanteng 14楼

backbone入门成本有点高，如果之后招来的人不是geek犯的话很容易给项目带来风险。

重复代码和其他框架重复的较多。

如果仅仅是想解耦，自己写点自定义事件就完了。。

不要跟风，web app优点教多，但是也不是必选，普通网站还是算了。。

phonegap100 15楼

underscore拿出来用用还不错。如果前端需要大量处理渲染数据的话。

songsunli 16楼

AngularJS看着比Backbone简单。。。

h691938207 17楼

我只能说Backbonejs是GUI Architect的真理，松散，简单，基于事件，扩展模块非常多。其他框架宣称的功能 AngularJS，emberjs也都各有优势，不过双向绑定，自动绑定这种看起来很美好的东西，并不是在所有类型的应用当中都适用。你可以热爱真理，但是必须根据项目选择合适框架

wuwangju 18楼

有道理！谢谢！

yuanlaile 19楼

Backbone最好的是它的每个设计。但是要构建自己的应用，没有必要什么都盲从它。

sinazl 20楼

我的感觉就是oo ui之类的框架，完全破坏了编程的本质: 模块、算法。

songsunli 21楼

Backbone.js 是一款经典的 JavaScript MVC 框架，它与 Node.js 结合使用可以构建出功能强大且易于维护的单页应用（SPA）。虽然现在流行的一些框架如 React 和 Vue 更为现代和高效，但 Backbone.js 在某些场景下依然有其独特的价值。

示例代码

假设我们正在创建一个简单的待办事项列表应用，结合 Express.js（Node.js 的 Web 应用框架）和 Backbone.js。

服务器端（Node.js + Express.js）

首先，我们需要设置一个简单的 Express.js 服务器来处理请求并提供数据。

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

app.use(express.json());

let todos = [
    { id: 1, title: 'Learn Backbone' },
    { id: 2, title: 'Build a Todo App' }
];

app.get('/api/todos', (req, res) => {
    res.json(todos);
});

app.post('/api/todos', (req, res) => {
    const todo = req.body;
    todo.id = todos.length + 1;
    todos.push(todo);
    res.status(201).json(todo);
});

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

客户端（Backbone.js）

接下来，在客户端使用 Backbone.js 来管理模型、视图和路由。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todo App with Backbone.js</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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.4.0/backbone-min.js"></script>
</head>
<body>
<div id="todo-app">
    <input type="text" id="new-todo">
    <button id="add-todo">Add</button>
    <ul id="todos-list"></ul>
</div>

<script>
    const Todo = Backbone.Model.extend({});
    const TodoList = Backbone.Collection.extend({
        model: Todo,
        url: '/api/todos'
    });

    const TodoView = Backbone.View.extend({
        tagName: 'li',
        events: {
            'click .destroy': 'remove'
        },
        template: _.template('<%= title %> <button class="destroy">X</button>'),
        initialize: function() {
            this.render();
        },
        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        },
        remove: function() {
            this.model.destroy();
            this.remove();
        }
    });

    const AppView = Backbone.View.extend({
        el: '#todo-app',
        events: {
            'click #add-todo': 'addOne'
        },
        initialize: function() {
            this.collection = new TodoList();
            this.collection.fetch();
            this.collection.on('add', this.addOne, this);
            this.collection.on('reset', this.addAll, this);
        },
        addOne: function(todo) {
            let view = new TodoView({ model: todo });
            $('#todos-list').append(view.render().el);
        },
        addAll: function() {
            this.$('#todos-list').empty();
            this.collection.each(this.addOne, this);
        }
    });

    $(document).ready(function() {
        const app = new AppView();
        $('#add-todo').click(function() {
            const title = $('#new-todo').val();
            if (title) {
                const todo = new Todo({ title: title });
                app.collection.create(todo);
                $('#new-todo').val('');
            }
        });
    });
</script>
</body>
</html>

总结

这段代码展示了如何在 Node.js 环境中使用 Backbone.js 来创建一个简单的待办事项应用。尽管 BackBone.js 已经有些年头，但它仍然适用于需要简单、轻量级解决方案的项目。当然，对于更复杂的现代应用，你可能需要考虑使用更现代的框架，如 React 或 Vue。