This is my code
ImageCarousel = (function() {
var currentIndex, imageManager, imagesVO, jsonPath, values;
currentIndex = null;
jsonPath = "json/images.json";
imagesVO = [];
values = null;
imageManager = null;
function ImageCarousel() {
this.loadJson();
}
ImageCarousel.prototype.loadJson = function() {
var _this = this;
return $.ajax(jsonPath, {
success: function(data, status, xhr) {
console.log("yea " + data);
_this.currentIndex = 0;
_this.imagesVO = data.images;
_this.imageManager = new ImageManager(data.images);
_this.imagesCount = _this.imagesVO.length;
_this.switchToImage(_this.currentIndex);
$('#next').click(function() {
_this.currentIndex = _this.incrementIndexByOne(_this.currentIndex);
return _this.switchToImage(_this.currentIndex);
});
return $('#prev').click(function() {
_this.currentIndex = _this.decrementIndexByOne(_this.currentIndex);
return _this.switchToImage(_this.currentIndex);
});
},
error: function(xhr, status, err) {
return $('#imageHolder').html("problem loading the json file, </br>make sure you are running this on your local server");
},
complete: function(xhr, status) {}
});
};
am i right for using "this" to refer to vars inside ImageCarousel class? does it make those properties public? if so, how do I keep them private?
Nope, you're not using this correctly. Those properties you are trying to reference are all private, as in no outside code could really access them by invoking some property of ImageCarousel.
If you do want to make those variables public for whatever reason, do not declare them using var. Instead, do something like this.currentIndex = null or this.jsonPath = "json/images.json". When you do that, you're essentially making those properties publicly accessible. Any outside code can access those properties simply by invoking ImageCarousel.currentIndex, ImageCarousel.jsonPath, etc. etc.
There's a few things wrong with this. Here's the code w/ corrections:
var ImageCarousel = function () {
var currentIndex, imageManager, imagesVO, jsonPath, values;
currentIndex = null;
jsonPath = "json/images.json";
imagesVO = [];
values = null;
imageManager = null;
var _this = this;
this.loadJson = function () {
return $.ajax(jsonPath, {
success: function (data, status, xhr) {
console.log("yea " + data);
currentIndex = 0;
imagesVO = data.images;
imageManager = new ImageManager(data.images);
imagesCount = imagesVO.length;
switchToImage(currentIndex);
$('#next').click(function () {
currentIndex = _this.incrementIndexByOne(currentIndex);
return _this.switchToImage(_this.currentIndex);
});
return $('#prev').click(function () {
currentIndex = _this.decrementIndexByOne(currentIndex);
return _this.switchToImage(currentIndex);
});
},
error: function (xhr, status, err) {
return $('#imageHolder').html("problem loading the json file, </br>make sure you are running this on your local server");
},
complete: function (xhr, status) {}
});
};
this.loadJson();
};
var someCarousel = new ImageCarousel(); // Example usage.
Effectively, ImageCarousel was declared twice. Once with ImageCarousel = (function() { and once with function ImageCarousel().... I opted for the former.
If I understood you correctly, you wanted currentIndex, imageManager, imagesVO, jsonPath, and values to be private. For those, just do a var inside your function block, and they will be private to each instance of that new'd object. You can use them safely inside your ImageCarousel function with no worries (and no _this).
I left _this on the methods that you're calling inside of loadJson because (not being able to see their definitions here) I am assuming they are public methods. If they're private, just declare them inside your wrapper function and they will only be accessible within. If you want them to be public, use this[functionName] as I've done with loadJson.
So the affect of my code changes are:
currentIndex, etc. are private.
loadJson is public.
EDIT
A couple more things on using prototype. prototype is for "static" functions - meaning, that function doesn't exist for every instance of ImageCarousel objects. If you use it, you are to use it outside of the function's declaration. Otherwise, every time you new an ImageCarousel it will be re-defining loadJson unnecessarily. Here's a nice little demo app that shows what I mean a little more clearly: http://jsfiddle.net/d2BbA/
Related
I'm confused.
Occasionally when my web api receives data it mixes the data up between objects and it appears to me that the global object in the file is actually being persistent..
Here is the basic layout of the code
handlers.js
const something = require('./otherfile')
let handlers ={}
handlers.customers = function (data, callback) {
let acceptableMethods = ['post'];
if (acceptableMethods.indexOf(data.method) > -1) {
handlers._customers[data.method](data, callback);
} else {
callback(405);
}
};
handlers._customers = {}
handlers._customers.post = async function (data, callback) {
customer.new(data);
callback(200, 'success')
}
otherfile.js
let contacts_list = [];
let accountData = {};
module.exports = something = {
new: {
dostuff: async function (data) {
// update and reference global objects here..
accountData.name = data.name;
accountData.otherProperty = await somefunction(data.prop)
}
}
}
I expected that since it is requiring an exported module that each time it would call the exported module it would be treated as its own object, however, it seems that the object is not being treated as unique and is instead being overwritten in part and 'randomly'. This suggests to me that I may be able to export a mutating object such as an array across files
Am I correct in that the global is being persisted across multiple requests?
Would setting the global within the export object affect the behaviour of this object in any way? In this case I don't want this data to mutate.
Thanks in advance for your constructive criticisms and guidance :)
[Restructure your code so you are creating a new object on every request. Module's are cached on the first require so all of your variables and object properties will be persisted across calls.
// handler.js
const somethingFactory = require('./otherfile')
module.exports = function(){
let handlers = {}
const something = somethingFactory();
handlers.customers = function (data, callback) {
let acceptableMethods = ['post'];
if (acceptableMethods.indexOf(data.method) > -1) {
handlers._customers[data.method](data, callback);
} else {
callback(405);
}
};
handlers._customers = {}
handlers._customers.post = async function (data, callback) {
customer.new(data);
callback(200, 'success')
}
return handlers;
};
otherfile.js
module.exports = function(){
let contacts_list = [];
let accountData = {};
return {
new: {
dostuff: async function (data) {
// update and reference global objects here..
accountData.name = data.name;
accountData.otherProperty = await somefunction(data.prop)
}
}
}
};
I have a very complex class so i decided to break into sub modules and trying to use revealing modules pattern.
I have main class and decided to divide into smaller container function. but in current scenario
But i am not able to access any internal function from outside i.e callSearchResultWithCallBack using searchFinder.Search.callSearchResultWithCallBack(). which pattern should i use to keep this code clean as well have control to call internal function in sub module.
Thanks
var searchFinder;
function SearchFinder() {
me = this;
this.searchResult = null;
this.init = function() {
declareControls();
createAccordian();
addEvents();
fillControls();
var declareControls = function() {
this.SearchButtons = jQuery('.doSearch');
this.InputLocation = jQuery('#inputLocation');
this.InputDistanceWithIn = jQuery('#inputDistanceWithIn');
this.InputName = jQuery('#inputName');
}
var addEvents = function() {
me.SearchButtons.click(function() {
me.Search();
});
}
var fillControls = function() {
var getGetCategory = function() {
}
}
}
this.Search = function() {
var url = '';
var searchCriteria = {};
validateAndCreateCriteria();
callSearchResultWithCallBack();
function validateAndCreateCriteria() {
function validateAandGetCategory() {
if (SearchValidation.ValidateZipCode(me.InputLocation.val().trim())) {
searchCriteria.location = me.InputLocation.val().trim();
} else if (SearchValidation.ValidateCityState(me.InputLocation.val().trim())) {
searchCriteria.location = me.InputLocation.val().trim();
}
}
}
// need to access it outsite
function callSearchResultWithCallBack() {
me.searchResult(searchCriteria, SearchResultCallBack);
function SearchResultCallBack() {
}
}
}
}
jQuery(function() {
searchFinder = new SearchFinder();
searchFinder.init();
searchFinder.Search.callSearchResultWithCallBack();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
This code has multiple issues, first I will address the fact that for example declareControls is not executing. First declare the function than execute!
this.init = function() {
var declareControls = function() {
this.SearchButtons = jQuery('.doSearch');
this.InputLocation = jQuery('#inputLocation');
this.InputDistanceWithIn = jQuery('#inputDistanceWithIn');
this.InputName = jQuery('#inputName');
}
var addEvents = function() {
this.SearchButtons.click(function() {
me.Search();
});
}
var fillControls = function() {
var getGetCategory = function() {
}
}
declareControls();
//createAccordian(); //not defined
addEvents();
fillControls();
}
Now let's look at others problems that will arise.
the me object referring to this is in the scope of searchFinder and does not refer to the same this in the instance of searchFinder.
function jQuery can be replaced by the commonly used $.
searchFinder.Search.callSearchResultWithCallBack() this is never going to work. Since the Search function is an object and callSearchResultWithCallBack isn't a property of this function.
Solution; make it part of the prototype of Search.
Steps:
Move callSearchResultWithCallBack outside the search function.
Add prototype to Search function
Call function via prototype.
function callSearchResultWithCallBack() {
me.searchResult(searchCriteria, SearchResultCallBack);
function SearchResultCallBack() {
}
}
this.Search.prototype.callSearchResultWithCallBack = callSearchResultWithCallBack;
If you want to fire this function outside of search use this:
searchFinder.Search.prototype.callSearchResultWithCallBack();
Please remember that callSearchResultWithCallBack will throw an error because searchCriteria is undefined.
This fixes your problems for now, but this code has to be revised thoroughly. But this should get you started. http://ejohn.org/blog/simple-javascript-inheritance/
Given that I have a class defined such as
(function () {
function Dummy(){
var toReturn ={
myProp : "asdf",
myFunc : myFunc
}
return toReturn;
function myFunc(){};
}
})();
how does one get an instance of the same type after
var dummy = new Dummy();
JSON.stringify(dummy);
so that I have myFunc still available on the type.
JSON.parse(JSON.stringify(dummy)) returns same shape of the object by not the same type.
NOTE: I am not asking about capability of JSON, but how do people deal with this in general. Do you hand roll your mapping mechanism so that after parsing from JSON you map it onto instance of the type, or if there is such functionality in some library, such as underscore.
I created a helper function that helps me do this, but would like to hear from others how do you deal with situation like this. As I put in comments, JSON comes over the wire, for which we have a type defined. To get the values from JSON in our type, we parse json, create instance of type and then apply map function below.
function map(fromObj, toObj) {
Object.keys(fromObj)
.forEach(function (key) {
if (typeof fromObj[key] != 'function') {
if (toObj.hasOwnProperty(key)) {
if (typeof fromObj[key] !== 'object') {
toObj[key] = fromObj[key];
} else {
map(fromObj[key], toObj[key]);
}
}
}
}
});
}
Note, Not certain about requirement , if this similar to what posed at Question. If off-topic , please post comment , will withdraw.
Piece was originally composed for this Question Organizing large javascript files [on hold] . With a json response , having "x" type of contents , could map returned object to new object , copying properties utilizing $.extend() .
Result would be new object having both properties and functions of returned data. At piece below, at completion of process , $.Pages begins as function , then type gets converted to object - though it could retain both function and object properties by including || {} at definition stage.
Functions within returned json objects could be called within .then() callback ; see console at jsfiddle , object init functions.
At conclusion , $.Pages object has properties of returned json , including access to functions . Based on a jsonp - type processing flow.
Piece is "frame" of a processing approach ; could extend to include other functionality
$(function() {
var dfd = new $.Deferred();
dfd.progress(function(msg) {
console.log(msg);
});
ProductPage = {
name : "ProductPage",
addToCartBtn: "#add-to-cart",
initName : function() {return dfd.notify(this.name)},
init: function() {
this.initName();
// ProductPage.initAddToCartPopup();
// ProductPage.initSidebar();
}
};
ContactPage = {
name : "ContactPage",
validateEmail : function (e) {return dfd.notify(e)},
initName : function() {return dfd.notify(this.name)},
init: function() {
this.initName();
// ProductPage.initAddToCartPopup();
// ProductPage.initSidebar();
}
};
var mods = function() {
return {"ContactPage" : ContactPage
, "ProductPage" : ProductPage };
};
$.Pages = function() {
$.when(mods())
.done(function(pages) {
$.Pages = pages;
});
return $.Pages
};
$.when($.Pages())
.then(function() {
$.each($.Pages, function(k, v) {
v.init();
})
});
console.log($.Pages)
});
jsfiddle http://jsfiddle.net/guest271314/60kv2439/1/ (see console)
basic approach
$p = {};
var queue = [];
var mods = ["dep1.json", "service1.json"];
var mod = function(m) {
queue.push(m);
if (queue.length === mods.length) {
$.each(queue, function(k, v) {
$p = $.extend(v, $p)
})
}
};
$.each(mods, function(k, v) {
$.getScript(v, function(script, status, jqxhr) {
console.log($p)
})
})
I'm learning how to actually use JavaScript. I've run into a situation where I'm getting an error. The error is: TypeError: 'undefined' is not an object (evaluating 'this.flagged'). I've narrowed down my code to where its happening. My code looks like this:
var flagged = false;
var intervals = [];
return {
flagged: flagged,
intervals: intervals,
createInterval : function (options) {
var defer = $q.defer();
if (this.throwsError) {
defer.reject('There was an error creating the interval.');
} else {
this.intervals.push(
$interval(function() {
console.log('here 1');
console.log(this.flagged);
},
1000
));
}
}
};
The error gets thrown at the: console.log(this.flagged); I'm guessing it has to do with the fact that "this" isn't visible. Yet, if "this" isn't visible, I'm not sure how to get the value for flagged. Can someone please explain to me what I need to do to get the value for flagged?
Thank you!
When you are using this inside $interval it won't be pointing to your original object, however, you can do this:
var flagged = false;
var intervals = [];
return {
flagged: flagged,
intervals: intervals,
createInterval : function (options) {
var defer = $q.defer(),
self = this;
if (this.throwsError) {
defer.reject('There was an error creating the interval.');
} else {
this.intervals.push(
$interval(function() {
console.log('here 1');
console.log(self.flagged);
},
1000
));
}
}
};
notice var self = this;
In JavaScript,
var flagged
will be a scoped variable, i think what you need here is a global scope variable for that, simply remove var from behind it.
flagged = false;
that should do the trick.
Can someone shed some light as to why this doesn't work the way I think it should (or what I'm overlooking).
function Pane(data) {
var state = {
show: function(data) {
var pane = document.querySelector('.pane[data-content='+data.target+']');
pane.classList.add('active');
},
hide: function(data) {
var pane = document.querySelector('.pane[data-content='+data.target+']');
var paneSibling = $(pane.parentNode.childNodes);
paneSibling.each(function(sibling) {
if(check.isElement(sibling)) {
var isActive = sibling.classList.contains('active');
if(sibling != pane && isActive) {
sibling.classList.remove('active');
};
};
});
}
}
return state;
}
So I can console log Pane(arg).show/hide and it'll log it as a function, so why is it when I call Pane(arg).show it doesn't do anything? The functions in the object work (outside of the constructor function in their own functions).
The function is returning the state object, so it will never return the constructed object, even when used with new. Since state contains those methods, you can just call the function and immediately invoke one of the methods on the returned object.
Now, if you're expecting show and hide to automatically have access to data via closure, it's not working because you're shadowing the variable by declaring the method parameters. You can do this instead:
function Pane(data) {
var state = {
show: function() {
var data = data || arguments[0];
var pane = document.querySelector('.pane[data-content='+data.target+']');
pane.classList.add('active');
},
hide: function() {
var data = data || arguments[0];
var pane = document.querySelector('.pane[data-content='+data.target+']');
var paneSibling = $(pane.parentNode.childNodes);
paneSibling.each(function(sibling) {
if(check.isElement(sibling)) {
var isActive = sibling.classList.contains('active');
if(sibling != pane && isActive) {
sibling.classList.remove('active');
};
};
});
}
}
return state;
}
Then you can use it like this:
Pane({}).show();
Or like this:
var p = Pane();
p.show();
Or force a new argument when needed:
p.show({foo:'bar'});
You are overriding the original argument in each function.
So what you are doing is to find elements with the attribute data-content='undefined'
This obviously doesn't work.
So to fix this you should just remove the data argument in the show/hide function.
Here is a plnkr showing the problem and fix.