Mobile phone touch screen version of the page development summary

In the initial JS frame selection, the choice is jquery + jquery.mobile.

Frame Selection Questions:

"1" size problem, JQuery is 277KB, Jquery.mobile is 451KB, when the user is in a weak network, this size for the mobile phone side of the load, it is completely a disaster.
"2" aside the size of jquery.mobile, for mobile development, Jquery.mobile does not have an excellent advantage to say. In the process of use, Jquery.mobile will append the most useless CSS style names to the DOM elements of the page, greatly reducing the instability of the DOM layout.

Framework Selection Solutions:

"1" Zepto.js is a special for the mobile end of the JS framework, compressed before the size of 54.6KB compression after only 9.7KB greatly increased JS download speed.
The use of "2" zepto.js is almost exactly the same as JQ, greatly reducing the cost of learning, as long as the use of JQ, the direct use is good, and he will not give the DOM element of the page to add garbage style.


Tap Event Tap:

Click on the event to minimize the use of click, instead of tap, because click on the click will appear around 300ms delay.
But when using tap as a click event, when you click on the element positioning method for fixed positioning or absolute positioning, there will be a point of penetration.


For example, Gray is a translucent mask layer, used to do the background of the popup box, cover the App page, click A, the Mask layer disappears, click B, enter the "100% Principal and Interest Protection" section of the details page, if at this time will be bound to a tap event. When you point A, you will find a magical phenomenon, the mask layer will disappear, but disappear after the page will enter the "100% Principal and Interest Protection" section of the details page. It's because the tap incident was a bit of a mess.

Tap incident Point-through solution:
E.preventdefault (); Block "Default Behavior"
Does it feel simple? Simple does not matter, the most important is the perfect solution to tap the point of the problem, this is a bit like the native JS blocking event bubbling, about event bubbling, do not explain and record here.



Animate issues in Zepto.js:
On the mobile side, often deal with some animation effects, such as the page's picture Focus carousel effect, popup box fade effect, Zepto.js provides a function to deal with animation, Animate, in the processing of PC-side animation, this function is very elegant, but in the processing speed than the mobile side of the PC, Animate function is a little weak, in the processing of animation, barely can be done, but on some poor performance of the phone, the animation effect is not obvious, and even obviously see the animation is very card.


Animate problem handling in Zepto.js:
Touchslider.js is a special processing mobile page picture Focus carousel Effect of JS plug-in, this plug-in is very small, only a few KB large, the code is not small, that afternoon read the plug-in source, in fact, the logic is not complex, mainly JS + CSS3 to deal with the animation, with JS on the initial animation Processing, and the execution of the animation to CSS3, we all know that CSS3 in animation and transition interested can be privately to understand.


WebApp page Data Caching issues:
In the process of making the page, the page's offline cache card I have a long time, the middle of various attempts, all kinds of entanglements, which the sad and listen to Swaiiow Thin road.
HTML5 provides offline caching solutions for a variety of pages.

First Type: Application cache
Application is a simple data caching method that writes the files you want to cache toname.manifestThe configuration file. However, it is not feasible to study this scenario for some time, because the content that is written to the configuration item can only be cached, and when the phone cache is cleaned using software such as Phone 360, the cached data is cleaned out.

The second type: Localstorage and Sessionstorage
Then think of the second solution, Localstorage and Sessionstorage, both of which can be stored in the network data locally, the former saved data in the browser after the shutdown, still exist in the phone, even if you uninstall the application, if you do not manually delete the data, The data will be permanently present on the phone. The data stored by the latter will be cleaned up as the browser closes, so the Localstorage is selected for use. But with only data, you have to have a page frame to render it. Like water, if there is no glass in the water, water can never become the shape of the cup, now the data is available, but a container is needed to load it. And when the mobile phone does not have a mobile network, we can not get the page from the network, even if there is data, it is useless, so with a not very good method, the static page into the WebApp package, the advantage is no need to go to the network download CSS, JS and other content, the loading of data directly with Ajax!
Here, the problem seems to have been resolved, wait, and encountered problems, how can I tell if the phone has a network? Of course, the web side can send a request to the server through AJAX failure, if the failure proves that there is no network, this method seems feasible, but when the user is in a weak network, the AJAX request is bound to be very slow, there is a very large possibility of request failure, although only weak network or network. What about that? You can have Android and IOS to make network judgments, and then the network parameter token with the URL address, such as: http://www.baidu.com?token=0 when the incoming token=0, there is no network, token=1 when there is a network. IOS Everything is OK, looks like the problem solved the same, but, the Sao year, does not matter, in the Android 4.0 test, cannot get to the parameter, this is because, the Android 4.0 system does not support the parameter with the URL, just see the dawn, in the discovery of this problem, again into confusion, but it doesn't matter, men? Should be the Torrent Yong Jin, meet the difficult and on. So looking for Android development communication, find a solution, in a painful search, found that can be called by Android WebApp End JS to complete the transfer of parameters, test success. So it's done,

How to write Localstorage
var json_data = {id:12,name: "Yang", email: "[email protected]"};
Storage.setitem ("Json_data", Json.stringify (Json_data));

Localstorage Read mode
var json_data = Json.parse (Storage.getitem ("Json_data"));

Note: Localstorage can only save about 5M size data, 1M = 1024KB 1kb= 1024 bytes, according to a man two bytes to calculate, probably can store 2,621,440 Chinese characters, if it is an English letter or a number can store 5,242,880, this size completely Enough.

The third type: Websql
Look at the name to know, Websql is a web-side database, ie9~ie9+, Chrome, Firefox, Opera, Safari. The difference between Websql and Localstorage is that websql can build multiple tables, each of which equates to a localstorage, and it is clear that the size of the stored data is far greater than localstorage, but the complexity is much higher than Localstorage, the use of Websql and localstorage almost, do not do a little commentary!

Mobile phone touch screen version of the page development summary