篆体字作品 | 篆体字知识 | 加入收藏 篆体字转换器软件可转换多种篆体字在线预览 网页版 V2.0
篆体字转换器

当前位置:篆体字网 > 知识库 >

yui3

时间:2024-01-03 08:33:20 编辑:篆字君 来源:篆体字网

最近因为忙于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实例挂载的方法。这种机制可以限定你的代码在一定范围内执行,而不是肆意妄为。自动加载:我们不必再手动添加