多くの企業では、チーム全体の開発効率を向上させるために、社内業務に適したいくつかのメソッド ライブラリが内部でカプセル化されています。たとえば、 1. アンチシェイク
スロットリング
2. 遅延読み込み、仮想スクロール
3. DOM の追加、削除、変更、検索、移動、ドラッグ 4.
ステータスの管理
Vue3 プロジェクトでは、このメソッド ライブラリはフック ライブラリで表されます。市場には、vueuse などの優れたライブラリが数多くあります。最近、インタビュー中に、フックについてオープンな質問をするのが好きです: loaclStorage の二次カプセル
化どのような問題を考慮する必要がありますか?
実際、これは非常に単純な質問ですが、面接官がビジネスを行う際に境界条件をさらに考慮するかどうかをテストしたいだけです〜 次に、この質問についての私の理解がほとんどないことについて話します（あまり包括的ではないかもしれません）
汚染を防ぐために名前付けに注意してください。
たとえば、現在、1 つのドメイン名の下に 2 つのサブプロジェクトがあります。
プロジェクト Aとプロジェクト
B
は両方とも userInfo を保存する必要があります。では、これら 2 つのデータ セットが相互に汚染されないようにするにはどうすればよいでしょうか? したがって、このデータ セットが一意であることを保証するために、名前付けに注意し、保存するときに対応するプロジェクト名のプレフィックスまたはその他の識別子を追加する必要があります。
const PROJECT_NAME = 'テストプロジェクト'
localStorage.setItem(
${PROJECT_NAME}_userInfo,
JSON.stringify({ name: 'lsx' })
)
バージョンに注意して反復を防ぎます
例を見てください 情報を格納する場合、型は string です
// データを格納
const set = () => { const info = get()if (!info) { localStorage.setItem(,'info_string ')}}// データを取得するconst get = () => { const info = localStorage.getItem()return info}その後、プロジェクトはしばらくオンラインになりましたが、現時点では、急遽オブジェクト型に変更することになりました この際、対応するアクセス方法も変更になりました// データの格納const set = () => { const info = get()if (!info) { localStorage.setItem (,JSON.stringify({ name: 'lsx' }))}}// データを取得const get = () => {
${PROJECT_NAME}_info
${PROJECT_NAME}_info
${PROJECT_NAME}_info
const info = localStorage.getItem(
${PROJECT_NAME}_info
)
return JSON.parse(info)
}
しかし、プロジェクトはしばらくオンラインであり、一部のユーザーがすでにこのデータを保存しており、保存されたデータは文字列であるため、これは実際には隠れた危険です。タイプですが、新しいバージョンの起動後、オブジェクト メソッドを使用してデータがフェッチされるため、JSON.parse (string) がエラーを報告し、通常のビジネス ロジックに影響を及ぼします。そのため
、バージョン番号を追加するのが最善です。または、いくつかのエラー互換性を実行します。これは回避できます~
const PROJECT_NAME = 'test-project'
// アップグレードするたびにバージョン番号を変更します。ルールは自分で決定します
const VERSION = 1
//データを保存
localStorage.setItem(
${PROJECT_NAME}_userInfo_${VERSION},
JSON.stringify({ name: 'lsx' })
)
// データの取得
localStorage.getItem(
${PROJECT_NAME}_userInfo_${VERSION}
)
適時性、プライバシー
適時性、つまり保存されたデータに適時性を追加する 一定時間が経過するとデータが適時になる データを保存するたびにタイムスタンプを追加する方法
/ /元の
localStorage.setItem(
${PROJECT_NAME}_userInfo,
JSON.stringify({ name: 'lsx' })
)
const TIME_OUT = 3 * 60 * 60 * 1000
// タイムスタンプを追加
localStorage.setItem(
${PROJECT_NAME}_userInfo,
JSON.stringify({ data: { name: 'lsx' }, // 現在の時刻を記録します time : new Date().getTime() } ) )
//データ取得時にタイムスタンプを判定する
const get = () => { let info = localStorage.getItem( ) info = JSON.parse(info) const now = new Date().getTime() if (now - info.time >= TIME_OUT) { localStorage.removeItem( ) return null } return info } localStorage に保存する必要があるデータがいくつかありますが、ユーザーに見られたくないので、この時点で暗号化する必要があります。 (暗号化ルールは当社が決定します)
${PROJECT_NAME}_userInfo_${VERSION}
${PROJECT_NAME}_userInfo_${VERSION}
// 暗号化関数
const encrypt = (v) => {}
// 復号化関数
const decrypt = (v) => {}
// データを保存します
localStorage.setItem(
${PROJECT_NAME}_userInfo_${VERSION},
// 暗号化
encrypt(JSON.stringify({ name: 'lsx' }))
)
// データを取得して復号化
decrypt(localStorage.getItem(
${PROJECT_NAME}_userInfo_${VERSION}
))
SSRと互換性あり
SSRはサーバーサイドレンダリングで、サーバー上でコードを実行し、ページにつなぎ合わせてブラウザに送信して表示するため、ブラウザ環境ではないためサーバー上ではlocalStorageを利用できません。比較をカプセル化する場合、Universal localStorage は SSR を考慮する必要があります
// localStorage の代わりに SSR 内のオブジェクトを使用します
const SSRStorage = { map: {}, setItem(v) { this.map[key] = v }, getItem(key) { return this.map[key] } } let storage = null // 環境を決定するif (!window) { storage = SSRStorage } else { storage = window.localStorage }