虽然下面的例子中利用ExtJS的，可以很容易地外推到另一框架。 我抽象和数据隐藏（和OO一般）的风扇; 没有任何人隐藏数据和成员/功能或你认为这次尝试是矫枉过正？
（注：我坚信DOM ID应该几乎从来没有被硬编码而且，虽然我使用了典型的类的公共方法的原型，你会发现原型之外下面创建一个公共职能。）
这说明是有趣http://yuiblog.com/blog/2007/06/12/module-pattern/
Ext.ns('Foo.Bar');
/**
* Foo.Bar.MainToolbar (singleton)
*/
Foo.Bar.MainToolbar = (function()
{
// Temporary, private class used to create and return an object - a singleton
var toolbarClass = Ext.extend( Ext.Container,
{
/**
* constructor (public)
*/
constructor: function( config )
{
config = config || {};
// PRIVATE MEMBER DATA ========================================
// Need IDs for animation anchors
var accountId = Ext.id( null, 'ls-accountDiv-');
var faqId = Ext.id( null, 'ls-faqDiv-');
var logoutId = Ext.id( null, 'ls-logoutDiv-');
var loginId = Ext.id( null, 'ls-loginDiv-');
var rulesId = Ext.id( null, 'ls-rulesDiv-');
var itemCls =
'color: white; cursor: pointer; font-weight: bold; ' +
'font-family:Helvetica,Arial,Verdana,Lucida Sans Unicode,Sans-serif;';
// PUBLIC METHODS *********************************************
/**
* userLogin (public) -
*/
this.userLogin = function( userName, password )
{
// Update title bar
Ext.fly(accountId).update( userName );
Ext.fly(loginId).hide(true);
Ext.fly(logoutId).show(true);
};
// PRIVATE METHODS ********************************************
/**
* handleFaqClick (private) - handler for click on FAQ
*/
var handleFaqClick = function( event )
{
var dialogMsg = '<div style="text-align: leftblah, blah</div>';
Ext.Msg.show({
title: 'FAQ',
modal: true,
msg: dialogMsg,
animEl: faqId,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.QUESTION,
minWidth: '700'
});
};
/**
* handleLogoutClick (private) - handler for click on logout
*/
var handleLogoutClick = function( event )
{
Ext.fly(accountId).update('');
Ext.fly(logoutId).hide(true);
Ext.fly(loginId).show(true);
};
/**
* handleRulesClick (private) - handler for click on RULES
*/
var handleRulesClick = function( event )
{
var dialogMsg =
'<div style="text-align: left;"><br/><b>blah, blah</div>';
Ext.Msg.show({
title: 'Rules',
modal: true,
msg: dialogMsg,
animEl: rulesId,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.INFO,
minWidth: '700'
});
};
// CONSTRUCTOR ===============================================
// Some parameters (possibly) offered by the user are ignored
config.id = Ext.id( null, 'ls-mainToolbar-');
config.layout = 'absolute';
config.layoutConfig = {};
config.height = 38;
config.width = 968;
config.items = [
{
id: Ext.id( null, 'ls-mainToolbar-'),
xtype: 'box', x: 25, y: 0, height: 36,
autoEl: { tag: 'img', src: './images/top_toolbar.png' }
},{
id: Ext.id( null, 'ls-logo-'),
xtype: 'box',
x: 70, y: 8, height: 22, width: 200,
autoEl: { style: itemCls, html: 'Foo Bar' }
},{
id: accountId,
xtype: 'box',
x: 470, y: 8, height: 22, width: 200,
autoEl: { style: itemCls + ' text-align: right;', html: ' ' }
},{
id: logoutId,
xtype: 'box', x: 730, y: 8, height: 22, width: 36,
autoEl: {style: itemCls + ' visibility: hidden;', html: 'logout'},
listeners:
{ render:
function( cmp ){
cmp.getEl().addListener('click',
handleLogoutClick.createDelegate(this))
}.createDelegate(this)
}
},{
id: loginId,
xtype: 'box', x: 730, y: 8, height: 22, width: 36,
autoEl: { style: itemCls, html: 'login' },
listeners:
{ render:
function( cmp ){
cmp.getEl().addListener('click',
Foo.Bar.LoginDialog.show.createDelegate(
Foo.Bar.LoginDialog, [Ext.emptyFn]))
}
}
},{
id: rulesId,
xtype: 'box', x: 800, y: 8, height: 22, width: 36,
autoEl: { style: itemCls, html: 'rules'},
listeners:
{ render:
function( cmp ){
cmp.getEl().addListener( 'click',
handleRulesClick.createDelegate(this) )
}.createDelegate(this)
}
},{
id: faqId,
xtype: 'box', x: 860, y: 8, height: 22, width: 26,
autoEl: { style: itemCls, html: 'faq'},
listeners:
{ render:
function( cmp ){
cmp.getEl().addListener( 'click',
handleFaqClick.createDelegate(this) )
}.createDelegate(this)
}
}];
toolbarClass.superclass.constructor.apply( this, [config] );
Foo.Bar.LoginDialog.addListener(
Foo.Bar.LoginDialog.LOGIN_SUCCESSFUL_EVENT(),
this.userLogin.createDelegate(this));
}
});
return new toolbarClass();
})();
