如何写好js | 青训营

一、什么才是好的JS代码？ 在真正讲解写好 JS 的三大原则之前，我们先来谈论一个话题，什么才是好的 JS 代码呢？

对于好的 js 代码来说，应该要遵循的是以下三个原则。分别是：

• 各司其职
• 组件封装
• 过程抽象 那么下面，我们将依据这三个原则，来进行展开细述。

二、写好JS的一些原则

1. 各司其职 （1）定义 写前端的小伙伴们应该知道，前端为什么要分成 HTML 、 CSS 和 JS 。那其实实际上，在前端中， HTML 负责结构， CSS 负责表现，而 JS 负责行为。如下图所示： 总结：

• HTML/CSS 各司其职；
• 应当避免不必要的使用 JS 来直接操作样式；
• 可以用 class 来表示状态；
• 纯展示类交互寻求零 JS 解决方案。

2. 组件封装 （1）定义 组件是指 Web 页面上抽出来的一个个包含模板（ HTML ）、功能（ JS ）和样式（ CSS ）的单元。好的组件具备封装性、正确性、扩展性和复用性。

• 结构设计 HTML ；
• 展现效果 CSS ；
• 行为设计 JS ，分别包含 API(功能) 和 Event(控制流) 。 好了，到这里，我们的轮播组件基本上也就完成啦！但是呢，同学么看上面的代码，是否有发现存在什么样的问题呢？

在上面的几段代码设计中，主要存在以下问题：

• 构造函数太复杂
• 可扩展性和灵活性相对较小

（3）轮播组件重构：插件化

那如果是让你来重构这个轮播图组件，你又会怎么做呢？

现在，我们首先来对这个组件进行解耦。所谓解耦，就是：

• 将控制元素抽取成插件；
• 插件与组件之间通过依赖注入的方式来立联系。

class Slider{
 constructor(id, cycle = 3000){
   this.container = document.getElementById(id);
   this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
   this.cycle = cycle;
 }
 registerPlugins(...plugins){
   plugins.forEach(plugin => plugin(this));
 }
 getSelectedItem(){
   const selected = this.container.querySelector('.slider-list__item--selected');
   return selected
 }
 getSelectedItemIndex(){
   return Array.from(this.items).indexOf(this.getSelectedItem());
 }
 slideTo(idx){
   const selected = this.getSelectedItem();
   if(selected){ 
     selected.className = 'slider-list__item';
   }
   const item = this.items[idx];
   if(item){
     item.className = 'slider-list__item--selected';
   }

   const detail = {index: idx}
   const event = new CustomEvent('slide', {bubbles:true, detail})
   this.container.dispatchEvent(event)
 }
 slideNext(){
   const currentIdx = this.getSelectedItemIndex();
   const nextIdx = (currentIdx + 1) % this.items.length;
   this.slideTo(nextIdx);
 }
 slidePrevious(){
   const currentIdx = this.getSelectedItemIndex();
   const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
   this.slideTo(previousIdx);  
 }
 addEventListener(type, handler){
   this.container.addEventListener(type, handler)
 }
 start(){
   this.stop();
   this._timer = setInterval(()=>this.slideNext(), this.cycle);
 }
 stop(){
   clearInterval(this._timer);
 }
}
// 封装控制器函数
function pluginController(slider){
 const controller = slider.container.querySelector('.slide-list__control');
 if(controller){
   const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
   controller.addEventListener('mouseover', evt=>{
     const idx = Array.from(buttons).indexOf(evt.target);
     if(idx >= 0){
       slider.slideTo(idx);
       slider.stop();
     }
   });

   controller.addEventListener('mouseout', evt=>{
     slider.start();
   });

   slider.addEventListener('slide', evt => {
     const idx = evt.detail.index
     const selected = controller.querySelector('.slide-list__control-buttons--selected');
     if(selected) selected.className = 'slide-list__control-buttons';
     buttons[idx].className = 'slide-list__control-buttons--selected';
   });
 }  
}
// 封装左滑函数
function pluginPrevious(slider){
 const previous = slider.container.querySelector('.slide-list__previous');
 if(previous){
   previous.addEventListener('click', evt => {
     slider.stop();
     slider.slidePrevious();
     slider.start();
     evt.preventDefault();
   });
 }  
}
// 封装右滑函数
function pluginNext(slider){
 const next = slider.container.querySelector('.slide-list__next');
 if(next){
   next.addEventListener('click', evt => {
     slider.stop();
     slider.slideNext();
     slider.start();
     evt.preventDefault();
   });
 }  
}

const slider = new Slider('my-slider');
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();

（4）轮播组件重构：模板化 上面我们初步将控制元素进行插件化。细心的小伙伴可能已经发现，上面的图片数据，是固定的，我们如果想要滚动四张，那就得四个