如何开发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:  });

使用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:  });

或者

   1:  (new YUI).use('node'), function(Y){

2:

   3:  Y.one('div.status').setContent('Ready');

4:

   5:  });

在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>

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:  });

</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>

如何编写一个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’] });

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']});

有了这些知识，我们就可以创建一些自己的Module来减轻Copy & Paste的工作量了，哈哈。

参考资料：

1、Building YUI3 Custom Modules

转载于:https://www.cnblogs.com/cocowool/archive/2012/06/01/2530621.html

如何开发YUI3的扩展相关推荐

快速开发一个PHP扩展
快速开发一个PHP扩展作者:heiyeluren 时间:2008-12-5 博客:http://blog.csdn.net/heiyeshuwu 本文通过非常快速的方式讲解了如何制作一个PHP 5. ...
为PHP开发C语言扩展
来源:http://blog.chinaunix.net/uid-14735472-id-5331446.html http://blog.csdn.net/w1552332103/article/d ...
Java开发的可扩展-高性能-响应式的API网关-soul v2.2.1
介绍: soul是一个以Java进行开发的可扩展,高性能,响应式的API网关. 功能特点: 1.提供了诸如限流.熔断.转发和路由监控等插件: 2.与HTTP.Restful.websocket.dub ...
go语言编写php扩展,[原创]快速开发一个PHP扩展-Go语言中文社区
快速开发一个PHP扩展本文通过非常快速的方式讲解了如何制作一个PHP 5.2 环境的扩展(PHP Extension),希望能够在图文的方式下让想快速学习的朋友了解一下制作过程. 需求:比如开发一个 ...
解决新版 Edge 浏览器每次打开都弹出“ 禁用开发人员模式扩展 ”弹窗的问题（亲测有效）
新版的 Edge 浏览器换了Chromium内核,据说功能和用户体验上可以和chrome浏览器相媲美,所以就想试一试.从官网下载了最新版本,安装后的第一件事情就是给浏览器装插件,提高浏览器的战斗力. ...
《Struts Web设计与开发大全》第12章多模块开发与Struts扩展
<Struts Web设计与开发大全> 作者邱哲.王俊标.马斗清华大学出版社购书网址:http://www.huachu.com.cn/itbook/itbookinfo.asp ...
《Struts Web设计与开发大全》第12章多模块开发与Struts扩展[转]
转载地址:http://blog.csdn.net/strutsweb/archive/2006/03/31/645960.aspx <Struts Web设计与开发大全> 作者邱哲 ...
[原创]快速开发一个PHP扩展
快速开发一个PHP扩展作者:heiyeluren 时间:2008-12-5 博客:http://blog.csdn.net/heiyeshuwu 本文通过非常快速的方式讲解了如何制作一个PHP 5. ...
Visual Studio开发必备：扩展工具应用
简介:vs 作为主流的开发工具之一,其强大的功能无可厚非,但日益增加的需求就使得vs的扩展工具成为优秀dev所必备的利器之一. Visual Studio扩展工具添加 Visual Studio扩展工 ...
开发chrome插件(扩展)
官方文档 https://developer.chrome.com/extensions/getstarted.html [干货]Chrome插件(扩展)开发全攻略 http://blog.haoji ...

如何开发YUI3的扩展

如何开发YUI3的扩展相关推荐

最新文章

热门文章