Flight学习(一)
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)
/* 组件定义*/
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>
基于jQuery,体积小,只有5k。
Flight generator .只需 一步便可实现一个基于Flight的web应用程序。
Flight package generator .只需 一步便可生成你需要用来书写和测试一个独立的Flight组件的所有内容。
Jasmine Flight支持the Jasmine test framework的扩展.
Mocha Flight 支持Mocha test framework的扩展.
你可以现在单击Flight components 来寻找所有可用组件.同时也可以通过Bower引用:
bower search flight
最简单的书写一个components组件的方式是通过Flight package generator:
yo flight-package foo
Chrome, Firefox, Safari, Opera, IE 7+ (requires ES5-shim).
这是一个关于Flight的主要概念和语法的简要说明。你可以通过阅读 API documentation 来了解详细情况。
组件(API)
- 一个组件就相当于一个属性集和原型组合起来的构造器。
- 每一个组件都有一系列的基础函数,比如事件处理和组件注册等等。 (see Base API)
- 除此之外,每个组件的定义都包含了一系列描述组件行为的特定的属性集。
- 当一个组件关联到一个dom节点上时,一个关于那个组件的新的实例就会被创建,每个实例都通过节点属性指向特定的dom节点。
- 组件实例不能被直接饮用,它可以通过事件和其他的组件进行交互。
和DOM节点的交互
一旦被绑定,组件实例就会直接和它的节点对象相关联。(也有jQuery版本的可用节点,$node)
Flight里面的事件
Flight组件通过事件来实现交互。组件的原型提供方法来触发事件,同时将事件从组件上 绑定和解绑。这些组件事件的方法实际只是一组便捷的包装了的普通dom节点的事件和方法。
Flight学习(一)的更多相关文章
- flight学习笔记
Flight::db()-> getOne("select 1"); 返回结果:1 Flight::db()-> getRow ("select 1, 2 f ...
- jQuery 学习笔记(jQuery: The Return Flight)
第一课. ajax:$.ajax(url[, settings]) 练习代码: $(document).ready(function() { $("#tour").on(" ...
- SSH学习笔记
Struts2登录模块处理流程: 浏览器发送请求http://localhost/appname/login.action,到web应用服务器: 容器接收到该请求,根据web.xml的配置,服务器将请 ...
- Android开发学习之路-Volley源码解析
从简单的StringRequest入手看看Volley的工作机制. 先简单说下Volley的用法: ① 获取一个RequestQueue mRequestQueue = Volley.newReque ...
- Laravel 学习笔记 —— 神奇的服务容器 [转]
容器,字面上理解就是装东西的东西.常见的变量.对象属性等都可以算是容器.一个容器能够装什么,全部取决于你对该容器的定义.当然,有这样一种容器,它存放的不是文本.数值,而是对象.对象的描述(类.接口)或 ...
- Android 学习笔记之Volley开源框架解析(二)
PS:Volley已经学完,可以安心的写一下博客总结一下了... 学习内容: 1.Request的完整封装... 2.RetryPolicy,DefaultRetryPolicy(请求重试策略源码解析 ...
- (转) 实时SLAM的未来及与深度学习的比较
首页 视界智尚 算法技术 每日技术 来打我呀 注册 实时SLAM的未来及与深度学习的比较 The Future of Real-Time SLAM and “Deep Learni ...
- Java学习笔记4
Java学习笔记4 1. JDK.JRE和JVM分别是什么,区别是什么? 答: ①.JDK 是整个Java的核心,包括了Java运行环境.Java工具和Java基础类库. ②.JRE(Java Run ...
- 【总结】AngularJs学习总结
应项目的需要,一个月之前开始做WebComponents.Javascript MVC框架的技术调研,由于重点是想做组件化,所以就没有考虑Backbone(去年就小试牛刀,太难用了)及其他的mvc框架 ...
随机推荐
- JavaWeb总结(八)—EL表达式
一.EL表达式简介 EL全名Expression Language.主要有以下作用. 1.获取数据 EL表达式主要用于替换JSP页面的脚本表达式,以及各种类型的Web域中检索Java对象.获取数据.( ...
- MYSQL 行转列 以及基本的聚合函数count,与group by 以及distinct组合使用
在统计查询中,经常会用到count函数,这里是基础的 MYSQL 行转列 以及基本的聚合函数count,与group by 以及distinct组合使用 -- 创建表 CREATE TABLE `tb ...
- Golang分布式爬虫:抓取煎蛋文章|Redis/Mysql|56,961 篇文章
--- layout: post title: "Golang分布式爬虫:抓取煎蛋文章" date: 2017-04-15 author: hunterhug categories ...
- sql中的for xml path() 实现字符串拼接
通常我们需要在sql中拼接字符串 ,可以用for xml path() 来进行拼接,如下实例. 同时未去掉最后一个逗号可以用LEFT函数来实现. ) AS UserName FRO ...
- 封装Web Uploader 上传插件、My97DatePicker、百度 编辑器 的使用 (ASP.NET MVC)
Web Uploader: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优 ...
- python安装win32api pywin32 后出现 ImportError: DLL load failed
ImportError: DLL load failed: \xd5\xd2\xb2\xbb\xb5\xbd\xd6\xb8\xb6\xa8\xb5\xc4\xc4\xa3\xbf\xe9\xa1\x ...
- IT职场经纬 |阿里web前端面试考题,你能答出来几个?
有很多小伙伴们特别关心面试Web前端开发工程师时,面试官都会问哪些问题.今天小卓把收集来的"阿里Web前端开发面试题"整理贴出来分享给大家伙看看,赶紧收藏起来做准备吧~~ 一.CS ...
- mysql 优化方法
1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设得尽 ...
- 学习Java之前操作环境的安装及配置
1.根据自己的系统版本下载相应版本的JDK(Java开发运行时环境) 查看自己系统版本的方法:在桌面上右键计算机(win7,win10是此电脑,XP是我的电脑),点击属性,进入到计算机属性页面以后里面 ...
- JS组件系列——自己动手封装bootstrap-treegrid组件
前言:最近产品需要设计一套相对完整的组织架构的解决方案,由于组织架构涉及到层级关系,在表格里面展示层级关系,自然就要用到所谓的treegrid.可惜的是,一些轻量级的表格组件本身并没有自带树形表格的功 ...