OOJS call other method - javascript

var Lines = function(startXCon, endXCon,startYCon, endYCon)
{
this.drawCurve = function()
{
}
this.changeCurve = function(e)
{
//how can I call drawCurve from this method
}
}
The comment in my code explains the problem. Is this possible or are all methods private?

Like this:
var Lines = function(startXCon, endXCon,startYCon, endYCon){
var self = this; // store this as a variable to use in nested function
this.drawCurve = function(){}
this.changeCurve = function(e){
self.drawCurve(); //now call this.drawCurve()
}
}

Related

js function for multiple variables

So, I have two js variables that i use a lot:
var rhpp = jQuery(this).parents('.rhp');
var rhp_id = rhpp.data("pi");
For example:
function my_function_1 (){
jQuery(document).on('click', '.button_1', function (e) {
var rhpp_1= jQuery(this).parents('.rhp');
var rhp_id_1 = rhpp_1.data("pi");
//do something
});
}
function my_function_2 (){
jQuery(document).on('click', '.button_2', function (e) {
var rhpp_2 = jQuery(this).parents('.rhp');
var rhp_id_2 = rhpp_2.data("pi");
//do something
});
}
function my_function_3 (){
jQuery(document).on('click', '.button_3', function (e) {
var rhpp_3 = jQuery(this).parents('.rhp');
var rhp_id_3 = rhpp_3.data("pi");
//do something
});
}
Because of it, i want to make this into a function that I can reuse:
function RHP_PARENT(a, b) {
var a = jQuery(this).parents('.rhp');
var b = a.data("pi");
}
Then, RHP_PARENT("rhpp", "rhp_id");
of course, it is not right. I am not too familiar with how to make a function for variables.
Could someone show me?
Thanks!
You could create a function which returns both of those values.
function getRhpParent(element) {
var rhpp = jQuery(element).parents('.rhp');
return {
rhpp: rhpp,
rhpp_id: rhpp.data("pi")
};
}
// Usage
var temp = getRhpParent(this);
var rhpp = temp.rhpp;
var rhp_id = temp.rhp_id;
You could do something like this:
function RHP_PARENT(that) {
var a = jQuery(that).parents('.rhp');
var b = a.data("pi");
return { parents: a, data: b };
}
This allows you to write:
var rhp_id_1 = RHP_PARENT(this).data;
Do you intend to access those variables outside of RHP_PARENT?
If so you should instantiate a and b outside of the function.
Do you intend to access a and b as properties of RHP_PARENT?
In which case, you may want to do the following:
var RHP_PARENT = {
'a': (function(){
jQuery(this).parents('.rhp');
})(),
'b': (function(){
this.a.data("pi");
})()
}
It's not entirely clear based on your question what your use case is, so it's difficult to formulate a single answer.
EDIT:
It seems like you updated your question, here are two viable solutions to your problem.
The following code will loop over all elements which have classes that begin with "button". This solves for the homogenous use case:
$("[class^='button']").each(function(){
$(this).click(function (e) {
var rhpp = jQuery(this).parents('.rhp');
var rhp_id = rhpp.data("pi");
//do something
});
})
The following solution solves for a more general use case and is a bit more flexible. The advantage here is that the business logic for getting rhhp and rhp_id is broken out into helper functions, allowing it to be more reusable. You may also reference other functions within the same object by using this:
var my_functions = {
get_rhhp: function(el){
return jQuery(el).parents('.rhp');
},
get_rhp_id: function(rhhp){
return rhhp.data("pi");
},
"my_function_1": function(){
jQuery(document).on('click', '.button_1', function (e) {
var rhhp = get_rhhp();
var rhp_id = get_rhp_id(rhhp);
//do something
});
},
"my_function_2": function(){
jQuery(document).on('click', '.button_2', function (e) {
var rhhp = get_rhhp();
var rhp_id = get_rhp_id(rhhp);
//do something
});
},
"my_function_3": function(){
jQuery(document).on('click', '.button_3', function (e) {
var rhhp = get_rhhp();
var rhp_id = get_rhp_id(rhhp);
//do something
});
}
}

break large public javascript functions into smaller private functions

I have JavaScript class which have huge functions which are very difficult to maintain.
The 2 public functions are called at start and then on click. I want to create private functions inside these public functions say break into into some private functions scope to these public methods.
var searchResultView;
var SearchResultView = function () {
me = this;
this.init = function () {
// huge code
}
this.Search = function () {
// huge code
}
}
jQuery(function () {
searchResultView = new SearchResultView();
searchResultView.init();
searchResultView.Search();
}
What will best way to achieve this. I tried to use below approach but i think this nested function will not work well.
var searchResultView;
function searchResultView() {
me = this;
this.init = function () {
var declareControls = function () {}
var addEvents = function () {}
var fillControls = function () {}
declareControls();
addEvents();
fillControls();
}
this.Search = function () {
var validateAndCreateCriteria = function () {
if (!validateAandGetLocation()) {
alert("invalid location");
return false;
}
if (!validateAandGetCategory()) {
alert("choose search type");
return false;
}
var validateAandGetLocation = function () {}
var validateAandGetCategory = function () {}
}
validateAndCreateCriteria();
}
}
jQuery(function () {
searchResultView = new searchResultView();
searchResultView.init();
});
If I understood correctly, you should have the functions something like this:
var foo = (function() {
var privateBar = function() { // private function
},
privatefooBar = function() { // private function
};
return {
publicFoo : function() { //public function
/* use privateBar and privatefooBar functions here */
}
};
})();
Later you can access publicFoo function by using
foo.publicFoo();
But you can't access the inside functions which are privateBar() and privatefooBar() directly because they are private functions.
Updated Fiddle
Breaking up the function is easy:
function f(..) {
// many lines here
return ret_f;
}
if equivalent to
function f {
function f1(..) {
// not so many lines here
}
function f2(..) {
// not so many lines here
}
var ret_f1 = f1(..);
var ret_f2 = f2(..);
// calculate ret_f from ret_f1 and ret_f2
return ret_f;
}
or if you prefer this style using anonymous functions
function f {
var f1 = function(..) {
// not so many lines here
};
var f2 = function(..) {
// not so many lines here
};
var ret_f1 = f1(..);
var ret_f2 = f2(..);
// calculate ret_f from ret_f1 and ret_f2
return ret_f;
}
I fear however your real question is specific to your existing code and is about what useful smaller functions to extract there and how to combine them.
For this one would need to have your full code and understand it. That might be a bit much for this QA format.

Issue while defining jQuery functions

Trying to define a couple of functions like so:
user = (function() {
var friends_list = (function() {
$.get('/ajax/user/friends_list', function(data) {
......
So I can later on call them when need it like so user.friends_list() but for now, the only thing I get is this following error:
TypeError: Object function () {
var friends_list = (function() {
$.get(....
I just don't know where else to look, any suggestions?
You need to create user as an object, in your case the friends_list is a closure method, it will be availble outside the function
user = {
friends_list : function(){
....
}
}
make a user object and not function
var user = {
friends_list : function(){
$.get('/ajax/user/friends_list', function(data) {
......
}
}
and call it like.. user.friends_list()
fiddle here
You're using a closure here, so friend_list is invisible on the outside of user.
If you want to use closures, to hide some variables, to best way to export friend_list would be:
(function(){
var somePrivateVariable;
window.user = {};
window.user.friend_list = function() {
// make use of somePrivateVariable...
};
})();
user = function() {
this.friends_list = function() {
$.get('/ajax/user/friends_list', function(data) {
......
});
};
return this;
};
Above should also work.
reference http://www.w3schools.com/js/js_objects.asp
You can check out this link
Here is the code:
var global = {};
global.sayHello = function (x){
//do your code here
console.log('Hello ' + x );
};
global.sayHello('Kevin');
user = new function(){
var private_variable;
function private_method(){}
this.global_variable = '';
this.global_method = function(){};
}

JavaScript refer to a method inside a method?

Ok, just solved one problem where this refered to the wrong scope. Now I have another problem.
So I want to call a method that is inside a method. But I do not know how, check this source:
function someObj() {
var self = this;
this.someMethod1 = function() {
var elementBtn = document.getElementById('myBtn');
elementBtn.onclick = function() {
self.someMethod2.methodMethod();
//I want this.someMethod2.methodMethod() to be called
//...but I get an big error instead. Is it even possible?
//this.someMethod2() works fine.
};
};
this.someMethod2 = function() {
this.methodMethod = function() {
alert('THIS IS THE ONE I WANTED!');
};
alert('NO, NOT THIS!');
};
}
Error msg:
Uncaught TypeError: Object function () { ...
With your code, someMethod2 would need to execute first for the function expression to be assigned. Even then, it would be assigned to the parent instance.
Bearing in mind that all functions are objects in JavaScript, this is what you want instead:
this.someMethod2 = function() {
alert('NO, NOT THIS!');
};
this.someMethod2.methodMethod = function() {
alert('THIS IS THE ONE I WANTED!');
};
You are trying to use an object accessor on a function. If you want it to work in this way, you need to return an object literal from your call to the "outer" function.
this.someMethod2 = function() {
return {
methodMethod: function() {
alert('THIS IS THE ONE I WANTED!');
}
}
};
You can then chain the call. self.someMethod2().methodMethod();
While this is not directly possible, you can pass a "command" to the outer function to tell it to execute the inner function. But, are you sure this is what you really need? Perhaps you should use objects instead of functions here. But here's the "command" way:
this.someMethod2 = function(cmd) {
var methodMethod = function() {
alert('THIS IS THE ONE I WANTED!');
};
if (cmd === "methodMethod") {
methodMethod();
return;
}
alert('NO, NOT THIS!');
};
function someObj() {
var self = this;
this.someMethod1 = function () {
var elementBtn = document.getElementById('myBtn');
elementBtn.onclick = function () {
self.someMethod2().methodMethod();
};
};
this.someMethod2 = function () {
this.methodMethod = function () {
alert('THIS IS THE ONE I WANTED!');
};
//return this for chain method.
return this;
};
}
trying
function someObj() {
var self = this;
this.someMethod1 = function() {
var elementBtn = document.getElementById('myBtn');
elementBtn.onclick = function() {
self.someMethod2().methodMethod();
};
this.someMethod2 = function() {
this.methodMethod = function() {
alert('THIS IS THE ONE I WANTED!');
};
alert('NO, NOT THIS!');
return this;
};
}
Also if you use prototype then
function someObj() {
var self = this;
this.someMethod1 = function() {
var elementBtn = document.getElementById('myBtn');
elementBtn.onclick = function() {
self.someMethod2.methodMethod();//['methodMethod']();
};
};
this.someMethod2 = function() {
};
this.someMethod2.methodMethod = function() {
alert('THIS IS THE ONE I WANTED!');
};
};
But the method methodMethod is static

Can you pass an objects method as a callback in JavaScript?

So I have an object lets call it A with a sub object which I'll call B which has a method/function called "CallMe" which I wish to be called when and object loads but I can't seem to get it to work. Is it even possible?
Example:
var A = {
B: {
CallMe: function() {
alert('I\'ve been Called!');
}
}
}
var objImage = new Image();
objImage.onLoad = A.B.CallMe;
objImage.src = '/img/some_image.png';
you should bind it to .onload property not .onLoad - this should fix it, silly typo - such are the worst
It works fine... you just need to need to call it (objImage.onLoad();):
var A = {
B: {
CallMe: function() {
alert('I\'ve been Called!');
}
}
}
var Image = function(){
}
Image.prototype.onLoad = null;
$(document).ready(function() {
var objImage = new Image();
objImage.onLoad = A.B.CallMe;
objImage.onLoad();
});
Test code here:
http://www.jsfiddle.net/yAJfd/1/

Categories