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

     

  • 相关阅读:
    PHP基础学习笔记(一)
    安装wampserver之后,浏览器中输入localhost页面显示IIS7解决办法
    HTML5常识总结(一)
    AngularJs中的服务
    AngularJs中的directives(指令part1)
    Happy Number——LeetCode
    Binary Tree Zigzag Level Order Traversal——LeetCode
    Construct Binary Tree from Preorder and Inorder Traversal——LeetCode
    Construct Binary Tree from Inorder and Postorder Traversal——LeetCode
    Convert Sorted Array to Binary Search Tree——LeetCode
  • 原文地址:https://www.cnblogs.com/benxiaohai-microcosm/p/6493263.html
Copyright © 2011-2022 走看看