デジタル管理プラットフォーム
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue パーミッションシステム事例
個人ブログアドレス
Lodash は、一貫性のあるモジュール式の高性能 JavaScript ユーティリティ ライブラリであり、Underscoreから分離されたスーパーセットとみなすことができます。
Lodash を使用すると、配列、数値、オブジェクト、文字列などの操作が容易になり、JavaScript が簡単になります。Lodash のモジュール型アプローチは、次の場合に最適です。
- 配列、オブジェクト、文字列を走査する
- 値の操作とテスト
- 関数に準拠した関数を作成する
lodashブラウザーの互換性を高めるために、古い es5 モジュール構文が使用されますが、代わりにlodash-eses6 モジュール構文が使用され、webpack などのパッケージ化ツールが実行tree shake(ツリーシェイキング最適化) して、未使用のコードを削除してパッケージ サイズを最適化できます。したがって、lodashライブラリを使用する場合は、lodash-esを通じてインポート操作を実行することをお勧めします。
注: ツリーシェイク (ツリーシェイク最適化) の効果: コンテキスト内の参照されていないコード (デッドコード) を削除します。
lodash-es をインストールする
npm i lodash-es
lodash-es に関数を導入する
import { shuffle, cloneDeep, throttle, debounce } from 'lodash-es'
1.1 シャローコピークローン
_.clone(value) valueの浅いコピーを作成します。コピーした値を返します。
var objects = [{ 'a': 1 }, { 'b': 2 }];
var shallow = _.clone(objects);
console.log(shallow[0] === objects[0]); // true
1.2ディープコピーcloneDeep
_.cloneDeep(value) 似ています_.cloneが、再帰的にコピーされますvalue。コピーした値を返します。
var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]); // false
1.3手ぶれ補正デバウンス
_.debounce(func, [wait=0], [options=])前回の呼び出しからミリ秒の遅延後にメソッドを呼び出すwaitデバウンス関数を作成します。func新しいデバウンス関数を返します。
パラメータ:
func(機能) : デバウンスする機能。[wait=0](数値) : 遅延するミリ秒数。[options=](オブジェクト) : オプション オブジェクト。[options.leading=false](ブール値) : 遅延が開始する前に呼び出しを指定します。[options.maxWait](数値) : 遅延がfunc許容される。[options.trailing=true](ブール値) : 遅延が経過した後に呼び出すように指定します。
// 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
// 当点击时 `sendMail` 随后就被调用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
'leading': true,
'trailing': false
}));
// 确保 `batchLog` 调用1次之后，1秒内会被触发。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);
// 取消一个 trailing 的防抖动调用
jQuery(window).on('popstate', debounced.cancel);
1.4スロットルスロットル
_.throttle(func, [wait=0], [options=])スロットリング関数、つまり wait minutes 内に最大func1 回。スロットリングを返す関数。
パラメータ:
func(機能) : スロットルを調整する機能です。[wait=0](数値) : スロットルするミリ秒。[options=](オブジェクト) : オプション オブジェクト。[options.leading=true](ブール値) : スロットルが開始される前に呼び出すように指定します。[options.trailing=true](ブール値) : スロットリング終了後に呼び出すように指定します。
// 避免在滚动时过分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));
// 点击后就调用 `renewToken`，但5分钟内超过1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);
// 取消一个 trailing 的节流调用。
jQuery(window).on('popstate', throttled.cancel);
1.5シャッフル値シャッフル
_.shuffle(collection)シャッフルされた値のコレクションを作成します。シャッフルされた新しい配列を返します。
パラメータ: collection (配列|オブジェクト) : シャッフルするコレクション
_.shuffle([1, 2, 3, 4]);
// => [4, 1, 3, 2]
Vueアニメーションの場合：
コード：