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

Flight学习(一)的更多相关文章

  1. flight学习笔记

    Flight::db()-> getOne("select 1"); 返回结果:1 Flight::db()-> getRow ("select 1, 2 f ...

  2. jQuery 学习笔记(jQuery: The Return Flight)

    第一课. ajax:$.ajax(url[, settings]) 练习代码: $(document).ready(function() { $("#tour").on(" ...

  3. SSH学习笔记

    Struts2登录模块处理流程: 浏览器发送请求http://localhost/appname/login.action,到web应用服务器: 容器接收到该请求,根据web.xml的配置,服务器将请 ...

  4. Android开发学习之路-Volley源码解析

    从简单的StringRequest入手看看Volley的工作机制. 先简单说下Volley的用法: ① 获取一个RequestQueue mRequestQueue = Volley.newReque ...

  5. Laravel 学习笔记 —— 神奇的服务容器 [转]

    容器,字面上理解就是装东西的东西.常见的变量.对象属性等都可以算是容器.一个容器能够装什么,全部取决于你对该容器的定义.当然,有这样一种容器,它存放的不是文本.数值,而是对象.对象的描述(类.接口)或 ...

  6. Android 学习笔记之Volley开源框架解析(二)

    PS:Volley已经学完,可以安心的写一下博客总结一下了... 学习内容: 1.Request的完整封装... 2.RetryPolicy,DefaultRetryPolicy(请求重试策略源码解析 ...

  7. (转) 实时SLAM的未来及与深度学习的比较

          首页 视界智尚 算法技术 每日技术 来打我呀 注册     实时SLAM的未来及与深度学习的比较 The Future of Real-Time SLAM and “Deep Learni ...

  8. Java学习笔记4

    Java学习笔记4 1. JDK.JRE和JVM分别是什么,区别是什么? 答: ①.JDK 是整个Java的核心,包括了Java运行环境.Java工具和Java基础类库. ②.JRE(Java Run ...

  9. 【总结】AngularJs学习总结

    应项目的需要,一个月之前开始做WebComponents.Javascript MVC框架的技术调研,由于重点是想做组件化,所以就没有考虑Backbone(去年就小试牛刀,太难用了)及其他的mvc框架 ...

随机推荐

  1. jquery 基础变量定义

    var $i=$("#D1"); var i=$("#D2"); function(){      //这里获取控件对象值      var d1=$i.val ...

  2. [笔记]RankSVM 和 IR SVM

    之前的博客:http://www.cnblogs.com/bentuwuying/p/6681943.html中简单介绍了Learning to Rank的基本原理,也讲到了Learning to R ...

  3. iOS图片填充UIImageView(contentMode)

    本文主要形象的介绍一下UIView的contentMode属性: 核心代码 [self.prp_imageView setContentMode:UIViewContentModeScaleAspec ...

  4. 开源的C#实现WebSocket协议客户端和服务器websocket-sharp组件解析

    很久没有写博客了(至少自己感觉很长时间没有写了),没办法啊,楼主也是需要生活的人啊,这段一直都在找工作什么的.(整天催我代码的人,还望多多谅解啊,我会坚持写我们的项目的,还是需要相信我的,毕竟这是一个 ...

  5. Java NIO之通道

    一.前言 前面学习了缓冲区的相关知识点,接下来学习通道. 二.通道 2.1 层次结构图 对于通道的类层次结构如下图所示. 其中,Channel是所有类的父类,其定义了通道的基本操作.从 Channel ...

  6. CocoaAsyncSocket + Protobuf 处理粘包和拆包问题

    在上一篇文章<iOS之ProtocolBuffer搭建和示例demo>分享环境的搭建, 我们和服务器进行IM通讯用了github有名的框架CocoaAsynSocket, 然后和服务器之间 ...

  7. (function($){….})(jQuery)一种js插件写法

    我们先看第一个括号里边的内容:function($){….},这不就是一个匿名的函数吗?但是它的形参比较奇怪,是$,这里主要是为了不与其它的库冲突. 这样我们就比较容易理解第一个括号内的内容就是定义了 ...

  8. Java中如何动态创建接口的实现

    有很多应用场景,用到了接口动态实现,下面举几个典型的应用: 1.mybatis / jpa 等orm框架,可以在接口上加注解进行开发,不需要编写实现类,运行时动态产生实现. 2.dubbo等分布式服务 ...

  9. SparkStreaming官方示例程序运行方式

    一.前置条件 安装NetCat(有“瑞士军刀”之称,简称nc),输入如下命令: yum install -y nc 二.方式一:直接运行官方Example 2.1 打开一个shell,输入命令:nc ...

  10. 设置spring-boot的logging

    spring-boot默认使用logback来记录logger,spring-boot的包里面org.springframework.boot.logging.logback路径下面有一些配置文件,默 ...