jide.js简介

最新推荐文章于 2024-08-31 08:19:23 发布

dingshi7798

最新推荐文章于 2024-08-31 08:19:23 发布

阅读量254

点赞数

文章标签： ui javascript ViewUI

jide.js是用于创建现代Web应用程序的新工具包。它由一组有用的控件和创建自己的特定于应用程序的组件所需的所有工具组成。 jide.js完全采用AMD（require.js），可让您仅选择真正需要的部分。从1.0.0-beta3版本开始，您还可以在Browserify中使用它。

jide.js的核心是基于可观察的值，事件发射器和数据绑定。它利用现代浏览器（IE9 +）的功能来创建扎实的跨平台体验，并利用当前JavaScript语言的功能，而不是坚持过去。

核心概念介绍

在开始创建实际的jide.js应用程序之前，让我解释一些核心概念。

可观察值

可观察对象是使应用程序的各个部分保持同步的好方法。 jide.js允许您订阅此类可观察对象，并在它们的值更改时接收通知。下面是一个示例。

require(['jidejs/base/Observable'], function(Observable) {
  var counter = Observable(0);

  counter.subscribe(function(event) {
    console.log('counter changed', event.value);
  });

  counter.set(1);
  // invokes the subscribed listener and prints to console
});

创建jide.js应用程序时，可以从许多可观察对象中进行选择，例如ObservableProperty ， Observable.computed和ObservableList 。计算的可观测值可以依赖于其他可观测值，并在其依赖项之一发生更改时重新计算。下面显示了创建计算的可观察值的示例。

var counterText = Observable.computed(function() {
  return 'You clicked the button ' + counter.get() + ' times!';
});

如果您要订阅counterText ，则每当counter更改时，您都会收到通知。需要注意的一件事是，默认情况下，以这种方式创建的可计算观察值是惰性的。这意味着除非需要，否则不计算它们的值。传递给订阅者的事件可能不包含值。

实例化控件

jide.js中的所有控件都具有相同的构造函数签名。他们都期望只有一个参数，一个配置对象。继续上一个示例，这是如何创建一个按钮，其标签绑定到我们之前创建的可观察的counterText ，并在每次单击counter时使它递增。

var myButton = new Button({
  // bind the "text" property of the button to the "counterText" observable
  text: counterText,
  // we can add event listeners inline
  on: {
    // we use the "action" event instead of the "click" event
    // to support keyboard invocation, etc.
    action: function() {
      // increment the counter
      counter.set(counter.get() + 1);
    }
  }
});

// add the button to the document – you'd rarely do it this way, but it works
document.body.appendChild(myButton.element);

控件，皮肤和模板

jide.js允许您随意创建应用程序，但是建议的方法是在自定义控件中使用关注点的清晰分隔。这就是我们在示例中所做的。

在jide.js中，每个控件都应包含需要显示的属性。例如，按钮应具有text和icon属性。最重要的是，jide.js中的每个控件都有一个外观，该外观负责构建控件的内部DOM结构（包括事件处理程序）并将数据注入DOM。

如果要充分利用jide.js，可以将DOM创建和DOM与控件及其外观之间的数据绑定留给模板。在这种情况下，您的皮肤只应包含对模板很重要的事件处理程序和自定义属性。在其余的介绍中，我们将使用这种方法。

创建一个jide.js应用程序

开始新的jide.js项目的最简单方法是使用Yeoman生成器。 Yeoman要求您在计算机上安装node.js和npm 。完成此操作后，在终端窗口中运行以下命令：

npm install –g yeoman
npm install –g generator-jidejs
yo jidejs

给您的应用程序一个您喜欢的名称，然后对事件总线说“否”。 Yeoman完成创建项目后，您可以输入grunt serve查看它。这将启动服务器并打开浏览器，以便您可以开始使用应用程序。您的新应用程序支持实时重新加载，这意味着您在编辑源文件时浏览器将自动刷新。

现在，您应该看到一个非常基本的应用程序，其中显示了一个文本字段，您可以在其中输入您的姓名和一个按钮。当您单击按钮时，该应用程序将向您打招呼。

将任务列表添加到应用程序

接下来，在您的项目目录中打开app/page/IndexPage.js文件，并将其更改为：

define([
  'jidejs/base/Class',
  'jidejs/base/ObservableList',
  'jidejs/ui/Control',
  'jidejs/ui/Skin',
  'text!app/view/indexPage.html'
], function(
  Class, ObservableList, Control, Skin,
  IndexPageTemplate
) {
  function IndexPage(config) {
    this.tasks = ObservableList(config.tasks || []);
    delete config.tasks;
    Control.call(this, config);
    this.classList.add('page');
    this.classList.add('index');
  }

  Class(IndexPage).extends(Control);

  IndexPage.Skin = Skin.create(Skin, {
    template: IndexPageTemplate,

    addTask: function() {
      this.queryComponent('x-name').then(function(nameField) {
        this.component.tasks.add({
          name: nameField.text
        });

        nameField.text = '';
      }.bind(this));
    },

    deleteTask: function(task) {
      this.component.tasks.remove(task);
    }
  });

  return IndexPage;
});

您刚刚应用的更改非常简单。您添加了一个新的属性， tasks ，到IndexPage控制。 tasks是从配置参数填充的。这里的ObservableList在于，由于您使用的是ObservableList ，因此当您从列表中添加或删除项目时，UI会自动更新。

现在，我们需要更改app/view/indexPage.html以实际显示我们的任务列表。将文件内容更改为此：

<template>
  <input type="text" pseudo="x-name" bind="
    is: 'jidejs/ui/control/TextField',
    on: {
      action: addTask.bind($item)
    }
  ">
  <button bind="
    is: 'jidejs/ui/control/Button',
    on: {
      click: addTask.bind($item)
    }
  " text="Add"></button>
  <ul bind="
    foreach: component.tasks
  ">
    <template>
      <li>
        <span bind="text: name"></span>
        <a bind="
          is: 'jidejs/ui/control/Hyperlink',
          text: 'Delete',
          on: {
            action: $parent.deleteTask.bind($parent, $item)
          }
        ">Delete</a>
      </li>
    </template>
  </ul>
</template>

通过jide.js中的模板，您可以使用数据绑定将标准HTML元素升级到jide.js控件。要绑定元素，只需向其添加一个bind属性。该属性中的语法是一个文字JavaScript对象（不带大括号）。

通过指定一个is绑定，我们将元素升级到命名控件。它的值必须是作为控件的有效AMD模块的名称。我们可以使用on绑定将事件侦听器添加到HTML元素或jide.js控件。

绑定表达式中有一些特殊变量可用。我们在这里使用的是$item和$parent 。对于外部template元素， $item变量引用IndexPage的外观。在内部template元素中， $parent表示外观，而$item表示当前任务对象。

通过foreach绑定，我们可以迭代项目集合，并为要迭代的每个项目复制其template子节点。如果分配给它的值为ObservableList ，它将根据ObservableList的更改自动添加，删除和修改其子节点。