記事ディレクトリ
1.コンポーネント間で値を手動で渡す
[Vue Basics Nine] – 親コンポーネントと子コンポーネント間の値の受け渡し
[Vue Basics Ten] – 兄弟コンポーネント間の値の転送 [Central Event Bus、メッセージ サブスクリプションおよびパブリッシング]
2. Promiseによるスリープ実装
const sleep = (time) => {
return new Promise((resolve, reject) => {
setTimeout(resolve,time)
})
}
sleep(3000).then({
console.log('延迟三秒才执行的哦')
})
3. 手ぶれ補正とスロットリング
3-1
-
関数アンチシェイクとスロットル: js コードの高頻度実行を最適化する手段
- js の一部のイベント:
像resize、scroll，鼠标的mousemove、mouseover，input输入框的keypressイベントがトリガーされると、イベントにバインドされたコールバック関数が継続的に呼び出され、リソースが大幅に浪費され、フロントエンドのパフォーマンスが低下します。 - エクスペリエンスを最適化するには、このタイプのイベントへの呼び出し数を制限する必要があります。
- js の一部のイベント:
3-1-1 手ぶれ補正
-
アンチシェイク: イベントがトリガーされてから n 秒後にコールバックを実行します。n 秒以内に再度トリガーされた場合は、タイミングを再開します。
-
var timer; function debounce(fn, delay) { clearTimeout(timer); timer = setTimeout(function() { fn(); },delay); }- 例のデバウンスは手ぶれ補正機能です
-
var タイマーは setTimeout の親スコープ内にのみ存在できるため、同じタイマーであり、手ぶれ補正関数の呼び出しとコールバック関数 fn のパラメーターの受け渡しを容易にするために、これらの問題を解決するためにクロージャーを使用する必要があります。問題
function debounce(fn, delay) { var timer; // 维护一个timer return function() { var _this = this; var args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(function () { fn.apply(_this, args); // 用apply指向调用debounce的对象，相当于_this.fn(args) },delay); } }- クロージャを使用した後、パラメータの受け渡しと手ぶれ補正機能のカプセル化の問題を解決するために、手ぶれ補正が必要な関数を他の場所でデバウンスするために渡すことができます。
3-1-2 スロットリング
-
時々、関数を 1 回だけ実行します
-
タイマーはスロットル機能を実装します。
function throttle(fn, delay) { var timer; return function () { var _this = this; var args = arguments; if (timer) { return; } timer = setTimeout(function () { fn.apply(_this, args); timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器 }, delay) } } -
タイムスタンプはスロットル機能を実装します。
function throttle(fn, delay) { var previous = 0; // 使用闭包返回一个函数并且用到闭包函数外面的变量previous return function() { var _this = this; var args = arguments; var now = new Date(); if(now - previous > delay) { fn.apply(_this, args); previous = now; } } }
3-2 機能制限と手ぶれ補正の類似点と相違点
-
同じ点:
- どちらも setTimeout を使用することで実現できます
- 目的: コールバックの実行頻度を減らし、コンピューティング リソースを節約します。
-
違う：
-
手ぶれ補正機能：
- 継続的な操作期間が終了したら、clearTimeout と setTimeout を使用してコールバックを処理します。
- 一定時間連続してトリガーされたイベントは最後に一度だけ実行されます
-
機能のスロットル:
- 継続的な操作では、一定期間に 1 回だけ実行され、パフォーマンスを向上させるために高頻度のイベントで使用されます。
- 一定期間内に 1 回だけ実行することに重点を置く
-
3-3 アプリケーションシナリオ:
3-3-1 手ぶれ補正機能
- 継続的なイベントの場合、トリガーする必要があるコールバックは 1 つだけです。
- 検索ボックスの検索入力
- ユーザーが最後に入力した後、リクエストを送信します
- 携帯電話番号、メール認証入力検知
- ウィンドウサイズサイズ変更
- ウィンドウの調整が完了した後でのみ、レンダリングの繰り返しを防ぐためにウィンドウ サイズを計算します。
- 検索ボックスの検索入力
3-3-2 機能のスロットリング
- 一定間隔でコールバックを実行する
- スクロールしてロードするか、さらにロードするか、一番下までスクロールして聞いてください
- Google検索ボックス、検索関連付け機能
- 頻繁にクリックして送信する、フォームを繰り返し送信する
4 番目に、JS は加算、減算、乗算、除算を実装します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="tex1" />
<select id="select">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="tex2" />
<input type="button" value=" = " id="button" />
<input type="text" id="fruit" />
<script>
var button = document.getElementById("button");
button.addEventListener("click", count)
function count() {
var a = parseInt(document.getElementById("tex1").value);
console.log(a);
var b = parseInt(document.getElementById("tex2").value);
console.log(b);
var selectSign = document.getElementById("select").value;
switch (selectSign) {
case '+':
answer = a + b;
break;
case '-':
answer = a - b;
break;
case '*':
answer = a * b;
break;
case '/':
answer = a / b;
}
document.getElementById("fruit").value = answer;
}
</script>
</body>
</html>
5. アルゴリズム: 二分探索
当時のトピックが何であったかは忘れてください。知識のポイントは二分探索です