`
decentway
  • 浏览: 160333 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

YUI3:plugin

阅读更多

插件让你可以无侵入地为宿主对象(host object)添加功能。宿主衍生自Base类。node、widget等对象都是宿主对象。我们可以继承Plugin.Base类创建插件类。但是这也不是必须的,可以通过其他方法创建插件类。

 

插件类用来向组件实例中添加小块功/特性,不需要将这些功能/特性整合进组件类中,组件类甚至可以完全对这些功能特性一无所知。这样,我们就可以在组件实例层级使用这些功能/特性,避免为实现某些功能特性而把而组件类构建得很大,或者为了实现不同的功能组合构建多个不同的组件类。

引入YUI种子文件和配置YUI实例就不累述了,详见 YUI 3: YUI 全局对象

 

创建插件

以下内容是关于如何创建和使用插件类的,包含如下部分:

  • 简单的插件
  • 复杂的插件
    • 扩展Plugin.Base类
    • 插件监听器

简单的插件

对于简单的插件类,如果它们没有自己的事件和属性,不通过监听宿主对象的事件来修改宿主对象的默认行为,不重写宿主对象的方法的话,插件类可以只是简单的原生javascript类。

插件类唯一必须的是一个用作名字空间的静态属性“NS”。该静态属性的值用作从宿主实例上访问插件实例。也就是说,一旦插件被 “插到”宿主实例上后,可以通过hostObj.namespace得到plugin实例的引用。

当插件被“插到”一个宿主实例上后,插件的实例被创建,一个对宿主实例的引用被添加到传入插件构造器的配置对象上。这样,插件实例可以引用宿主实例。(当一个插件被从宿主实例上“拔出”后,该插件实例被销毁。)
以下是一个简单的插件类:

//这个AnchorPlugin插件被设计成Node实例的插件 (宿主是Node实例)
function AnchorPlugin(config) {
    // 存放宿主实例(Node实例)的引用,以便插件的方法使用。
    this._node = config.host;
}

// 被-插入Node实例后,在Node实例的"anchors"属性上能访问到插件
AnchorPlugin.NS = "anchors"

AnchorPlugin.prototype = {
    disable: function() {
        var node = this._node;
        var anchors = node.queryAll("a");
        anchors.addClass("disabled");
        anchors.setAttribute("disabled", true);
    }
};

 下面代码展示在Node对象上插入“AnchorPlugin”插件:

var container = Y.one("div.actions");
container.plug(AnchorPlugin);

 通过NS属性的值,可以在Node实例上访问到插件实例:

 

container.anchor.disable();

 

 

高级插件类

上述的简单插件类能满足简单功能/特性。但是,当你想在插件类中封装更复杂的功能/特性时,对attributes和events的支持就派上用场了。对于许多插件而言,你将需要改变宿主实例的默认行为(比如:一个Animation 插件可能需要改变widget类的默认show/hide行为)。

对于这样功能复杂的插件,你应该通过扩展Plugin.Base类来构建它。

插件类是Base的子类,因此,它也支持attribute、生命周期方法、自定义事件。另外,我们还可以在插件类中监听响应宿主实例触发的事件,或者在宿主实例某方法执行之前,注入插件自定义的逻辑代码(基于YUI3的AOP基础结构)。Plugin.Base类还在它的“host”属性中存放对宿主实例的引用,可以在插件实现中通过this.get(“host”)访问到宿主实例。

扩展Plugin.Base

你可以像扩展Base类一样扩展Plugin.Base类。需要注意的是扩展Plugin.Base类时,宿主实例被自动设置为插件类的“host”属性的值。而在简单的插件类中需要手动地通过构造器的配置对象把宿主实例设置成插件类的属性值,这样才能在插件类中访问到宿主实例。

高级插件类的结构和其他扩展自Base类的类是一样的。只是多了一个NS静态属性。 (see the Basedocumentation for details about NAME and ATTRS).

// A plugin class designed to animate Widget's show and hide methods.
function WidgetAnimPlugin(config) {
    WidgetAnimPlugin.superclass.constructor.apply(this, arguments);
}

// Define Static properties NAME (to identify the class) and NS (to identify the namespace)
WidgetAnimPlugin.NAME = 'widgetAnimPlugin';
WidgetAnimPlugin.NS = 'fx';

// Attribute definitions for the plugin
WidgetAnimPlugin.ATTRS = {

    animHidden : {
        ...
    },

    animVisible: {
        ...
    }
};

// Extend Plugin.Base
Y.extend(WidgetAnimPlugin, Y.Plugin.Base, {

    // Add any required prototype methods

});

 

Plugin的监听器

扩展Plugin.Base类最大的好处就是可以通过Plugin.Base类提供的onHostEvent和afterHostEvent方法来监听宿主实例触发的事件,还可以通过beforeHostMethod和afterHostMethod方法来改变宿主实例的方法。

通过以上由Plugin.Base类提供的方法来改变宿主实例的默认方法,而不是通过修改宿主类来改变宿主实例的默认方法的好处是:通过“插入”方式做了修改的方法在“拔出”以后,会被还原。这很重要,插件被从宿主实例身上“拔出”后,应该被完全地销毁。

事件

正如上述所说,衍生自Plugin.Base类的插件类,可以监听并响应宿主实例触发的事件。

比如,当wideget被渲染的时候,他们都会触发“render”事件。你的插件类可能需要知道这个“render”事件是什么时候发生的,这样它才可以在宿主实例渲染的HTML代码中插入一些自定义的HTML代码。可以使用afterHostEvent方法实现:

 

// 一个插件类,设计成将widget的show/hide方法改成动画。
function WidgetAnimPlugin(config) {
    //...
}

WidgetAnimPlugin.NAME = 'widgetAnimPlugin';
WidgetAnimPlugin.NS = 'fx';

WidgetAnimPlugin.ATTRS = {

    animHidden : {
        //...
    },

    animVisible: {
        //...
    }
};

// 扩展Plugin.Base,重载默认方法_uiSetVisible。该方法原被用作改变显示状态。
Y.extend(WidgetAnimPlugin, Y.Plugin.Base, {

    initializer : function(config) {

        // 用自定义动画方法重载Widget的_uiSetVisible方法。
        this.beforeHostMethod("_uiSetVisible", this._uiAnimSetVisible);
    },

    _uiAnimSetVisible : function(show) {
        // hide/show.用为插件配置好的动画实例,把show/hide方法改成动画,替换原来改变显示状态的方式。
        if (this.get("host").get("rendered")) {
            if (show) {
                this.get("animHidden").stop();
                this.get("animVisible").run();
            } else {
                this.get("animVisible").stop();
                this.get("animHidden").run();
            }

            // 阻止默认方法执行。
            return new Y.Do.Prevent();
        }
    }
});

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    yuicompressor-maven-plugin

    **yuicompressor-maven-plugin详解** `yuicompressor-maven-plugin`是一款强大的Maven插件,主要用于优化前端资源,特别是JavaScript和CSS文件。这个插件是基于YUI Compressor,一个由Yahoo开发的开源工具,它能...

    eclipse yuicompressor-maven-plugin

    "eclipse yuicompressor-maven-plugin"是Maven生态系统中的一个插件,专门用于这个目的。下面将详细阐述这个插件的功能、用法以及它在Maven项目中的应用。 ### 1. Maven简介 Maven是一个强大的项目管理和综合工具,...

    yuicompressor-maven-plugin, 用于压缩 (Minify/Ofuscate/Aggregate) Javascript文件和使用 YUI 压缩器的CSS文件的Maven 插件.zip

    yuicompressor-maven-plugin, 用于压缩 (Minify/Ofuscate/Aggregate) Javascript文件和使用 YUI 压缩器的CSS文件的Maven 插件 [[Flattr this git repo] ( http://api.flattr.com/button/flattr-badge-large.png)]...

    struts2 yahoo yui ajax plugin

    标题中的"struts2 yahoo yui ajax plugin"指的是一个特定的插件,这个插件将Yahoo YUI库与Struts2框架整合,以支持使用Ajax技术进行异步数据交互。这个插件允许开发者利用YUI的强大的JavaScript功能来增强Struts2...

    maven打包使用yui压缩css和js文件

    在Maven中实现这个功能,我们需要借助maven-assembly-plugin或者maven-war-plugin,但更常见的是使用maven-resources-plugin和maven-compiler-plugin配合yuicompressor-maven-plugin。以下是一个详细的步骤说明: 1...

    maven+yui压缩js,css文件

    在给定的部分内容中,可以看到一个`<plugin>`标签,它定义了`yuicompressor-maven-plugin`插件的配置。具体配置包括: - **GroupId**: `net.alchim31.maven` - **ArtifactId**: `yuicompressor-maven-plugin` - **...

    mvn 配置 yui 自动 打包

    在这个配置中,我们指定了`minify-maven-plugin`插件,它集成了YUI Compressor。`<jsSourceDir>`和`<cssSourceDir>`分别定义了JavaScript和CSS文件的源目录,`<jsSourceFiles>`和`<cssSourceFiles>`列出了需要处理的...

    Spket IDE Plugin v1.6.18.zip

    它包含了对JavaScript核心库、AJAX库(如jQuery、Dojo、YUI等)以及XML/JSON的支持。当开发者在编写代码时,Spket能自动提示可能的函数、变量、对象和属性,极大地减少了手动查找和输入的时间,提高了编码速度。 ...

    jekyll-minifier:使用yui-compressor和htmlcompressor的Jekyll HTMLXMLCSSJS Minifier

    这是由于先前的压缩器(jekyll-press)不兼容CSS3而创建的,这让我皱了皱眉。 注意:这是我正在学习的第一个宝石,因此非常感谢您提供反馈。 **现在,仅在环境中设置了JEKYLL_ENV =“ production”时,此minifier...

    org.apache.servicemix.bundles.spring-jdbc-4.0.2.RELEASE_1.zip

    Minify Maven Plugin可以自动处理这些任务,它支持YUI Compressor和Google Closure Compiler等工具进行压缩,能有效减小文件体积,提升网站性能。 总结起来,这个压缩包包含了Apache ServiceMix中的Spring JDBC模块...

    elasticsearch-plugin-suggest-0.20.2-0.3.jar

    jar包,官方版本,自测可用

    java开发中压缩js,css文件

    例如,Maven的`maven-resources-plugin`和`maven-war-plugin`可以配合使用`yuicompressor-maven-plugin`来完成js和css的压缩。在Gradle中,我们可以使用`apply plugin: '...

    spket-1.6.22-plugin-for-eclipse-crack破解

    spket最新版本1.6.22破解过的。没破解版本个人也可以免费使用,只是不能修改设置。 参考了网上的破解方法,把成功的版本...ria开发必备,可以配置Extjs, YUI, jQuery, dojo等等常用javascript库的自动提示和完成功能。

    行业分类-外包设计-基于Maven的前台资源打包并进行版本管理与使用的方法的说明分析.rar

    Maven还可以通过插件如`yui-compressor-maven-plugin`或`uglifyjs-maven-plugin`来对前端资源进行压缩,减少文件大小,提高页面加载速度。 9. **多环境配置**: 使用Maven的profile功能,可以为不同环境(如开发...

    Webpack使用培训.pptx

    在前端构建领域,Webpack 逐步取代了早期的Ant + YUI tool、Grunt和Gulp,成为模块化开发的首选方案。 为什么需要Webpack这样的构建工具呢?主要在于以下几个方面: 1. **转换ES6语法**:现代JavaScript语法(如...

    google-app-engine-jappstart:Google App Engine的Java框架

    墓碑整合JRebel支持本地开发控制台支持( ) Maven支持通过yuicompressor-maven-plugin进行CSS / JS压缩使用maven-gae-plugin 远程API /批量加载程序支持Sitemesh集成春天3 JPA支持JSON / AJAX集成(杰克逊) JSR-...

    JeeSite开发说明文档

    - **JavaScript/CSS压缩**:YUI Compressor 2.4 - **前端验证**:jQuery Validation Plugin 1.11 - **ORM框架**:Hibernate 4.1 - **连接池**:Alibaba Druid 1.0 - **Bean验证**:Hibernate Validation 5.0 - **...

    Webapp Architecture

    - **jQuery debounce doTimeout plugin**:另一个实现debounce功能的jQuery插件。 - **LocalStorage**:本地存储技术,允许网站在用户的浏览器上保存数据。 - **Store.js**:封装了浏览器localStorage功能的工具库...

    eclipse 常用插件集合工具包(有的只能在linux下使用)

    3. **Tomcat Plugin**:此插件是Eclipse与Apache Tomcat服务器的桥梁,使得在Eclipse内管理和部署Web应用变得简单。它支持启动、停止、重启Tomcat服务器,以及发布、更新和调试应用,简化了开发流程中的部署环节。 ...

Global site tag (gtag.js) - Google Analytics