Programming practices - Chapter 9 separating configurable data

Writing maintainable JavaScript -- Nicholas C. Zakas

Code is nothing more than defining a set of instructions for the computer to execute.

We transfer the data to the computer, operate the data by instructions, and finally produce a result.

When you want to modify the data, there may be problems. Any time you modify the source code, you may introduce bug s.
Sometimes even modifying the value of data will bring risks, and the data should not affect the normal operation of instructions.

Well designed applications should separate key data from the main source code, so that the source code can be modified more confidently.

1. What is configuration data

The configuration data is the hard coded value in the application, as follows:

// Hide configuration data in code
function validate(value) {
  if (!value) {
    alert("Invalid value");
    location.href = "/errors/invalid.php";
  }
}

function toggleSelected(element) {
  if (hasClass(element, "selected")) {
    removeClass(element, "selected");
  } else {
    addClass(element, "selected");
  }
}

There are three pieces of configuration data in the above code

1. String "Invalid value". It is used to prompt the user. It will be touched by the user and may be modified frequently.
2. URL /errors/invalid.php. When the schema changes, the URL is likely to be modified frequently.
3. CSS class name selected. There are 3 uses. Once they are to be modified, they need to be modified 3 times. It is likely that some modifications will be omitted.

It can be considered that these are configuration data because they are written in code and may be modified in the future.

Here are some examples of configuration data:

• URL
• The string that needs to be presented to the user
• Duplicate value
• set up
• Any values that may change

Always remember that the configuration data can be changed, and you don't want to modify the JavaScript source code because someone suddenly wants to modify the information displayed on the page.

2. Extract configuration data

The first step to extract the configuration data from the code is to take it to the outside, as follows,

// Extract configuration data
var config = {
  MSG_INVALID_VALUE: "Invalid value",
  URL_INVALID: "/errors/invalid.php",
  CSS_SELECTED: "selected"
};

function validate(value) {
  if (!value) {
    alert(config.MSG_INVALID_VALUE);
    location.href = config.URL_INVALID;
  }
}

function toggleSelected(element) {
  if (hasClass(element, config.CSS_SELECTED)) {
    removeClass(element, config.CSS_SELECTED);
  } else {
    addClass(element, config.CSS_SELECTED);
  }
}

The configuration data is saved in the config object. Each attribute of the config object saves a data fragment, and each attribute name has a specific prefix to represent the type of data

• MSG represents the message presented to the user
• The URL represents the network address
• CSS represents className

In this code, all configuration data is removed from the function and replaced with property placeholders in the config object.

Pulling out the configuration data means that anyone can modify them without causing errors in the application logic.
If the config object is placed in a separate file, the modification of the configuration data can be completely isolated from the code using the data.

3. Save configuration data

The configuration data should preferably be placed in a separate file to clearly separate the data from the application logic.

It is feasible to store the configuration data in a separate JavaScript file,
But for a JavaScript application, JavaScript files are not the best way to store data,
Because you must follow the syntax of JavaScript language to organize it without syntax errors.
Once you merge JavaScript files with syntax errors into other files, the whole application will crash.

It is troublesome to format the configuration data in the file correctly.
One approach worth trying is to store the configuration data in a non JavaScript file.

For example, the configuration data is stored in a Java property file (. properties), which is a very simple collection of key value pairs, and each key value pair has an exclusive row.

The form is name=value. There can be spaces on both sides of the equal sign. The syntax is not easy to make mistakes. Notes begin with # as follows

# User oriented messages
MSG_INVALID_VALUE = Invalid value

# URLs
URL_INVALID = /errors/invalid.php"

# CSS classes
CSS_SELECTED = selected

This format is very simple, and you don't have to write quotation marks, worry about some escape characters in the string, worry about semicolons and commas, and ignore JavaScript syntax.

The next step is to convert the whole file into a file available for JavaScript. There are three formats:

• JSON
• JSONP
• JavaScript file

JSON:

{
  "MSG_INVALID_VALUE": "Invalid value",
  "URL_INVALID": "/errors/invalid.php",
  "CSS_SELECTED": "selected"
}

JSONP:

myfunc({
  "MSG_INVALID_VALUE": "Invalid value",
  "URL_INVALID": "/errors/invalid.php",
  "CSS_SELECTED": "selected"
});

JavaScript file:

var config = {
  MSG_INVALID_VALUE: "Invalid value",
  URL_INVALID: "/errors/invalid.php",
  CSS_SELECTED: "selected"
};

Can pass Props2Js The tool converts files into these three formats.