Hybird Framework UI Refactoring Path: Vi. The front-end thing (Javascript)

Review above: Hybird Framework UI Refactoring Path: V, front end that Thing (HTML, CSS)

Here are some of the key points of JS in the development process.

Skin Change

For the end of the skin, I have a previous article has said my idea.

Please view: http://www.cnblogs.com/lovesong/p/4122262.html

Iscroll's Problem

1. Using the Iscroll page contains form elements, when the keyboard pops up and then retracted, the page can not be dragged to the top place.

This always appears on Android, and the Iscroll version used is 4.2.5.

This turned out to be a very difficult problem, led to have input place can not use Iscroll, but fortunately later a colleague solved, the following is his method:

var_focuselem =NULL;var_keyboardisshow =false;d Ocument.body.addEventListener ("Focus",function(e) {_focuselem= E.target | |e.srcelement;},true);d Ocument.addeventlistener ("Hidekeyboard",function() {wrapper.scrolltop= 0;//Dom of the Iscroll_focuselem &&_focuselem.blur (); _keyboardisshow=false;}, false);d Ocument.addeventlistener ("Showkeyboard",function() {_keyboardisshow=true;}, false); Window.addeventlistener ("Resize",function() {  if(_focuselem &&_keyboardisshow) {_focuselem.scrollintoview (false); }});

Persistent storage

1.localstorage

This will be called as an installation package to persist the storage.

2.sessionstorage

Web session level (page Close is invalidated, refresh is not invalidated)

Memory Leaks

JavaScript memory leaks are easy to generate, and many people are not concerned with the problem, may not care, or do not know at all, but it does exist.

Common leaks are as follows:

1. The closure context is not released after binding.

2. The Observer mode was not cleaned up in time after the notification was added.

3. The timer's processing function is not released in time, and the Clearinterval method is not called

4. The view layer has controls added repeatedly, not removed.

In single-page mode, the memory leak problem is magnified. Since a single page is always in a webview (native container), it is not possible to destroy the WebView to reclaim the leaked memory, and as the user in a single page application operation, the leak of memory will increase more and more, the machine will also change the card (in the low-end machine more obvious).

Check the leak tool:

In fact, there are few tools to check JS memory, I only found the chrome developer tools to check.

Many people only use elements, Network, sources these three functions, profiles this view memory function should not many people used.

There are three options in the profiles.

Collect Javascript CPU Profile:

Gets the function that the page has performed over a period of time.

Steps to use:

1. Click on the Start2. Action Page 3. Click Stop to have the function performed during this time.Take Heap Snapshot:

Get a snapshot of the current page heap

Steps to use:

1. Directly click Take Snapshot, there will be the current page heap memory situation. PS: There is only a heap, the reason is not required stack, because the stack is only the storage variables and reference addresses, and the heap is the storage object, the stack of memory is much smaller than the heap.Record Heap Allocations

Log a period of time heap usage

Even with this tool, it is not easy to resolve memory leaks for the following reasons:

1. There are too many objects, and in many cases there is nothing to do.

PS: Some people say that they focus on the two objects, array, closure, but the actual time is too many objects.

2. It is difficult for some objects to find the cause of the leak, especially some complex controls.

Summarize

There is no connection between the contents of this article, just some scattered key points.

This series of summary to this will also come to an conclusion, six articles with the New Year 3 days to complete, but also just want to have a summary of their work, but also hope that my ideas can tell you, together to improve.

Additional:

Finally, attach the following refactoring UI framework:

This article for the original article, reproduced please retain the original source, convenient traceability, if there is the wrong place, thank you correct.

This address: http://www.cnblogs.com/lovesong/p/4297224.html

Hybird Framework UI Refactoring Path: Vi. The front-end thing (Javascript)