As a junior graduate, has now decided to switch to the front end, originally thought the front end is relatively simple, but found that the water is still relatively deep. I started to learn front-end content by myself in December. I learned basic content from W3CSHOOL, and I felt it was relatively easy to get started. But actually each simple knowledge point, has its deep usage. Especially after I wrote a round cast component, I deeply felt that the front step is not easy, but still very fun.

  • The source code
  • demo

I am looking for internship opportunities. If you have good opportunities, I hope you can recommend them to me

The text start

This paper introduces the realization of a rotation map effect, although it is a small rotation map component, but the master told me that I still need to follow a normal project process to conceive.

  • The requirements document
    • Typically requirements documents are proposed and validated by the product manager.
    • In this project, my role was to integrate product, development, and testing. For the sake of simplicity, I sorted out requirements documents by studying the functions of other people’s wheel map components.
  • Written plan
    • Figure out how to implement it before you write code, and be able to express your implementation process in words. The more detailed the better.
  • coded
    • After the program is written, basically want to understand the implementation process of the project and key details, so the coding implementation will come naturally.
  • Self test
    • After the coding is complete, the development needs to test itself to make sure that the required function points are covered and that nothing is wrong.
  • Published online
    • When the project is complete, it’s ready to go live.

Ok, nonsense no more to say, start the topic ~

The requirements document

Sometimes terminology is really important because it can greatly reduce the cost of communication for people in the same field. When Master Shifu first told me that he wanted me to practice my comprehensive abilities by implementing a wheel map component, I was stunned. Round broadcast graph, this concept has not heard before, but when the master from JINGdong, Taobao official website to point out to me which is round broadcast graph effect, I understand, this effect is the original round broadcast graph effect. I actually knew about this effect, but I didn’t know it was called that.

By studying the rotation chart of other people’s homes, I identified the following need points:

  • demand
    • Can realize from left to right round seeding.
    • Rotation to the last image, can seamlessly link to the first image.
    • Click the picture to jump to the specified address.

After determining the requirements, my master told me that these were only the functions proposed by the product as a non-technical person, but as developers, we also need to consider maintainable and reusable. As a result, I expanded on the following development requirements:

  • Development needs
    • Images and click links are configurable.
    • Supports the configuration of the rotation duration.
    • Supports the configuration of the multicast interval.
    • Supports the configuration of the container in a multicast diagram.
    • You can set the color, active color, radius, and distance from the bottom of the dot.

As you can see, there are only three requirements for the product, but there are so many additional considerations to consider in development besides the requirements of the product. Pretty scary…

You u see, you see, a small requirement for a product, how many things need to be considered for development. Hope the product can greatly understand the development.

After the requirements were confirmed, we started to write the design proposal.

Design scheme

Once we understand the requirements, we need to figure out how to implement them.

  • Define a multicast graph class.
  • Instantiate a multicast graph object that receives a configuration parameteroptions:
    • container
      • The caroute diagram container, which defaults to body.
    • imgList
      • Array of picture objects.
        • Url: image address.
        • Href: Click the jump link.
    • time
      • Duration of rotation.
    • delayTime
      • Time between rounds.
    • dotRadius
      • Thumbnail dot size.
    • dotColor
      • Default color for thumbnails.
    • dotActiveColor
      • Thumbnails activate colors.
    • dotBottom
      • The distance between the thumbnail dot and the bottom of the container.

With these two rules, we can agree on how callers should be used:

new Slider({}).init();
Copy the code

The reason for using Slider to instantiate an object to generate a Slider map is that there may be multiple Slider maps on a page. In order to make them irrelevant, the call is instantiated.

Now we’re going to define our init method.

The initialization method does a couple of things.

  • Find the Container and check the width and height of the container.
  • Generate an image wrapper container imgWrapper.
  • Generate img tags and wrap a div container around each IMG tag.
  • Insert each div container into imgWrapper.
  • Based on the first IMG object, an additional DIV container is generated and inserted at the end of the imgWrapper.
    • This was added to achieve a seamless rotation scrolling effect.
  • Insert imgWrapper into the multicast diagram container container.
  • Generates the thumbnail dot and inserts it into the specified position, setting the corresponding style.

We defined a imgWrapper to wrap the image element because we used CSS3’s Transform implementation for our rotation graphics, which combined with the Transition property of CSS3 to create a particularly smooth rotation animation.

Our final container structure looks like this:

<div>
    <div class="imgWrapper> 
       

        
       
 
       

        
       
 
       

        
       
  Copy the code

DOM elements are generated, and we need to style them properly. Here will not be detailed, interested students can look at the source code.

Next, add the wheel casting and thumbnail click events.

  • Add the transitionEnd event to the imgWrapper container and start the timer again after the transitionEnd event ends.
  • After init, a setTimeout timer is enabled to start the multicast timing.
  • When the mouse clicks on the thumbnail dot.
    • Clear timer.
    • Clear the excessive properties of imgWrapper.
    • According to the click index, directly locate the corresponding large picture.
    • Restart the timer.

The above is the general idea of the design scheme, but in fact there are some details in it, here will not be repeated, interested in this view of the source code.

coded

With the above design scheme, writing code is basically a lot easier, but for me as a beginner, it took a long time to realize, the whole process let me learn the following points more deeply:

  • Define the constructor.
  • Use the object. assign method to handle the merging of multiple Object attributes.
  • The specified parameters are passed in using the closure property.
  • Change this context using function.prototype. bind.
  • Create a DOM element using the createElement method of the Document object.
  • The DOM element is inserted into the specified position using the appendChild method.
  • Style the DOM element.
  • Use getComputedStyle to read the true style of the DOM element.
  • Add events to dom elements using addEventListener.
  • Transform and Transition.

All the above are very basic contents. Although I have learned them before, WHEN I really want to write a project, I find myself at a loss and do not know how to start. After learning to write this component, I found that I still need to practice my basic knowledge through projects.

The coding details will not be repeated.

Self test

Self-testing is the testing of requirements proposed by the product as well as new requirements added by the developers themselves to improve reusability. Self-testing is necessary in order to allow testers to test key features more directly and not spend time and energy on problems caused by their own development mistakes.

In this process, I put myself in the role of the component caller, using the component and testing the functionality.

online

After the test, launch online. My project is hosted on Github, so the launch process is just uploading the code to Github. In the process, I learned about common ways to use Git.

  • git clone
    • Clone the remote project to local.
  • git add
    • Add the files to the Git repository.
  • git commit
    • Commit the changes locally.
  • git push
    • Commit the changes to the remote server.
  • git checkout -b
    • Create a new branch and switch to the new branch.
  • git status
    • Check the status of your Git repository.

In the future

This component is implemented in native JavaScript, but there are still some shortcomings. In the future, we will improve this component and implement versions based on React and Vue technologies.

summary

The above is the process of a junior student developing a rote map component. In this process, I have mastered the process of project development, the use of Git, as well as the skills of using JS and CSS3 styles. I hereby send this article to all the new students who are ready to enter the front end like me.