Webix框架介绍

如今，有许多框架，每个框架都有其独特之处。 我们有AngularJS，Ember和Aurelia.io。 在SitePoint上，我们已经在许多场合介绍了这些框架： 使用Aurelia创建下一代JavaScript应用程序， 使用AngularJS构建Twitter应用程序 ，以及使用Torii将Twitter身份验证添加到Ember.js应用程序中 。

在本文中，我想介绍Webix框架。 为了演示它的工作原理，我将指导您创建一个在线音频播放器模型 。 请记住，这只是一个模型，因此没有播放。 （对不起，也许我会在下一篇文章中介绍。）您可以在此GitHub页面上查看源代码和演示。

Webix简介

Webix是一个JavaScript和HTML5框架，用于开发具有响应用户界面的跨平台数据丰富的Web应用程序。 该库易于学习，快速且轻巧。 与Backbone.js ， Angular.js和jQuery集成可能非常方便。 例如，您可以使用jQuery方法和实用程序函数来创建Webix应用程序。 就个人而言，我最喜欢的功能是它的简单性。

开发项目

现在您已经知道Webix是什么，让我们开始开发我们的项目。

启动引擎

下载库后，创建一个index.html页面。 在其中，您应该包括CSS和JavaScript文件：

<link rel="stylesheet" href="codebase/webix.css" /> 
<script src="codebase/webix.js"></script>

或者，您可以使用Webix CDN包括它们：

<link rel="stylesheet" href="//cdn.webix.com/edge/webix.css" />
<script src="//cdn.webix.com/edge/webix.js"></script>

我的建议是包括完整的库。 “为什么？” 你可能会问。 原因之一是皮肤收集。 在本文后面的内容中，我将介绍这个主题以及如何使用皮肤。

但是现在，让我们开始初始化。 您应该将所有代码放入webix.ui()构造函数中。 如果要确保在页面完全加载后将执行应用程序，请使用webix.ready(function() { ... } 。因此，您的代码应类似于：

webix.ready(function(){