专栏首页小狼的世界如何开发YUI3的扩展

如何开发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的工作量了,哈哈。

参考资料:

1、Building YUI3 Custom Modules

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Codeigniter中对核心类的扩展

    Codeigniter框架提供了实现多个应用Application的方法,如参考资料[2]中描述的,这种方法实际上是在网站目录下存在多个入口文件和Applica...

    大江小浪
  • CodeIgniter 2.1.0 的白屏错误调试

    今天在配置一个CodeIgniter 2.1.0时,遇到白屏,系统报500错误,但是Apache的错误日志中看不到任何错误信息输出。

    大江小浪
  • Nginx的Rewrite规则编写

    昨天为单位的Ngnix服务器配置了一个Rewrite规则,以防止符合特定规则的图片被盗链。同时,还有一个需求就是,从我们的管理站点来的请求应该可以访问这些图片...

    大江小浪
  • Javascript对象的方法赋值

    Javascript对象编程学习中,一直不能很好的掌握对象的属性(property)和方法(method)。今天在写代码过程中,又犯了一个低级错误。 <!DOC...

    八哥
  • jQuery Tools Scrollable使用的限制

    在现在很多项目中,都会使用到jQuery Tools中scrollable。特别对于显示Photo Gallery,当然目前国内国外都有第三方非常优秀的的类似j...

    八哥
  • 友元函数和友元类

    友元提供了不同类的成员函数之间、类的成员函数与一般函数之间进行数据共享的机制。通过友元,一个不同函数或另一个类中的成员函数可以访问类中的私有成员和保护成员。c+...

    chenjx85
  • 让IE7/8使用CSS中first-child和last-child样式属性

    项目最终效果如下图所示: ? 可以看出2个tab之间有一天分割线,这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最...

    八哥
  • JavaScript中的内置对象--Number对象

    JavaScript中的内置对象有以下6个: 1.Number对象 2.Boolean对象 3.Data对象 4.Math对象 5.String对象 6.Arr...

    八哥
  • DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置。一般有水平居中,和垂直居中。一般设置水平居中简单。基本是margin:0 auto,就可以了。但是垂直居中,我们有时...

    八哥
  • 2014CENCE&CCS大会闭幕 劲爆内容大盘点

    ? 第十六届CENCE中国企业网络通信大会&第七届CCS云计算高峰论坛暨展览于昨日落下帷幕,会中观点激荡,“高大上”厂商云集,各类新品频出。以下来看小编...

    静一

扫码关注云+社区

领取腾讯云代金券