Component-based Web App development and webapp Components

Component-based Web App development and webapp Components

By using components to develop Web apps, you are familiar with the entire workflow of front-end project development and the position of front-end personnel in the entire project. At the same time, I learned how to use the MarkMan tagging tool and cut the graph function of Photoshop. I also felt new about the entire front-end knowledge and further affirmed my interest in front-end development. Smiling

The overall idea is as follows: Use the MarkMan tagging tool to mark the design draft. Use Photoshop to cut images. First, use the fullPage. js plug-in to implement full-screen scrolling. In addition, fadeIn () and out-of-the-box fadeOut () implement component switching, and use return false to prevent event bubbles and event capture. Second, develop basic graphic components. Then, the content organization class H5 object is developed to implement the content page and component organization function, so that you can easily add page content and components (chained call) and integrate fullpage. js supports page switching (display of all pages through the loader function .) Add several pages (with fullpage. js integrated) through the H5 object, and use the animation effect to switch the component to implement the function of adding the component to the page. Then, the chart component class is developed based on the basic graphic component class and content organization class. Use html/css to implement bar chart and scatter chart components. Use canvas to implement line chart and pie chart components. Finally, the front-end page is integrated after all components are developed. In addition, Apache in XAMPP is deployed on the local server.

1. fullpage. js enables full-screen scrolling and component Entry and Exit Switching

2. Basic graphic component development

In the development of basic graphic components, first create the basic graphic Component Object H5ComponentBase, and add the ID, class name, text, and basic style settings for the object. Then, the component is bound to the corresponding onLoad ()/onLeave () Basic event when it is switched in and out.

3. content organization class H5 object

First, create an H5 object, add variables to it, that is, add id and div, and import it to the body. Defines an array of page variables to store each added page. Next, add a method for the H5 object. In the addPage () method, jQuery dynamically adds the div corresponding to the page, and imports the corresponding component name and in-page text into the page. Import the current page to h5 and import the current page to the page array for storage. In the Add component addComponent () method, initialize the passed name parameter and the cfg object. Use the slice () method of the array to locate the current page. Then, based on the type attribute of the cfg object, use the basic graphic Component Object H5ComponentBase to create the corresponding component and import the component to the current page. In the H5 object initialization loader () method, the onLeave () and afterLoad () callback functions in fullpage. js are used to trigger the onLeave () and onLoad () events of the selected component. Initialize and present the initial Page. Finally, the H5 object is returned. 4. Chart component-a scatter chart Component Object H5ComponentPoint is created based on the basic graphic component H5ComponentBase. Use jQuery to dynamically create a div structure for the scatter chart component and fill in the corresponding text in the cfg object. Use border-radius in css to design the div rounded corner and use transtion to achieve the animation effect. 5. Chart component-the basic graph component H5ComponentBase creates a column chart object H5ComponnetBar. The bar chart component can be regarded as a large div named line. It contains three small divs named name, rate, and per, respectively, indicating the corresponding text name, progress bar, and percentage, all are left floating; add a div in the progress bar and name it bg for an animated demonstration of the progress bar from 0 to rate.

6. Chart components-line chart

Create a line chart Component Object H5ComponentPolyline based on the basic graphic Component Object H5ComponentBase. First, use canvas to draw the underlying gridlines. Based on the data in the cfg object, the text is displayed at the corresponding position under the grid, and the gridlines and text are added to the component. Next, draw a circle for each data in the corresponding position, and link the adjacent points from the start point to the end point with a line. Then, the draw () function that draws the data point is used to constantly adjust its parameters to change the position of the data point. At the same time, the setTimeout () function is used to call the data point function draw () control its growth from 0 to 1 and exit animation from 1 to 0.

 

7. Chart components-pie chart

Create a pie chart Component Object H5ComponentPie based on the basic graphic Component Object H5ComponentBase. Add the canvas to create the gridline background. The bottom layer uses half of the width of the cfg object as the circle of the radius. Initialize the pie chart color array and use the corresponding formula to calculate the starting angle and ending angle of the pie chart. The Slice area can be drawn using arc () based on the center coordinates, radius, and start angle. The starting angle of the next sector should be changed.

Ps: During front-end page integration, Chrome is used to convert all data under the h5 object to a json string.

Ps: materials are mainly sourced from MOOC. At the same time, I would like to thank XXX for helping me solve the problem.