首页 > 代码库 > Flight学习（一）

Flight学习（一）

2024-09-06 17:29:31   221人阅读

翻看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="http://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节点的事件和方法。


 


















Flight学习（一）






























        

            
                
                  
                
                

                    联系

                    我们