dojo小部件生命周期探究

理解dojo小部件对于开发dojo的widget至关重要,dojo在绘制过程中主要存在以下几个过程：

constructor->postMixInProperties->buildRendering/templateString/templatePath->postCreate->startup，为了探究各个过程，做了一个简单的widget，并且该widget包含子小部件。

以下是子小部件的模板文件:

<div>
    <input dojoAttachPoint="name" type="text"></input>
    <span dojoAttachPoint="submit" dojoType="dijit.form.Button"> 提交 </span>
</div>

以下是子小部件的js代码：

dojo.provide("iSpring.widgets.myFirstWidget.MyFirstWidget");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojo.cache");

dojo.declare("iSpring.widgets.myFirstWidget.MyFirstWidget",[dijit._Widget,dijit._Templated],{
    _module:"iSpring.widgets.myFirstWidget",templateString:dojo.cache("iSpring.widgets.myFirstWidget","templates/MyFirstWidget.html"),widgetsInTemplate:true,home:"China",postMixInProperties:function(){
        debugger;
        console.log("postMixInProperties中的this.home:");
        console.log(this.home);
        console.log("postMixInProperties中的this.templateString:");
        console.log(this.templateString);
        console.log("postMixInProperties中的this.domNode:");
        console.log(this.domNode);
        console.log("postMixInProperties中的this.name:");
        console.log(this.name);
        console.log("postMixInProperties中的this.submit");
        console.log(this.submit);
    },postCreate:function(){
        debugger;
        console.log("postCreate中的this.home:");
        console.log(this.home);
        console.log("postCreate中的this.templateString:");
        console.log(this.templateString);
        console.log("postCreate中的this.domNode:");
        console.log(this.domNode);
        console.log("postCreate中的this.name:");
        console.log(this.name);
        console.log("postCreate中的this.submit");
        console.log(this.submit);
    },startup:function(){
        debugger;
    }
});

使用小部件的前端代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html"/>
    <meta name="charset" content="utf-8"/>
    <title></title>
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad:true,baseUrl:'./',modulePaths: { 'iSpring': 'iSpring' }
        };
    </script>
    <script type="text/javascript" src="http://localhost/jsapi28/"></script>
    <link type="text/css" rel="stylesheet" href="http://localhost/jsapi28/js/dojo/dijit/themes/claro/claro.css" />
    <script type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("iSpring.widgets.myFirstWidget.MyFirstWidget");

        function init(){
            var myFirstWidget = new iSpring.widgets.myFirstWidget.MyFirstWidget();
            myFirstWidget.placeAt(dojo.body());
        }
        dojo.addOnLoad(init);
    </script>
</head>
<body class="claro">

</body>
</html>

我在自定义的widget中设置了两个dojoAttachPoint：name和submit。

我们看一下在Chrome下的控制台中的输出结果：

postMixInProperties：我们可以从上面的输出结果中看到在postMixInProperties中已经可以访问小部件js文件中的各个属性，包括我们自定义的属性home以及dijit._Templated中的属性templateStirng,并输出了其相应的值。但此阶段不能访问在小部件的dom节点（this.domNode）以及模板文件中定义的dojoAttachPoint(this.name、this.submit)。当该方法被调用的时候，可以在该方法中完全访问与操作那些小部件js文件中定义的属性（比如自定的home属性）以及从父类中继承来的属性（比如dijit._Templated中的templateString属性），但是此时小部件的dom树海并不存在，也就是说不能访问this.domNode以及在模板文件中dojoAttachPoint。需要特别注意的是，此时虽然不能获得小部件的dom树，但是可以通过templateString=dojo.cache来获得小部件的模板文件，这个功能很有用，我们可以在此处动态的对模板字符串进行修改，比如动态的在该字符串中插入html字符串、删除html字符串、替换html字符串，这样就可以更新templateString,从而在解析小部件的时候呈现新的界面。比如我在postMixInProperties中设置this.templatetring="<div><input dojoAttachPoint='name' type='text' /><span dojoAttachPoint='submit' dojoType='dijit.form.Button'> 提交 </span><span dojoType='dijit.form.Button'> 提交 </span></div>";更新了原有的templateString，以下是运行后的界面：

postCreate:我们从上面的输出结果可以看到在postCreate中不仅可以完全访问postMixInProperties中可以访问的内容，而且可以通过this.domNode访问小部件的dom树，以及通过this.dojoAttachPoint来访问模板文件中标记的dojoAttachPoint。而且需要注意的是，我在普通标签<input dojoAttachPoint="name" type="text"></input>上设置了name作为dojoAttachPoint，通过this.name获取的是该标签本身的dom节点。但是我在标签<span dojoAttachPoint="submit" dojoType="dijit.form.Button"> 提交 </span>上也设置了submit作为dojoAttachPoint，不同的是，该标签内还有dojoType=“dijit.form.Button”标记，我通过this.submit获取的不是该span标签本身的dom树，而是dijit.form.Button标签，如果想在这种轻快下访问span标签本身的dom节点，可以通过this.submit.domNode来获取。由此可以看出dojoAttachPoint会根据该标签是不是dijit小部件而获取不同的内容，很智能。大家还需要注意的一点是，有可能你在模板文件的标签<span dojoAttachPoint="submit" dojoType="dijit.form.Button"> 提交 </span>上设置了dojoType以及dojoAttachPoint，但是通过this.submit获取的仍然是span标签本身的dom节点而不是dijit.form.Button小部件，如果出现这种情况，说明你的自小部件在postCreate的时候没有解析出来，此时在小部件js代码中增加属性widgetsInTemplate：true属性即可,详见正确解析dojo的子小部件一文。

dojo小部件生命周期探究

相关推荐