zoukankan      html  css  js  c++  java
  • Anatomy of a Component

    Component Life Cycle

    Regardless of how simple or complex you make your components, there is one constant:Your component needs to be instantiated and when it does, it needs to be able to initialize itself and create and display any assets it requires. If it is interacted with or data changes that it consumes or manages, it needs to notify not only external elements of your application that it has changed in some way, but also most likely itself and its own children.This is commonly referred to as the component life cycle. Figure 3.1 shows an illustration of the actual cycle.

    不管你要构建的组件是如何简单或复杂,总要遵循这样一个原则:组件初始化,它要能够初始化自己,创建和显示它所需要的一些素材。当与它交互或其相关的数据发生改变时,它不但要能监测到应用程序中其他组件的变化,也要能监测到它自身及其子对象的数据变化。这就是通常所说的生命周期。

    As part of this cycle, various methods are invoked, events dispatched, and properties set, some only once during the initialization of the component and others numerous times depending on user, data, or state-driven influences.As Figure 3.1 shows, the Constructor and createChildren() methods are invoked only once during the entire life cycle of the component, whereas the commitProperties() , measure(), and updateDisplayList() methods can be invoked repeatedly, depending on the type of influence that has been placed on the component. Each of these core component framework methods has their access modifier set to protected to avoid unnecessary or accidental direct interaction from external sources, but at the same time, enables any subclasses to inherit and invoke them.

    在这个周期中,很多方法被调用、事件被触发、属性被设置。组件被初始化时,有一些仅被调用一次,有一些会根据用户操作、数据变化或受状态驱使影响调用多次。如图3.1如示,构造函数Constructor() createChildren() 方法在组件的整个生命周期仅调用一次,然而方法 commitProperties() , measure(), and updateDisplayList() 能够根据所受到的影响被重复调用。这些核心方法都被修饰符protected修饰,以避免从外部不必要的或不小心的直接操作,但同时,它们又允许子类继承和调用


    Figure 3.1 Component life cycle

    Within your component, you can tailor all or none of these methods and any number in between; if you do need to alter one, you need to make sure you meet two requirements of inheritance:

    • The method must invoke the super class or method, passing the relevant parameters if present.
    • The method must use the override keyword to indicate that you want to add or alter the functionality of that method that already exists within the parent class method within your component.

    在你自定义组件中,你可以剪裁(tailor)或保留这些方法。当你修改这些任何一个方法时,你需要确保两个需求需要继承:

    • 这个方法要调用父类或父方法,如果有必要,要传入相应的参数。
    • 必须用override修饰符来标识你想要增加或修改父方法功能。

    The following code shows an overridden updateDisplayList() method:

    // marked as override so we can change its functionality
    override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{
        
    /*
         Call the super.methodName so that additional functionality
         that is declared within it can be executed
        
    */
        
    super.updateDisplayList(unscaledWidth, unscaledHeight);
        
    // Your code for your component included here
        _myTextDisplay.setActualSize();
        ...

    As you can see, it is fairly straightforward to override a component method ready to add the specific functionality that your component requires.Word to the wise, however: Don’t override a method if you aren’t going to add any additional functionality.Although it doesn’t affect the component, it adds needless code that provides no benefit and reduces the legibility of your class when others look through it to see how it operates.

    如你所见,覆盖父类方法增加你所需要的特定功能是相当简单的。建议一句,如果你不打算增加任何功能时,尽量不要复盖父类方法。尽管它不影响组件,这样做没任何好处,它增加了不必要的代码,当别人阅读你的代码以察看它是如何工作时,减少了易读性。

    With those points in mind, let’s look at which method performs what role within this life cycle and how you can leverage this process to produce rich components without having to re-create functionality that is already there.

    记住上面两点,让我们看看那些方法在生命周期中都充当什么角色,我们如何在不重复编写已有功能的情况下去创建一些富有表现力的组件。

    Understanding the Structure

    Now, you have a clearer understanding of what the component life cycle consists of.The next step is to understand how it actually moves through these phases and what each of the component methods actually does. After you have a clear understanding of that, you can quickly create the core structure of your component without thinking about it. However, to avoid running before you can walk, you need to know what you can harness within each method, so you can place your component code in the correct place to avoid potential pitfalls.

    现在你已经明白生命周期都包括哪些。接下来是理解它是如何在各个阶段运行的,每个方法实际上都做了哪些工作。你清楚地理解了这些之后,你能不加思索地创建出具有核心构造的组件。 首先你需要知道在这些方法中你能驾驭什么,你才能够在相应的地方避开潜在的陷阱。

    The obvious place to start is the component constructor. Although not strictly part of the component life cycle, it is the initialization point of all classes—including components—by invoking the class’s constructor via the new keyword. Don’t skip the constructor section, though; you need to adhere to some specific rules that differ from a standard ActionScript class.That said, let’s see what those differences are.

    显然要从组件的构造函数开始。尽管没有严格的规定,必须通过new关键字进行类(组件)的初始化,不要跳过构造函数这一部分。你要注意一些与一般创建类不同的的地方

    Component Constructor

    The component constructor is slightly different from normal class constructors because you don’t create it with any parameters.There are a few good reasons for this. First, your component is more likely to be declared in MXML, where you cannot pass parameters into the constructor of your component. Second, if another component instantiates your component purely by interface or by base class type (UIComponent, for example), there is no way for you to cleanly set those parameters. Although you could provide these parameters and simply give them all default values, as the following example shows, this is a poor design approach that’s better handled within the constructor and associated component methods via the components properties and accessors/mutators (getter/setters).

  • 相关阅读:
    1 slow requests are blocked > 32 sec解决方法
    centos7下搭建ceph luminous(12.2.1)--无网或网络较差
    防止集群数据恢复设置
    ceph:health_warn clock skew detected on mon的解决办法
    Windows下判断jdk是否安装好以及环境变量是否配置好
    卸载Myeclipse10.5 报错“an error has occured.See the log file ...Uninstaller...”
    转: Laravel 自定义公共函数的引入
    windows下安装composer
    PHP与.Net的区别(一)接口
    phpStorm+XDebug配置
  • 原文地址:https://www.cnblogs.com/fxair/p/2112431.html
Copyright © 2011-2022 走看看