Yahoo User Interface (YUI) 3-中文资料--介绍

　　本人初学YUI这个神秘的东东，会逐步的更新自己学习过程中的所得，目前YUI的中文资料很少很少，可能是因为其他比如Jquery的教程太多太多了吧。YUI内容实在是太庞大了，不得不下决心留下点什么，备忘，也希望自己能坚持下去（尽力吧）。

一. YUI简介

　　官网的资料总是最全面的。http://yuilibrary.com/ 。

　　YUI是一套常用JS方法和控件包，使用javaScript编写而成，用于创建富web应用交互，采用例如Dom 脚本，DHTML 和AJAX等技术, 并且包含了丰富的CSS资源。YUI是开源的，所有用户可以免费使用。

　　YUI与Jquery相比，看起来比较笨重，事实上，YUI囊括了几乎web前端开发中用到的所有组件，使web前端开发变成如同软件开发一样丰富多彩，并内置了各种组件来处理不同的需求，值得一提的是 YUI可以动态加载当前页面所需js脚本，大大提高了性能。还有比较新颖的js MVC框架，更使得前端开发也成了一种美。

二.　YUI库下载

　　　　地址：http://yuilibrary.com/download/yui3/ ，选择一个版本下载即可，压缩包大约有23MB

　　解压后如图：

　　　如上图，其中，api：是一个关于api方面的说明书，是一套静态的网页；（yahoo的东西做的还是不错的，美观大方）。docs：是YUI所用到的对象啊组件神马的文档； releasenotes：更新记录，忽略；tests：包含了各种各样的例子，包括js库用法，包括效果，包括一些控件使用等等；最后是Build，这里是存放的是YUI所有的js库文件，根据所需将需要的js文件引用到HTML页面即可。

　　　build文件夹下，是一个一个分门别类的子文件夹，一个文件夹说明了一套完整的功能或控件，没一个子文夹中，又分为xxxxx.js，xxxxx-debug.js , xxxxx-min.js 三个文件，三者功能上是一模一样的，只是应用场景不一样，xxxxx.js和xxxxx-debug.js用于开发调试阶段，排版上便于阅读，并附有详尽的注释说明。xxxxx-min.js用于发布阶段，内部去掉了排版中的缩进啊回车啊注释啊等一切与运行无关的字符，以压缩体积，便于前端页面加载。

三. 用法

　　1. 将YUI seed file引入到页面中：

<script src="build/yui/yui.js"></script>

　　当然上面可以换成yui-debug.js或者yui-min.js

　　2. 使用YUI对象

<script>
// Create a YUI sandbox on your page.
YUI().use('node', 'event', function (Y) {
    // The Node and Event modules are loaded and ready to use.
    // Your code goes here!
});
</script>

　　上面脚本大概意思是, YUI(这里还可以有一个设置项，json格式).使用(模块1，模块2,...,function(Y){}); 这样页面就初始化好了一个全局对象叫Y ，这个Y所能干的事决定于.use()了哪些模块，例如上面加载了node（可以操作dom），event（可以绑定各种各样的事件监听）。

　　3. 简单示例:

　　　　a. 操作DOM对象

YUI().use('node', function (Y) {
    // Access DOM nodes.
    var oneElementById     = Y.one('#foo'), //根据css选择器(#代表id，.代表class, body是标签）来取得html节点对象
        oneElementByName   = Y.one('body'),
        allElementsByClass = Y.all('.bar');

    // Create DOM nodes.
    var contentNode = Y.Node.create('<div>'),
        listNode    = Y.Node.create('<ul>'),
        footerNode  = Y.Node.create('<footer>');

    contentNode.setHTML('<p>Node makes it easy to add content.</p>');
    listNode.insert('<li>Buy milk</li>');
    footerNode.prepend('<h2>Footer Content</h2>');

    // Manipulate DOM nodes.
    Y.all('.important').addClass('highlight');

    Y.one('#close-button').on('click', function () {
        contentNode.hide();
    });
});

　　b. 动画效果

YUI().use('transition', function (Y) {
    // Fade away.
    Y.one('#fademe').transition({
        duration: 1, // seconds
        opacity : 0
    });

    // Shrink to nothing.
    Y.one('#shrinkme').transition({
        duration: 1, // seconds
        width   : 0,
        height  : 0
    });
});

　　c. ajax

YUI().use('node-load', function (Y) {
    // Replace the contents of the #content node with content.html.
    Y.one('#content').load('content.html');
});

　　还有好多好多的功能，还在学习中。。。。。。尽情期待。

四. 关于开发工具

　　无非就是一堆js文件，大家想用什么或者习惯用什么都可以。值得一提的是有个工具叫aptana studio。（http://www.aptana.com/）。能够很好的支持HTML啊，js啊，css的提示和编写，比DW略显轻点。主要是他宣称支持YUI，Jquery等主流的js框架，即你可以在代码中写 $之类的就可以自动调出jquery的方法，减轻了记忆那么多方法和属性名称的痛苦。为什么不拿YUI举例子呢，好吧，因为我没搞定。折腾了好几天，也没能使它智能提示YUI，jquery倒是可以的。可能是aptana studio3的原因吧。安装方法有两种：

　　1. 官网下载独立的aptana安装包，适用于没有eclipse的同学

　　2. 安装一个eclipse，然后在装aptana的插件，适用于已经有eclipse的同学，貌似比较慢。

　　这两种效果是一样的。

OK, to be continue

posted on 2012-09-10 12:29 jeffrey.fan 阅读(572) 评论(2) 收藏举报

刷新页面返回顶部

Yahoo User Interface (YUI) 3-中文资料--介绍

公告