Red Envelope Project Summary---Traditional version

Effect

　　Online: Focus on suning easy to buy red envelopes, dots red envelopes in (has ended)

Offline: The browser opens the following address: (part of the data is not visible because the need to run, through authentication)

Group of Red Envelopes
Http://sale.suning.com/images/advertise/001/hb/getgrouphb.html?activityFlag=1
http://sale.suning.com/images/advertise/001/hb/getgrouphb.html?activityFlag=2
Http://sale.suning.com/images/advertise/001/hb/getgrouphb.html?activityFlag=3
Http://sale.suning.com/images/advertise/001/hb/getgrouphb.html?activityFlag=4
Http://sale.suning.com/images/advertise/001/hb/getgrouphb.html?activityFlag=5
Http://sale.suning.com/images/advertise/001/hb/getgrouphb.html?activityFlag=6

Collar Red Envelopes
Http://sale.suning.com/images/advertise/001/hb/gethb.html?status=0
Http://sale.suning.com/images/advertise/001/hb/gethb.html?status=1

My red envelopes.
Http://sale.suning.com/images/advertise/001/hb/myhb.html

Details of red envelopes
Http://sale.suning.com/images/advertise/001/hb/hbdetail.html

Features compatible with a variety of smartphones, ipads, pad

　　Benefit

For Suning easy to buy from every day to bring hundreds of thousands of of new user registrations to the present hundreds of

Highlight

Reason:

Integration scenario: FIS for merge compression, MD5 encoding. Gulp for HTML compression. Fis,gulp configuration file to see the source code.

Project Key points

Response type:
No difference for all mobile phones, ipads, etc.

Principle:

The fontsize of Html/body is set when the browser is loaded. The base value. Others are used in rem.

Process:

Image:

Do 3 sets of Figure <=320 320~480 480~640. Adapt.js sets a custom property for the body, and loads a graph of the different paths through custom attributes.

Actually did not do so. Because PNG is too big, more than 1M. The minimum can only be compressed to more than 200 K. Finally, I made the entire picture jpg, compressed to about 70K.

Application Framework
Features: human-constrained business rendering, global static class implicit layering
Architecture:

Service class: Process constraints.
Modular frame: None
Dom Library: jquery

Exception: DAO layer jquery comes with error.

LOG: None
　　　　　　Adapt the scene to 1-2 people. WAP Small Project. Red envelopes are such.
Advantages prior to direct coding. There is no need to make any preparations. Through the integration scheme, the performance also has certain guarantee. Develop at your whim.
Low maintenance of defects.

Integration Solutions

FIS, Gulp

Steps
1, go to the Red envelopes directory

2,fis RELEASE-OMPDD. /hb
3, remove the CSS, JS directory code
The 4,html interface moves the embedded code of the adapt.js to the body start tag. Swap the merge code with the location of the CDN's embed code.
5,gulp compressing HTML code

Reason

Why does packing take so many steps? 1,fis itself, it does not guarantee that the embedded code, merge code, CDN three in the original location of HTML, so need to be moved. 2, I am lazy, like 3, 5 it should be able to solve.

Performance None

Obvious flaws in the project

1, the buried point is not added AYSNC, will cause the first screen page came out, still loading. The JS wrapper should be used to ensure the last asynchronous and delay loading on 100MS.

2,jquery changed into Zepto

3, maintainability is too low, not suitable for collaboration. This is the reason why I have been making red envelopes alone.

Source

　　Http://10.27.5.1/svn/FED/code/hongbao/year-end Year-End

Red Envelope Project Summary---legacy