学习YUI3


工作了将近一个月了,也没抽出时间写下博客,这几天事情比较多,刚好碰到舅舅住院,然后一天到晚不是在去医院的路上就是在医院,要不在去宿舍的路上就是在宿舍睡觉,能看书的时间只能在公交上了,周末在公交上读了一本东野圭吾的加贺系列的《谁杀了她》。废话不多说了,说正事儿。因为公司里的框架是liferay的,所以前端需要学习AUI,而AUI基本都是从YUI3中扩展出来的,所以对YUI3熟练的话,AUI也就不再话下了。


概念


YUI3是一种模块化编程的思想,不同于jQuery的全部加载思想,YUI3可以自己决定加载什么模块,你想使用拖拽功能,你只要把‘dd-drag’这个模块包含进去,你就能使用拖拽了,这样做的好处显而易见可以加载更少的代码,你只要把要实现效果的模块加进去,你就能使用了。


使用YUI3


一开始就说Global Object的话可能会摸不到头绪,跟jQuery一样,YUI3也有十分强大的选择器功能,对于熟悉jQuery的孩子们对$(‘div’)、$(‘.demo’)、$(‘#demo’)在熟悉不过了,对于YUI也有类似的方法Y.one(‘div’)、Y.all(‘.demo’)和Y.one(‘#demo’),这里很明显,one方法是取出第一个元素,而all是取出所有class是demo的元素,大家可能都注意到了Y,其实和jQuery的$一样,是YUI里面的一个全局变量,如果放到了闭包里面,那么他就是局部变量,使用jQuery的时候我们总要把代码放在jQuery.ready()中,和它类似的,YUI的代码都放在了YUI().use()中。


玩转DOM


[Node]
JS框架的作用一开始就是为了兼容不同浏览器下DOM的操作,在YUI3中,Node对象封装了原生的属性和方法并且兼容了不同浏览器的差异还扩展了一些方法和属性,诸如get、set、remove和chilren等,对于常用的DOM操作更简单。

常用操作

  1. 操作CSS类

    Y.one(‘#demo’).addClass(‘style’) 、 Y.one(‘#demo’).removeClass(‘style’)

  2. 获取和设置DOM属性

    Y.one(‘#demo’).set(‘background’,’green’) 、 Y.one(‘#demo’).get(‘color’)

  3. 改变元素里面的内容

    Y.one(‘#demo’).setHTML(‘这是个测试’) 、 Y.one(‘#demo’).getHTML()

  4. 创建新元素

    children = Y.Node.create(‘子节点’) 、 Y.one(‘#parent’).append(children)



另外操作


其他操作还有诸如Y.one(‘demo’).setStyle()和Y.one(‘demo’).getStyle()等,对于这些API可以参考YUI Node

javascript, yui3






发表评论