Backbone.js应用基础

简介: Backbone.js应用基础

前言:

  Backbone.js是一款JavaScript MVC应用框架,强制依赖于一个实用型js库underscore.js,非强制依赖于jquery;其主要组件有模型,视图,集合,路由;与后台的交互主要是通过Restful JSON 进行数据传输;

基础Backbone.js知识:

  1、引入js文件:如果依赖于第三方类库如jquery,则最好先引入;之后引入underscore.js 这是必须引入且在引入backbone.js之前,其引入文档结构如下:



Backbone




  2、新建M.V.C:

    Model对象表示数据模型,用于定义数据结构; View用于数据展示,绑定DOM事件和处理页面逻辑, Collection是管理数据模型的集合,用于查找或保存数据;

defaults:{
    name:'default',
    age:10,
    score:100
},
initialize:function(){
    this.on('change:age',function(){
        var oa = this.previous('age');
        var a = this.get('age');
        //console.log(a+'==='+oa);
    });
},
myFun: function(){
    //自定义事件
    console.log(this.get('score'));
    console.log(this.get('name'));
    console.log(this.get('age'));
}

});

var man = new person();
man.set('age',20);
//man.myFun();
//console.log(man.attributes['score']);
//C 集合
var persons = [{},{}]
var people = new Backbone.Collection(persons,{

model:person

});

//V 视图
var diview = Backbone.View.extend({

el:'#backview',
render:function(content){
    this.el.innerHTML = content;
}

});

var test = new diview();
test.render('终于见到了.....');

mvc
  3、导航控制器(router--路由):


var myrouter = Backbone.Router.extend({
    routes:{
        '':'defaut',
        'list':'list'
        'show/:name','show'
    },
    defaut:function(){
        
    },
    list:function(){
        
    },
    show:function(name){
        
    }
});
var t_router = new myrouter();
Backbone.history.start();


  4、与服务器交互的模型对象:

   调用模型对象的save方法是发送POST新建或PUT修改请求;fetch是调用GET方法;destroy方法是使用delete请求方式向服务器发送对象的id,服务器做删除记录操作;

   模型对象集合提供了fetch和create两个方法与服务器进行交互;create方法与以上save方法类似;

相关文章
|
3月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
801 2
|
2月前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
206 77
|
1天前
|
缓存 NoSQL JavaScript
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
21 11
|
17天前
|
敏捷开发 人工智能 JavaScript
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
58 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
|
2月前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
150 62
|
12天前
|
JavaScript 前端开发
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
35 8
|
2月前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
82 31
|
2月前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
2月前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
2月前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
58 3