The organizational structure of the front-end JavaScript code in web development

The page contains three levels:

• Structure (HTML)
• Performance (CSS)
• Behavior (JavaScript)

Web standards, the three to separate, the Web page source code consists of three parts:. html files,. css files, and. js files. This means that HTML files should not contain CSS styles and JavaScript code.

Here is a discussion of JavaScript's organizational structure.

Fw.js
var fw = {    page: {        index:{},        user:{}    },    Common: {        dialog: {},        table:{}    },}

First, define a top-level variable FW,FW is a hash variable. The page contains JavaScript code for individual pages, such as the index page and the user page. Common is a generic method for dialog related and table related. They are now empty objects, and this side simply defines a structure.

Dialog.jsfw.common.dialog = function () {    return {        initdialog:function () {            //Here is the specific method details        },        Destroydialog:function () {            //Here is the specific method details}}}    ();

Then to implement a general method of initializing the dialog Fw.common.dialog the initial value is {}, which modifies its value. Define an anonymous method and execute it immediately, the return value is a hash object, the key in the hash object is InitDialog, and the value is an anonymous method. You can call this method this way,

Fw.common.dialog.initDialog ();

This organization of JavaScript code structure has the following benefits:

1. It is a public method to know that it is known by the prefix.
2. InitDialog and Destroydialog methods in a hash, there is no sequential relationship.
3. InitDialog and Destroydialog methods in closures, the defined variables do not affect other code.
4. Easy to call, as long as the file is loaded.

The organizational structure of the front-end JavaScript code in web development