タグ付けされた質問 「javascript」

反応アプリでファイアストアのタイムスタンプを表示する方法を理解しようとしています。 「createdAt」という名前のフィールドを持つFirestoreドキュメントがあります。 私はそれを出力のリストに含めようとしています（ここで関連するビットを抽出して、フィールドのリスト全体を読む必要がないようにします）。 componentDidMount() { this.setState({ loading: true }); this.unsubscribe = this.props.firebase .users() .onSnapshot(snapshot => { let users = []; snapshot.forEach(doc => users.push({ ...doc.data(), uid: doc.id }), ); this.setState({ users, loading: false, }); }); } componentWillUnmount() { this.unsubscribe(); } render() { const { users, loading } = this.state; return ( …

10 javascript  reactjs  firebase  google-cloud-firestore  unix-timestamp 

を使用する理由 (0, foo.fn)(); バインドを切断することです。これthisはバインドされfooなくなりますが、グローバルオブジェクトにバインドされます。 しかし、JavaScriptコード（またはGoogleのJSコード）がバインディングを切断する理由は何ですか？（そしてそれはアンチパターンですか？）

10 javascript 

これらのバージョンを使用する2つのAngularプロジェクトがあります。 9.0.0-next.6 8.1.0 バージョン9では、これを使用してwindowオブジェクトを提供および注入しました。 @NgModule({ providers: [ { provide: Window, useValue: window }, ] }) export class TestComponent implements OnInit { constructor(@Inject(Window) private window: Window) } それはうまくいきます。 このアプローチをバージョン8に適用すると、コンパイル中に警告とエラーがスローされました。 警告：TestComponentのすべてのパラメーターを解決できません… 私はこのように単一引用符を使用してそれを解決しました： @NgModule({ providers: [ { provide: 'Window', useValue: window }, ] }) export class TestComponent implements OnInit { constructor(@Inject('Window') private window: …

10 javascript  angular  typescript  dependency-injection  angular8 

問題の背景：ページに数学を表示するためにkatexを使用しています。次に、そのページの一部のPDFバージョンを作成したいので、すべてのCSSをインライン化してレンダラーに渡す、エクスポートするパーツを含むHTMLドキュメントを作成します。レンダラーはノードのリソースにアクセスできないため、すべてがインライン化されます。フォント以外は完全に動作します。 url-loaderとbas64-inline-loaderの両方を試しましたが、生成されたフォントはインライン化されていません。生成されたCSSをデバッガーで検査しましたが、古いURLはまだ残っており、フォントのデータURLはありません。 これは私の現在のwebpack.config.jsです： const path = require('path'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { "editor": './src/editor.js', "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js', "json.worker": 'monaco-editor/esm/vs/language/json/json.worker', "css.worker": 'monaco-editor/esm/vs/language/css/css.worker', "html.worker": 'monaco-editor/esm/vs/language/html/html.worker', "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker', }, output: { globalObject: 'self', filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { …

10 javascript  css  webpack  data-uri 

Uncaught TypeError：t.rgbは関数ではありません Angularアプリケーションを作成してビルドし、それを提供しようとしています $ ng serve --prod --aot これにより、コンソールで次のエラーが発生します Uncaught TypeError: t.rgb is not a function at HO (color.js.pre-build-optimizer.js:227) at GO (color.js.pre-build-optimizer.js:232) at rgb.js.pre-build-optimizer.js:36 at RH (ramp.js.pre-build-optimizer.js:4) at Module.zUnb (BrBG.js.pre-build-optimizer.js:16) at f (bootstrap:78) at Object.0 (index.js.pre-build-optimizer.js:26) at f (bootstrap:78) at t (bootstrap:45) at Array.r [as push] (bootstrap:32) アプリケーションが表示されない --prodフラグ（フラグ）を縮小しないでアプリケーションをビルドすると、機能します。 D3を使用しているときにのみこの問題が発生します …

10 javascript  angular  d3.js 

アップデート5 別のフィドルを作成して、予想される内容を示します。非表示のスカイドームとキューブカメラが追加され、環境マップが使用されます。私の場合、すでに述べた理由のため、これらの手法はどれも使用すべきではありません。 コードスニペットを表示 var MatcapTransformer = function(uvs, face) { for (var i = uvs.length; i-- > 0;) { uvs[i].x = face.vertexNormals[i].x * 0.5 + 0.5; uvs[i].y = face.vertexNormals[i].y * 0.5 + 0.5; } }; var TransformUv = function(geometry, xformer) { // The first argument is also used as an array …

10 javascript  three.js  geometry  texture-mapping  uv-mapping 

JavaScript（ES6）クラスのようsuper.__proto__ === this.__proto__です。 これが事実である理由を説明できますか？動作は異なるブラウザー間で一貫しているように見えるので、これは仕様のどこかに指定されていると思います。 次のコードを検討してください。 class Level1 { myFunc() { console.log('Level1'); } } class Level2 extends Level1 { myFunc() { console.log('Level2'); } } class Level3 extends Level2 { myFunc() { console.log('Level3 BEGIN ' + Math.random()); super.__proto__.myFunc(); console.log(super.__proto__ === this.__proto__); console.log('Level3 END'); } } const foo = new Level3(); foo.myFunc(); コードスニペットを実行する結果を非表示スニペットを展開 …

10 javascript  ecmascript-6 

で関数構成を使用して定義されたES6スタイルの関数がありasyncPipeます。 import { getItemAsync } from 'expo-secure-store'; const asyncPipe = (...fns) => x => fns.reduce(async (y, f) => f(await y), x); const getToken = () => getItemAsync('token'); const liftedGetToken = async ({ ...rest }) => ({ token: await getToken(), ...rest, }); const liftedFetch = ({ body, route, token, method = …

10 javascript  ecmascript-6  functional-programming  intellisense  jsdoc 

javaScriptを理解できませんpromises。次のコードを書きました。 var p = new Promise(function(resolve,reject){ reject(Error("hello world")); }); setTimeout(()=>p.catch(e=>console.log(e)),5000); これはChromeデベロッパーコンソールにすぐに表示されます。 しかし、5秒待った後、メッセージは次の画像のように自動的に黒に変わります。 私のjavaScriptコードと開発者コンソールの間でこの動作を見たことはありません。私のJavaScriptスクリプトは、開発者コンソールで「既存のコンテンツを変更」できます。 そこで、resolve次のコードを記述して、同じ状況が発生するかどうかを確認することにしました。 var p = new Promise(function(resolve,reject){ resolve("hello world"); }); setTimeout(()=>p.then(e=>console.log(e)),5000); しかし、この状況では、私の開発者コンソールには5秒後まで何も表示されず、そこに出力されhello worldます。 とが呼び出されるタイミングの点でresolveとのreject扱いが異なるのはなぜですか？ 追加 私もこのコードを書きました： var p = new Promise(function(resolve,reject){ reject(Error("hello world")); }); setTimeout(()=>p.catch(e=>console.log("errors",e)),5000); setTimeout(()=>p.catch(e=>console.log("errors 2",e)),6000); setTimeout(()=>p.catch(null),7000); これにより、開発者コンソールにいくつかの出力が発生します。時間0で赤のエラー、時間5秒でテキストに赤が黒に変わりerrors hello world、時間6秒で新しいerrors 2 hello worldエラーメッセージ、時間7秒で赤のエラーメッセージ。今私はreject実際に何回呼び出されるのか非常に混乱しています...私は迷子になっています...

10 javascript  asynchronous  promise 

現在、ボットランド用のスクリプトをいくつか書いています。Bot Landは、マウスとキーボードでユニットを制御する代わりに、APIを介してボットを制御するコードを記述し、ボットが他のボットと戦うリアルタイム戦略ゲームです。SC2のユニットに精通している場合は、まばたきストーカー、攻城戦車、メディック、ウルトラリスクに似たボットを作成できます。（これはソフトウェアエンジニアにとって非常に楽しいゲームですが、それはこの質問の範囲外です。） ボット制御には、3つのレベルの複雑さの増加があります。デフォルトのAI、スクラッチのようなプログラミング言語、およびBotLandScriptと呼ばれるJavaScriptの削減されたセットです。BotLandScriptの組み込みエディターは妥当ですが、すべてのコードを、グローバルなトップレベル関数がどこにでもある単一のファイルとしてアップロードする必要があります。当然、コードが長くなり始め、異なるボットが同じ機能を共有する場合、これはしばらくすると痛みを伴い始めます。 複数のボット用のコードの記述を容易にし、裸のJSでコーディングするときの意図しないエラーの可能性を減らし、他のプレーヤーを倒す可能性を高めるために、上記のTypeScriptプロジェクトをセットアップして、ボットごとに共通のライブラリとコードを提供しました。現在のディレクトリ構造は、次のようになります。 lib/ bot.land.d.ts common.ts BlinkStalker/ BlinkStalker.ts tsconfig.json Artillery/ Artillery.ts tsconfig.json SmartMelee/ SmartMelee.ts tsconfig.json libボット間で共有される共通コードであり、（TS以外の）ボットランドAPIのTypeScript定義を提供します。次に、各ボットは独自のフォルダーを取得し、1つのファイルにはボットコードが含まれ、もう1つのファイルにはボイラープレートが含まれtsconfig.jsonます。 { "compilerOptions": { "target": "es3", "module": "none", "sourceMap": false, "outFile": "bot.js" }, "files": [ "MissileKite.ts" ], "include": [ "../lib/**/*" ] } 各々が場合tsconfig.json内蔵され、対応する作成bot.jsボット自体ならびにからそれがtranspiled含むコードのすべてのコードでのcommon.jsます。このセットアップは、いくつかの理由で最適ではありません。特に、ボイラープレートの複製が大量に必要であり、新しいボットを追加するのが難しくなり、ボットごとに不要なコードが多く含まれ、各ボットを個別にビルドする必要があります。 ただし、これまでの私の調査では、私がやりたいことを簡単に行う方法はないようです。特に、新しいtsc -bオプションと参照の使用は機能しません。コードをモジュール化する必要があり、Bot Landはすべての関数がトップレベルで定義された単一のファイルを必要とするためです。 次のことをできるだけ多く達成するための最良の方法は何ですか？ 新しいボットを追加するために新しいボイラープレートは必要ありません（たとえば、tsconfig.jsonボットごとに不要） 使用import、未使用のコードを出力しないようにする一般的な機能のために、しかし、その後... すべての機能をボットランドの特定の形式で1つのファイルとして出力します ボットごとに1つ、複数の出力ファイルを生成する単一のビルドステップ おまけ：ビルドプロセスとVSコードの統合。現在、tasks.json各サブプロジェクトを構築するための対応する定型があります。 答えはおそらくに加えてGruntのようなものを含んでいるのではないかと漠然と推測しますtscが、確かにそれについて十分に知りません。

10 javascript  typescript  visual-studio-code  tsconfig 

開発環境では、私のアプリは問題なく動作します。本番環境では、次のエラーでクラッシュします。 Uncaught TypeError: (0 , _react.useEffect) is not a function これは、ReactをインポートしてuseEffectを次のように作成したファイルで発生します。 import React, { useEffect } from 'react' const X = () => { useEffect(() => { ... }) ... } この行のすぐ下にconsole.logを追加すると、本番環境ではuseEffectが実際に未定義であり、開発版では期待される機能であることを確認できます。 私は自分のpackage.json、yarn.lock、およびnode_modulesをチェックして、useEffectが導入された16.8.0未満である可能性のあるreactまたはreact-domバージョンを確認しました。しかし、すべて16.13.1であり、それらは主な依存関係であり、私は私の糸のキャッシュをきれいにし、node_modulesとyarn.lockを削除して、再インストールしようとしました。 追加と削除を試みpeerDependenciesましたが成功しませんでした。 2つの異なるバージョンのReactが実行されていないことを確認するためにチェックを入れましたがwindow.React1 = React、ライブラリwindow.React2 = React内とアプリケーション内に保存してチェックしています。 window.React1 === window.React2 それは本当だったので、それもそうではありません。 最後に、Reactのエイリアスをnode_modulesの特定のエイリアスに設定しようとしましたが、うまくいきませんでした。 機能することがわかった唯一の解決策は、次のようにインポートした場合です。 import React from 'react'; const …

9 javascript  reactjs  react-hooks  parceljs 

try { const val = 'correct value'; (() => { ((arg = val) => { const val = 'ignored value'; alert(arg); })(); })(); } catch (err) { alert(err.message || 'Unknown error'); } コードスニペットを実行する結果を非表示スニペットを展開 OS X Chrome、OS X Safari、Android Chrome、Windows Chrome、Windows Firefox、さらには Windows Edgeでは、「正しい値」を警告します。iOS SafariおよびiOS Chromeでは、「変数が見つかりません：val」という警告が表示されます。 次のスニペットはすべてiOSで機能します。 デフォルトの引数を使用しない（抜粋2）： try { const …

9 javascript  ios  ecmascript-6  scope 

ページにiframeがあります。SafariがサードパーティのCookieをブロックしているため、「開発者向けガイダンス」で以下の提案に従ってStorage Access APIを使用しようとしています。https：//webkit.org/blog/10218/full-third-party-cookie-blocking-and-more /。ドキュメントから次のコードをコピーしました： <script type="text/javascript"> window.addEventListener('load', () => { document.getElementById('test-button').addEventListener('click', () => { document.hasStorageAccess().then(hasAccess => { console.log('hasAccess: ' + hasAccess); if (!hasAccess) { return document.requestStorageAccess(); } }).then(_ => { console.log('Now we have first-party storage access!'); document.cookie = "foo=bar"; console.log(`document.cookie: ${document.cookie}`); }).catch(_ => { console.log('error'); }); }); }); </script> <button …

9 javascript  iframe  safari  storage-access-api 

ファイルダイアログからファイルを選択して[OK]をクリックした後、このコードを改善して無応答性/ページラグを削除するにはどうすればよいですか？ サイズが50〜100 KBのファイルをテストしています function handleFileSelect(evt) { var files = evt.target.files; // FileList object // files is a FileList of File objects. List some properties. var output = []; for (var i = 0, f; f = files[i]; i++) { output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, …

9 javascript  html 

インターネット接続の可用性フラグを含むReactコンポーネントがあります。UI要素は、状態に応じてリアルタイムで動的に変更する必要があります。また、フラグの変更により、関数の動作が異なります。 現在の実装では、間隔を使用して毎秒Axiosを使用してリモートAPIをポーリングし、それに応じて状態を更新しています。このタスクを実行して、最小の計算コストで1秒の状態エラーを削除する、より詳細で効率的な方法を探しています。デバイスに外部インターネット接続がある場合にのみ、オンラインと見なされます 現在の実装： class Container extends Component { constructor(props) { super(props) this.state = { isOnline: false }; this.webAPI = new WebAPI(); //Axios wrapper } componentDidMount() { setInterval(() => { this.webAPI.poll(success => this.setState({ isOnline: success }); }, 1000); } render() { return <ChildComponent isOnline={this.state.isOnline} />; } } 編集： 外部インターネット接続を検出できるソリューションを探しています。デバイスは、外部接続のないLANに接続できます。したがって、オフラインと見なされます。デバイスが外部インターネットリソースにアクセスできる場合にのみ、オンラインと見なします。

9 javascript  reactjs  axios