Flight学习（一）

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

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

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支持项目中你安装，改写和测试应用所需要的一切东西。







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节点的事件和方法。




相关文章