zoukankan      html  css  js  c++  java
  • 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节点的事件和方法。

     

  • 相关阅读:
    这之后的事。。。
    POJ
    POJ
    博客园的装饰
    高斯消元
    逆序数技巧
    各种小的 dp (精)
    最大区间和变形
    树dp 统计异或值
    dp
  • 原文地址:https://www.cnblogs.com/benxiaohai-microcosm/p/6493263.html
Copyright © 2011-2022 走看看