; 如果你对js比较熟悉的话,你应该清楚,js中有事件监听函数,但是IE和DOM是有区别的,注意,Opera支持IE和DOM的两种监听函数,以 前为了兼容多个浏览器,我们需要单独写一个兼容的函数,而在Yui3
插件和扩展 除了可以基于任意Widget类创建子类,实现自定义widget外,YUI3还提供两个代码重用机制。 Widget扩展 当你开始用YUI3开发widget时,有些打包好的扩展可以用于向你的自定义widget类添加功能。 widget 插件 YUI3库在发布时,带了几个widget插件,还有一些例子教你如何创建自己的插件: Widget Animation Plugin (api documentation)
但是YUI CSS GRID在YUI3中已经不被推荐使用,我为此感到惋惜和不解。不过幸好,及时不被推荐,我们仍可在项目中使用他。 2、 IO的使用。 YUI3中封装的IO具备了强大的功能,不仅能够通过GET、POST方式提交数据。而且支持整个Form数据的提交,这个方法对于希望全站都是用Ajax来做的同学无疑提供了极大地便利。 但是,现在由于不是十分的熟悉YUI3的API,绑定IO事件的时候,都是在初始页面中进行的编码,这样必须能够了解到这个页面中可能会出现多少个Form,并分别把Form的提交事件绑定好。 3、YUI3还是不够稳定。 还是使用IO的时候,当通过POST方式提交数据时,第二次点击提交表单按钮,就会发出双份的数据,第三次,发送出去的数据就会变成三份。 参考资料 1、YUI3设计中的激进与妥协 2、Excute embedded javascript after ajax-call 3、Post-Ajax Javascripts Calls
YUI3总体认识 1.1 面向对象的JS编程,RIA工具: 面向对象的JS编程,主要体现的以下几个方面: 1. 接口和抽象类 YUI3 oop的argument()可以实现类似的功能 4. 模块之间的引用,即代码复用 YUI3的沙箱模型,可以使JS模块化,在Y.use中引入,可以实现代买复用 1.2 重量级框架,oop思想 YUI3中的oop模块就是面型对象编程的重要体现 1.3 YUI3 API使用 点击YUI3 的web site后能看到他的详细结构: 学习他的API就应该从这个开始: 第一列就是一些帮助文件信息,还有一些辅助开发工具,我用过的也就是Console了, 下面部分就是YUI3的Component,应该就是组件的意思: 使用这些基础的组件,要按需加载,需要那个模块就加载哪个模块。 使用过的基础组件有: Anim :动画效果使用它。
YUI3 Reset YUI3的Reset同YUI2.8中的Reset有些区别,在YUI3的CSS Reset中,我们可以对所有HTML资源重设其表现,以达到不同浏览器下的一致表现(Page Level YUI3 Fonts 在YUI2的Fonts中,使用em来表示文字的大小。但是在YUI3中,这一规则被打破了,改为使用百分比来表示文字的大小。如下表,这样的表达方式对于平时的书写来说,是不太友好的。 YUI3 Grids 习惯了YUI2中的Grids System之后,初次转换到YUI3中非常不习惯。因为YUI2提供了一个非常强大的工具(YUI Css Grid Builder)。 YUI3的Grids System却是相当的简单,看看下面这个列表,就能够明白一二。 ? 在YUI3中,所有的单位都转换为百分比,因此首先需要为页面制定一个总的宽度。 参考资料: 1、YUI3 CSS Reset 2、YUI3 CSS Fonts 3、YUI3 CSS Grids 4、YUI3 Alignment Example Page 5、YUI3 Grids Are
YUI3的几点说明 YUI3是一个重量级的前端框架库,它提供了单元测试(YUITest),生成文档(YUIDoc),自动化编译(YUI Build)等工具,在代码组织方面有统一的微件(widget) alloyUI 是基于YUI3创建的一个UI库,提供了许多常用的UI组件和简单的api.我的例子也是在alloyUI基础上做出 来的. alloyUI有许多UI组件,基本能满足绝大多数互联网应用.而且它只是YUI上的一个扩展(gallery),YUI上的扩展接近200来个.还有许许 多多的公司和开发者在为其贡献代码.我们自己也可以动手,在YUI3 前端技术平台的问题,我倾向于慎重考虑几个问题后再做选择: 我们要做什么,具体要达到什么目标 开源的框架选择了以后,我们能不能驾驭它,成本风险评估如何 可行性方案(个人意见): 基于YUI3的widget
学习YUI3有一段时间,并且应用在了一些项目的前端开发中,感觉还是蛮不错的,所以决定开始记录下YUI3的学习历程和个人经验。 YUI3在前身YUI2基础上进行了大量的重新设计,并不只是简单的版本升级。YUI3强调代码重用,将功能做了级别划分和颗粒化的设计。 接下来总结一下YUI3的部分特点: 1,动态按需加载 YUI3种子中的Get、Loader模块是动态按需加载的基础,YUI3框架通过良好的结构组织,可以根据程序引入的所需模块名称自动计算依赖模块,实现按需加载 YUI3学习路线 目前关于YUI3的中文资料并不多,也未发现一本介绍YUI3的书籍。 hello YUI3 demo 首先下载YUI3开发包(在http://developer.yahoo.com/yui/3/ 选择Download full developer kit,包含YUI3代码
YUI3的Overlay为我们提供了一个创建叠加层的方便的方(从名字就可以看出来),他扩展自Widget类。目前的版本,仅支持简单的页面XY定位、相对于一个Node或者viewport对其或居中。 最简单的引用YUI3的方法自然是引用Yahoo服务器上的种子文件,地址如下: <script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js 使用overlay也好,其他的yui特性也好,感觉非常的方便和灵活,可以说是一个真真正正为开发者考虑的js框架,而我们也应该学习<em>YUI3</em>的这种设计思想和风格,让自己的应用也变得更加灵活和方便。 总体来看,目前<em>YUI3</em>的Overlay基本能够满足我们日常创建一些叠加层的需要,但是还有一些更高级的属性或者控制功能期待在后续的版本中加入进来。 Technorati Tags: <em>YUI3</em>,Overlay,浮动层 参考资料: 1、YAHOO <em>YUI3</em> Overlay
YUI3中的一些定义。 Module。YUI3中的每块代码都可以看作是一个Module。 参考资料: 1、Building YUI3 Custom Modules
YUI3是一个非常好的开源框架,但是学习曲线稍微有些陡峭,这个系列将记录下我使用YUI3过程中的一些心得点滴,希望对大家能够有帮助。 很多互联网的项目应用中,弹出层出现的越来越多,使用YUI3可以快速的实现制作弹出层的效果。 YUI3提供了Overlay这个组件来实现可定位、可叠加的弹出层效果,这个弹出层同时还包含标准的布局模块。
YUI3的Overlay为我们提供了一个创建叠加层的方便的方(从名字就可以看出来),他扩展自Widget类。目前的版本,仅支持简单的页面XY定位、相对于一个Node或者viewport对其或居中。 最简单的引用YUI3的方法自然是引用Yahoo服务器上的种子文件,地址如下: <script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js 使用overlay也好,其他的yui特性也好,感觉非常的方便和灵活,可以说是一个真真正正为开发者考虑的js框架,而我们也应该学习<em>YUI3</em>的这种设计思想和风格,让自己的应用也变得更加灵活和方便。 总体来看,目前<em>YUI3</em>的Overlay基本能够满足我们日常创建一些叠加层的需要,但是还有一些更高级的属性或者控制功能期待在后续的版本中加入进来。 Technorati Tags: <em>YUI3</em>, Overlay, 浮动层 参考资料: 1、YAHOO <em>YUI3</em> Overlay 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn
在应用YUI3的过程中,我们团队积累了一些经验,这里总结成篇,分享给大家。 为什么选择YUI3 使用什么前端基础框架是建立前端团队最重要的技术决策之一。 经过一段时间对主流前端库、框架的反复考量,我们认为YUI3是最适合我们团队使用的基础框架。 从结果来看,YUI3为我们团队提供了先进生产力,为快速开发、快速部署、快速迭代提供了源源不断的力量。 YUI3的优秀主要表现在模块和组件框架的出色设计,下面我们着重介绍这两方面的一些实践经验。 但早在2008年8月13日,YUI3 Preview Release 1中就已经给出了YUI团队的解决方案,并在2009年9月29日YUI3正式版发布时定型。 通过不断的实践,我们越发认为这是YUI3的精髓所在。
YUI这几个CSS存在于两个版本的YUI中(YUI2和YUI3)。本文的介绍以YUI3版本为例。 1、YUI3 Css Reset。 YUI3的Css Reset还提供了局部的Reset样式的功能,在我们想对某一容器内的元素(而不是整个页面)进行样式统一时使用。 2、YUI3 Css Base。 3、YUI3 Css Fonts。 Css Fonts保证了跨浏览器的字体一致,即使在用户对字体进行调整情况下也是如此。 YUI3 Css Grids中对于命名规则进行了改变,这与YUI2 Css Grids中有很大的不同。不过基本原理还是一样的熟悉了任何一个,就能够方便快速的进行页面的布局。 当然,现在YUI3的Css Grids还在Beta阶段,还不是太完善,如果我们需要一个成熟的解决方案,可以考虑使用YUI2的Css Grids,使用YUI2的Css Grids并不会影响我们使用YUI3
在 YUI3 项目中,引入了一种新的命名空间机制。 YUI().use('node', function (Y) { // Node 模块已加载好 // 下面可以通过 Y 来调用 var foo = Y.one('#foo'); }); YUI3 文件的依赖,目前在绝大部分类库框架里,比如国外的 YUI3 框架、国内的 KISSY 等类库,目前是通过配置的方式来解决。 直到最近两三年,随着 Dojo、YUI3、Node.js 等社区的推广和流行,前端的模块化开发理念才逐步深入人心。 前端的模块化构建可分为两大类。 一类是以 Dojo、YUI3、国内的 KISSY 等类库为代表的大教堂模式。在大教堂模式下,所有组件都是颗粒化、模块化的,各组件之间层层分级、环环相扣。
YUI3的Sandbox 那么有没有别的方法可以将变量的作用域隔离开呢? 众所周知,JavaScript变量的作用域是函数体,因此,利用函数体将执行环境包裹起来便成了实现Sandbox的一种可行方案,而YUI3恰巧就是这么做的。 我们来看看YUI3的源码片段: /*global YUI*/ /*global YUI_config*/ var YUI = function() { var i = 0, Y 我们再继续研究YUI3的源码,发现其实并不复杂: add: function(name, fn, version, details) { details = details || {};
(3)The YUI3 approach 理念:用一个很小的初始代码,下载其余的功能代码,先引入文件: <script type="text/javascript src=http://yui.yahooapis.com
我在10年左右用的最多的还是 YUI2,YUI2 是用 namespace 来做模块化的,但有很多问题没有解决,比如多版本共存,因此后来 YUI3 出来了。 }); YUI3 的 sandbox 像极了差不多同时出现的 AMD 规范,但早期 yahoo 在前端圈的影响力还是很大的,而 requirejs 到 2011 年才诞生,因此圈子不是用着 YUI 要不就自己封装一套
我在10年左右用的最多的还是 YUI2,YUI2 是用 namespace 来做模块化的,但有很多问题没有解决,比如多版本共存,因此后来 YUI3 出来了。 }); YUI3 的 sandbox 像极了差不多同时出现的 AMD 规范,但早期 yahoo 在前端圈的影响力还是很大的,而 requirejs 到 2011 年才诞生,因此圈子不是用着 YUI 要不就自己封装一套
前端模块化开发那点历史 不谈什么:传统的模块化开发方式,比如文件拆分、全局变量、命名空间,以及 YUI3 式的模块化开发方式 谈什么:关于 CommonJS、AMD、Node.js、CMD 等相关的故事与未来趋势
例如 yui3 reset 中的一段: ol, ul {list-style: none} h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal