Flight学习(一)

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

时间: 2024-10-14 13:01:04

Flight学习(一)的相关文章

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

第一课. ajax:$.ajax(url[, settings]) 练习代码: $(document).ready(function() { $("#tour").on("click", "button", function() { $.ajax('/photos.html', { success: function(response) { $('.photos').html(response).fadeIn(); } }); }); }); &

C++ Primer 学习笔记_73_面向对象编程 --再谈文本查询示例

面向对象编程 --再谈文本查询示例 引言: 扩展第10.6节的文本查询应用程序,使我们的系统可以支持更复杂的查询. 为了说明问题,将用下面的简单小说来运行查询: Alice Emma has long flowing red hair. Her Daddy says when the wind blows through her hair, it looks almost alive, like a fiery bird in flight. A beautiful fiery bird, he

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

从简单的StringRequest入手看看Volley的工作机制. 先简单说下Volley的用法: ① 获取一个RequestQueue mRequestQueue = Volley.newRequestQueue(this); ② 构造一个StringRequest对象 mStringRequest = new StringRequest(url, new Response.Listener<String>() { @Override public void onResponse(Strin

项目领导力学习总结

周五周六两天的时间,参加钱老师的项目领导力(Project Leadership)的培训,短短两天,收获满满.之前参加过项目管理基础和项目管理实战的培训,在腾讯也带过不少的项目,但是在项目领导力的培训实践中,还是掉进了不少坑里.在钱老师的讲解下,茅塞顿开,非常感谢钱老师的分享.下面就来好好总结一下此次项目领导力的相关内容. 一.何为好的项目 首先认识一下何为好的项目,可以从三个方面的标准来权衡,分别是技术标准.行为标准和商业标准.技术标准就是QBT(质量.预算.时间),也就是在规定时间和预算内,

[2016-1-14]OMG美语每日笔记-?How do you find cheap flight ticket?

坚持学习英语,OMG口语非常长不错,坚持每天整理.学英语坚持最重要,学英语坚持最重要,学英语坚持最重要说三遍! otimal time 最佳时间 I am planing my Spring Festival vacation.What's the otimal time to buy a plane ticket? 我在准备春节旅行.什么时候买票最好? cheap flight tickets 特价机票 There is a rumer that the best time to buy ch

理解Flight框架核心

Flight框架(官网)是一个微型的PHP框架,它简单,快速,可扩展.借助Flight可以快捷而轻松的创建你的RESTFul web应用. 虽然是一个微型的框架,而且代码量确实也较少,但我在阅读Flight代码的过程中,感到了它设计和构思独特而精妙的地方,觉得有学习的价值,便决定做一下整理分享出来. 如果你对框架还不熟悉,可以先去官网看下文档,如果需要中文文档的话可以可以点这里. 如果你已经对Flight有一定了解了,接下来就来看看Flight是怎么工作的吧. <?php class Fligh

Rhythmk 学习 Hibernate 07 - Hibernate annotation 实体注解

参考: http://docs.jboss.org/hibernate/annotations/3.4/reference/zh_cn/html_single/ 1.系统配置: 可以通过使用  mapping的 resource,于class 属性混合配置 <mapping resource="com/rhythmk/model/product.hbm.xml" /> <mapping class="com.rhythmk.model.User"&

ArcGIS API for JavaScript 4.2学习笔记[6] goTo()地图动画

这是个很有意思的例子,不过例子给的比较复杂,需要查很多API,我会在文章最后给出关键的类和属性解释. 同样发现一个很有意思的事儿:博客园似乎有爬虫,我4号发布的blogs,5号就在百度和google搜索页面上看到了转载或者复制. 这篇文章逻辑组织不太好,想知道怎么做缩放动画的可以直接拉到尾部看结论. 当然,这篇代码比较多,不建议手机看. 进入正题,goTo()动画,官方的例子是在SceneView中实现的. 照例,给出require的第一个字符串数组参数 require( [ "esri/Map

theano学习指南--词向量的循环神经网络(翻译)

欢迎fork我的github:https://github.com/zhaoyu611/DeepLearningTutorialForChinese 最近在学习Git,所以正好趁这个机会,把学习到的知识实践一下~ 看完DeepLearning的原理,有了大体的了解,但是对于theano的代码,还是自己撸一遍印象更深 所以照着deeplearning.net上的代码,重新写了一遍,注释部分是原文翻译和自己的理解. 感兴趣的小伙伴可以一起完成这个工作哦~ 有问题欢迎联系我 Email: [email