UI组件的初期架构思想

组件步骤

设计组件 ----> 实现组件

架构设计

model + component = view

1. design.md
   1. 这个是更具组件化的（Properties，Methods，Inherit，Attribute，Config & State， lifecycle，Children ）设计出一个组件标准文档
2. webpack-loader
   1. 通过webpack-loader将desgin.md 生成 model Object。一个组件模型对象
3. model
   1. 这个就是通过loader生成的组件模型
4. component
   1. 通过model的组件模型，使用相关view库（vue react 或者 web-component）实现对应组件

设计的优点是：

1. 组件开发和设计得到很好的分工。组件设计和组件开发解耦，但是可以通过loader构建组件模型
2. 组件模型只会依赖于组件化思想，与view实现库解耦。可以那model结合任意view库实现。可以使用jquery， 可以使用jsx（涉及生命周期还不知道咋搞） 可以使用vue 也可以使用react
3. 核心文档直出

技术难点:

1. design.md的格式规范化
2. model Object的设计，怎么设计最适合使用
3. webpack-loader的设计与实现

伪代码

design.md

    ### 案例Carousel

    - state
      - activeIndex
    - property
      - loop time imgList autoplay color forward
    - attribute
      - startIndexloop time imgList autoplay color forward
    - children
      - 2
    - event
      - change click hover swipe resize
    - method
      next() prev() goto()
      play() stop()
    - config
      - useRAF
      - UsesetInterval(tick, 16)
      - userTimeout

通过webpack--loader生成:

model.js

class Carousel {
  // config都是全局属性,写死的常量
  constructor(config) {
    this.state = {
      activeIndex: 1
    }
  }
  get prop1() {
    return {
      loop
      time
      imgList 
      autoplay 
      color 
      forward
    }
  }

  set prop1() {
    SETTING_CODE
    return {
          loop
          time
          imgList 
          autoplay 
          color 
          forward
        }
  }

  setAttribute(attr) {
    SETTING_CODE...
    return {
      startIndex
      loop 
      time 
      imgList 
      autoplay 
      color 
      forward
    }
  }
  getAttribute(attr, value) {
    return {
      startIndex
      loop 
      time 
      imgList 
      autoplay 
      color 
      forward
    }
  }
  get children() {

  }
  set children(){}
  mounted() {

  }
  render() {}
}

Carousel.vue

// 这个生成一个组件模型对象
import { Carousel } from "design.md";
...
vue3.0 的 SFC