フロントエンドインタビュー

私は以前からフロントエンド開発に従事しており、開発レベルは向上していません。最近、流行病のため自宅で検疫され、日々の業務を振り返り、学習方法に問題があると感じました。入力は常にありますが、出力はありません。今日、私は私の勇気を集め、私の最初の出力を書き始めます。1つは知識の理解を深めることであり、もう1つは知識の要約と導入を行うことです。私の記事の内容は、個人的な知識のポイントをまとめたものですが、間違った理解があれば是非訂正していただければと思います。

1. es6での約束の状態は何ですか？どのような問題を解決できますか？
（私の答え：待機状態、満足状態、および拒否状態。）
1.1状態：
①保留中、ネットワーク要求が進行中などの待機状態、またはタイマーが切れていない。
②充足の状態充足状態レゾルバをアクティブにコールバックすると、充足状態になり、.then（）メソッドがコールバックされます。
③拒否、拒否ステータス：積極的に拒否をコールバックすると、拒否ステータスになり、.catch（）メソッドがコールバックされます。
1.2解決
できる問題：①戻りデータを取得するために、複数の同時リクエストをサポートできます。
②コールバック地獄の問題を解決

2. divを水平および垂直に中央揃えするにはどうすればよいですか？

（私の答え：親要素と子要素の幅と高さを知って、子要素を親要素内で水平方向と垂直方向の中央に配置します。）

<style>
    
      .parent {
       width: 500px;
       height: 500px;
       background-color: pink; 
       position: relative;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: deeppink;
        position: absolute;
        top: 200px;
        left: 200px;
      }
      
    </style>

この答えは、私が答えたときに口頭計算で上と左が計算されましたが、実際の開発では実用的ではありません。インタビュアーは私に他の解決策があるかどうか尋ねませんでした。要素を垂直方向にセンタリングするには、いくつかの方法があります。
2.1ポジショニングと-marginを使用する：

	.parent {
       width: 500px;
       height: 500px;
       background-color: pink; 
       position: relative;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: deeppink;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;   /* 这个值是-width/2*/
        margin-left: -50px;
      }

2.2ポジショニングとマージンを使用：auto;

	.parent {
       width: 500px;
       height: 500px;
       background-color: pink; 
       position: relative;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: deeppink;
        display: inline-block;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
      }

3. MVVMモデルを理解するには？
（私の答え：モデルレイヤー、ビューモデルレイヤー、およびビューレイヤーです。ビューとモデルは直接相互作用しません。ビューモデルレイヤーは中央でデータを調整します）
： MVVMユーザー操作図
説明：MVVMはフロントエンドビューの階層的な開発で、主にフロントエンドページを次のように分割しますモデルレイヤー、ビューモデルレイヤー、ビューレイヤー。ViewModelレイヤーは、モデルレイヤーとビューレイヤーのコーディネーターであり、データの双方向データバインディングを提供します。

4. DOMのタイプは何ですか？

（私の答え：ドキュメントノード、ノードノード、要素ノード。）

要素ノードNode.ELEMENT_NODE（1）
属性ノードNode.ATTRIBUTE_NODE（2）
テキストノードNode.TEXT_NODE（3）
CDATA节点 Node.CDATA_SECTION_NODE(4)
エンティティ参照名ノードNode.ENTRY_REFERENCE_NODE（5）
エンティティ名ノードNode.ENTITY_NODE（6）
処理命令ノードNode.PROCESSING_INSTRUCTION_NODE（7）
コメントノードNode.COMMENT_NODE（8）
ドキュメントノードNode.DOCUMENT_NODE（9）
ドキュメントタイプノードNode.DOCUMENT_TYPE_NODE（10）
ドキュメントフラグメントノードNode.DOCUMENT_FRAGMENT_NODE（11）
DTDはノードNode.NOTATION_NODE（12）を宣言します
5.ネイティブDOMはどのように要素を取得しますか？
私の答え：document.getelementById、document.getelementsByxxx。
完全な回答：
IDで取得：getElementById

名前属性を取得：getElementsByName

タグ名で取得：getElementsByTagName

クラス名で取得：getElementsByClassName

セレクターを介して要素を取得します：querySelector

セレクターを介して要素のセットを取得します。querySelectorAll

HTMLタグを取得するメソッド：document.documentElement

bodyタグを取得するメソッド：document.body

6.ネイティブjsにクリックイベントがあります。最初にキャプチャまたはバブリングする必要がありますか？キャプチャとは何ですか？バブリングとは？
（私の答え：最初のキャプチャー、次にバブリング。イベントトリガーは、イベントキャプチャー、トリガーイベント、イベントバブリングの3つの段階を経る必要があります）私は
絵を描いてここに画像の説明を挿入
、合計2つに会いました。これらはすべて、最初の会社のインタビューの質問です。私のインタビューの欠点は、すべての回答がエッジでしか実行できず、回答が不完全で詳細であることです。

フロントエンドインタビュー

おすすめ