UIコンポーネントの初期アーキテクチャのアイデア

コンポーネントステップ

デザイン・コンポーネント ----> インプリメンテーション・コンポーネント

アーキテクチャ

モデル + コンポーネント = ビュー

1. design.md
   1. これは、よりコンポーネント化された方法でコンポーネントを設計するための標準文書です。
2. モデル
   1. これはローダーによって生成されたコンポーネントモデルです。
3. コンポーネント
   1. モデルのコンポーネントモデルと関連するビューライブラリを使用してコンポーネントを実装します。

このデザインの利点は

1. コンポーネントの開発と設計は分離されています。コンポーネント設計とコンポーネント開発は分離されていますが、コンポーネントモデルはローダーを介して構築することができます。
2. コンポーネントモデルは、ビュー実装ライブラリから切り離されたコンポーネント化の考え方にのみ依存します。モデルはどんなビューライブラリでも実装できます。jqueryを使うことも、jsxを使うことも、vueを使うことも、reactを使うこともできます。
3. コア・ドキュメント

技術的な問題

1. design.md のフォーマットの正規化
2. モデル「オブジェクト」のデザインと、その最適な使用方法。
3. webpack-loaderの設計と実装

擬似コード

デザイン.md

 ### カルーセルの例
 - 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