Here, I want to make a fool of myself and contribute some small examples of project experience writing!
1. The first project style project: Description of Tencent Butler's front-end animation works: This project restores a complete flash story animation into a front-end animation realized by JS+CSS3.
Link: https://dxb123456.github.io/Teng Xun/
Implementation technology: CSS+HTML+JS+H5+CSS3+JQuury;
Project difficulties:
1. Clear timer
Some animation effects need js to be generated automatically. Timeout and innertal are used to control time, where Timeout contains innertal. Click event and timer are not in the same js file. When clicking back and forth quickly, the timer reset will not work.
Solution: bind all timers of the page corresponding to li to li, and clear timeout and innertal every time you click.
2. Motion processing of colored polylines
For inclined P, if js is used to change its height and the values of top and left are changed according to mathematical logic, P will shift and shake when moving.
Solution: Give P a motion reference point, so that P does not need to change the top and left values when moving, just change the width or height.
3. Parabolic motion
The motions of two points in css are both linear motions.
Solution: Give the initial point a rotation angle, so it looks like a parabola.
4. Mask layer processing
In multi-level html rendering, it is impossible to achieve the masking effect of the middle layer.
Solution: You can use the mask layer at the bottom layer, but the mask effect in the middle layer needs to process the picture, change it into a png picture, and then conduct css operations.
5. Processing of cartoons
In Firefox and ie, the slow moving effect of small icons will appear stuck.
Solution: When giving exercise time, judge that if it is not a chrome browser, reduce exercise time.
6. Performance optimization
The use of pictures slows down the loading speed of animation and affects the user experience.
Solution: Use P to generate some pictures that can be replaced by P. Code and pictures are deeply compressed and uploaded. Second, the second project style project 1: Description of the game reward project: This project is a mobile phone APP, which is built with vue framework and involves the swiper touch sliding module. Lazy loading technology is adopted between slide sub-pages to ensure the user experience, and local storage technology is adopted in the iscroll pull-up loading and pull-down refreshing module, shopping cart module and login and registration module.
Job responsibilities: mainly responsible for page layout and data rendering, and cooperate with APP to complete page nesting.
Project architecture:
1. Build a single-page application using vue framework and vue router.
2. The project uses vuex to handle the communication between components, vue-resource to handle requests, and uses some functions in the mint-ui component library for rapid development, and quickly builds a development environment through vue-cli.
3. Adopt the mobile phone Taobao adaptation scheme.
4. Use Ali vector icon library.
Technical requirements:
Make use of the new features of HTML5 semantic tag +CSS3 for page layout, realize the dynamic effect of the page, improve the clarity and quality of the code, make the page fuller and the code more robust.
Developed by vue.js, the development mode of front-end separation is adopted.
Use the instructions and services in vue.js to connect with the background interface, exchange data, render pages, and realize the judgment of functional modules.
Use JavaScript to realize the logical processing of some functions and the dynamic effect of some pages.
In the project testing stage, node can be used to connect the database for interface docking and data rendering simulation to test whether the functional modules are perfect and the logic processing is correct.
Use the swiper framework to design some pages.
Write code with sass and sort compressed code with gulp. Project 2: Save Money Daily Project Description: This project is a mobile APP to promote product recommendation websites. It is a single-page application built with vue+webpack. The project adopts the syntax of vuex, vue-route, vue-resource and ES6, and adopts the idea of component to build the whole project, which makes the components highly reusable and the code very simple.
Responsibilities: Mainly responsible for the layout and data rendering of project pages, completing the interface docking with the back end, and coordinating with the back end to solve the problem of chaotic page layout in different browsers or different mobile phones.
Project architecture:
1. Build a single-page application using vue framework and vue router.
2. use vue+webpack to build the project environment.
3. Adopt the mobile phone Taobao adaptation scheme.
4. Use Ali vector icon library.
Technical requirements:
1. Project uses node(express Framework) +mysql to build the background server;
2. Build the project based on webpack and configure the third-party plug-in;
3. Use vue framework and vue-router to build project routing, and use vuex to separate individual file components and data.
4.Swiper is used to switch the carousel of banner, and iscoll and ajax are used to realize pull-up loading and pull-down refreshing.
5. Use hook function reasonably to realize data monitoring, page rendering, page node instantiation and other functions.