JS控件生命周期介绍

JS控件的生命周期与其他平台的UI相似，但有自己的特点。只有明确划分JS控件的生命周期，所有控件编写、mixins编写、插件编写才能遵循控件的生命周期进行统一管理。这里我把JS的生命周期定义为四个部分：1.initializer:初始化并做一些不涉及DOM操作的初始化操作；2.创建的DOM :创建控件所需的DOM结构；3.呈现UI 3360生成控件的内部元素，并在此调用子控件的呈现方法。打开子控件的生命周期。4.bindUI:绑定事件，可以绑定子控件事件或内部DOM事件。5.生成5.synUI: DOM结构和子控件后，我们在配置项或默认配置项中传递的值应该应用于DOM，例如宽度、高度、属性(例如可聚焦的6.destructor:析构函数)、移除控件、清理控件上的事件、清理子控件、清理控件的DOM以及控件对其他控件的一些引用。

图1初始化：在控件初始化的过程中做好以下几件事：1。调用继承的父类的初始化函数，包括父类和原型链上的mixins2.处理配置项，合并默认配置项和用户传入的配置项；3.处理绑定到已修改对象的事件；4.初始化插件初始化后，是否创建DOM取决于具体的策略，类似于ext的实现。您可以延迟创建DOM并创建DOM。创建DOM的过程如下：1。调用继承的父类的DOM创建函数，包括父类和原型链上的mixins2.创建控件的DOM3.调用控件插件的DOM创建函数来呈现子控件和内部DOM操作。执行过程如下：1。调用父类的渲染函数，包括父类和原型链上的mixins2.调用插件的呈现函数。我们可以在顶级父类中初始化子控件。优点是子类不需要初始化子控件。此时：1。如果子控件尚未初始化，请执行初始化。2.继续创建子控件的DOM，呈现子控件，绑定事件，并同步配置项函数以执行绑定事件。事件绑定过程：1。调用父类的事件绑定方法，包括父类和原型链上的mixins2.调用插件的事件绑定模式。注意：在子控件或内部DOM上绑定事件时，使用委托，不要直接在子控件或DOM上绑定事件。一旦添加或删除子控件，内部DOM中的更改将导致事件无效。同步配置项首先解释什么叫做同步配置项。在初始化控件时，我们已经在一定程度上处理了配置项(至于如何处理，我们将在后面讨论JS控件属性)，但是配置项并不作用于DOM或内部子控件。我们现在处理同步，而不是创建DOM和呈现子控件，有两个原因：1。在创建DOM和呈现子控件时，并不会完全生成所有的DOM和子控件。这个时候，我们需要做出很多判断。2.我们需要将同步配置项的工作提取到方法中。当修改配置项时，内部DOM和子控件将相应地改变。例如，配置项中有{width : 100}。1.如果在渲染DOM时同步，可能会放“width=100px;"。直接设置为DOM，当我们需要修改这个宽度的时候，还需要写一个函数来设置这个值。2.相反，我们把精力集中在同步的配置项上，把同步的配置项提取到函数中，这样初始化width的过程和修改width的过程完全一样，这样概念和逻辑就统一了。同步配置项的过程仍然与其他步骤相同：1。调用父类的同步方法，包括父类和原型链上的mixins2.调用插件的同步方法。注意：我们此时应该可以配置一个配置项是否同步，原因很多，比如多个配置项会产生相同的操作，如果多个配置项同时同步，一个过程会重复几次。从控件中移除任何对象都有构造函数和析构函数，但这个函数往往是最容易被忽略的地方，但也是非常重要的地方。就目前而言，除了内存泄漏等问题，如果一个控件的移除做得不够好，会给正常使用带来很大的麻烦。这个函数是最难写的，因为它需要处理以下任务：1。清理使用的其他控件，是否移除取决于具体情况。

区分关联和聚合。2.清理子控件。3.清理绑定到控件和DOM的事件。4.移除DOM。5.清理对变量的引用，既麻烦又繁琐。因此，我们需要以统一的方式管理对控件的引用。同时，这个功能也要执行：1。调用父类的析构函数，包括父类和原型链上的混合。2.调用插件的析构函数。以上都是具体步骤。然而，在实施中存在一系列问题：1 .调用父类方法存在问题；1)在原型链上调用父类方法时，只能调用类名等方法。可以使用superclass.method.call (this)，但是这个。构造函数。不能使用superclass.method.call (this)。原因在js控件继承的extend一章中提到了，这很麻烦，也很难维护。2)调用mixins上的方法。在JS继承mixin这一章，我讲了mixin的实现原理，涵盖了同名的方法。mixins的方法实际上已经被用作控件原型上的方法，因此最好不要使用同名的方法。如果多个mixin使用renderUI和synui等方法，并且继承这些mixin的控件没有实现renderui，那么它将被覆盖。2.调用插件的方法也有问题。1)我们需要得到当前控件的参考解：1。当呈现控件时，我们可以先调用父类的方法，然后调用子类的方法，直到当前控件：。

与上面的继承关系一样，当我们执行C.renderUI()时，我们根据继承原型链的顶层向下执行它。2.执行minxins方法。当我们执行renderUI时，我们将依次执行mixin的__renderUI方法。3.执行父类的renderUI时，如果mixin也存在，执行mixin的__renderUI方法。

如上图所示：inherits代表原型链继承，extends代表mixin扩展，所以c.renderUI的执行过程如下：a . render ui-d . _ _ render ui-b . render ui-e . _ _ render ui-c . render ui 3。调用插件方法时，需要传递控件本身的引用。例如plugin1.render (this)析构函数比较使者，执行顺序与上面2中的不同：子类析构函数-子类扩展析构函数-父扩展析构函数-根据图3中的继承结构，析构函数的执行顺序为：c . destructor-e _ _ destructor-b . destructor-e . _ _ destructor-a . destructor原因是子类的一些引用依赖于父类或扩展类。如果父类和扩展类首先执行析构函数，子类在使用一些变量/属性时会报告错误。

在这一节中，我谈到了控件的生命周期。所有作品均来自KISSY框架的UIBase。如果你感兴趣，你可以去看一看，并奇妙地认识http://docs.kissyui.com/kissy/docs/#!/API/kissy . collaboration . ui base的。