ネイティブ要素の概念

すべての人の健康。

カスタム要素を便利に使用するためのJavaScript（JS）ライブラリの概念を提案したかった（ロシア語では「独自の要素」と呼ぶ）。 Polymer、X-Tag、Bosonicなどを提供する前に、本文を最後まで読んでください。

はじめに

主なアイデアは、独自の要素を使用して、埋め込みHTML要素のネイティブスタイルアプローチにもっと似せることです。 たとえば、縦棒グラフ要素（ui-vboxhistogramm）を定義しました。 ページにいくつかのヒストグラムを追加しました。 Polymerを使用する場合、各ヒストグラムの視覚スタイルを個別に記述する必要があります。 また、各ヒストグラムの視覚的プロパティ（CSSプロパティではなく、カスタム要素に対して手動で定義された）が繰り返される場合、説明は冗長になります。 例で説明します。

<ui-vboxhistogramm id="histo1" column-count="5" column-width="10px"></ui-vboxhistogramm> <ui-vboxhistogramm id="histo2" column-count="5" column-width="10px"></ui-vboxhistogramm> <ui-vboxhistogramm id="histo3" column-count="5" column-width="10px"></ui-vboxhistogramm>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、HTMLのクラスシステムがすぐに頼みます。 ただし、クラスはネイティブCSSプロパティに対してのみ機能します。 その結果、JSで同様のクラスシステムを作成するタスクが発生しました。

ネイティブ要素の概念

まず、これらのプロパティを変更するネイティブスタイルに似た視覚化プロパティにアクセスしたいと思います。

 divElement.style.background = "color";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

独自の要素により、この大胆なアイデアを実現できます。

 //    ,              .           . class ExtendedStyleDeclaration { constructor(parentNode) { this._root = parentNode; } declare(declarationObject) { //                } } //  (element.xstyle.column),    class VBoxHistogrammCulumnStyle extends ExtendedStyleDeclaration { constructor(parentNode) { super(parentNode); } set count(value) { //      ,  xstyle saveProperty(this, "count", value); //       (canvas  svg,    ) } get count() { return getLastProperty(this, "count"); } set width(value){} get width() {} } //   (element.xstyle)   class VBoxHistogrammStyle extends ExtendedStyleDeclaration { constructor(parentNode) { super(parentNode); this.column = new VBoxHistogrammCulumnStyle(this); } set width(value) { //            , //       (   ()),       ,   . saveProperty(this, "width", value); //   ,      CSS-. // ,     ,    width ,      -  if(condition) { this._root.style.width = this.width; } else { this._root.style.width = "   "; } } get width() { return getLastProperty(this, "width"); } } //    class VBoxHistogrammProto extends HTMLElement { createdCallback() { setGroupsToQueue(this); //        group,          declareGroup this.xstyle = new VBoxHistogrammStyle(this); //           } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、ネイティブアプローチとの類推によって、さらに高度な方法で、要素のスタイルを設定できます。

 let histo1 = document.getElementById("histo1"); histo1.xstyle.width = "100px"; //or histo1.xstyle.declare( { width : "100px", column: { count: 5, width: "10px" } }); histo1.xstyle.column.count = 15; //        15 .      ,      .   count      (  CSS-). //or histo1.xstyle.column.declare( { count: 5, width: "10px" });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

グループ-クラスです

クラスを通してスタイリングの問題に戻ります。 classキーワードはすでにこの属性に予約されているため、私の意見では、それに最も近い値の名前はgroupキーワードです。 要素のグループ化は、インライン要素のクラスを定義するのと同様に発生します。

 <ui-vboxhistogramm id="histo1" group="histogroup1"></ui-vboxhistogramm> <ui-vboxhistogramm id="histo2" group="histogroup1"></ui-vboxhistogramm> <ui-vboxhistogramm id="histo3" group="histogroup1 histogroup2"></ui-vboxhistogramm>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現在、私たちの要素は共通の同様のプロパティによってグループ化されており、独自の要素で手動で定義されています。 グループ宣言は、JSコードで行われます。

 // declareGroup     groups,    let groups = declareGroup( { histogroup1: { width: "100px", column: { count: 5, width: "10px" } }, histogroup2:{} }); //         //  histogroup1   histo5 let histo5 = document.getElementById("histo5"); histo5.groupList.add(groups.histogroup1); //     groups   histo6 let histo6 = document.getElementById("histo6"); histo6.xstyle.declare( { group: groups });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

グループ宣言アルゴリズムは次のように実装されます。 独自の要素（ createdCallbackコールバック関数）を作成する時点で、特別なgroupListオブジェクトを使用するために、グループ化された要素のキューでグループのリストを整理する必要があります（たとえば、グローバルウィンドウオブジェクト内）。



groupListは、独自の要素に対してのみネイティブclassListに類似しています。 また、 追加メソッドと削除メソッドもあります。 addメソッド（個々の要素のdeclareメソッドと同様）は、要素の視覚的プロパティの説明を含む宣言オブジェクトを受け入れます。 したがって、 declareGroup関数は、その宣言オブジェクトからすべてのグループをバイパスし、キューからのすべての要素に対してそれらを追加します。



指定されたプロパティの優先度は、クラスと同様に実装できます。 プロパティがセッターまたは宣言メソッドを介して直接設定されている場合、グループのプロパティは強度を失います。つまり、オーバーラップします。

おわりに

まとめると。 概念の本質は、上記の例に示されている動作を実装するための一連のクラス（JS）と機能を提供することです。

• ネイティブ要素のスタイルを設定するための動的セッター、 element.style.propertyを介したネイティブスタイリングのメカニズムに近い
• 複数の要素に対して同じユーザープロパティ（たとえば、ヒストグラム列の数と幅）を記述するときに冗長性を避けるためにスタイルが似た要素のグループ化（CSSプロパティのクラスに類似）

その結果、多くの長所と短所を含む独自の要素の視覚的プロパティを記述するためのネイティブメソッドに近づきます。 このアプローチを実装する可能性を判断するために、知識のあるフロントエンド開発者の意見を聞きたいと思います。