Shulou(Shulou.com)06/02 Report--

This article introduces the process of JavaScript front-end to back-end development of single-page Web applications, the content is very detailed, interested friends can refer to, hope to be helpful to you.

First, the first single-page application

Https://github.com/zhangyue0503/html5js/blob/master/singlepagewebapplications/spa1.html

Second, warm reason JavaScript

a. Advanced variables promote and execute environment objects

1. Promotion: when the JS engine enters scope, it processes the code in two rounds. The first round initializes the variables; the second round executes the code.

The first round: declare and initialize function parameters; declare local variables, including assigning anonymous functions to a local change, but not initializing them; declare and initialize functions.

two。 Whenever a function is called, an execution environment is generated. The variables and functions defined in all functions are part of the execution environment. JS stores variables as properties on an object called the execution environment object.

3.JS treats declared and initialized variables as properties of the execution environment object.

4. Because functions can be called in the execution environment, there are many layers of depth. Calling a function in the execution environment creates a new execution environment nested within the existing execution environment

Everything in the tag is in the global execution environment

Calling first_function creates a new execution environment in the global execution environment

Calling second_function in first_function creates an execution environment in first_function. Second_function has access to the execution environment in first_function and the global execution environment

Call second_function globally and do not have permission to access the execution environment in first_function

b. Domain chain

The 1.JS engine first looks on the local execution environment object. If there is no definition, jump out of the scope chain to the execution environment in which it was created, and look for the definition of the variable in the execution environment object, and so on until the definition is found or the global scope is reached.

C.JavaScript objects and prototype chains

1.JS objects are based on prototype-based, and we create objects that look like all the objects of this type we want, and then tell the JS engine that we want more objects like this.

two。 Using Object.create to create a JS object adds a more prototype-based feel, taking the prototype as a parameter and returning an object. In this way, you can define common properties and methods on the prototype object, and then use it to create multiple objects that share the same properties.

3. The prototype chain describes how the JS engine finds the prototype from the object to the prototype and the prototype to locate the property values of the object. If the JS engine cannot find this property on the prototype of the object, it looks for the prototype of the prototype, and so on. When JS reaches the (generic) Object prototype that can be used, the prototype chain ends. If JS cannot find the requested attribute anywhere on the prototype chain, it returns undefined.

4. Properties on a prototype are like static variables on objects created from a prototype

d. Function-- A deeper peek

1. Functions are the first class (first-class) objects in JS. They can be stored in variables, have attributes or even be passed to the calling function as parameters. They are used to control the scope of variables and to provide private variables and methods.

two。 A closure is a way to prevent the garbage collector from removing a variable from memory, making it accessible outside the execution environment in which the variable is created

3. It is important to remember that a unique execution environment object is created each time a function is called. After the function is executed, the execution object is discarded unless the caller references it. If the function returns a number, it cannot reference the function's execution environment object, but if the function returns a more complex structure, such as a function object or array, the return value is saved to a variable. A reference to the execution environment is created.

Third, develop Shell

1.Shell is the main controller (master controller) for single-page applications

Rendering and management function container

Manage application statu

Coordination function module

two。 A solution that uses URI to drive page state, naturally anchoring interface mode (anchor interface pattern)

3. Anchor interface tool: https://github.com/mmikowski/urianchor

Coding using the concept of independent (independent) and associated (dependent) key-value pairs

Http://... SPA. Htmlwriting profileSuzie status,green, which indicates that

{

Profile:'on'

_ profile= {

Uid:'suzie'

Status:'green'

}

}

4. Indexed, indicating that it can be indexed by search engines

Https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/3/spa

Fourth, add functional modules

1. Develop functional modules as third-party modules

Teams are more efficient, and developers can divide responsibilities according to modules

Applications often perform well, and modules manage only the parts of the application they are responsible for

Code maintenance and reuse become easier because modules are well isolated

two。 Fractal MVC (FMVC): fractal is a pattern that shows self-similarity (self-similarity) at all levels. Using repetitive MVC at multiple levels is fractal MVC.

Https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/4/spa

Fifth, build Model

Https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/5/spa

6. Complete Model and Data modules

Https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/6/spa

7. Web server

1. Traditional Web servers, such as Apache, are weaker messaging servers that create and assign a process (or thread) to each connection, and the process must be "alive" as long as the link is maintained. The idea is to push the data out as quickly as possible in response to a request, and then close the connection as much as possible.

2.Node.js is an excellent messaging server. Because of the event model (event model), it does not create a process for each link. When a connection is opened or closed, records are made, and some maintenance work is done during the opening and closing of the connection. Therefore, it can handle tens of thousands or even hundreds of thousands of concurrent connections on ordinary hardware.

Https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/7/spa

8. Server database

Https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/8/spa

IX. Preparation for single-page application release

Appendix A, JavaScript coding Standard

a. Code layout and comments

1. Use consistent indentation and president

Indent two spaces per level of code

Use space indentation instead of tabs because the position of tabs is not yet standard

Each line is limited to 78 characters

two。 Organize code by paragraph

Organize the code by logical paragraphs, with blank lines between paragraphs

Each line contains at most one statement or assignment statement, but allows multiple variables to be declared at the same time.

There should be spaces between operators and variables so that variables can be more easily identified

There should be a space after each comma

Within a paragraph, similar operators are aligned

Indent comments, indent the same amount of code as interpreted

Each statement should have a semicolon at the end

All statements in a control structure are enclosed in curly braces

3. Line breaks should be consistent.

Wrap the line before the operator because it is easy for people to check all the operators in the left column

Indent subsequent statements to a level

Wrap the line after the comma separator

Square brackets or brackets on a separate line

4. Use parentheses in the style of Kendr

If possible, use a single line

Place the left bracket, curly bracket, or left bracket at the end of the starting line

Indent the code one level inside the delimiter (parenthesis, curly bracket, or square bracket)

The closing bracket, the closing bracket, or the closing bracket occupy a separate line

5. Use spaces to distinguish functions from keywords

There is no space after the function name

Leave a space after the keyword

When formatting for statements, leave a space after each semicolon

6. Quotation marks should be consistent

7. Comment interpretation code strategy

8. Add documents to API and TODO

There are important functions after explanation.

If you hit the code, explain why.

b. Variable name

1. Use common characters

Variable names use the aMuz, Amurz, 0-9, underscore, and $symbols

Variable names do not start with a number

two。 Convey the scope of variables

Use a hump when the variable scope is the entire module

Use underscores when variables are not scoped to the entire module

Ensure that variables in the scope of all modules have at least two syllables

3. It is important to realize that variable types

4. Named Boolean variables: use the word is

5. Named string variables: str, id, date, html, msg, name, text, type

6. Named integer variables: int, count, index, iMagnejPerk, time

7. Named numeric variables: num, xpeny, z, coord, ratio

8. Named regular variable: regex

9. Named array variable: list

10. Named mapping variable: map

11. Named object variable: single noun, module-scoped object variable name has two or more syllables, jQuery object has the prefix $

twelve。 Named function variables: follow the verb + noun form (fn, curry, destory/remove, empty, fetch, get, make, on, save, set, store, update), module scope of two or more syllables

13. Named variable of unknown type: contains data

c. Variable declaration and assignment

1. When creating a new object, map, or array, use {} or [], not new Object () or new Array ()

two。 Copy objects and arrays using tool methods

3. From the beginning, all variables are explicitly declared within the scope of the function using a single var keyword

4. Do not use blocks: JS has no block scope

5. Assign all functions to variables

6. When a function requires more than three arguments, use a named parameter (named arguments), because the meaning of the positional parameter is easy to forget and cannot be self-explanatory.

7. Each variable assignment statement uses a line.

d. Function

1. Construct objects using factory schema

two。 Avoid pseudo-class object constructors: that is, do not use the new keyword to construct pseudo-classes. If you forget the new keyword, it will destroy the global namespace. If you want to use it, uppercase your initials.

3. All functions must be declared before they are used

4. When the function is called immediately, wrap it in parentheses

e. Namespace

1. By using a single global function and limiting the scope of all other variables to this function, global variable pollution can be greatly reduced.

f. File name and layout

1. Namespace:

Use jQuery to manipulate DOM

Before you build your own plug-in, study whether there is a third-party code base

Avoid embedding JS in HTML

Compression (minify), obfuscation and gzip compression of JS and CSS before launch

2.JS file:

In HTML, introduce the third-party JS file first

Then introduce our own JS file

All JS files are suffixed with .js

Save all static JS files in a directory called js

Name JS files according to namespaces

Use templates to create all JS template files

Maintain a parallel structure between 3.JS file and CSS file and class name

Create a CSS file for each JS file that will generate HTML

All CSS files are suffixed with .css

Save all CSS files in a directory called css

Prefix the module name to the CSS selector

The status indicator uses-x and other shared class names

g. Grammar

1. Tag: the label of the statement is optional, only required by while, for, and switch, should always be capitalized, and is a single noun

two。 Statement:

Unless continue uses tags, it should be avoided as much as possible

The semicolon is required at the end of the do statement

If's else should start a new line.

Return do not add parentheses, expressions and return keywords should avoid automatic semicolons on one line

The use of while statements should be avoided as far as possible, which is easy to produce an endless loop.

With should avoid using

3. Other grammars

Avoid comma operators

Avoid assignment expressions

Always use = and!

Avoid confusing plus and minus signs

Do not use eval: do not use eval, do not use Function constructors, do not pass strings to setTimeout and setInterval

Appendix B. Test single page application

Jasmine-query: you can "monitor" jQuery events

Mocha: popular, similar to nodeunit, but with better test reports

Nodeunit: a popular, simple but powerful tool

Patr: asynchronous testing with promise

Vows: a popular Asynchronous BDD Framework

Zombie: a popular headless browser based on Webkit engine that can test complete applications

This is the end of the process of developing single-page Web applications from the front end to the back end of JavaScript. I hope the above content can be of some help and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.