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

一、好的JavaScript代码

1.各司其职：html、css各司其职。

2.组件封装：好的UI组件具备正确性、扩展性、复用性。

3.过程抽象：应用函数式编程思想。

二、组件封装

组件封装是指web页面上抽象出来的一个个包含模板html、样式css、功能js的单元。

好的组件具备封装性、正确性、扩展性和复用性。

1.结构-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> 
      </ul>
    </div>

2.表现-css

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

3.行为JavaScript

getSelectedItem(){
      const selected = this.container
        .querySelector('.slider-list__item--selected');
      return selected
    }

4.总结基本方法：结构设计(HTML)、展现效果(CSS)以及行为设计(API功能 EVENT控制流)

三、重构

1.解耦

将控制元素抽取成插件

插件与组件之间通过依赖注入方式建立联系

依赖注入：把有依赖关系的类放入容器中，解析出这些类的实例就是依赖注入，目的是实现类的解耦

2.抽象

将组件通用模型抽象出来

父类可以抽象出一个Component类，这个类体系相对比较完整，可以相当于是一个很小的组件框架。子类可以继承Component类。

3.过程抽象

用来处理局部细节控制的一些方法

函数式编程思想的基础应用

四、高阶函数

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

五、编程范式

命令式与声明式

  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);

总结

经过插件化、模板化以及抽象化之后，可以得到一个具备封装性、正确性、扩展性和复用性的UI组件。

过程抽象 / HOF / 装饰器

命令式 / 声明式

JavaScript | 青训营笔记