Analyze a stenciled Slider code

– Analyzing a Component (juejin. Cn)

As the book continues, most of the Slider we analyzed last time are still static, including the rotation picture, controller, page turning, etc., which need to be statically written into THE HTML file, which will cause us to modify not elegant at all. To add pictures, we need to rewrite the label, and to modify the control also need to modify the HTML and JS. Trouble in every sense. So can we optimize it so that the entire Slider is dynamically generated? Take a look at this Slider code analysis <– clickable

Analysis of the HTML

 <div class="slider-list" id="my-slider"></div>
Copy the code

There is nothing to analyze in this HTML section, but we use a slider container like div#my-slider.slider-list

Analysis of CSS

To analyze a vertical center, the core code of the following sentences

 .slide-list__next..slide-list__previous{...position: absolute;
     top: 50%;
     margin-top: -25px;
     height: 50px; . }Copy the code

Here we use the child absolute parent phase (the child element is absolutely positioned relative to the parent element), top: 50%; Margin-top: -25px; margin-top: -25px; margin-top: -25px; margin-top: -25px; margin-top: -25px; Move the element up half way to its desired position.

Offer another approachtransform: translate(0,-50%);replacemargin-top: -25px;You can achieve the same effect.

Analysis of JavaScript

0. First, we can see that the Slider constructor has changed a lot:

   1. The constructor takes an argument from the image address list
   2. containerHTML 由 render()Function to generate

render() {
  const images = this.options.images;
  const content = images.map(image= > `
    <li class="slider-list__item">
      <img src="${image}"/>
    </li>    
  `.trim());

  return `<ul>${content.join(' ')}</ul>`;
}
Copy the code

1. Render () function:

   1. To obtainimageswithmap()Traverse, and return a new array tocontent
   2. useTemplate stringTo traverseimageAssigned toimg 的 srcattribute
   3. Finally usingjoin()Splice, place<ul></ul>within
   4. returnul 的 HTMLcode

   Trim () has the same effect as trim()

registerPlugins(. plugins) {
  plugins.forEach(plugin= > {
    const pluginContainer = document.createElement('div');
    pluginContainer.className = '.slider-list__plugin';
    pluginContainer.innerHTML = plugin.render(this.options.images);
    this.container.appendChild(pluginContainer);

    plugin.action(this);
  });
}
Copy the code

2. registerPlugins(… Plugins also produce large changes:

   1. forEach()traverseplugins
   2. For traversal itemspluginTo generate adiv.slider-list__plugin
   3. div.slider-list__plugin 的 innerHTML 由 plugin.render()generate
   4. todiv#my-slider.slider-listadddiv.slider-list__plugin
   5. performplugin.action()Here,action()It does something similar to the constructors in the previous article

This time our controller, previous, and next are all const objects. If necessary, we simply pass in the corresponding variable name in slider.registerplugins () to generate the HTML code directly in the slider. When not needed, simply delete the corresponding parameters, without manually modifying any static HTML code.

For example, I need a button that returns an image. I can write a component in JS, and then use it with or without parameters.

Personal summary

I don’t know if analysis is helpful, but in my opinion, it’s like teaching code to yellow ducks. (Laughter) Taking notes can also help us understand or review. Next time I will write a plugin for analysis.