よくある質問のフロントエンドまとめ

1: ビューのレスポンシブ原則

Vueのレスポンシブ原則の中核は、ES5のprotectedオブジェクトのObject.defindePropertyのアクセッサプロパティにあるgetメソッドとsetメソッドです。 dataで宣言されたプロパティがアクセッサプロパティに追加され、dataのデータが読み込まれると自動的にgetメソッドが呼び出され、dataのデータが変更されると自動的にsetメソッドが呼び出されます。データが変更されると自動的に set メソッドが呼び出され、データの変更を検出するとオブザーバ Wacher に通知され、オブザーバ Wacher が自動的に再レンダリングをトリガします。

現在のコンポーネントは、新しい仮想DOMツリーを生成し、Vueフレームワークは、トラバースし、新しい仮想DOMツリーと各ノードの古い仮想DOMツリーの違いを比較し、それらを記録し、最後に、ロード操作、すべての記録された違いは、実際のDOMツリーにローカルの変更。Object.definePropertyは、双方向のバインディングを実現することができますが、まだ欠点がある、唯一のデータは、オブジェクトのプロパティをハイジャックすることができますので、オブジェクト全体のトラバースの深さに関係なく、どのように深い階層の、限り、配列に入れ子オブジェクトがあるとして、あなたはオブジェクトのデータの変更を聞くことができる配列内の変更を聞くことができない、プロキシは、この問題を持っていない、あなたは全体を聞くことができます。Proxyにはこの問題はなく、オブジェクト全体のデータの変更をリッスンすることができるので、vue3.0ではdefinedPropertyの代わりにProxyを使用します。

2：http通信の仕組みの問題

この種の質問は、httpは何ですか？httpは、リクエスト/レスポンスモデルに従っており、WebブラウザはWebサーバにリクエストを送信し、Webサーバはリクエストを処理し、適切な応答を返します。httpのコンテンツタイプには、html文書、gifイメージ、サウンドファイル、スタンドアロンアプリケーションなどがあります。

httpの通信メカニズムは、完全な通信プロセスでは、WebブラウザとWebサーバーは、次の7つのステップを完了することです：1：tcp接続を確立する、2：Webブラウザは、接続の要求を送信するWebサーバーのように、3：Webサーバーは、応答ヘッダを送信する、4：応答するサーバー、5：応答を送信するサーバー、6：ブラウザにデータを送信するサーバー、7：閉じるtcp接続の終了

3: 閉鎖の話

クロージャは、関数の中に内部関数を定義し、この内部関数が外部関数のスコープ変数を参照し、この内部関数を外部関数の戻り値として使用することで形成されます。次の例は

function a() {
 let name = ""
 function b(){
 console.log(" + name)
 }
 return b
}

クロージャを適切に使用することで、モジュール開発が容易になり、フォーマル・パラメータの数が減り、ライフサイクルが延びます。クロージャの不適切な使用は、これらの変数をメモリ内に保持することになり、 メモリを大量に消費してメモリ・リークを引き起こす可能性があります。

4: 配列でよく使われるメソッドのまとめ

Array.push()、Array.unshift()

この2つのメソッドは、それぞれ配列の末尾と先頭に新しい要素を追加します。

Array.pop()、Array.shift()

上記とは逆に、これら2つのメソッドはそれぞれ配列の末尾と先頭にある要素を削除します。

Array.map()

このメソッドは配列を走査して配列の各要素に対応する関数メソッドを提供し、 その結果は元の配列に影響を与えることなく新しい配列として返されます。

let arr = [1, 2, 3, 4, 5]
let newArr = arr.map(x => x*2)
// arr= [1, 2, 3, 4, 5] 元の配列は変更されない
// newArr = [2, 4, 6, 8, 10] 新しい配列を返す

Array.forEach()

このメソッドは map() メソッドと似ていますが、異なる点は、このメソッドには要素のグループを直接変更する戻り値がないことです。

Array.filter()

配列内のすべての要素を走査してフィルタリングし、 条件を満たす要素を新しい配列として返します。

let arr=[1,2,3,4,5]
const selectNum =>num => num >3
let newArr = arr.filter(selectNum)
// newArr =[4,5] 新しい配列を返す

Array.toString()とArray.join()

どちらのメソッドも配列を文字列に変換することができます。

let arr =[1,2,3]
arr.join('#') // 1#2#3

Array.splice(開始位置, 削除する要素数, elements)

このメソッドは、配列の追加、削除、および変更を行います。

let arr=[1,2,3,4,5]
arr.splice(0, 0, 'wa') // ['wa', 1,2,3,4,5]
arr.splice(1,1) // [1,3,4,5]

Array.concat()

このメソッドは、複数のアレイを1つのアレイにスプライスすることができます。

let arr1=[1,2,3] arr2=[4,5]
let arr= arr1.concat(arr2) // [1,2,3,4,5]

Array.isArray()

オブジェクトが配列かどうかを判定し、ブール値を返します。

Array.reduce()

このメソッドは、コールリターン関数のすべての要素、最終結果の戻り値、渡された値は、関数型でなければなりません：

let arr = [1, 2, 3, 4, 5]
const add = (a, b) => a + b
let sum = arr.reduce(add)
//sum = 15 累積効果に相当する

右から左に操作するArray.reduceRight()もあります。

Array.some()

このメソッドは、すべての要素を判定し、判定条件を満たす要素が存在すれば真を、判定条件を満たさない要素が存在すれば偽を返します。

let arr= [1, 2, 3, 4, 5]
const isLessThan4 => value => value < 4
const isLessThan6 => value => value > 6
arr.some(isLessThan4 ) //true
arr.some(isLessThan6 ) //false

Array.every()

このメソッドは、すべての要素を判定し、判定条件を満たす場合は真を、満たさない場合は偽を返します：

let arr = [1, 2, 3, 4, 5]
const isLessThan4 => value => value < 4
const isLessThan6 => value => value < 6
arr.every(isLessThan4 ) //false
arr.every(isLessThan6 ) //true

5：this指差しの問題

thisは現在のオブジェクトを意味します。thisがグローバルスコープで使用される場合、現在のページオブジェクトウィンドウを指します。thisが関数内で使用される場合、実行時に関数が呼び出されるオブジェクトに応じて呼び出されるものを指します。関数内で thisが使用されている場合、それは現在のページオブジェクトウィンドウを参照します。関数内で thisが使用されている場合、それは実行時に関数が呼び出されたオブジェクトを参照します。 また、applyメソッドやcallグローバルメソッドを使用することで、関数内の thisの特定の場所を変更することができます。

// グローバル関数を定義する
 function foo() {
 console.log(this.fruit);
 }
 // グローバル変数を定義する。.fruit = "apple";
 var fruit = "apple";
 // この時点で、関数fooの thisはwindowオブジェクトを指している。
 // この呼び出し方とウィンドウ.foo();と完全に等価である。
 foo(); // "apple"
 // オブジェクトをカスタマイズし、そのプロパティfooをグローバル関数fooに向ける。
 var pack = {
 fruit: "orange",
 foo: foo
 };
 // この時点で、関数fooの thisはウィンドウを指している.pack 
 pack.foo(); // "orange"

グローバル関数applyとcallは、関数内の thisの方向を次のように変更するために使用できます：

// グローバル関数を定義する
 function foo() {
 console.log(this.fruit);
 }
 // グローバル変数を定義する
 var fruit = "apple";
 // オブジェクトをカスタマイズする
 var pack = {
 fruit: "orange"
 };
 // ウィンドウに相当する.foo();
 foo.apply(window); // "apple"
 // このとき、fooの this === pack
 foo.apply(pack); // "orange"

6: nullとundefinedの違い

nullはオブジェクトがない、つまりここには値がないことを意味し、undefinedは値がない、つまりここには値があるはずだが定義されていないことを意味します。

console.log(null==undefined); //true デフォルトではどちらもfalseに変換されるからだ。
console.log(typeof undefined); //"undefined" 
console.log(typeof null); //"object" 
console.log(null===undefined); //false "==="nullとundefinedは同じではないので、出力は "false "となる。”

nullとundefinedの数値データ型への変換

nullのデフォルトは0

undefinedはデフォルトでNaNに変換されます。

7: ブラウザのローカルストレージの問題

セッションストレージは永続的なローカルストレージではなく、セッションレベルのストレージです。

ウェブストレージとクッキーの違い

クッキーは似ていますが、違いは、より大容量のストレージ用に設計されていることです。クッキーは、必ず帯域幅を浪費する上に、送信されます。 その他、setItem、getItem、removeItem、clearなどのメソッドは、setCookie、getCookieとは異なります。 しかし、クッキーの役割は、サーバーと対話することです。しかし、クッキーの役割はサーバーと対話することです。ウェブストレージはローカルにデータを「保存」するために生まれただけなので、UserDataに加えてブラウザサポートも実際にはウェブストレージです。

UserData以外のブラウザサポートは、実際にはウェブストレージです。sessionStorageは、removeItemなどの同じ操作メソッドを持っています。

8: display:noneとvisibility:hiddenの違い

display:noneは対応する要素を非表示にし、文書レイアウトの中でその要素に割り当てられるスペースはなくなり、その両側の要素は統合されます。

visibility:hiddenは対応する要素を非表示にしますが、文書レイアウトの元のスペースは保持します。

9: vue-routerのクエリとparamsの違い

this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})パラメータ {{this.route.query.userId}}を取得します。

this.$router.push({name: 'detail',params:{id: 'abc'}})パラメータ {{this.route.params.userId}}を取得します。

queryはajaxのgetに近く、paramsはpostに似ています。もっと簡単に言うと、前者はブラウザのアドレスバーにパラメータを表示し、後者は表示しません。

10. URLを入力してからページの読み込みが完了するまで、何が起こりますか？--フロントエンドの視点

1：ブラウザはキャッシュレコードの存在を探し、存在すればキャッシュされたページの内容を表示します。

2: DNSはURLに対応するIPを解決します。

3: IPに基づくTCP接続を確立します。

4: HTTPがリクエストを開始します。

5:サーバーはリクエストを処理し、ブラウザはHTTPレスポンスを受け取ります。

6:ページをレンダリングし、DOMツリーを構築します。

7:TCPコネクションを閉じる

11.テンプレート文字列

はこの$varible,\text{在以往的时候在连接字符串和变量的时候需要使用这种方}{\text{式}}^{\prime }strin{g}^{\prime }+varible{+}^{\prime }strin{g}^{\prime }\text{但是有了模版语言后可以使用}string$string′＋varible＋′string′stringvaribleという形ですが，以前は文字列と変数の接続で，この′string′＋varible＋′string′を使う必要がありましたが，テンプレート言語では文字列｛varible｝stringを使うことができます。varible}文字列。基本的な使い方は以下の通りです：

//es5 
var name = 'lux';
console.log('hello' + name);
//es6
const name = 'lux';
console.log(`hello ${name}`); //hello lux

12.0.5pxの直線を引きます。

height: 1px;
transform: scale(0.5);

13.css 継承可能なプロパティと継承不可能なプロパティ

継承可能なプロパティ: font-size, font-family, color

継承不可能なスタイル： border、padding、margin、width、height

1:webpackとは？

webpackは静的モジュールパッカーであり、依存関係に基づいてモジュールを静的に分析し、指定されたルールに従ってモジュールから対応する静的リソースを生成します。

2: webpackのコアコンセプト

Entry: パッケージのエントリーポイントとして使用するファイルを指定します。

出力: 終了ポイント、出力ファイルの場所とパッキング終了後の出力ファイル名を設定できます。

ローダー: ローダーは、すべてのモジュールファイル形式をwebpackが認識できる有効なモジュールに変換します。

プラグイン：プラグインの機能、あなたは、Webpackの機能を拡張することができ、ローダーが需要を満たすことができない場合、あなたはそれに対処するためにプラグインが必要です。