zoukankan      html  css  js  c++  java
  • ☆☆☆Dojo中define和declare的结合使用

    在原生的js中是不可以创建类的,没有class这个关键字,但是在dojo中,dojo自定义了一个模块叫做dojo/_base/declare,用这个模块我们可以创建自己的类,实现面向对象编程。

    单继承例子:

    define(["dojo/_base/declare"],function(declare){
        return declare("namespace.Person",null,{
            name:null,
            age:null,
            constructor: function(args){
                declare.safeMixin(this,args);
            },
            toString:function(){
                return this.name+":"+this.age
            }
        })
    })
    //调用自定义的类:
    require(["js/person"], function(Person) {
        var p=new Person({
        name:"wpx",
        age:20
        });
        alert(p.toString())
    });

    多继承例子:

    define(["dojo/_base/declare"], function(declare){ 
      var VanillaSoftServe = declare(null, { 
            constructor: function(){ 
              console.log("adding soft serve"); 
            } 
      }); 
      var OreoMixin = declare(null, { 
            constructor: function(){ 
              console.log("mixing in oreos"); 
            }, 
            kind: "plain"
      }); 
      var CookieDoughMixin = declare(null, { 
            constructor: function(){ 
              console.log("mixing in cookie dough"); 
            }, 
            chunkSize: "medium"
      }); 
      //继承VanillaSoftServe, OreoMixin, CookieDoughMixin三个类
      return declare([VanillaSoftServe, OreoMixin, CookieDoughMixin],{         
        constructor: function(){ console.log("A blizzard with " + this.kind + " oreos and " + this.chunkSize + "-sized chunks of cookie dough."   );   } }); 
    });

    通过“return declare([VanillaSoftServe, OreoMixin, CookieDoughMixin]......;”来返回我们所定义的类(widget),然后在其它的地方通过“require”或者“define”来指明变量引用该类(widget)。数组里面的对象“[VanillaSoftServe, OreoMixin, CookieDoughMixin]”是该自定义类的基类。需要强调一点,这里的declare省略了第一个变量:类的名称,即:“declare("pkg.MyClassName", [VanillaSoftServe, OreoMixin, CookieDoughMixin]......;”,如果设定这第一个变量,它会将这个字符串存储到该类的“declaredClass”变量中,同时会将"pkg.MyClassName"作为一个全局的变量用于今后方便构建该类的对象。

    这段代码返回的信息为:

    adding soft serve
    mixing in oreos
    mixing in cookie dough
    A blizzard with plain oreos and medium-sized chunks of cookie dough.

    以下是几种常用的写法:

    1.声明一个类并将该类返回:

     1 define(["dojo/_base/declare", "extension/bussiness/ModuleBussiness"]
     2 , function (declare, ModuleBussiness) {
     3     var instance = declare(null, {
     4         //构造函数
     5         constructor: function (data) {
     6             this.data = data;
     7         },
     8         action: function () {
     9              ModuleBussiness.LayerToc();
    10         }
    11     });
    12     return instance;
    13 });

    设置该模块的名称为ModuleLayerTocCommand,则调用方式为:

    require(['ModuleLayerTocCommand'], function (command) {
            var command = new command(params);
            command.action();
    });

    2.直接返回自定义类:调用方法同样是实例化后直接调用方法。

    define(["dojo/_base/declare", "dojo/topic", "walk/bussiness/DrawToolBussiness", "com/events/EventManager"]
    , function (declare, Topic, DrawToolBussiness, EventManager) {
        return declare(null, {
            //构造函数
            constructor: function (geoType, distance, redraw) {
                this.geoType = geoType;
                this.distance = distance;
                this.redraw = redraw;
            },
            action: function (callbackSuc) {
                EventManager.removeEvent();
                EventManager.deactivateMapTool();
                var params = {
                    geoType: this.geoType,
                    distance: this.distance,
                    redraw: this.redraw
                };
                DrawToolBussiness.DrawBuffer(params, callbackSuc);
            }, 
            actionBuff: function (parm) {
                EventManager.removeEvent();
                EventManager.deactivateMapTool();
                DrawToolBussiness.DrawBuffer(parm.params, parm.callbackSuc);
            }
        });
    });

    3.使用单例模式:

    define(['dojo/_base/declare', 'dojo/topic', 'dojo/dom-construct', 'dojo/dom-style', 'dojo/dom', 'dojo/on', 'dojo/domReady!'],
        function (declare, topic, DomConstruct, DomStyle, dom, on) {
            var instance = declare(null, {
                constructor: function (kwArgs) {
                    if (instance.Instance) {
                        throw new Error('only one instance can be created');
                    }
                },
                showProcess: function (container, title) {
                    title = title || "正在加载...";
                    var div = "<div id='ProcessBarDivCover' style='100%;height:100%;position:absolute;left:0px;top:0px;z-index:999991;background:#000;-ms-filter:alpha(opacity=15);filter:alpha(opacity=15); opacity:0.15;text-align:center;'></div>"
                    var processBardiv = '<div id="ProcessBarDiv" style="background:url(themes/default/images/loading_background.png); 90px; height:85px; left:50%;top:50%;position:absolute;z-index:999992;margin:-43px 0 0 -45px">'
                        + '<img src="themes/default/images/loading.gif" alt="" style=" display:block; 40px; margin:12px auto 0 auto" />'
                        + '<div style=" color:#fff; font-size:12px; text-align:center;  margin-top:8px">' + title + '</div> '
                        + '</div>';
                    //控制父级定位
                    if (container) {
                        var position = DomStyle.get(container, "position");
                        if (position == undefined || position == "" || position == "static") {
                            DomStyle.set(container, "position", "relative");
                        }
                        DomConstruct.place(div, container, "last");
                        DomConstruct.place(processBardiv, container, "last");
                    }
                    else {
                        $(document.body).append(div);
                        $(document.body).append(processBardiv);
                    }
                    var $this = this;
                    on(dom.byId("ProcessBarDivCover"), "dblclick", function () {
                        var tip = confirm("是否取消当前操作?");
                        if (tip) {
                            $this.closeProcess();
                            $this.Cancel();
                        }
                    });
                },
                closeProcess: function () {
                    DomConstruct.destroy("ProcessBarDiv");
                    DomConstruct.destroy("ProcessBarDivCover");
                },
                Cancel: function () {///取消时候调用事件
    
                }
            });
            //单例
            if (instance.Instance == undefined || instance.Instance == null) {
                instance.Instance = new instance();
            }
            return instance;
        });
  • 相关阅读:
    python
    python
    网站备案流程_网站备案需要什么
    php 导出 Excel 报错 exception 'PHPExcel_Calculation_Exception' with message
    EasyUI-datagrid-自动合并单元格(转)
    win2008阿里一键环境包mysql老是1067报错
    微信公众平台开发(58)自定义菜单
    Token验证失败的解决方法
    jquery设置select选中
    YII学习第二十三天,accessRules用法
  • 原文地址:https://www.cnblogs.com/qicao/p/7595314.html
Copyright © 2011-2022 走看看