MyException - 我的异常网
当前位置:我的异常网» Java Web开发 » 麻雀虽小,五脏俱全:用DOJO写一个最简略的控件

麻雀虽小,五脏俱全:用DOJO写一个最简略的控件(2)

www.MyException.Cn  网友分享于:2013-12-23  浏览:47次
<html>
<head>
<title>Hello World</title>
<!-- 首先引入dojo.js,modulePaths用来定义包含控件的js目录,类似于jsp的自定义tag引入的机制-->
<script type="text/javascript" src="./dojo/dojo.js" djConfig="parseOnLoad:true,modulePaths:{hello:'../hello'}">
</script>

<script type="text/javascript">
    dojo.require("dojo.parser");    
    dojo.require("hello.world");
</script>
</head>
<body>    
    <div dojoType="hello.world" yourName="jinxfei"></div>
</body>
</html>


大家注意到,我们在标签上增加了“yourName”属性,在控件中如何使用该属性呢?
可以在construtctor方法中接收此属性的值,将值赋给控件类自身的变量,然后在postCreate中使用,
js代码如下:
JScript code
dojo.provide("hello.world");

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");


dojo.declare("hello.world",[dijit._Widget,dijit._Templated],
{
    yourName:'world',
    constructor:function(params,node){
        this.yourName=params.yourName;        
    },
    postCreate:function(){
        this.domNode.innerHTML="hellow "+this.yourName;
    } 
}
);




接下来,我们将进一步增加控件进的复杂性
增加一个输入框,在这个输入框中输入文本的同时,动态更新hello XXX,
这就要用到dojo的事件绑定机制,最常用的模式为:
dojo.connect(node,event,obj,method);
表示将obj的method方法作为domNode的event事件处理函数,
例如:
dojo.connect(inputText,"onkey",this,"updateHello");

这次先改控件,在postCreate的时候,动态增加一个输入框,并为输入框动态绑定事件:
JScript code
dojo.provide("hello.world");

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");


dojo.declare("hello.world",[dijit._Widget,dijit._Templated],
{
    yourName:'world',
    typeIn:null,
    echoDiv:null,
    constructor:function(params,node){
        this.yourName=params.yourName;        
    },
    postCreate:function(){
        
        this.typeIn=document.createElement("input");
        
        this.typeIn.type="text";        
        this.domNode.appendChild(this.typeIn);        
        this.echoDiv=document.createElement("div");
        this.domNode.appendChild(this.echoDiv);
        dojo.connect(this.typeIn,"onkeyup",this,"updateHello");//动态绑定事件        
        this.updateHello();//调用方法初始化一下,先显示一个空的hello
    } ,
    updateHello:function(){
        this.echoDiv.innerHTML="hello "+this.typeIn.value;
    }
}
);


而HTML文件中对控件的引用,不用做任何改变(严格来讲,你需要删除yourName="jinxfei"这个属性)。

从这个稍微有一点点复杂的控件,我们已经可以看出DOJO的优势:
真正的面向对象!
控件管理范畴内的DOM元素,都可以放在类中作为属性来使用(直接用this.xxx引用),
这样,避免了document.getElementByID()满天飞,控件是内聚的。
响应事件的方法也是类的方法,免得在页面中声明大量的离散function,不好管理。


我先歇歇,接下来整理一下DOJO的模板机制,用模板做复杂控件更容易一些,
还有与DWR的结合等等。

------解决方案--------------------
个人认为,如果要在一个项目开始时引入一个JS框架来节省开发时间也好,增强页面效果也好,如果时间不是很充裕的话,我会选择用JQUERY,个人认为有以下几个好处

1.没有牵扯大量面向对象理论,写出来的代码可以很过程式,易维护
2.简单易学,一天就上手
3.插件多

然后EXT收费之后我对其除了鄙视还是鄙视
------解决方案--------------------
探讨
引用:
个人认为,如果要在一个项目开始时引入一个JS框架来节省开发时间也好,增强页面效果也好,如果时间不是很充裕的话,我会选择用JQUERY,个人认为有以下几个好处

1.没有牵扯大量面向对象理论,写出来的代码可以很过程式,易维护
2.简单易学,一天就上手
3.插件多

然后EXT收费之后我对其除了鄙视还是鄙视



呵呵,先共同鄙视以下EXT!

JQUERY确实很好,设计思想很独到,
JQUERY让我想…

------解决方案--------------------
jquery比较好使,他的连缀,隐式迭代,大量的开源控件。。。不使用,不行啊。

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有