Extending Singletons with private scope in Ext 4? - javascript

In the course of an ExtJS 3 to 4 migration, I have run into a snag I'm wondering if anyone has tackled: namely, how can I extend a singleton with private scope?
In Ext3 I would do this using Extend:
Ext.namespace("My.New.Obj");
My.New.Obj = (function() {
var privateVar = 3;
function privateFunc() { alert(privateVar); }
var extendedObj = Ext.extend(My.Other.Obj, {
newFunc: function() { alert(this.publicVar+privateVar); },
publicVar: 4
});
return new extendedObj();
})();
As best I understand, I would create a singleton pattern using Ext.define but I don't know how to extend the internal object.
Ext.define('My.New.Obj', function() {
var privateVar = 3;
function privateFunc() { alert(privateVar); }
var extendedObj = Ext.create('My.Old.Obj',{
newFunc: function() { alert(this.publicVar+privateVar); },
publicVar: 4
});
return extendedObj;
});
The only trouble with the above example is that I believe the super methods that were preserved in Ext.extend get overridden.
How can I extend a singleton while keeping private scope?

Ext.define('A', {
someMethod: function(){
return 'a';
}
});
Ext.define('B', (function(){
var fn = function(){
return 'b';
};
return {
extend: 'A',
someMethod: function(){
return this.callParent() + fn();
}
}
})());
console.log(new A().someMethod());
console.log(new B().someMethod());

Related

understanding revealing modular pattern

hey guys i am just trying to understand the REVEALING MODULAR PATTERN, i see the following simple depiction of the revealing modular pattern:
var myRevealingModule = (function () {
var privateCounter = 0;
function privateFunction() {
privateCounter++;
}
function publicFunction() {
publicIncrement();
}
function publicIncrement() {
privateFunction();
}
function publicGetCount(){
return privateCounter;
}
// Reveal public pointers to
// private functions and properties
return {
start: publicFunction,
increment: publicIncrement,
count: publicGetCount
};
})();
myRevealingModule.start();
now the following disadvantages are stated of the revealing moduar pattern ::
A disadvantage of this pattern is that if a private function refers to
a public function, that public function can't be overridden if a patch
is necessary. This is because the private function will continue to
refer to the private implementation and the pattern doesn't apply to
public members, only to functions.
i don't quite understand what the above para means , can somebody explain ? private function refers to the public function , did't quite get that , can somebody break it down ?
Consider:
Mod = function() {
function inc() {
return value() + 1;
}
var value = function() { return 42 }
var valuePlusOne = function() { return inc() }
return {
value: value,
valuePlusOne: valuePlusOne
}
}()
document.write(Mod.valuePlusOne()) // 43
Mod.value = function() {
return 999
}
document.write(Mod.valuePlusOne()) // still 43, not 1000
The problem is that inc uses var value from its containing scope, not the value property of the module object. When you change the module, this doesn't affect var value from the scope.
A workaround is to bind private functions to the object being returned:
Mod = function() {
var value = function() { return 42 }
var valuePlusOne = function() { return inc() }
var me = {
value: value,
valuePlusOne: valuePlusOne
}
function inc() {
return me.value() + 1;
}
return me;
}()
document.write(Mod.valuePlusOne()) // 43
Mod.value = function() {
return 999
}
document.write(Mod.valuePlusOne()) // 1000

Private-like properties in models or views of Backbone.js

Is it possible to have private properties in a model? Like the locally declared variables in a (constructor) function, not attached to this, but declared locally and visible only by whatever is defined in the (constructor)function.
Example without BB View:
function MyView(aModel){
var $internalInput = $('<input>');
this.render: function($where){
$internalInput.val(aModel.get('SomeProperty'));
$where.append($('<div class="inputWraper">').append($internalInput));
};
this.toggleReadonly: function() {
toggle $internalInputs readonly attribute
}
...
+ Code to bind input.val to some aModel property(ies) and setup events
...
}
Note that internalInput is not accessible to outside world and aModel is also not accessible (through MyView at least).
So if I want to use Backbone.View to implement the above MyView, how would i do it and keep $internalInput 'private'?
You should be able to achieve private data by passing an IIFE to extend when defining your Backbone objects, rather than just a plain object. For example:
var Thing = Backbone.Model.extend((function () {
var foo = "Private data!";
return {
bar: function () {
console.log(foo);
}
};
})());
You'd better off with
var Thing = Backbone.Model.extend(
{
constructor : function ()
{
var _value = "Private data!";
this.getValue = function ()
{
return _value;
};
this.setValue = function (value)
{
_value = value;
};
}
});
Javascript is fun!
var Thing = (function () {
var number_of_things = 0;
return function (options) {
var value = "Private data!";
return new ( Backbone.Model.extend({
constructor: function constructor () {
number_of_things += 1;
},
getValue: function getValue () {
return value;
}
}) )();
};
}());
I'm a little concerned by the fact that every instance of this "Thing" is also a subclass, in the OOP lingo.
In the context of using Broserify.js with Backbone (and really any above medium project) I found the following way to have private vars and functions:
myView.js
'use strict';
var config = require('../config.js'),
private_var = 'private variable',
my_private_fn = function() {
...
};
module.exports = Backbone.Model.extend({
initialize: function() {
this.my_public = 'public variable');
console.log('This is my' + this.my_public);
console.log('This is my' + my_private);
},
});
The idea to take here is go with Browserify :P
The simplest way is the following:
...
initialize:function(properites){
// Init the logic with private and public methods/variable
this.logic.initFirst(this);
// Use public methods
this.logic.doSomething();
},
logic:{
initFirst:function(modelOrView){
// Do not continue if already initiated
if( this.instance !== undefined ) return;
// Write all logic here
this.instance = (function(logic, modelOrView){
// Private variables
var private = "private";
// Public methods
logic.doSomething = function(){
console.log(private, modelOrView);
};
// Private methods
function hidden(){
}
}(this, modelOrView));
}
},

Javascript accessing nested closure public function from string without using 'this'

I have tree of closures: 'A' containing private closures 'pancake' and 'B'. There is a situation when I need to call from inside of 'B' public function, the private closure of 'A' - 'pancake' and retrieve its public properity. How can I do it? Oh, and this is useless, as this is not an object.
My code:
var A = (function() {
var pancake = (function() {
return {
numeric: 142
};
})(A);
var B = (function() {
return {
init: function(name) {
console.log(pancake.numeric);
//How to access the same element using 'name' variable?
}
};
})(A);
return {
init: function() {
B.init('pancake');
}
};
})();
A.init();
JSFiddle might show more details: http://jsfiddle.net/yALkY/3/
Thanks in advance
Though I have to aggree with jfriend00 that the given code is over-complicating things, one solution would be to introduce some map to store references in, like:
var A = (function() {
var pancake = (function() {
return {
numeric: 142
};
})();
var B = (function() {
return {
init: function(name) {
console.log(privateVars[name].numeric);
//How to access the same element using 'name' variable?
}
};
})();
// added:
var privateVars = {
pancake: pancake
};
return {
init: function() {
B.init('pancake');
}
};
})();
A.init();
The drawback, of course, is that you'll have to maintain that list manually.

Unable to access members in javascript

I'm defining a class in javascript as
Class = (function() {
var privateFunction = function() { return "private"; }
return { publicFunction: function() { return privateFunction("public"); } };
)();
Here user can access Class.publicFunction, but not Class.privateFunction.
Now I want to provide the user an interface to extend this Class. So I added a public function extend.
Class = (function() {
var privateFunction = function() { return "private"; }
return {
publicFunction: function() { return privateFunction("public"); }
extend: function(source) {
dest=this;
for(var prop in source)dest[prop] = source[prop]
}
};
)();
My aim was to use the extend attribute as follows
Class.extend({
someFunc: function() { return privateFunction("hooray"); }
});
and access it as
Class.someFunc()
The problem I face is the call to the privateFunction() in the extended function someFunc is not available for it. I can understand that it is the problem of the scope, but, is there anyway to solve my need.
While it's a horrible violation of encapsulation, you could do what you describe by passing the function you want to add as a string and evaling it in extend:
Class.extend({
someFunc: 'function() { return privateFunction("hooray"); }'
});
and in the extend function, change
for(var prop in source)dest[prop] = source[prop]
to
for(var prop in source)dest[prop] = eval(source[prop])
this.before = function(){return "public"};
this.publicFucntion = function(){privateFunction(this.before());}
Then just override this.before.

How to make a JavaScript singleton with a constructor without using return?

I currently know two ways to construct singletons in JavaScript. First:
var singleton = {
publicVariable: "I'm public",
publicMethod: function() {}
};
It is perfect except that it does not have a constructor where I could run initialization code.
Second:
(function() {
var privateVariable = "I'm private";
var privateFunction = function() {}
return {
publicVariable: "I'm public",
publicMethod: function () {}
}
})();
The first version does not have private properties nor does it have a constructor, but it is faster and simpler. The second version is more complex, ugly, but has a constructor and private properties.
I'm not in a need for private properties, I just want to have a constructor. Is there something I am missing or are the two approaches above the only ones I've got?
function Singleton() {
if ( Singleton.instance )
return Singleton.instance;
Singleton.instance = this;
this.prop1 = 5;
this.method = function() {};
}​
Here is my solution with closures:
function Singleton() {
Singleton.getInstance = (function(_this) {
return function() { return _this; };
})(this);
}
Test:
var foo = new Singleton();
var bar = Singleton.getInstance();
foo === bar; // true
If you are just looking for a place to initialise your singleton, how about this?
var singleton = {
'pubvar': null,
'init': function() {
this.pubvar = 'I am public!';
return this;
}
}.init();
console.assert(singleton.pubvar === 'I am public!');
Simple and elegant.
var singleton = new function() { // <<----Notice the new here
//constructorcode....
this.publicproperty ="blabla";
}
This is basically the same as creating a function, then instantly assiging a new instace of it to the variable singleton. Like var singleton = new SingletonObject();
I highly advice against using singletons this way in javscript though because of the execution order is based on where in the file you place the object and not on your own logic.
What about this?
var Singleton = (function() {
var instance;
// this is actual constructor with params
return function(cfg) {
if (typeof instance == 'undefined') {
instance = this;
this.cfg = cfg;
}
return instance;
};
})();
var a = new Singleton('a');
var b = new Singleton('b');
//a === b; <-- true
//a.cfg <-- 'a'
//b.cfg <-- 'a'
I make it an actual Singleton with static functions and no this like so:
class S {
//"constructor"
static init() {
//Note: Since it's a singleton, there's no "this" instance.
//Instead, you store variables directly on the class.
S.myVar = 7;
}
static myOtherFunc() {
alert(S.myVar);
}
}
//Immediately call init() to make it the "constructor".
//Alternatively, you can call init() elsewhere if you'd
//like to initialize it at a particular time.
S.init();
//Later:
S.myOtherFunc();
S.myVar = 10;

Categories