企业级Ajax框架!

第一个Edo程序

我们开始编写第一个Edo程序,如下所示:

<html>
<head>
    <title>Hello, edojs!</title>
    <!--引入edo-all.css-->
    <link href="../../scripts/edo/res/css/edo-all.css" rel="stylesheet" type="text/css" />
    <!--引入edo.js-->
    <script src="../../scripts/edo/edo.js" type="text/javascript"></script>
</head>
<body style="padding:10px;">

</body>
</html>
<script type="text/javascript">
//使用Edo.create方法,将一个配置对象生成为edo组件对象
Edo.create({
    id: 'btn1',                             //组件ID
    type: 'button',                         //组件类型
     width: 100,                             //宽度
     text: '按钮A',                          //按钮文本内容
     onclick: function(e){                   //处理click事件
        alert("Hello, edojs!" + btn1.text); 
    },
    render: document.body                   //此edo对象加入的dom元素
});
</script>

在这段代码内,我们需要注意几件事:

1.正确引用edo的css和js资源。

2.创建一个edo组件对象,必须在edo的css和js资源引用之后。

效果图如下:

EdoJS的对象创建方式

EdoJS有两种创建组件的方式:一种是配置式的,如上面的示例代码;另一种是命令式的,是类似于JAVA或C#的严谨的创建方式,如下代码所示:

<script type="text/javascript">
var btn = new Edo.controls.Button();
btn.set('id', 'btn1');      //一行代码设置一个属性
btn.set('width', 100);
btn.set({                   //设置一个配置对象,设置多个属性
    text: '按钮A',
    height: 40
});
btn.on('click',  function(e){   //监听按钮的click事件
    alert("Hello, edojs!" + btn1.text); 
});
btn.render(document.body);      //将按钮对象最终呈现在页面
</script>

本例效果图如下:

如何查找EdoJS对象

当我们创建一个EdoJS对象后,我们在一个特定时刻,需要找到此对象,并进行其他的操作。

查找EdoJS对象有如下三种方式:

1.直接返回对象,保存到一个变量中:

var btn = Edo.create({
    type: 'button',    
    render: document.body
});
btn.set('text', '按钮');

此方法不需要对象id,即可找到并使用对象,缺点是有变量作用域的限制,如函数内的对象变量,函数外就无法访问到。

2.通过Edo.get(id)方法:

Edo.create({
    id: 'btn1',
    type: 'button',    
    render: document.body
});
var btn = Edo.get('btn1');
btn.set('text', '按钮');

3.第三种方法其实跟第二种方法是一样的,只是省略了一个Edo.get方法调用代码,如下:

Edo.create({
    id: 'btn1',
    type: 'button',    
    render: document.body
});
btn1.set('text', '按钮');

这是EdoJS的一个特性:将对象id全局化。省略了对象获取代码,从而更加自然和精炼。

事件操作

通过如上代码,大家应该知道,监听一个对象的事件,有两种方式:

1.第一种是配置式的,如:

Edo.create({    
    type: 'button',    
    render: document.body,
    onclick:  function(e){          //配置式监听对象事件
        alert("Hello, edojs!" + btn1.text); 
    }
});

优点是书写简单,与配置对象写在一起;缺点是这种方式,只能给对象增加一个事件监听处理函数。

2.第二种是命令式的,如:

btn.on('click',  function(e){  
    alert("Hello, edojs!" + btn1.text); 
});
btn.on('click',  function(e){  
    btn.set('text', 'clicked!');
});

可以给一个对象增加多个事件监听处理函数。

render显示渲染

EdoJS组件对象被创建后,需要在页面内显示。这时候就会有一个问题,这个对象在哪里显示?

render就是控制EdoJS对象显示在哪里的。也有两种方式:

1.配置式:

Edo.create({    
    type: 'button',    
    render: document.body
});

2.命令式:

btn.set('render', document.body);
//或
btn.render(document.body);

set方法

set方法可以说是EdoJS的一个重要的核心思想:所有的组件属性,都可以通过set方法来设置,并反映到界面上。

比如,在一些其他的框架,我们要修改某个对象的文本,是这样写的:

cmp.setText('文本');

有时候会这样命名这个方法:

cmp.changeText('文本');

EdoJS的set方法,意义在于:为所有的属性操作,提供一个统一的接口。

使用者在查阅Api文档的时候,看到一个类有A/B/C等属性,那么它就会知道,直接可以通过cmp.set(‘A’, …)这种代码形式,来设置属性,无论在任何时刻!

是的,无论在任何时刻,您都可以任意对EdoJS对象设置属性!有一些框架,他们具有一个“配置对象”的概念,这个配置对象只有在对象的初始化时刻,才能进行配置。EdoJS没有“配置对象”的概念,只有“属性”,任意时刻都可以设置属性,这一点,大大降低了学习曲线。

EdoJS是一个简单、强大、高性能的跨浏览器JS组件库框架,在后续的教程中,我们将一一学习EdoJS的组件、容器、布局器、表格、树形组件等使用方式,配合Api文档,我们可以快速制作出卓越的基于web的软件!