YUI3的几点说明

YUI3的几点说明YUI3的几点说明YUI3是一个重量级的前端框架库,它提供了单元测试(YUITest),生成文档(YUIDoc),自动化编译(YUIBuild)等工具,在代码组织方面有统一的微件(widget)框

大家好,又见面了,我是你们的朋友全栈君。

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;
								width: 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]
            }
        }
    });
});

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/154285.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • docker启动mysql容器失败_docker容器

    docker启动mysql容器失败_docker容器什么是Docker?Docker是一种工具,它让容器创建,部署和运行应用程序变得更加容易。容器使开发人员可以将应用程序与所需的所有部分(如库和其他依赖项)打包在一起,并将其作为一个包进行部署。这样,借助容器,开发人员可以放心,该应用程序可以在任何其他Linux机器上运行,而不用管该机器的环境配置。安装DockerDesktop前往官方网站:www.docker.com/get-started根据操作系统,下载并安装对应的DockerDesktop。验…

  • Java内存管理-掌握自定义类加载器的实现(七)

    勿在流沙筑高台,出来混迟早要还的。做一个积极的人编码、改bug、提升自己我有一个乐园,面向编程,春暖花开!上一篇分析了ClassLoader的类加载相关的核心源码,也简单介绍了ClassLoader的设计思想,读源码相对来说是比较枯燥的,还是这个是必须要走的过程,学习源码中的一些思想,一些精髓,看一下大神级人物是怎么写出那么牛逼的代码。我们能够从中学到一点点东西,那也是一种进步和成长了…

  • 隐马尔科夫模型(HMM)与词性标注问题

    隐马尔科夫模型(HMM)与词性标注问题

    2021年11月19日
  • TCP的拥塞控制(详解)「建议收藏」

    TCP的拥塞控制(详解)「建议收藏」在某段时间,若对网络中某一资源的需求超过了该资源所能提供的可用部分,网络性能就要变坏,这种情况就叫做网络拥塞。在计算机网络中数位链路容量(即带宽)、交换结点中的缓存和处理机等,都是网络的资源。若出现拥塞而不进行控制,整个网络的吞吐量将随输入负荷的增大而下降。当输入的负载到达一定程度吞吐量不会增加,即一部分网络资源会丢失掉,网络的吞吐量维持在其所能控制的最大值,转发节点的缓存不够大这造成分…

  • pytorch 自定义卷积核进行卷积操作[通俗易懂]

    pytorch 自定义卷积核进行卷积操作[通俗易懂]一卷积操作:在pytorch搭建起网络时,大家通常都使用已有的框架进行训练,在网络中使用最多就是卷积操作,最熟悉不过的就是torch.nn.Conv2d(in_channels,out_channels,kernel_size,stride=1,padding=0,dilation=1,groups=1,bias=True)通过上面的输入发现想自定义自己的卷积核,比如高斯…

  • tikv源码分析_crt脚本命令大全

    tikv源码分析_crt脚本命令大全版权声明:本文由神州数码云基地团队整理撰写,若转载请注明出处。以TiKvConfigstruct为起始点,从TiKvConfig内部的字段开始,分析每个模块的作用和配置检查逻辑所做的事情。TiKV是一个分布式事务型的键值数据库,是TiDB的存储层,提供了满足ACID约束的分布式事务接口,并且通过Raft协议保证了多副本数据一致性以及高可用。关于TiDB、TiKV的详细介绍可以从官网查阅,这里就不多赘述了。知乎上已经有一篇高屋建瓴的文章,由TiKV亲爹Ed写的TiKV代码初探,可以从整

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号