这是我参与「第四届青训营」笔记创作活动的第3天

一、重点内容

如何写好JavaScript。

二、详细介绍

JavaScript基本规则

JavaScript的标识符包括函数名、属性名、参数名、变量名、类名......
- 第一个字符必须是字母、下划线（_）或美元符号（$）；
- 除了第一个字符外，其他位置可以使用Unicode字符。（最好用ASCII编码的字母）；
- 不能和JavaScript的关键字、保留字重名；
- 可以用 Unicode 转义序列。
JavaScript严格区分大小写。

写好JS的一些原则

CSS各司其职：让HTML、CSS和JavaScript职能分离
组件封装：好的UI组件具备正确性、扩展性、复用性
过程抽象：应用函数式编程思想

各司其职

前端代码由三部分组成：

HTML(超文本标记语言)
CSS(级联样式表)
JavaScript
HTML负责网页的内容，比如正文；CSS负责网页的外观，比如字体；而JavaScript则负责让网页动起来，比如在你输入电子邮箱时，提醒你应该输入电话号码。

注意：JavaScript作为一种脚本语言，不能独立运行，但是可以借助浏览器运行（所有Web浏览器都支持JavaScript）。

如果要用原生JS写一个电商网站的轮播图，应该怎么实现呢？

HTML

 <div id="my-slider" class="slider-list">
      <ul>
        <li class="slider-list__item--selected">
          <img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png">
        </li>
        <li class="slider-list__item">
          <img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg">
        </li>
        <li class="slider-list__item">
          <img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg">
        </li>
        <li class="slider-list__item">
          <img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg">
        </li>
      </ul>
    </div>

#my-slider{
    position: relative;
    width: 790px;
  }

  .slider-list ul{
    list-style-type:none;
    position: relative;
    padding: 0;
    margin: 0;
  }

  .slider-list__item,
  .slider-list__item--selected{
    position: absolute;
    transition: opacity 1s;
    opacity: 0;
    text-align: center;
  }

  .slider-list__item--selected{
    transition: opacity 1s;
    opacity: 1;
  }

  class Slider{
    constructor(id){
      this.container = document.getElementById(id);
      this.items = this.container
      .querySelectorAll('.slider-list__item, .slider-list__item--selected');
    }
    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';
      }
    }
    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);  
    }
  }

  const slider = new Slider('my-slider');
  slider.slideTo(3);

组件封装

可以按照名字理解组件封装的作用。"封装"就是把许多零散的东西做出一个整体，比如将电线放在电箱内，不仅让使用者便利，而且让维修者思路清晰。

class Slider{
    constructor(id, opts = {images:[], cycle: 3000}){
      this.container = document.getElementById(id);
      this.options = opts;
      this.container.innerHTML = this.render();
      this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
      this.cycle = opts.cycle || 3000;
      this.slideTo(0);
    }
    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>`;
    }
    ...
  }

过程抽象

可以把过程抽象想象成一个锅，锅里面的面条，包括锅本身，它们都是数据，拿开锅盖的动作就是过程，因为它们都是一体的，所以不仅可以把锅和面条抽象成数据，还可以把拿开锅盖的动作也作为抽象的对象，然后进行抽象。

高阶函数

以函数作为参数
以函数作为返回值
常用于作为函数装饰器

  function once(fn) {
    return function(...args) {
      if(fn) {
        const ret = fn.apply(this, args);
        fn = null;
        return ret;
      }
    }
  }

编程范式

命令式
声明式
命令式比声明式给注重细节，命令式就像买菜，洗菜，切菜，炒菜，而声明式像买菜，炒菜

let list = [1, 2, 3, 4];
  let mapl = [];
  for(let i = 0; i < list.length; i++) {
    mapl.push(list[i] * 2);
  }

  let list = [1, 2, 3, 4];
  const double = x => x * 2;
  list.map(double);

三、总结

我对于好JS代码的理解是不用解释，别人就能明白你的代码。

跟着月影学JavaScript | 青训营笔记