ArcGIS API for JavaScript (legacy) ^3.46

This topic contains coding guidelines to help you improve the effectiveness of your ArcGIS JavaScript API applications. The concepts discussed in this page are only relevant when coding in legacy style. If working in AMD, use the Web Optimizer to create custom builds of the API for enhanced performance.

Build Roll-ups

The Editor, Attribute Inspector and Template Picker dijits have many dependencies that can result in numerous network calls to retrieve the necessary resources. At version 2.0 we created a build roll-ups for these modules to reduce the number of calls. The build roll-ups are dojo layers, that combine JavaScript from multiple files including any dependencies. See the Dojo Build System help topic for more details.

If you build an application that uses the Editor, use dojo.require() to load the esri.dijit.editing.Editor-all build roll-up. If you are working with the Template Picker use esri.dijit.editing.TemplatePicker-all. If you use the Attribute Inspector use esri.dijit.AttributeInspector-all.

The Editor-all roll-up includes the following modules.

esri.layers.FeatureLayer
esri.toolbars.draw
esri.toolbars.edit
esri.tasks.geometry
esri.dijit.AttributeInspector
esri.dijit.editing.AttachmentEditor
esri.dijit.editing.Editor
esri.dijit.editing.TemplatePicker
esri.dijit.editing.Util

The attributeInspector-all roll-up includes:

esri.layers.FeatureLayer
esri.dijit.AttributeInspector
esri.dijit.editing.AttachmentEditor

The TemplatePicker-all roll-up includes:

esri.layers.FeatureLayer
esri.toolbars.draw
esri.toolbars.edit
esri.dijit.editing.TemplatePicker

Loading layers

When you create a layer, you cannot access its properties until the layer's onLoad event has fired. Attempting to create a layer and access its properties in the next line of code could cause errors. Instead, verify that the layer's loaded property is true, then register a listener for the onLoad event.

No events on a layer will fire until the map's onLoad event fires. See Working with events for code snippets and further tips on working with the onLoad events for maps and layers.

Getting and setting properties

Working with the ArcGIS JavaScript API requires that you frequently get and set properties on objects. Sometimes getter and setter methods are available to help you do this in the correct way. You should use these methods when available. The following bullet points give more detailed information:

• Getter methods for properties are only available if the get call requires a calculation, for example Polygon.getExtent().
• Setter methods often trigger events and changes to the state of the application. For example, Map.setExtent() zooms and pans the map to the argument extent and fires a set of zoom, pan, and extent events.
• Some properties are read only. If an object has some setter methods, and a property of that object does not have a corresponding setter method, you should not set that property. For example, the Map object has various setter methods. The Map has a spatialReference property, but there is no Map.setSpatialReference() method because the map's spatial reference is based on the first layer added to the map and it cannot be overridden.

• If an object has no setter methods, then you can go ahead and set property values. For example, using esri.tasks.Query, you can set the where property of the query like this:

  var query = new esri.tasks.Query();
  query.where = "STATE_NAME = 'South Carolina'";
  

Initializing objects

Where appropriate, you should initialize objects outside a loop. This is more efficient because the object is only initialized once instead of each time the loop runs. The following example initializes the symbol and infoTemplate objects outside the for loop

function addResultsToMap(featureSet) {
  var features = featureSet.features;
  var symbol = new esri.symbol.SimpleFillSymbol();
  var infoTemplate = new esri.InfoTemplate(...);
    
  for (var i=0, il=features.length; i<il; i++) {
    map.graphics.add( features[i].setInfoTemplate(infoTemplate).setSymbol(symbol));
  }
}