YUI3的几点说明
YUI3是一个重量级的前端框架库,它提供了单元测试(YUITest)，生成文档(YUIDoc)，自动化编译(YUI Build)等工具，在代码组织方面有统一的微件(widget)框架，完整的模块管理，插件机制等等,是一整套完整 且严谨的技术体系.这些都是大团队开发所需要的。 alloyUI 是基于YUI3创建的一个UI库,提供了许多常用的UI组件和简单的api.我的例子也是在alloyUI基础上做出 来的.
关于例子的一些说明
因为时间仓促,以及本人也是刚刚接触YUI的缘故.所以这个例子非常简单. 主要展示了一个表单的布局,校验,加载和提交数据.以及一些比较常用的UI组件. 但这个小示例中已经展示了一些与其它前端框架相比难得的一些特性:
- 颗粒化管理,页面只需引入一个种子文件,然后根据需要动态加载模块.
- 混入(mix),这是一种多继承的设计思想,可以轻而易举地为js对象添加一些特性和方法. 可以避免单继承体系带来的巨型类.
- 基于微件(widget)和插件的灵活扩展机制.
数据的处理步骤和流程
示例中,加载数据时会发一个ajax请求,服务器端返回一个json字符流,前端在回调方法里将其转化为json对象, 并将它绑定到表单里面;提交数据时有二种,一种是原生的表单提交,另外一种就是发起一个数据处理的请求. 将表单的数据组成一个json字符串发送到后端处理.这种方式有个好处,就是前后台的交互只围绕一个业务数据对象(bussinessData)来展开. 可以达到标准的前后台分离并行开发.TB在这方面积累了丰富的经验.
页面调整，异常处理
页面调整(页面导航)常用的有三类,一类就是菜单,包括工具栏菜单和树型菜单.另外一类就是界面导航和链接.还有一类就是后 台创建一个分发器,根据相关的业务逻辑来决定界面的跳转方向. 异常处理也有二只方式,一种是捕捉服务器端抛出的异常,在前端以对话框的方式弹出来.另外一种发生异常后,导航到一个特定的 友好的错误界面.比如404界面
能否找到丰富的ui控件，
可以,alloyUI有许多UI组件,基本能满足绝大多数互联网应用.而且它只是YUI上的一个扩展(gallery),YUI上的扩展接近200来个.还有许许 多多的公司和开发者在为其贡献代码.我们自己也可以动手,在YUI3的基础上来扩展.
普通的web程序员的上手能力
有一定的学习门槛,但它的文档是非常丰富的.如果部门能定期组行培训和技术分享,要上手还是不难的.
(备注)Web Widget : 中文译名被称作是微件,是一小块可以在任意一个基于HTML的Web页面上执行的代码， 它的表现形式可能是视频，地图，新闻，小游戏等等。它的根本思想来源于代码复用，通常情况下， Widget的代码形式包含了DHTML,javascript以及Adobe Flash。
前端技术平台的问题，我倾向于慎重考虑几个问题后再做选择：
- 我们要做什么，具体要达到什么目标
- 开源的框架选择了以后，我们能不能驾驭它，成本风险评估如何
可行性方案(个人意见):
- 基于YUI3的widget开发是一个可行并且是一个长远的的解决方案
- 基于二个现实,一是在富客户端原TB积累了一定的extjs开发经验,并且也经过了客户的考验.放弃了实在可惜. 另外在互联网这一块,jquery更容易上手.所以,按需选择,似乎是目前最好的解决方案.
示例代码如下:html代码
<!DOCTYPE html>
<html>
<head>
<script src="../../build/aui/aui.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />
<style type="text/css" media="screen">
body {
font-size: 12px;
}
.aui-form-content{
}
.aui-field-label{
float : left;
width : 50px;
display: inline;
}
.aui-field-content {
margin : 0px 0px 5px 0px;
}
.fl{
float : left;
display : inline;
margin-right : 5px;
}
#wrapper {
margin: 20px auto;
960px;
}
.aui-form-validator-stack-error {
color: red;
display: block;
font-weight: normal;
font-style: italic;
margin: 3px 0;
}
.aui-form-validator-error-container {
}
.aui-form-validator-valid-container {}
.aui-form-validator-error {
/* border: 1px dotted red;*/
background: lightPink;
}
.aui-form-validator-valid {
/* border: 1px solid green;*/
background: lightGreen;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>表单演示</h1>
<div id="demo">
</div>
</div>
</body>
</html>
javascript代码:
AUI().use('aui-form', 'aui-io-request', 'aui-loading-mask', 'node', function(A) {
var form = new A.Form({
id: 'fm1',
name: 'fm1',
action: 'xx'
}).plug(A.LoadingMask, {
background: "#000"
}).render('#demo').set('nativeSubmit', false);
A.mix(A.Form, {
load_data: function(url) {
if (!url) return;
var this_obj = this;
var io = new A.io.request(url, {
method: 'post',
dataType: 'json',
on: {
success: function(event, id, xhr) {
var data = this.get('responseData');
var o = eval("(" + data + ")");
this_obj.bind_data(o);
this_obj.loadingmask.toggle();
}
}
});
this.loadingmask.toggle();
io.start();
},
bind_data: function(json_data) {
this.fields.each(function(f) {
var index = f.get('name');
f.set('value', json_data[index]);
});
validator1.validate();
}
},
true, null, 4, true);
// Adding fields to the form via script
form.add([{
name: 'name',
//type : 'password',
labelText: '姓名 :'
},
{
name: 'code',
labelText: '编号 :'
},
{
name: 'age',
labelText: '年龄 :'
},
{
name: 'dept',
labelText: '部门 :'
},
{
name: 'tel',
labelText: '电话 :'
},
{
name: 'addr',
labelText: '地址 :'
}], true);
// Checking if the form fields have been changed
form.isDirty(); // returns true
// Resetting the values to their original values
form.resetValues();
var btn = new A.ButtonItem({
label: '加载数据',
icon: 'refresh'
}).render('#demo').set('class', 'fl');
var btn2 = new A.ButtonItem({
label: '提交数据',
icon: 'submit'
}).render('#demo');
btn.on('click', function() {
form.load_data('user.json');
});
btn2.on('click', function() {
//form.submit();
});
var validator1 = new A.FormValidator({
fieldContainer: 'span',
showAllMessages : false,
showMessages : true,
boundingBox: '#fm1',
rules: {
age: {
customRule: true,
digits: true,
range: [18, 50]
},
name: {
required: true,
rangeLength: [2, 50]
}
}
});
});