最近因为忙于YUI2到YUI3的迁移,没时间更新博客。现在闲暇一些,觉得似乎写一点自己对于YUI3的理解再合适不过。
主要内容有以下几点:
全局命名空间改变一切的模块Combo链式调用更广泛的自定义事件一些问题全局命名空间
YUI3为了保持向前兼容,采用了新的全局命名空间YUI。新的命名空间与YUI2的全局命名空间YAHOO最大的不同就是:YUI是一个构造函数,而且是一个无论如何也返回一个实例的构造函数。
改变一切的模块
YUI2时代,一般都是将某方面的全部方法写在统一的命名空间下,例如DOM相关的方法均在YAHOO.util.Dom,在需要使用这些方法时我们直接调用即可。YUI2真正体现了基础方法库(function library)这样一种定位。
YUI3最大的变化和进步在于,它采用了革新性的底层组织方式,其核心就是模块(module)。在YUI3中,每个方法不再属于某个文件、某个命名空间,而是属于某个模块。每个模块代表一个独立的功能,例如DOM、Event等。下面是一个简单的例子:
YUI.add('new-module', function(Y) { Y.sayHelloWorld = function(id) { var el = Y.DOM.byId(id); Y.DOM.set(el, 'innerHTML', 'Hello, world!'); };}, '1.0.0', { requires:['dom'] });通过调用YUI构造器本身的add静态方法,我们声明了一个新的模块,模块的名称为new-module,模块为YUI的实例Y挂载了sayHelloWorld方法,因为这个方法使用了dom模块的方法byId,所以要在add的第四个参数中标明new-module模块依赖于dom模块。
添加模块的目的是为了使用它,下面给出调用new-module的示例:
// html// jsYUI().use('new-module', function(Y) { Y.sayHelloWorld('entry'); //Hello, world!
});通过调用YUI实例的use方法,在列出模块名称之后,我们可以随意使用它们挂载的方法。需要提醒的是,YUI的loader会发现’new-module’模块依赖于dom模块,然后它去check当前页面是否已经有dom模块,没有的话则动态加载。
总结一下,发现模块为我们带来了这些好处:
遗弃domready:在YUI2中,页面通常要在domready之后调用js方法。在YUI3中可以省掉这一步了,因为只有在所有需要的模块都加载完毕后才会调用js方法,而我们通常都是在最后面引入js,此时dom基本已经就绪。当然,YUI3仍然提供domready事件监听方法。沙箱(Sandbox):在使用模块时,我们只能调用这些模块以及它们依赖的所有模块给YUI实例挂载的方法。这种机制可以限定你的代码在一定范围内执行,而不是肆意妄为。自动加载:我们不必再手动添加