`

YUI 3.x的代码重用方法

yui 
阅读更多
转载: http://hikejun.com/blog/2009/05/19/yui-3-x%E7%9A%84%E4%BB%A3%E7%A0%81%E9%87%8D%E7%94%A8%E6%96%B9%E6%B3%95/


YUI 3.x的代码重用方法




面向对象的代码设计,本质上是追求代码的重用率。YUI 3中提供了不少令人惊喜的方法,在开发都是非常有用的。
Y.mix方法
Y.merge, Y.aggregate和Y.extend都用到Y.mix方法,所以它是一个基础方法(基础意味着参数较多,用法灵活不好记住)。格式:
Y.mix(r, s, ov, wl, mode, merge);
其中参数mode:
default(0): object to object
1: prototype to prototype (old augment)
2: prototype to prototype and object props (new augment)
3: prototype to object
4: object to prototype
ov – 属性重复是否覆盖。默认不覆盖。
wl – 属性白名单,数组形式。注:mix方法用的形式跟augment方法用的形式不同。
感觉下面这行跟Y.augment(fun1, fun2)的作用相同:
Y.mix(fun1, fun2, 0, null, 1);
将fun1的prototype上的属性添加到obj上:
Y.mix(obj, fun1, 0, null, 3);
将obj的属性添加到fun1的prototype上:
Y.mix(fun1, obj, 0, null, 4);
Y.mix实现了相当灵活的代码重用。一个object或function可以被mix到任意地方。
Y.merge和Y.aggregate的区别
Y.merge将任意个object({…})合并成一个新的object,属性重名后者的覆盖前者的。如:
var newObj = Y.merge(obj1, obj2, obj3, …objn);
产生的新对象不是reference到旧对象的关系,所以改变obj1属性的值不会影响到newObj。
Y.aggregate实现从一个object({…})向另一个object添加属性。格式:
Y.aggregate(r, s, true, ['prop1', 'prop2']);
将对象s的属性prop1和prop2(白名单方式)添加到对象r上,重名覆盖。
Y.augment和Y.extend的区别
作用都是实现function之间方法的重用。区别是extend是实现继承(类之间有上下级关系),而augment仅仅是从一个function向另一个function添加方法和属性。
Y.extend从fun2的原型链上继承方法和属性,同时扩展新的。扩展时有重名的覆盖。
Y.extend(fun1, fun2, {…扩展fun1原型链上的方法…}, {…扩展fun1的静态方法…});
在fun1的constructor中写入,则可继承fun2自己的属性和方法:
fun1.superclass.constructor.apply(this, arguments);
Y.augment仅仅从fun2的原型链上添加方法和属性。有重名的默认跳过。
Y.augment(fun1, fun2);
重名覆盖需指定第三参数,如:
Y.augment(fun1, fun2, true);
指定白名单,只添加白名单中指定的,如:
Y.augment(fun1, fun2, true, {‘prop3′: true});
Y.bind绑定新的scope
Y.bind会返回一个新的function。格式:var newfunc = Y.bind(func, scope, arg1, arg2, …, argn);
var o1 = {
prop: 10
};
var o2 = {
prop: 20
};
var func = function(){
alert(this.prop);
};
var newfunc = Y.bind(func, o1);
newfunc(); //alert 10
var newfunc = Y.bind(func, o2);
newfunc(); //alert 20
Y.clone克隆方法
上面介绍的Y.merge可以实现简单的克隆一个object,Y.bind可以克隆一个function。
Y.clone方法的格式:var newObj = Y.clone(o, safe, f, c, owner);
o – 要克隆的object或function
safe – (通过看源码,没搞明白,留待以后解决了)
f – 会传给回调方法key和value,通过return false;可以阻止copy,从而实现克隆过程中对一些属性的过滤
c – 指定f执行的scope
owner – 克隆function时,指定的上下文对象
Y.Base.build方法
文档中是这样说的:从主方法(类),和一组扩展方法(类)中创建一个新的构造方法(类)。
YUI 3.x的overlay组件就是一个典型的例子,非常精简,只有两行。可见YUI 3的代码重用效率很高。
Y.Overlay = Y.Base.build(Y.Widget, [Y.WidgetPosition, Y.WidgetStack, Y.WidgetPositionExt, Y.WidgetStdMod]);
Y.Overlay.NAME = “overlay”;
分享到:
评论

相关推荐

    Yahoo.Yui.Compressor.dll

    Yahoo.Yui.Compressor.dll文件... Yahoo.Yui.Compressor.dll控件常规安装方法(仅供参考): 一、如果在运行某软件或编译程序时提示缺少、找不到Yahoo.Yui.Compressor.dll等类似提示,您可将从脚本之家下载来的Yahoo.

    基于java的开发源码-JSCSS压缩工具 YUI Compressor.zip

    基于java的开发源码-JSCSS压缩工具 YUI Compressor.zip 基于java的开发源码-JSCSS压缩工具 YUI Compressor.zip 基于java的开发源码-JSCSS压缩工具 YUI Compressor.zip 基于java的开发源码-JSCSS压缩工具 YUI ...

    yuicompressor.jar

    通过Ant构建脚本的灵活配置,我们可以轻松地将yuicompressor.jar集成到持续集成和部署流程中,确保每次发布的代码都经过优化,从而提升用户访问体验。在实际项目中,充分利用yuicompressor.jar和其他相关工具,是...

    yuicompressor.zip

    3. **错误处理**:yuicompressor在处理有语法错误的源文件时,可能无法正确压缩或报错,因此在压缩前应确保代码的正确性。 总结,yuicompressor作为一款经典的前端资源压缩工具,因其高效、稳定和易用性,至今仍被...

    JS与css 压缩工具 yuicompressor.zip

    3. **运行命令行**:打开终端或命令提示符,使用`java -jar yuicompressor-x.x.x.jar input.js -o output.js`命令进行压缩,其中`yuicompressor-x.x.x.jar`是下载的jar文件,`input.js`是要压缩的JS文件,`output.js...

    yui.rar 例子

    总结来说,“yui.rar 例子”为我们揭示了YUI在实际项目中的应用,从简单的布局到模块化的代码组织,再到丰富的组件库和强大的调试工具,都体现了YUI的强大功能和易用性。学习并掌握YUI,不仅可以提高开发效率,还能...

    JSCSS压缩工具 YUI Compressor.7z

    6. **跨平台**:YUI Compressor 是用Java编写的,可以在任何安装了Java运行环境的平台上运行,包括Windows、Mac OS X 和 Linux。 ### 使用 YUI Compressor 要使用 YUI Compressor,你需要先下载压缩包中的工具,...

    yui3-master.zip

    在“yui3-master.zip”中,我们可以看到不同模块的源代码文件,如“build”目录下的“node”, “event”, “dom”等,这些都是YUI3的核心模块。 2. **事件系统** YUI3的事件系统是其强大功能之一,它允许开发者...

    基于Java的源码-JSCSS压缩工具 YUI Compressor.zip

    3. **错误检测**:在压缩过程中,YUI Compressor可以检查JavaScript代码的语法错误,确保压缩后的代码仍能正常工作。 4. **可配置选项**:用户可以通过命令行参数或配置文件自定义压缩行为,例如是否保留注释、是否...

    Packt.Yahoo.User.Interface.2.x.Cookbook

    最后,书籍可能还会涉及测试和调试YUI应用的方法,如使用YUI Logger和Profiler进行日志记录和性能分析,以及如何编写单元测试确保代码质量。 通过《Yahoo User Interface 2.x Cookbook》,开发者不仅可以掌握YUI 2....

    基于java的JSCSS压缩工具 YUI Compressor.zip

    3. **混淆JavaScript变量名**:在保持代码功能不变的前提下,YUI Compressor还可以将JavaScript中的变量名替换为更短的形式,进一步减小文件大小。 4. **命令行接口**:YUI Compressor提供了命令行工具,允许开发者...

    yuicompressor-2.4.8.jar

    《yuicompressor-2.4.8.jar:前端优化与代码压缩的艺术》 在Web开发领域,优化前端性能是一项至关重要的任务,而yuicompressor-2.4.8.jar正是这样一款强大的工具,专为JavaScript代码压缩而设计,助力开发者实现...

    yui的扩展ext.rar

    EXT的插件机制和MVC模式让代码组织更加清晰,提高了代码的可维护性和复用性。 总结,EXT作为YUI的重要扩展,为前端开发者提供了强大的UI设计工具和Ajax应用支持。通过深入理解和熟练掌握EXT,我们可以构建出具有...

    YUI js方法使用列子

    它通过`yui.yahooapis.com`的CDN服务提供,也可以下载到本地使用。YUI主要由以下几个部分组成: 1. **Core(核心)**:这是YUI的基础,包含了类系统、事件基础、Dom操作和I/O等基本功能。 2. **DOM(文档对象模型...

    基于Java的JSCSS压缩工具 YUI Compressor.zip

    本篇文章将详细介绍YUI Compressor的功能、使用方法及其在优化前端资源中的应用。 YUI Compressor的主要功能是将JavaScript和CSS代码进行压缩,通过删除不必要的空格、换行符以及简化注释,来减小文件大小,从而...

    java源码:JSCSS压缩工具 YUI Compressor.zip

    6. **跨平台**:作为Java应用程序,YUI Compressor可以在任何安装了Java运行环境的平台上运行,包括Windows、Linux和Mac OS X等。 7. **社区支持**:由于开源,YUI Compressor拥有活跃的开发者社区,不断有新的特性...

    YUI.rar_compressor_js 混淆_lienae_yui

    这个名为“YUI.rar_compressor_js 混淆_lienae_yui”的压缩包包含了与YUI Compressor相关的各种组件和库,主要目的是为了实现服务器端的代码压缩和混淆。 **JavaScript和CSS压缩** 是优化网页加载速度的重要手段。...

Global site tag (gtag.js) - Google Analytics