If I add custom data to my html controls, how will the performance and memory consumption be in the following scenario:
1. Adding a string or a number in customdata.
2. Adding an existing object (already created object in previous lines of code).
3. Adding a map (object) of (string, existingObject).
By existingObject, I mean an already created object, eg: map/object created in previous lines of code, or model object in angular js.
As per my understanding, storing object as custom data is like storing reference of an object which is already there, so it should not be expensive in terms of space, nor should it make html page heavy. Please correct me if I am wrong.
Related
I am no javascript programmer and am totally puzzled by what this code does and what it is used for:
function map(x) {
x = Object.create(null);
x.x = 0;
delete x.x;
return x;
}
It's part of what you get when using the dart2js compiler.
I'm not trying to understand the whole context, but what does assigning a property and deleting it directly again help achieve?
This looks like outsmarting some internal JS engine behaviour.
EDIT: As requested, here's the complete out.js as generated by dart2js (input is the "Hello world!" example from Wikipedia): https://gist.github.com/Blutkoete/59be155b2642832e9acd383df0857d02
EDIT 2: gurvinder372's link indicates is has to do with "delegating to anonymous JS objects for performance", but I'll probably need a lot of experience with JS to understand that.
Well... This is an interesting topic and understanding this trick takes to read a little bit on the object representation of V8 compiler. I am not an expert on this but the topic was interesting enough to intrigue me to search for some answer. So here is what i have found.
First of all deleting a property seems to be a trick to change the internal structure of how object properties are kept and accessed. In other words deleting a property switches the object to dictionary mode where the properties are kept in a hash map. So when a dummy property is deleted immediately after it's created gives you an object in dictionary mode.
V8 can handle minor divergences like this just fine, but if your code
assigns all sorts of random properties to objects from the same
constructor in no particular order, or if you delete properties, V8
will drop the object into dictionary mode, where properties are stored
in a hash table. This prevents an absurd number of maps from being
allocated.
Taken from this nice article A tour of V8: object representation
I understand that js' JIT compiler will deoptimize the warm or hot code in case datatype changes in a loop (like one element in array is string whereas rest were int).
But i have few scenarios where i'm not able to understand will the code be deoptimized or not
Same loop is used for two arrays where one array contains strings and other ints. Will compiler deoptimize the code here or create two copies? (I understand it should be two copies).
In case of array of object. Considering all scenarios like
Manipulated sub-property is of different type.
Same sub-properties for each object but one object has one property missing.
Missing property is not manipulated inside the loop.
Missing property is manipulated inside loop (null case is handled).
All objects have different properties (New property is added, or manipulation is done using property location).
Question 1: If there a post such as this one. How would I represent it in JavaScript? I thought was JSO and parse. Other programming language like C++ and JAVA a main function and have map references but where does JavaScript store it's objects?
Question 2: Oh and do I add Event Handlers to each of the HTML representatives elements?
The basic data structure in JavaScript is the object, you would probably use one (or, more likely, a structured collection of them along with more specific data structures such as arrays) to describe the data structure that makes up a webpage.
The main function in Java and C++ is the entry point to the program. In JavaScript, the entry point is the top of the program.
JavaScript stores its objects in memory and references to them in variables and as properties of objects.
You would only add an event handler to an HTML Element object if you wanted to listen for an event on it.
People are saying store objects in variables but it's I was also told its better to hash them and create references to them in an array.
You use the data type most appropriate for the data you are working with.
If you have a:
simple piece of data, use a variable.
collection of ordered data, use an array (or maybe a Set if you are using ES6)
collection of unordered data, use an object (or maybe a Map if you are using ES6)
… and nest to whatever level makes sense.
You might also create a custom data type with a constructor function or (if you are using ES6) a Class.
I am building an app in Angular, so any Angular specific answers are acceptable, however my question is to JavaScript at large.
My app used several JSON files to store information. Those JSON files are loaded in the head with script tags, and the objects inside them are assigned to variables in a service. There are 3 main JSON objects that I am working with, and some of them have dependencies on the others.
For example, one of them has a Description attribute which contains text combined with an expression, such as: The value is {{10+(2*var)}}.
However, one of the other objects has children, some of which may or may not be included at the time the Description is compiled. One child has a value that will be stored as var2 and the other child doesn't.
If I change my expression to: The value is {{(10+(2*var))*var2}}, then the value will be valid only if the first child is used and defines var2. If the second child is used, var2 is not defined, and as a result leave me with "NaN".
The best method I can think of, is to make another object that contains all possible values from sub children, and set them to default values, and then override them when a child with the value is present.
This has several downsides however. First off, I have to have all variables (there are a lot) present in yet another object, when most of them are not needed. I will also have to "reset" this object repeatedly.
Is there a more efficient, more standardized way of accomplishing this sort of thing?
Well you could default the variables directly in the template so you don't need to worry about existence or order of execution.
The text value would be:
The value is {{(10+(2*(var||1)))*(var2||1)}}
When var2 is missing, it simply multiplies by 1.
You can also use ternary conditon in an Angular expression, such as
The value is {{(var2 ? 10+(2*var))*var2 : 10+(2*var))}}
Note: I would strongly recommend not naming a variable var as it is a keyword in javascript that could cause you trouble when trying to parse them with Angular (or in many other contexts).
I'm building a web app that displays a list of customers in a table. There are roughly 15 columns on the table containing different bits of data on these customers. The cells on the table receive user input frequently to update their values.
On page load, the web app sends off an AJAX request with qualifiers to retrieve the appropriate subset of customers out of all active customers. JSON is returned and extended on a global array of objects. Each item in this global array of objects represents a row on the table: var myCustomerList = [{customer_data_object_1},{customer_data_object_2},{customer_data_object_3}].
The HTML for the page is then generated via JavaScript, jQuery, and mustache.js templates. The JavaScript will loop through the global data object (i.e., myCustomerList[i]) and generate rows. I use jQuery's .data() method to link the row itself back to myCustomerList[i]:
$('#tbl_customer_list tr:last').data('cust_data',myCustomerList[i]);
I bind events to UI controls as each cell is appended to a row using jQuery:
$('#tbl_customer_list tr:last td:last a').on('click',function(event) {
custList.cellEvent.status.openDialog(this,event);
});
Event handling functions then refer back to my global data object using jQuery .data():
custList.cellEvent.status.openDialog = function(oLink,event) {
var oCustData = $(oLink).closest('tr').data('cust_data');
//update the global data object
oCustData.status = oLink.value;
}
I have separate code for reconciling changes made to the global data object with the data on the DB tables.
If the above confused you, this page gives a good overview of the client-side MVC approach I'm trying to take: https://sites.google.com/site/jollytoad/mvcusingjquery
So, two questions:
What is a better way of linking model data (browser-side) to the various UI components on the page? Remember I'm using .data() to create a link between the table row DOM element and the global data object.
What is a better way of organizing/storing the model data (i.e., myCustomerList)?
What I'm doing now works, but it seems a little hacky and I'm polluting the global namespace. I don't know how supportable and maintainable it'll be if we ever have to come back to this page and add widgets independent of the customer list.
I've been considering creating a class for the customer list table as a whole (and a new class for any other new widget added to the page) and storing the model data on a property of that class. But I thought I'd come here first to get some tips on best practices in this area.
Use a framework designed to handle this sort of thing, like Backbone, Spine, JavaScriptMVC and so forth.
We use Backbone where I work to handle all of this stuff -- it integrates super well with jQuery.
i think you should take a look at this instead:
http://addyosmani.com/largescalejavascript/
it's a modular pattern to handle various parts of the website. this pattern makes parts of the website independent of one another. each module can have it's own MVC and store it's own states. modules do not have the full logic of the application. it's handled by a sandbox API and core API.
as far as i understand, you load the table's data from the server into the table using AJAX. what i suggest you to do is make that table an independent module.
when it receives the AJAX data, store it in the object
after that, render your table based on that object, store the data into the table. what you put in the table is just the visual data. the actual data remains in that object earlier.
whenever you click on an item, the data in it is an exact reference to the original object you put in. whatever you do to it affects the original object.
Boris Moore is currently working on JsViews & JsRender which is the 'official' jQueryUI way of doing data binding and rendering. It‘s already usable and going beta soon.