WEBAPP Reader Project Practice

This is a webapp reader of the project, is the teacher of the Nets teaching a real combat, first give the project source code in GitHub address: Https://github.com/yulifromchina/MobileWebReader.

The project is very much, but the type of perfectly formed, for the front-end novice, still has the learning value.

First, the project results show

Ii. technology used in the project

Language: Html,css,js

Plug - ins:

Zepto.js: Using the JS Library on the mobile side, the syntax is similar to jquery, but it adds mobile events such as touch, removing browser-compatible code, and therefore more lightweight

Jquery.base64.js: Decoding base64 encoded plugins

Jquery.jsonp.js: Plug-in that provides JSONP requests

Three, the Project realization function analysis

1. HTML structure

The structure of the reader is mainly the top column, the main body of the article, the console panel, the bottom of the column sections:

2. Static page interaction

The features you need to implement are:

1) Click on the center of the screen, the bottom bar appears, click again, the upper and lower sidebar disappears (this is why in the previous code, added a response to the touch screen div This structure, its width can be set to about 30% of the width of the screen)

2) Click on the font, the Control Panel appears, the panel can adjust the size of the font, the panel can set the background color of the content body

3) Click Night/day, background color will be changed to dark black/milky white

For the above functions, it is necessary to optimize the details after completion:

1) When the user scrolls the page, the upper and lower sidebar should disappear, so as not to prevent users from reading

2) When adjusting the font size, there should be the maximum font and minimum font limit;

When setting the background color, the selected color of the button, the periphery also has a slightly larger circle;

When setting the font, the font icon should be highlighted;

3) Click Night/day, this part of the function is actually a subset of background color switch, then this part of the code is reusable;

After completing the preliminary optimization, we can further improve the following:

1) User-set font and background color, whether it can be cached, so that the page does not change when refreshing

3. Interaction with the background

The project is to put some JSON files in the Data folder, to simulate the return value of the service side, here are the problems to solve:

1) The data requested in the project is more read than the data in the reading, then, how to cross-domain request

2) How to update to the page after getting the data

Iv. analysis of technical points of the project

1. HTML structure

1) Control Panel section, you can see the background color of a few buttons is opaque, and the panel background is translucent: the effect can be set by two Div, the first Div set to a semi-transparent background color, the second div as a container to hold the label such as a button

2. Static page interaction

1) need to use JS event to achieve CSS style switch, including click and scroll, for the background color of a few buttons, the same way to listen to events, here can use the way event delegate to reduce the code

2) cache background color and font size, can be implemented using local storage Localstorage

3. Interaction with the background

Use JSONP to achieve cross-domain access to data returned by the impersonation server

About JSONP Understanding: Because of the same-origin strategy, a.html can not directly obtain b.html content, so the use of <script> tags are not affected by the same-origin policy display characteristics, Request the content of b.html in script, b.html does not return content directly, but instead returns callback ({JSON data}), where Callback is the name of a callback function passed to b.html by a.html, so that b.html is actually returning a JS code, and the local browser executes the code.

WEBAPP Reader Project practices