Flight学习

Posted 2020-09-02 喜欢的事用心去做

翻看git时看到有新消息提示，点进去第一个就是Flight，那么今天就简单来翻译和了解一下这个框架吧，锻炼下自己的英文文档阅读能力，同时也熟悉下javascript。时间太赶，难免出现翻译失误和错误，这里是原文，需要的话可以直接去看英文版。（ https://github.com/flightjs/flight）

1.它是什么：

Flight 是一个轻量级的，基于组件的，事件驱动的JavaScript框架，它将行为关联到dom节点。由Twitter团队开发, 被用于 twitter.com 和TweetDeck。

• 官网：Website
• 说明文档：API documentation
• 例子：Flight example app (Source)
• flight谷歌小组：Flight‘s Google Group
• Flight on Twitter
• Flight on Freenode IRC (#flightjs)

2.简单使用：

/* 组件定义*/

var Inbox = flight.component(inbox);

function inbox() {
  this.doSomething = function() { /* ... */ }
  this.doSomethingElse = function() { /* ... */ }

  // 初始化组价之后的操作
  this.after(‘initialize‘, function() {
    this.on(‘click‘, this.doSomething);
    this.on(‘mouseover‘, this.doSomethingElse);
  });
}

/*将组件绑定到dom节点上*/

Inbox.attachTo(‘#inbox‘);

3.安装：

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Flight release -->
<script src="http://flightjs.github.io/release/latest/flight.min.js"></script>

4.优点：

基于jQuery，体积小，只有5k。

Flight组件是便携的和易测试的，因为每个组件及其借口之间是完全独立的，组件之间的交互仅仅只依靠触发器和事件绑定。

Flight同时也包括一个简单又安全的混合型基础框架，允许组件很方便的在小的基础框架上扩展。

5.相关的开发工具：

Flight支持项目中你安装，改写和测试应用所需要的一切东西。

• Flight generator .只需 一步便可实现一个基于Flight的web应用程序。

• Flight package generator .只需 一步便可生成你需要用来书写和测试一个独立的Flight组件的所有内容。 

• Jasmine Flight支持the Jasmine test framework的扩展.

• Mocha Flight 支持Mocha test framework的扩展.

6.寻找和书写组件：

你可以现在单击Flight components 来寻找所有可用组件.同时也可以通过Bower引用:

bower search flight

最简单的书写一个components组件的方式是通过Flight package generator:

yo flight-package foo

7.浏览器支持：

Chrome, Firefox, Safari, Opera, IE 7+ (requires ES5-shim).

8.插件概览 ：

这是一个关于Flight的主要概念和语法的简要说明。你可以通过阅读 API documentation 来了解详细情况。

组件(API)

• 一个组件就相当于一个属性集和原型组合起来的构造器。
• 每一个组件都有一系列的基础函数，比如事件处理和组件注册等等。 (see Base API)
• 除此之外，每个组件的定义都包含了一系列描述组件行为的特定的属性集。
• 当一个组件关联到一个dom节点上时，一个关于那个组件的新的实例就会被创建，每个实例都通过节点属性指向特定的dom节点。
• 组件实例不能被直接饮用，它可以通过事件和其他的组件进行交互。

和DOM节点的交互

一旦被绑定，组件实例就会直接和它的节点对象相关联。(也有jQuery版本的可用节点，$node)

Flight里面的事件

 Flight组件通过事件来实现交互。组件的原型提供方法来触发事件，同时将事件从组件上 绑定和解绑。这些组件事件的方法实际只是一组便捷的包装了的普通dom节点的事件和方法。