Vue でグローバル変数と定数を定義する方法

Vueでグローバル変数と定数を定義する方法

私は、プロジェクトのどこにでもアクセスできる変数を定義したいと思います。私はそれを使うたびにその変数を必要としません。

1を試してください:
global.jsを作成し、それを定義する

let a = 10;

エントリファイルにglobal.jsを導入する

import './global.js'

プロジェクトで使用される:

a // 报错

エラーが見つかりましたが、定義されていません。なぜですか?

これにはモジュールスコープが含まれます:
1各jsはモジュールに相当し、モジュールには独自のモジュールスコープがあります。
これは、次のことを意味します。変数メソッドは、このモジュールでのみ有効です。

2を試してください:
Vue.prototypeに変数を置き、プラグインを介してglobal.jsをグローバルに作成し、次のように記述します。

let a = 10;
export default {
    install () {
        Vue.prototype.$a = a;
    }
}

エントリーファイルに導入されました:

import G from './global'
Vue.use(G);

プロジェクトで使用される:

this.$a

これは大丈夫ですが、良くありません。この変数はVueを指していない場所では使用できません。

3を試してください:
変数をwindowオブジェクトの上に置き、global.jsを作成します。

window.a = 10;

エントリーファイルに導入されました

import './global.js'

プロジェクトで使用される:

a 

可能な限り、ウィンドウオブジェクトにアクセスできる限り、この変数にアクセスできます。
何か欠点はありますか?
まだ見つかりません。

実際のシナリオ分析:
実際の状況では、設定を行うことができます。たとえば、WeChat公開アカウントを作成すると、
appIdとappKeyを使って、私はそれをグローバルにアクセスできるようにしたいと考えています。
上記の説明によれば、あなたは次のように書くべきです:

Global.js


window.appId = 123;
window.appKey = 'abc';

定義する変数や定数が多すぎると、狂ってしまうことが明らかに分かります。
だから私たちは方法を欲しがります。私たちはそれを独自の方法で定義します:


appId = 123;
appKey = 'abc';

次に、これらの2つのパラメータを直接ウィンドウオブジェクトにバインドするfnメソッドがあります。

fn (appId, appKey);

結果はappIdで、appKeyはウィンドウオブジェクトにバインドされます。

実装:
オブジェクトの各キーをウィンドウオブジェクトにバインドするメソッドfnにオブジェクトを渡す必要があります。


let bindToGlobal = obj => {
    for (let key in obj) {
        window[key] = obj[key]
    }
}

更新されたバージョン:
これを使用すると、すべての変数/定数がウィンドウオブジェクトにバインドされ、既存のウィンドウオブジェクトの変数と簡単に衝突するため、動作を収束させる必要があります。
最初にウィンドウオブジェクトに属性を設定し、属性値は次のようにオブジェクトになります。


window.key = {};

次に、ウィンドウの代わりにwindow.keyに設定する必要のあるすべてのグローバル変数とメソッドを配置します。


let bindToGlobal = obj => {
    window.abc = {};
    for (let key in obj) {
        window.abc[key] = obj[key]
    }
}

さらに、このキーの名前を_constまたは_varにするか、ユーザーにこの変数の名前を制御させることができます。


let bindToGlobal = (obj, key='var') => {
    window[key] = {};
    for (let i in obj) {
        window[key][i] = obj[i]
    }
}

'bindToGlobal'を繰り返し呼び出すと、前に定義した変数/定数を上書きし、上書きしないで追加するので、コードが調整されます:


let bindToGlobal = (obj, key='var') => {
    if (typeof window[key] === 'undefined') {
        window[key] = {};
    }
    
    for (let i in obj) {
        window[key][i] = obj[i]
    }
}

それはここにあります。
最後に、 'bindToGlobal'を修正すると、後で使うのがより簡単で便利になります。

それについて議論する:

ウィンドウオブジェクトにバインドされたオブジェクトの名前は開かれていますが、名前を付けることはできますか?

2つの構成があり、すべてが定数であるとします。
1つはhttp.js、グローバルリクエストで設定されたドメイン名はwexin.jsです。一部のappIdは公開番号で設定されていますが、appkey

あなたはこのように縛られています:

bindToGlobal(http, '_http');
bindToGlobal(wexin, '_wexin');

このアクセス:

_http.host 
_wexin.appId

それが定数か変数かによって依然として束縛される:

bindToGlobal(httpConfig, '_const');
bindToGlobal(wexin, '_const');

このアクセス:

_const.host;
_const.appId;

前者のセマンティクスは間違いなく優れていますが、私はそのような点については考えていません。
1新しい人があなたのコードを維持したい場合、彼は定数にアクセスする必要があります。まず、あなたが定義した定数の名前が分かっていることを知っています。例えば、wexinを知っていて、変数の名前がis 、このアクセス時間:

wexin.appId;

また、 '_const'を使用すると、設定ファイルに移動して名前がappIdであることがわかります。このように使用できます。

_const.appId; // over

つまり、少しシンプルを維持するために、セマンティクスを犠牲にします。
あなたがセマンティクスを追求しているなら、あなたは非常に上質で、7,8個のキーがあると想像してください。

2上記の質問を覚えておいてください、将来、あなたは数ヶ月間維持する必要があります。またはいつかこのプロジェクトを行う必要があります。変数を訪問するときに、キー名について考える必要があります。
_const.appIdを統一して、もっと簡単なもの。

元のリンク