All posts in YUI3

YUI3: Creating a Module with Dependencies

前文类似,本文为译文,相关事宜同前文。

[问题]
你想要创建一个自定义的YUI模块并确保它会把另外一个YUI模块作为依赖加载。

[解决办法]
使用YUI.add()方法注册你的code作为一个YUI全局对象(YUI global object)的一个模块,注册的过程中把模块的依赖作为配置对象传给它。在模块名字和定义之后,YUI.add()还接收两个可选的参数:

  • 一个模块的字符串形式的版本数字。这是你的模块的版本号,并不是你的模块所兼容的YUI版本。
  • 一个包含模块metadata的配置对象。目前这个配置对象(configuration object)里面最常见的field是一个叫requires的array,它列出了该模块的所有依赖。对里面所列出的每个模块,YUI会自动在需要的时候加载它们,必要的时候会远程的加载。

下面的例子对前文例子做了修改。Y.Hello.sayHello()不在返回一个字符串值,而是改变一个单个Y.Node的内容。这个hello模块定义了一个node-base的依赖,来确保调用hello模块的时候node.setHTML()是存在并可用的。
Continue reading →

YUI3: Creating Your Own Modules

本文节选翻译自YUI3 Cookbook,翻译的目的是force自己focus看完,因为最近实在过于焦躁不安心神不宁;好了废话不多说,我们开始,因为可能牵涉到版权问题,所以恕不能同时附上英文原文。水平有限,如有错误皆是本人认知问题,与原文无关。

[问题]
你需要以YUI模块的形式来包装并复用你的code。

[解决办法]
使用YUI.add()方法把你的code注册成为YUI全局对象(YUI global object)的一个模块。最少需要给YUI.add()提供:

  • 一个模块的名字。习惯上,YUI模块的名字一般为小写字母,使用hyphens(-)分割;
  • 一个实际定义模块代码的回调函数(callback function)。可以通过把这个component定义到Y对象上的方法来expose这个模块的相关属性或方法。

一旦YUI.add()执行完毕,你便可以像其它任何YUI模块一样来使用你自己的代码。下面的例子里面i,模块定义之后紧接着的就是YUI().use(),它会加载模块以及其依赖,并在回调函数里面执行其模块方法。

< !DOCTYPE html>
<title>Creating and using a Hello World module</title>
<div id="demo"></div>
<script type="text/javascript" src="http://yui.yahooapis.com/3.8.0/build/yui/yui-min.js"></script><script type="text/javascript">
  YUI.add('hello', function (Y) {
    Y.namespace('Hello');
    Y.Hello.sayHello = function () {
      return 'GREETINGS PROGRAMS';
    };
  });
  YUI().use('node-base', 'hello', function (Y) {
    Y.one('#demo').setHTML(Y.Hello.sayHello());
  });
</script>

为了避免命名冲突,你可以使用Y.namespace()来创造一个“Hello”的namespace作为这个sayHello()方法的命名空间。Y.namespace()是个方便实用的工具,虽然这里例出的例子非常简单,本质上等同于:

Y.Hello = {};
注:上面这个例子只展现出最基本的创建模块的代码block。这个example对于构建真正可复用的code并不足够。真实世界里面的模块需要定义依赖和其它metadata,且它们通常会被定义在另外独立的文件中。

Continue reading →

[Footnotes]
  1. 译者改成了使用yui3最新版:3.8.0 []