用骨干裂开

Sara Vieira. 经过 Sara Vieira.  |  7月25日,2013年

多年来,开发人员一直在利用CakePHP,码级ITER等PHP框架,甚至基于MVC模式。但如果你想到它,那就避了然无常’曾经有很多JavaScript框架以同样的方式帮助我们。

也许它’因为javascript经常被视为下面‘real’程序员,但JavaScript框架一直落后一点。 骨干 改变了那个,和你一样’请参阅此介绍,它使用MVC模式分隔JavaScript代码并帮助我们创建结构化应用程序。实际上,它将MVC模式传递到前端开发。

 

什么是骨干?

骨干网是一个与同一创作者的轻量级JavaScript库 CoffeeScript。 But don’让它让它成为事实’S库让你把它与jquery混淆,骨干是在功能方面的jquery的联赛。骨干不’t处理DOM元素,这就是为什么许多开发人员用jQuery携手使用的原因;骨干组织结构和jQuery操纵DOM。

Backone确实很好地是您的JavaScript应用程序的供应结构,因为它适用于json它’简单地插入几乎任何前端模板系统。

 

骨干中的MVC模式

MVC代表模型,观点和集合;在骨干中,还有路由器。

楷模

在骨干网上代表和实体,例如,如果我们正在处理用户,每个用户将是模型;它’s在数据库中的一行。

使用备份创建一个简单的模型’d type:

var user = Backbone.Model.extend({});

该代码在技术上是正确的,但该模型不会’T有任何功能,因此我们需要为此模型添加一些东西,以便在实例化并执行此操作时进行操作’D使用稍微复杂的代码:

User = Backbone.Model.extend({
    initialize: function(){
        alert('Welcome to WebdesignerDepot');
    },
    defaults: {
        name: 'John Doe',
        age:30,
    }
});
var user = new User;

在上面的代码中,每次创建此模型的新实例时都会触发初始化功能,在初始化所有我们之后’完成后,添加了一些默认值,以防模型没有数据。完成了,要创建模型的实例’d use code like:

var dave = new User({name:'Dave Smith', age:25});

检索某个实例的属性,我们’d use:

var name = dave.get('name');

并改变一个属性我们’d use:

dave.set({age:31});

这是模特如何在骨干上工作的基础知识’更多的是他们可以实现更多,但希望您可以看到已经构建代码的可能性。

收藏品

还记得我说模特就像一个用户吗?好吧,在那个比喻中,一个集合是我们拥有的所有用户。集合是精华模型,因为我们已经拥有了我们的用户模型,我们’LL从那里建立一个集合:

var Users = Backbone.Collection.extend({
    model: User
});

目前这个系列是空的,但它’s易于创建一些用户并将它们添加到集合中:

var barney = new User({ name: 'Barney Stinson', age: 30});
var ted = new User({ name: 'Ted Mosby', age:32});
var lily = new User({ name: 'Lily Aldrin', age: 29});

var himym = new Users([barney, ted, lily]);

现在,如果我们控制着Himym.models我们’LL从巴尼,泰德和百合获得价值观。

意见

视图与DOM的一部分相关联,它们被设计为与基本上是应用程序数据的模型相关联,并且它们用于将该数据呈现给最终用户。

创建视图很简单:

UserView = Backbone.View.extend({
    tagName: 'div',
    className: 'user',
    render: function(){}
});

这是视图的基本结构。标记名是将用于包装视图的元素,该类是使用className设置的,最后我们添加渲染函数,虽然在最后一个情况下函数是空的。它’我们使用要添加到舞台的渲染功能,如下所示:

UserView = Backbone.View.extend({
    tagName: 'div',
    className: 'user',
    render: function(){
        this.el.innerHTML = this.model.get('age');
    }
});

渲染功能中的EL元素是指我们创建并使用我们放置用户的innerhtml函数的包装器’在div内的年龄。

这个例子是hasn.’使用任何模板系统,但如果您愿意您可以利用带骨干的underscore.js。

我们还可以通过将事件侦听器附加到我们的视图和此示例中来倾听事件’LL为我们的div创建一个简单的单击侦听器(此代码在我们的渲染功能之后立即):

events:{
    'click.user': 'divClicked'
},
divClicked: function(event){
    alert('You clicked the div');
}

路由器

备份路由器用于在使用HASHTAG(#)时在应用程序中路由URL。要定义路由器,您应该始终添加至少一个路由,至少在达到所需的URL时运行的函数,如下所示:

var appRouter = Backbone.Router.extend({
    routes:{
        'user': 'userRoute'
    },
    userRoute: function() {
        // the code to run when http://example.com/#user
    }
});
Backbone.history.start();

这是一个非常简单的路由器,它将在达到/#用户哈希时执行动作。 backbone.history.start()方法调用询问备份以监视HashTags,以便网站的各个状态都是书签的,可以使用浏览器导航。

 

结论

本文仅介绍了骨干的基础知识,可用于在JavaScript中构建结构化应用程序。一世’D建议您查看模板系统,以便与骨干一起使用以查看本库的全部潜力。我希望这篇简短的介绍已经向您展示了MVC可以在前端有用。

 

您是否使用骨干构建了应用程序?您想建立哪些应用程序?让我们在评论中知道。

特色图片/缩略图, 脚手架的形象 via Shutterstock.