I'm trying to create something similar to d3(ex: d3.select()) but much more simple and I need to have a new instance each time I call the namespace function. Is this possible and/or am I approaching this wrong?
var dom = new function () {
var Element = null;
this.select = function (query) {
Element = document.querySelector(query);
return this;
};
this.append = function (elem) {
Element.append(elem);
return this;
};
};
Desired use
var bodyelement = dom.select("body");
var p = dom.select("p");
You need to run some code each time you use the dom object. So if the dom object was a function, you could call it to get a new instance.
var dom = function () {
var Element = null;
var newdom = {};
newdom.select = function (query) {
Element = document.querySelector(query);
return this;
};
newdom.append = function (elem) {
Element.append(elem);
return this;
};
return newdom;
};
console.log(dom() === dom(), "(false means the instances are different)");
var dom = new function () {
var Element = null;
this.select = function (query) {
Element = document.querySelector(query);
return this;
};
this.append = function (elem) {
Element.append(elem);
return this;
};
// add a way of accessing the resulting Element
this.element = function() { return Element; }
};
console.log(dom.select("body").element());
console.log(dom.select("p").element());
<p>blah</p>
Related
We can define a "class" In JavaScript by function, and get its "instance" by the "new" command. Just as follows:
function class_a() {
this.tell = function () {
console.log("This is a_class");
}
}
function class_b() {
this.tell = function () {
console.log("This is b_class");
}
}
var instance_a1 = new class_a();
var instance_b1 = new class_b();
instance_a1.tell();
instance_b1.tell();
My question is: Is there a way to generate these "classes" by the new command from another class? Just like this:
function typex(class_name)
{
...
}
var myclass_a = new typex("class_a");
var myclass_b = new typex("class_b");
var instance_a1 = new myclass_a();
var instance_b1 = new myclass_b();
instance_a1.tell();
instance_b1.tell();
Return the classes from typex but just as reference to the function itself (no invoking inside typex).
Option A: Private classes
function typex(class_name)
{
function class_a() {
this.tell = function () {
console.log("This is a_class");
}
}
function class_b() {
this.tell = function () {
console.log("This is b_class");
}
}
if (class_name === "class_a")
return class_a;
if (class_name === "class_b")
return class_b;
throw new Error("unrecognized classname");
}
Option B: Public classes
function class_a() {
this.tell = function () {
console.log("This is a_class");
}
}
function class_b() {
this.tell = function () {
console.log("This is b_class");
}
}
function typex(class_name)
{
if (class_name === "class_a")
return class_a;
if (class_name === "class_b")
return class_b;
throw new Error("unrecognized classname");
}
Then running the code:
var myclass_a = new typex("class_a");
var myclass_b = new typex("class_b");
var instance_a1 = new myclass_a();
var instance_b1 = new myclass_b();
instance_a1.tell();
instance_b1.tell();
Creates for both the output
This is a_class
This is b_class
Firstly, I end up NOT using the keyword new when calling typex(...), bc I don't want whatever new typex(...) evalutes to to delegate its failed property lookups to typex.prototype.
Secondly, I capitalized MyClass_A and MyClass_B to indicate that they should be paired with the keyword new.
You could just have typex return a constructor function if that is the extent of your use case of these classes/instances.
function typex(class_name) {
var classes = {};
classes.class_a = function() {
this.tell = function() {
console.log('This is a_class');
};
};
classes.class_b = function() {
this.tell = function() {
console.log('This is b_class');
};
};
return classes[class_name];
}
var MyClass_A = typex("class_a");
var MyClass_B = typex("class_b");
var instance_a1 = new MyClass_A();
var instance_b1 = new MyClass_B();
instance_a1.tell(); // "This is class_a"
instance_b1.tell(); // "This is class_b"
instance_a1.constructor === instance_b1.constructor; // false (which is good)
Here's a heavily refactored version that reuses as much code and reduces memory usage as possible.
function typex(class_name) {
var ClassConstructor = function() {
this.class_name = class_name;
};
ClassConstructor.prototype.tell = function() {
console.log('This is ' + this.class_name);
};
return ClassConstructor;
}
var MyClass_A = typex("class_a");
var MyClass_B = typex("class_b");
var instance_a1 = new MyClass_A();
var instance_b1 = new MyClass_B();
instance_a1.tell(); // "This is class_a"
instance_b1.tell(); // "This is class_b"
instance_a1.constructor === instance_b1.constructor; // false (which is good)
I'm studying Javascript and learning how to use call. I created this script and I don't know why I can't have access to this variable Time.
var MyObject;
(function(MyObject) {
var Runner = (function() {
function Runner(time) {
this.time = time;
}
var myFunctionArray = [];
Runner.prototype.execute = function() {
myFunctionArray[0]();
}
Runner.prototype.newTest = function(index, execute) {
var test = function() {
return execute.call(this);
}
myFunctionArray.push(test);
}
return Runner;
})();
MyObject.Runner = Runner;
})(MyObject || (MyObject = {});
var myNewObj = new MyObject.Runner(1000); myNewObj.newTest('1', function() {
console.log(this.time) //output: undefined
});
So how can I get time value inside newTest function?
Issue is in newTest function
Runner.prototype.newTest = function(index, execute) {
var test = function() {
return execute.call(this);
}
myFunctionArray.push(test);
}
Here this is pointing to test and not Runner. You will have to save context in a variable and then set it in call.
Runner.prototype.newTest = function(index, execute) {
var self = this;
var test = function() {
return execute.call(self);
}
myFunctionArray.push(test);
}
.call + self
var MyObject;
(function(MyObject) {
var Runner = (function() {
function Runner(time) {
this.time = time;
}
var myFunctionArray = [];
Runner.prototype.execute = function() {
myFunctionArray[0]();
}
Runner.prototype.newTest = function(index, execute) {
var self = this;
var test = function() {
return execute.call(self);
}
myFunctionArray.push(test);
}
return Runner;
})();
MyObject.Runner = Runner;
})(MyObject || (MyObject = {}));
var myNewObj = new MyObject.Runner(1000);
myNewObj.newTest('1', function() {
console.log(this, this.time) //output: undefined
});
myNewObj.execute()
.bind
As commented, you can even use .bind
var MyObject;
(function(MyObject) {
var Runner = (function() {
function Runner(time) {
this.time = time;
}
var myFunctionArray = [];
Runner.prototype.execute = function() {
myFunctionArray[0]();
}
Runner.prototype.newTest = function(index, execute) {
myFunctionArray.push(execute.bind(this));
}
return Runner;
})();
MyObject.Runner = Runner;
})(MyObject || (MyObject = {}));
var myNewObj = new MyObject.Runner(1000);
myNewObj.newTest('1', function() {
console.log(this, this.time) //output: undefined
});
myNewObj.execute()
When you declare your Runner function, you've actually declared a function that takes no arguments that then itself declares a function called Runner that takes one argument.
Actually In this code snippet :
Runner.prototype.newTest = function(index, execute) {
var test = function() {
return execute.call(this);
}
myFunctionArray.push(test);
}
this will reference to test variable (as per constructor invocation pattern)
So, to pass right variable cache the value of this in another variable and then pass that to function.
I would like to create a jQuery type chaining on an element created using javascript's document.createElement(). The following code is generating an error "Cannot call method 'appendChild' of undefined" whenever I try to run my "append" method on a parent object that was defined by my function. Any help or suggestions are appreciated.
this.el = (function () {
function _el() {
var self = this,
ele;
this.add = function (tag) {
ele = document.createElement(tag);
return this;
},
this.byId = function (id) {
ele = document.getElementById(id);
return this;
},
this.byClass = function (cl) {
ele = document.getElementsByClassName(cl);
return this;
},
this.id = function (name) {
ele.id = name;
return this;
},
this.cl = function (name) {
ele.className = name;
return this;
},
this.css = function (style) {
_this.setCSS(ele, style);
return this;
},
this.html = function (str) {
ele.innerHTML = str;
return this;
},
this.append = function (parent) {
if (parent.nodeType === 1) {
parent.appendChild(ele);
}
console.log(ele);
console.log(ele.nodeType);
return this;
};
return this;
}
return new _el();
}());
This is how I use the function in my code. The first use works while the second one does not. It has something to do with the type of object being returned by my function but I am not sure how to correct.
var dialog = hlp.el.add("div").cl("alphaDialog").append(document.body);
var top = hlp.el.add("div").append(dialog);
this.append function returns this object which holds _ele js object. We have to return our HTML element ele. In this.append we return ele;
this.el = (function () {
function _el() {
var self = this,
ele;
this.add = function (tag) {
ele = document.createElement(tag);
return this;
},
this.byId = function (id) {
ele = document.getElementById(id);
return this;
},
this.byClass = function (cl) {
ele = document.getElementsByClassName(cl);
return this;
},
this.id = function (name) {
ele.id = name;
return this;
},
this.cl = function (name) {
ele.className = name;
return this;
},
this.css = function (style) {
_this.setCSS(ele, style);
return this;
},
this.html = function (str) {
ele.innerHTML = str;
return this;
},
this.append = function (parent) {
if (parent.nodeType === 1) {
parent.appendChild(ele);
}
console.log(ele);
console.log(ele.nodeType);
//return this; // this holds javascript object, not element
return ele; // return our ele variable which holds the element
// this.append() is the end of the chain
};
return this;
}
return new _el();
}());
I created this simplified version of some code I'm dealing with. I need to figure out how to pass a reference of an instantiated object to another object that has been created by this object. I can't get the reference to the main object "self" to be passed to the second object and actually be able to call a function on it. Hopefully the code will make it more clear:
var app = app || {};
(function (m, $, undefined) {
m.Counter = function () {
var self = this;
var pub = {};
pub.total = 0;
pub.add = function () {
pub.total++;
};
pub.subtract = function () {
pub.total--;
};
pub.status = function () {
console.log(pub.total);
};
pub.spawn = function () {
var sp = new app.modules.Obj(self);
return sp;
};
return pub;
};
m.Obj = function (counter) {
var pub = {};
pub.add = function () {
counter.add();
};
return pub;
};
}(app.modules = app.modules || {}));
var c = new app.modules.Counter();
c.add();
c.add();
c.add();
c.status();
d = c.spawn();
d.add();
c.status();
What I would want to have happen is that d.add() would increment the total of c. So the output would be 3 for the first c.status() call and then 4 for the output of the second c.status();
I am trying to simulate a namespace feature in Javascript.
var com = {};
com.domain = {};
com.domain.system = {};
com.domain.net = {};
com.domain.net.ip = {};
com.domain.net.ip.tcp = {};
com.domain.net.ip.udp = {};
com.domain.net.ip.ssl = {};
com.domain.util = {};
com.domain.util.timer = {};
com.domain.plugins = {};
com.domain.session = {};
com.domain.io = {};
com.domain.algorithm = {};
com.domain.debug = {};
This is the namespaces declaration. Later I will add functions to these namespaces.
This is my selector function:
For a convenient way to use namespaces, I add a function named $. This function will walk all namespaces in com. If the selected name exists, return the object.
function $ (selector) {
function digger (namespace, selector) {
for (var prop in namespace) {
if (typeof namespace[prop] == "array" || typeof namespace[prop] == "object") {
if (prop == selector) {
return namespace[prop];
}
var dig = digger(namespace[prop], selector);
if (dig != null) {
return dig;
}
} else {
if (prop == selector) {
return namespace[prop];
}
}
}
}
return digger (com, selector);
}
After that, I add a timer to namespace com.doamin.util.
com.domain.util.timer = function () {
this._handle = new InnerObj.SystemTimer(io);
return this;
};
com.domain.util.timer.prototype.expiresFromNow = function (seconds, cbHandler) {
this._handle.ExpiresFromNow (seconds, cbHandler);
};
com.domain.util.timer.prototype.wait = function (seconds, cbHandler) {
this._handle.Wait (seconds, cbHandler);
};
com.domain.util.timer.prototype.expiresAt = function (seconds, cbHandler) {
this._handle.Wait (seconds, cbHandler);
};
com.domain.util.timer.prototype.cancel = function () {
this._handle.Cancel ();
};
Usage:
1. var timer = new com.domain.util.timer (); OK
timer.expiresAt (1, {}); OK
2. var func = $("timer"); OK
var timer = new func (); OK
timer.expiresAt (1, {}); OK
But but but but but
var timer = new $("timer") (); NG
Can anyone tell me why the last new function is not working?
Try var timer = new ($("timer"))();.
Your question is not clear but I guess since $("timer") returns a function, you want a new instance of the result of $("timer") and not a new instance of $().