誰もが知っているが、誰もが考えているわけではないJavaScriptの別のニュアンス

最近、Javascriptに関する多くの記事が公開されました。 彼がどれほど悪いか、どれほど良いかを語るホリバーと、奇妙な機能について語り、 このような「なぜそう」かを噛む便利なホリバーの両方。

そして、私はこのトピックに微貢献することにしました。



典型的なタスクの1つである「キー値」の形式でデータを保存する場合、ほとんどの場合、Javascript開発者はオブジェクトを使用します。 オブジェクト自体がまさにそのように設計されているからといって、フィールド名がキーとなるハッシュテーブルです。 しかし、これには、やけどを負ったことがわかった欠点があります。 次のテストで説明します。

let a = { 'myKey': 'myValue' } let key = 'constructor'; // comes from outside source let b = a[key] || 'defaultValue'; expect(b).to.be.equal('defaultValue'); // fails
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、私がこれまでに取り組んだすべてのコードは、それを書いたすべての開発者が私がしたようにこの問題に出くわすことはなく、したがって、いかなる方法でもそれに対処しようとしなかったと述べました。



それが壊れた理由の詳細を伝えることは意味がありません、何が起こったかは完全に明白です。 そのような振る舞いにつまずく可能性は低いですが、それにもかかわらず、結局のところ、ゼロ以外です。 私が最初にしたかったのは、これを解決し、テーブルハッシュインターフェイスを提供するライブラリを見つけることでした。 しかし、検索すると、オブジェクトの使用から完全に隔離され、正直にハッシュを計算するライブラリのみが見つかりました。 もちろん、文字列や数字ではなくオブジェクトをキーとして使用する場合は、適用可能であり、必要です。 しかし、これらには次のような欠点もあります。「オーバーヘッド」を課しますが、誰もが同意できるわけではありません。 短い試練の後、私はあなたがまだ別の自転車を書く必要があるという結論に達しました。



ハッシュマップライブラリは、空の値ですべての基礎となるフィールドを非表示にすることにより、この問題を解決します。

  const result = {}; for (var prop of Object.getOwnPropertyNames(Object.prototype)) { result[prop] = undefined; } return result;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

使用方法はreadmeに記載されています。

さらに別のJSライブラリ

記事は短いことが判明し、この微小な問題について話すことはあまりありません。 したがって、ヒープに別のライブラリ-typescript-reexport-generatorに言及することにしました。 タイプスクリプトの開発プロセス中に、ファイル間でコードをエクスポート/インポートするさまざまな方法に頼りましたが、次の方法が最も便利であるという結論に達しました。 フォルダー内のすべての.tsファイルは、次のようにコードをエクスポートします。

 // file1 export function myFunction(){} // file2 export class myClass{}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、次の内容のindex.tsファイルがフォルダーに配置されます。

 export * from './file1'; export * from './file2';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで次のようにインポートできます：

 // import { myFunction } from './folder/file1'; import { myClass } from './folder/file2'; // import { myFunction, myClass } from './folder';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、同じフォルダーのファイル間で、次のようにインポートできます。

 import { myClass } from '.'; export function myFunction(){ // doSmth with class }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

別のミニウィンがあります：VSCodeでのナビゲーション（ctrl +マウスクリック）は、このようなエクスポートで最適に機能します。 ワンクリックで使用から実装までのナビゲーション。 デフォルトのエクスポートでは、2回のクリックでナビゲーションが実行されましたが、これはやや気のめいるため、すぐにこれを完全に拒否しました。



また、これらの再エクスポートを手動で記述しないために、gulp.watchを使用してタスクからこれらのindex.tsファイルを作成する単純なジェネレーターを作成しました。 同じインポート/エクスポート方法を使用する場合、ライブラリが役立つ場合があります。



ライブラリの欠点、およびライブラリがない場合、VSCodeはファイルの変更を監視しないため、エクスポートで新しく作成されたファイルでは、外部からのインポートがすぐに許可されません。 スタジオが新しいラインがそこに出現したことを「見る」ために、手でインデックスを作成する必要があります。 すでに私に依存している別の欠点は、gulp.watchが正確に何が変更されたかを言わないことです;したがって、ジェネレーターはプロジェクト内のすべてのファイルを表示（および解析）する必要があります。 将来、おそらくこれが決定されるライブラリの次のバージョンを作成するでしょう。 最初のパスのみが完了し、変更されたファイルのみが解析されます。