zoukankan      html  css  js  c++  java
  • 【ExtJS】关于Component生命周期

      很久以前就学习过extjs的组件生命周期,很久之后,再回头看一看,又增加好多新的认识。


      extjs组件生命周期大体分为3个阶段:初始化、渲染、销毁。

      第一阶段:初始化

      初始化工作开始于组件的诞生,所有必须的配置设定、事件注册、预渲染处理等都在此时进行。

      1、应用组件的配置:

        当初始化一个组件的实例时,传递的组件配置对象包含了希望让组件拥有的所有功能,这些都是在Ext.Component基类的前几行代码完成的。

      2、注册事件:

        诸如enable/disable,show,hide,render,destory,state restore,state save等等事件,是所有继承于Ext.Component的组件都会默认拥有的基本事件,它们将会在执行某些行为之前或之后被触发。

      3、ComponentMgr注册组件实例:

        在这里,每一个组件的实例都会生成一个字符串作为其ID值,供Ext.Cmp()方法来获得该实例的引用。在实例的配置中,可以通过配置id值给其传递ID值,不过如果设置了同样的ID值,Ext.Cmp()方法找到的实例引用将会是最后一个设置了该ID的组件。也就是说,最后设置的ID值将会覆盖前面的所有相同ID值。

      4、调用initComponent()方法:

        关于initComponent()方法,在直接或间接继承了Ext.Component基类的组件中,该方法会在Component的构造函数constructor中被调用。

        这里来看看其回调顺序:

        Ext.Window ==> Ext.Panel ==> Ext.Container ==> Ext.BoxComponent ==> Ext.Component

        在自定义组件时,一般都会覆盖父类的initComponent()方法,并且在最后用this.callParent()来回调父类函数,则在实例化组件的过程中,container的initComponent方法里的this已经变成了该实例对象本身。如果不这么做,譬如直接将itsms写入配置中,则在内部调用container的initComponent方法时,this所指的对象将不是目标实例化的对象。配置内的items的内容将残留在new的对象上,从而导致在连续实例化同一个自定义组件时,除了第一个实例,后面的实例都将失败的结果。

        于是在自定义组件的时候,最好将配置项写入initComponent方法中,并在配置项最后使用this.callParent()来回调其父类函数。有许多工作都会在initComponent方法里完成。例如注册自定义的事件、设定data stores、创建子控件等。initComponent可以看做constructor的补充,因此经常用于扩展组件的入口点。

      5、加载插件和组件渲染:    

        如果在constructor的参数中传递了plugin对象,plugin的init方法将会被调用,同时会将父对象作为参数传递进init方法里。如果组件中配置了renderTo或者applyTo,则组件将马上被渲染,否则,它会被延迟渲染,直到组件被显式调用显示,或被它的容器所调用。


     第二阶段:组件呈现

      1、触发beforerender事件:

        这是在组件被render渲染前被调用的。用以提供处理函数或者阻止组件的继续渲染。

      2、设置容器:

        如果没有父容器被指定,默认它的父对象被指定为它的容器。

      3、调用onReader方法:    

        这是为子类执行呈现工作的一个非常重要的方法,这是一个模板方法,在子类中可以根据需来重写它的实现逻辑。直接被创建的类的  onRender  首先被调用,然后它可以通过superclass.onRender 来调用基类的 onRender 方法。这个方法很容易被重新实现,如果需要你可以在继承关系的任意类中重写这个方法。  

      4、不隐藏组件     

        默认,大多数组件都会通过设置像 x-hidden 这个样式来使它隐藏。当 autoShow 设置为true 时,这个隐藏功能的样式会被移除。 

      5、应用自定义样式 

        所有的 Component 子类都支持指定 cls 配置属性,通过它可以为 Component 所呈现的HTML 元素指定 CSS 样式。通过添加组件的 cls 属性,使用标准的样式规则,是一个自定义可视组件显示效果的非常完美的方法。 

      6、render 方法被触发 

        简单的通知组件已经被成功的呈现了。 

      7、调用 afterRender 

        这是另一个模板方法,子类根据逻辑需要可以重新实现或覆盖该方法。所有的子类可以通过调 superclass.afterRender.来调用父类的方法。

      8、组件隐藏或不可用

        根据配置选项的值来设置。 

      9、状态事件被初始化 

        可以状态化的组件会定义一些事件来指定状态的初始化和保存。如果提供,这些事件会被添加。


      第三阶段:销毁  

      1、触发 beforedestroy      

        这是一个可取消的事件,如果需要,可能通过提供事件代理来阻止组件被销毁。   

      2、调用 beforeDestroy 方法     

        又一个模板方法,在子类中可以重新实现和调用父类的方法。   

      3、移除事件监听者(代理)     

        如果组件已被呈现,则移除它底层的 HTML 元素的事件监听列表,然后将元素从 DOM中移除。 

      4、onDestroy 被调用 

        这个还是一个模板方法,在子类可以重新实现。这里需要注意的是,容器类提供了一个默认的 onDestroy 实现,它会循环销毁它的成员组。

       5、组件实例从 ComponentMgr 中反注册 

        不可以再通过 Ext.getCmp 获取到对象实例。 

      6、destroy 事件被触发 

        这只是一个简单的提醒,表示组件销毁成功。 

      7、移除 Component 上的事件代理

        组件可以独立于元素,自己拥有事件代理,如果存在则移除它们。


       ps:以上内容,包括了前人的理论概括,加上自己的学习认识,权作记录,自勉!

  • 相关阅读:
    页面跳转时,统计数据丢失问题探讨
    JSBridge 知识点
    数据埋点 知识点
    ES6 模块与 CommonJS 模块的差异
    koa 学习资料
    浏览器渲染流程
    Object.create() 的含义:从一个实例对象,生成另一个实例对象
    this、new,容易混淆的地方
    为什么js 的constructor中是无限循环嵌套:Foo.__proto__.constructor.prototype.constructor.prototype.constructor.prototype.xxx ?
    实例对象与 new 命令
  • 原文地址:https://www.cnblogs.com/linxiong945/p/4168413.html
Copyright © 2011-2022 走看看