如何开发YUI3的扩展
YUI是Yahoo发布的一个JS框架，虽然不如jQuery简单，但是如果你是要做一些复杂的事情的时候，有一个合适量级的框架还是能有用不少。
YUI3中的一些定义。
Module。YUI3中的每块代码都可以看作是一个Module。
1: YUI().use(\'node\', function(Y){
2:
3: Y.one(\'div.status\').setContent(\'Ready\');
4:
5: });
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
使用YUI，我们需要一个YUI实例，这个实例称之为Sandbox，之后我们所有的代码都在这个Sandbox中运行，不会与其他的代码冲突，这样也可以解决遗留代码（Legacy Code）的冲突问题。函数中的Y是对这个Sandbox实例的引用。
还有其他的使用方式：
1: var Y = new YUI();
2:
3: Y.use(\'node\'), function(Y){
4:
5: Y.one(\'div.status\').setContent(\'Ready\');
6:
7: });
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
或者
1: (new YUI).use(\'node\'), function(Y){
2:
3: Y.one(\'div.status\').setContent(\'Ready\');
4:
5: });
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
在YUI中注册Module的三种方式。1、By Seed；2、By Includsion；3、By config。
1、By Seed。通过引入Seed文件后，由YUI框架自动调入。
1: <script src=”http://yui.yahooapis.../yui-min.js”></script>
2:
3: <script>
4:
5: YUI().use (‘node’, ‘anim’, function (Y) {
6:
7: new Y.Anim({ node: \'#demo\', to: {opacity: 0} });
8:
9: Y.one (‘div.status’).setContent (‘ready!’);
10:
11: });
12:
13: </script>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
2、By Inclusion。在页面文件中显式的引入。
1: <script src=”http://yui.yahooapis.../yui-min.js”></script>
2:
3: <script src=” http://yui.yahooapi.../build/gallery-yql/gallery-yql.js”></script>
4:
5: <script>
6:
7: YUI().use (‘gallery-yql’, function(Y) {
8:
9: new Y.yql(\'select * from github.user.info where (id=”caridy")\', function(r) {
10:
11: r.query; // The result
12:
13: });
14:
15: });
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
</script>
3、By Configuration。在配置文件中指定引入Module所需要的信息，这是一种比较推荐的使用方式。在YUI实例化时，YUI()方法中可以接收多个配置项，例如YUI(c1,c2,,,)。
1: <script src=”http://yui.yahooapis.../yui-min.js”></script><script>
2:
3: YUI({
4:
5: modules: {
6:
7: \'gallery-yql\': {
8:
9: fullpath: \'http://yui.yahooapi.../build/gallery-yql/gallery-yql.js\',
10:
11: requires: ["get","event-custom"]
12:
13: }
14:
15: }
16:
17: }).use (‘gallery-yql’, function(Y) {
18:
19: new Y.yql(\'select * from github.user.info where (id=”caridy")\', function(r) {
20:
21: r.query; // The result
22:
23: });
24:
25: });
26:
27: </script>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
如何编写一个YUI的扩展
1、实用工具，也是最简单的方式。
1: YUI.add(‘gallery-youtube’, function (Y) {
2:
3: Y.youtube = {
4:
5: play: function (node, vid) {
6:
7: /* … */
8:
9: }
10:
11: };
12:
13: }, ‘0.0.1’, { requires: [‘node’] });
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
2、使用类的形式，这也是比较常用的形式。
1: YUI.add(\'gallery-slideshow\', function(Y){
2:
3: var Slideshow = function(config){
4:
5: Slideshow.superclass.constructor.apply(this,arguments);
6:
7: }
8:
9: Slideshow.hello = function(){
10:
11: alert("Hello world!");
12:
13: }
14:
15: Y.Slideshow = Slideshow;
16:
17: },\'0.0.1\', {requires:[\'node\']});
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
有了这些知识，我们就可以创建一些自己的Module来减轻Copy & Paste的工作量了，哈哈。
参考资料：