前端组件化

一、背景

（一）为什么组件化开发

首先，我们要搞明白什么是前端组件化开发？
在日常工作开发中，你应该遇到过，将一个页面的几百行，甚至上千行的代码逻辑写在一个 js 文件中的情况。通常这种代码都很难读下去，更别说要维护起来，添加新功能，移除一些老功能了，因为你不知道改动一个地方，会不会出现意想不到的 bug。
这个时候，你就需要利用组件化开发，拆分功能，封装组件，单独维护。
现今前端react，vue，angular三大框架盛行，他们的共同点就是组件化思想。

二、目标

（一）组件化开发的的目标

组件化设计尽可能接近原生的情况下完成复用、解耦、封装、抽象的目标，最终服务于开发，提高效率，降低错误发生比率。

三、实施方案

(一)如何进行组件化设计

那么我们如何进行化开发呢，首先我们要进行需求分析，然后进行组件化设计，考虑组件的机制和组件的体系。

1、组件的机制

组件的创建与挂载
通过new class()来实现组件的创建，appendTo()来实现组件的挂载
生命周期
每个组件都有自己的生命周期，来对组件进行创建、挂载、更新、销毁，包括created、mounted、updated、destroyed。通过不同的生命周期可以完成数据的加载与更新，DOM的创建等
事件
事件绑定对于一个组件来说是很重要的，我们可以在里面写一些交互逻辑，来对组件进行一系列的操作。

//Event
    addEventListener(type, listener) {
        if (!this[EVENT_SYMBOL][type])
            this[EVENT_SYMBOL][type] = new Set();
        this[EVENT_SYMBOL][type].add(listener);
    }
    removeEventListener(type, listener) {
        if (!this[EVENT_SYMBOL][type])
            return;
        //从数组里删除元素
        this[EVENT_SYMBOL][type].delete(listener);
    }
    triggerEvent(type) {
        if(!this[EVENT_SYMBOL][type])
            return;
        for (let event of this[EVENT_SYMBOL][type]) {
            event.call(this); //es5
        }
    }

attribute、property
设置组件的属性，做成HTML一样风格的API，使其操作更接近原生
4.1attribute
attribute包括setattribute，getattribute

    getAttribute(name) {
        return this[ATTRIBUTE_SYMBOL][name];
    }
    setAttribute(name, value) {
        if (name == "width") {
            this.width = value; //HTML单向同步
            // if (this.onWidthChange)
                // this.onWidthChange();
            this.triggerEvent("widthchange");
        }
        return this[ATTRIBUTE_SYMBOL][name] = value;
    }

4.2 property
通过set get,对组件的属性进行操作

get width() {
        //this._property  存储变量
        return this[PROPERTY_SYMBOL].width;
    }
    set width(value) {
        return this[PROPERTY_SYMBOL].width = value;
    }

方法(methods)
我们需要使组件渲染到DOM中，例如appendTo，render，appendChild等方法

appendTo(element) {
    element.appendChild(this.root);
    this.mounted();
}

状态(state)
利用Symbol 来存储组件的状态，代码如下：

//存储私有变量
const PROPERTY_SYMBOL = Symbol("property");
const ATTRIBUTE_SYMBOL = Symbol("attribute");
const EVENT_SYMBOL = Symbol("event");
const STATE_SYMBOL = Symbol("state");

配置（config）
描述语言
随着webpack前端构建工具的兴起，组件化的描述语言也随之而来，主流的描述语言包括JSX，vue SFC ，css-loader
组件的基础能力
每个组件都有自己的能力，例如carousel组件包括动画和手势，tabview组件包括tabtext和tabcontainer

2、组件的体系

关于组件体系设计，主要包括基础组件，表单类组件，页面构造类，数据展示类，通知类和其他。

2.1 基础组件
button，icon，color
2.2 form类
input，radio，select，date，upload等
2.3 页面构造类
layout，container，nav，menu等
2.4 数据展示
list，table，carousel等
2.5 通知类
alert，loading，message等
2.6 其他
backtop，scroll，wrapper

未完待续...