YUI技术简单介绍(1)(2009-02-01 02:10:57)
转载标签：代码设计网站it 分类：常用代码
什么是YUI?
按照官方解释就是“The Yahoo! User Interface Library (YUI)”，中文就是“雅虎用户接口库(简称YUI)” ，它是一个使用JavaScript编写的工具和控件库。它利用DOM脚本,DHTML和AJAX来构造具有丰富交互功能的Web程序。yui 也包含几个核心的CSS文件:一个是css page grids，用它可以很方便的布局你的网页。另外两个是standard css fonts和standard css reset,利用这两个css可以对字体等在不同浏览器中获得一致的效果.
为什么要使用YUI?
1)YUI是免费的，同时授权给商业和非利益团体或个人使用。YUI是由Yahoo!的工程师所开发和支援的。
2)方便布局网页、减少不同浏览器之间的差异：
a)CSS Page Grids :网页版面工具，有了这个工具之后，不论是两栏、三栏或多栏的版面都不用担心了！
b)CSS Fonts :字体工具，替不同的浏览器统一了字体、间距等样式，用来避免不同浏览器之间的差异性。
c)CSS Reset :这也是用来统一不同浏览器之间的差异性，但是针对所有的网页元素样式。
3)方便参考学习：在YUI的官方网站(http://developer.yahoo.com/yui/)可以下载全部的套件，也有详细的说明档案。
怎么使用YUI?
使用yui的基本步骤：
在使用的UI控件的页面组成有3大块：
第一块导入依赖的JS文件和CSS文件；
第二块控件实现的JS代码；
第三块插入到<body>当中的控件，实际就是<div>。
把开发需要用的包全部放到项目中去，把build文件整个copy过来了，也可以根据自己的需要选择，基本上都会用到yahoo、event、dom这3个包。在自己的项目中新建一个页面，htm、jsp、asp等
来源：(http://blog.sina.com.cn/s/blog_4539a2200100c8ld.html) - YUI技术简单介绍(1)_bluefish_新浪博客
第一块在<head>内插入：
<script type="text/javascript" src="build/yahoo/yahoo.js"></script> <script type="text/javascript" src="build/event/event.js"></script> <script type="text/javascript" src="build/dom/dom.js"></script> <script type="text/javascript" src="build/calendar/calendar.js"></script> <link type="text/css" rel="stylesheet" href="build/calendar/assets/calendar.css" /> 第二块写实现控件的JS代码了：
<script> YAHOO.namespace("example.calendar"); function init() { YAHOO.example.calendar.cal = new YAHOO.widget.Calendar("cal","caler"); YAHOO.example.calendar.cal.render(); } YAHOO.util.Event.addListener(window, "load", init); </script> 第三块，在<body>里面写一个div,注意id属性就是初始化Calendar对象的第二个参数。
<body> <div id="caler"></div> </body>
分享到：
相关推荐
YUI2技术文档描述
ExtJs最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
是一组工具和控件，用JavaScript写成, 为的是用DOM 脚本，DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议，对所有的使用方式都是免费的。YUI 项目包括YUI 库和两个创建时工具： YUI Compressor ...
**YUI-EXT使用详解** YUI-EXT是基于Yahoo! User Interface Library (YUI)的一个扩展库，专为构建富互联网应用程序（RIA）而设计。...通过深入学习和实践，你将能够熟练掌握这一技术，为你的项目增添更多可能性。
ExtJs最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
《深入解析YUI 2.6.0r2：JavaScript组件库的基石》 ...随着技术的不断演进，虽然新的前端框架层出不穷，但YUI 2.6.0r2仍然代表了一个时代的经典，其设计理念和实现方式对现代前端开发仍有深远影响。
YUI Compressor在JavaScript压缩方面，采用了一种称为"词法分析"的技术，它能理解代码结构并智能地进行压缩。例如，它会把多行代码合并成一行，移除空格和换行符，替换长变量名以减少字符数，同时保持代码的可执行性...
### YUI 详细说明文档 ...以上概述了YUI的一些核心概念和技术细节，希望对学习YUI有所帮助。YUI不仅提供了强大的工具库，还有一系列实用的组件，这些都大大简化了Web开发的工作量，并提高了项目的质量。
ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
ExtJs最开始基于YUI技术，由开发人员 JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一 款不可多得的JavaScript客户端技术的精品。
ExtJs最开始基于YUI技术，由开发人员 JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一 款不可多得的JavaScript客户端技术的精品
1. **代码压缩**：对于JavaScript，YUI Compressor采用了一系列的语法分析和转换技术，如删除未使用的变量，合并重复的变量声明，以及对表达式进行简化。对于CSS，它会删除空格、换行和注释，并对选择器和属性进行...
虽然YUI Compressor在早期JavaScript压缩工具中非常流行，但随着技术的发展，现在也有其他如UglifyJS、Terser等更现代的压缩工具出现，它们提供了更多的优化选项和更好的ES6支持。 总的来说，JavaScript压缩是提高...
1. **异步加载**：YUI Slideshow支持动态加载内容，可以使用Ajax技术加载下一张幻灯片的内容，减少页面初次加载时的数据量，提高页面响应速度。 2. **多种过渡效果**：提供多种动画过渡效果，如淡入淡出、滑动等，...
ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的javascript客户端技术的精品
ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。...
ExtJs最开始基于YUI技术，由开发人员 JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。