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:

//markedasoverridesowecanchangeitsfunctionality
overrideprotectedfunctionupdateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{
/*
Callthesuper.methodNamesothatadditionalfunctionality
thatisdeclaredwithinitcanbeexecuted
*/
super.updateDisplayList(unscaledWidth,unscaledHeight);
//Yourcodeforyourcomponentincludedhere
_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、SystemTray_1
2、忽闻岸上踏歌声
3、EntLib(二)创建数据库实例的工厂方法
4、7-3 抓老鼠亏了还是赚了
5、swift与OC之间的那点事...


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn