フロントエンドアセンブリ

3331 ワード

一、背景
(一)なぜコンポーネント化開発
まず、フロントエンドコンポーネント化開発とは何かを理解します.日常の作業開発では、1ページの数百行、さらには数千行のコードロジックをjsファイルに書く場合に遭遇するはずです.通常、このコードは読みにくく、メンテナンスはおろか、新しい機能を追加し、古い機能を削除します.場所を変えると、思いがけないバグが発生するかどうか分からないからです.この場合、コンポーネント化開発、分割機能、パッケージコンポーネント、個別メンテナンスが必要です.現在、フロントエンドreact、vue、angularの3つのフレームワークが盛んに行われており、彼らの共通点はコンポーネント化思想である.
二、目標
(一)コンポーネント化開発の目標
コンポーネント化設計はできるだけ原生に近い状況で多重化、デカップリング、パッケージ化、抽象的な目標を達成し、最終的に開発に奉仕し、効率を高め、エラー発生率を低減する.
三、実施案
(一)コンポーネント化設計の方法
では、私たちはどのように開発を行うか、まず需要分析を行い、それからコンポーネント化設計を行い、コンポーネントのメカニズムとコンポーネントの体系を考慮します.
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.1 attribute 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)appendTo,render,appendChildなどのコンポーネントをDOMにレンダリングする方法

が必要です.

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データ展示リスト,table,carouselなど2.5通知クラスalert,loading,messageなど2.6その他backtop,scroll,wrapper
未完待続...

iview treeコンポーネントchecked,expand,indeterminate値がレンダリングされない問題の修正

fatal error C 1083:ファイルを含めることができません:“iostream.h”:No such file or directory