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

更新（2020年3月2日） ここでの私の例のコーディングは、V8 JavaScriptエンジンの既知のパフォーマンスの崖から落ちるように正しい方法で構成されていることがわかります... 詳細については、bugs.chromium.orgに関する議論を参照してください。このバグは現在取り組んでおり、近い将来に修正される予定です。 アップデート（2020年1月9日） 以下で説明するように動作するコーディングを単一ページのWebアプリに分離しようとしましたが、そうすると、動作が消えました（??）。ただし、以下に説明する動作は、完全なアプリケーションのコンテキストではまだ存在します。 とはいえ、私はフラクタル計算コーディングを最適化しており、この問題はライブバージョンでは問題ではなくなりました。誰かが興味を持っているなら、この問題を明らかにするJavaScriptモジュールはまだここで利用可能です 概観 ブラウザベースのJavaScriptとWebアセンブリのパフォーマンスを比較するための小さなWebベースのアプリを完成させました。このアプリはマンデルブロ集合の画像を計算し、その画像の上にマウスポインターを移動すると、対応するジュリア集合が動的に計算され、計算時間が表示されます。 JavaScript（「j」を押す）またはWebAssembly（「w」を押す）の使用を切り替えて、計算を実行し、ランタイムを比較できます。 ここをクリックして、動作するアプリを確認してください ただし、このコードを作成する際に、予期しない奇妙なJavaScriptパフォーマンス動作がいくつか見つかりました... 問題の概要 この問題は、ChromeとBraveで使用されているV8 JavaScriptエンジンに固有のようです。この問題は、SpiderMonkey（Firefox）またはJavaScriptCore（Safari）を使用するブラウザでは発生しません。チャクラエンジンを使用しているブラウザでこれをテストできませんでした このWebアプリのすべてのJavaScriptコードはES6モジュールとして記述されています function新しいES6矢印構文ではなく、従来の構文を使用してすべての関数を書き直してみました。残念ながら、これはそれほど大きな違いはありません パフォーマンスの問題は、JavaScript関数が作成されるスコープに関連しているようです。このアプリでは、2つの部分関数を呼び出し、それぞれが別の関数を返します。次に、これらの生成された関数を、ネストされたforループ内で呼び出される別の関数に引数として渡します。 forループが実行される関数と比較すると、ループは独自のスコープに似たものを作成しているように見えます（ただし、本格的なスコープはわかりません）。次に、このスコープ（？）の境界を越えて生成された関数を渡すと、負荷が高くなります。 基本的なコーディング構造 各部分関数は、マンデルブロ集合イメージ上のマウスポインターの位置のXまたはY値を受け取り、対応するジュリア集合を計算するときに反復される関数を返します。 const makeJuliaXStepFn = mandelXCoord => (x, y) => mandelXCoord + diffOfSquares(x, y) const makeJuliaYStepFn = mandelYCoord => (x, y) => mandelYCoord + (2 * x * y) これらの関数は、次のロジック内で呼び出されます。 ユーザーは、mousemoveイベントをトリガーするマンデルブロ集合の画像の上にマウスポインターを移動します …

8 javascript  performance  scope 

Instagramに動画/画像をアップロードするプロセスを自動化しようとしています（プライベートAPIを使用せずに）。とりあえず、画像のアップロードを自動化し、ビデオに対して同じことをしようとしています。これをelectronとでやっていNodejsます。 アップロードボタンをクリックして画像を選択するために、実際に問題なく動作するこのコードを実行します。 const fs = require('fs'), {remote} = require('electron'), clipboardy = require('clipboardy'), BrowserWindow = remote.BrowserWindow; const LOAD_IMAGE = '.UP43G', NEW_POST = '.glyphsSpriteNew_post__outline__24__grey_9.u-__7'; function get_files(path){ return fs.readdirSync(path, { withFileTypes: true }) .filter(dirent => dirent.isFile()) .map(dirent => __dirname + '/../../' + path + '/' + dirent.name); } function randomRange(min, max) { min …

8 javascript  node.js  electron  instagram 

まず第一に、明確にしたいのですが、これwithは非推奨であり、それを使用することは一般的に悪い習慣です。 しかし、私の質問は特別なケースについてです：Proxyのパラメーターとして特別なオブジェクトを使用しますwith。 バックグラウンド 私はプロジェクトに取り組んでおり、コードへのアクセスをグローバルスコープに制限する必要があります。 一つのアプローチは、ループを使用するのが良いかもしれないevalの値で一定の変数を作成している、undefinedグローバルオブジェクトのプロパティごとに、しかし使用するよりもさらに悪い思われるwith、として作成した変数へのアクセスを制限することはできませんletとconst。 アイデア のアイデアはProxy、の引数としてaを使用するwithことです... hastrapは常にを返すtrueので、withステートメントを超えて検索や割り当てを行うことはできません getトラップは正常に動作しますが、ReferenceError存在しない変数（プロパティ）にアクセスしようとするとs がスローされます。 set トラップは正常に動作します（またはカスタムロジックが含まれている可能性があります） targetオブジェクトにはありません[[Prototype]]（つまり、で作成されましたObject.create(null)） targetオブジェクトには@@unscopables空のオブジェクトの値を持つプロパティがあり、すべてのプロパティのスコープを許可します だから、このコードのようなもの： const scope = Object.create(null) Object.assign(scope, { undefined, console, String, Number, Boolean, Array, Object, /* etc. */ [Symbol.unscopables]: Object.create(null) }) const scopeProxy = new Proxy(scope, { get: (obj, prop) => { if (prop in obj) return …

8 javascript  with-statement  es6-proxy 

質問： 内部コンピューターのクロックがオフになっているユーザーのために、JavaScriptでクライアント側のタイムスタンプをどのように正規化しますか？私はUTCで時間を扱っていることに注意してください。 環境： AWS ElasticSearchインスタンスをセットアップし、途中でいくつかのバッチ処理とスロットル処理を行って、サーバー側のタイムスタンプの信頼性を低くしています（データが乱れる可能性があるため、順序が重要です）。したがって、クライアント側のタイムスタンプの信頼性を高める必要があります。 制約： サーバー側のリクエストを作成することはできませんが（HTTPリクエストを最小限に抑える必要があります）、JavaScriptが最初にクライアントに読み込まれたときに生成されるサーバー側のタイムスタンプを含めることができます。 試みられた解決策： 外部定義変数： serverTimestamp -JavaScriptが読み込まれたときにサーバー側で生成されるUTCタイムスタンプ（ミリ秒単位）。 getCookie -指定されたキーのCookie値（または、見つからない場合は空の文字列）を取得する関数。 ファイルのキャッシュ制御設定は"public,max-age=300,must-revalidate"（つまり5分）です。 const getTimestamp = (function() { // This cookie is set on the `unload` event, and so should be greater than // the server-side timestamp when set. /** @type {!number} */ const cookieTimestamp = parseInt(getCookie("timestamp_cookie"), 10) || …

8 javascript 

「フォーカス可能」であるページ上の要素（ボタン、tabindexを含む要素など）があり、スクリーンリーダーがコンテンツを正しく読み上げます。 ただし、フォーカスできない要素がいくつかあるため（ドロップダウンリストの結果など、多くの要素があるため）、ユーザーがタブを無数にクリックしたくないのですが、左/右/アップ/ダウンキー、およびCSSクラスが「選択」されます（ただし、他の要素（その親）が実際にフォーカスされています） クラスを「選択」して、これらの特定の要素を読者に読み取らせたい。どうすればいいのですか？ （属性aria-label = "read this"を適用しようとしましたが、機能しませんでした。要素が実際にフォーカスされている場合にのみ機能します） 以下は、私が達成したいことを理解するのに役立つ詳細です。 <div tabindex="0" > <span>title1</span> <ul> <li class="selected">item1</li> <li>item2</li> <li>item3</li> </ul> </div> <div tabindex="0"> <span>title2</span> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> </div> これがフィドルです：https : //jsfiddle.net/d5gbjst1/1/ これらの2つのdiv間をタブで移動すると、任意のスクリーンリーダー（Windowsナレーター、NVDA、JAWSで試してみました）は「title1」と最初の項目のすべての項目、「title2」と2番目の項目のすべての項目を読み取ります。焦点がどこにあるかに応じて。 最初のulの最初の項目で「選択された」クラスに注意してください。今、私は自分のulリストを上下矢印で参照し、それに応じて「選択された」クラスが項目間を移動します。（これは独立したJSコードであり、簡単にするためにこの例には含まれていません） 「選択された」クラスが要素に適用されると、読者にそれを強制的に読み取らせたい。まったく可能ですか？ 編集：私はulとliにも属性を追加しようとしましたが、まだうまくいきません： <ul role="list"> <li role="listitem">

8 javascript  html  css  wai-aria 

ユーザーがアップロードした画像を受け付けて表示する機能を備えたララベルウェブアプリを開発しました。テスト中に問題が発生しました。携帯電話を使用してアップロードした写真が反時計回りに90度回転していたため、画像の介入を使用してその問題を解決しました。しかし、アップロードした画像のプレビューをJavaScriptを使用してユーザーに表示しているので、画像は90度回転しますが、画像を保存すると適切になります。私のJavaScriptコードは function imagePreview(input,elm) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $(elm).css("background-image","url('"+e.target.result+"')"); } reader.readAsDataURL(input.files[0]); } } $("#settings_img").on("change",function(){ imagePreview(this,"#settings_img_elm"); }); 上記のコードを編集して、必要に応じて画像の向きを変更できるようにして、プレビュー画像の向きを適切に設定してください。

8 javascript  jquery  laravel  laravel-5  exif 

次のような2つのオブジェクトがあります。 let obj1 = { slotIDs: ["5e0301f353ee2a0546298f15"] } let obj2 = { slotIDs: ["5e0301f353ee2a0546298f15", "5e03050453ee2a0546298f1c"] } このように単一の配列内でそれらをマージする必要があります let newObj = ["5e0301f353ee2a0546298f15", "5e03050453ee2a0546298f1c"] lodash unionとmapを使ってみましたが、うまくいきませんでした。

8 javascript  lodash  higher-order-functions 

テキストフィールドとボタンを備えた非常にシンプルなコンポーネントがあります。 入力としてリストを受け取り、ユーザーがリストを循環できるようにします。 コンポーネントには次のコードがあります。 import * as React from "react"; import {Button} from "@material-ui/core"; interface Props { names: string[] } interface State { currentNameIndex: number } export class NameCarousel extends React.Component<Props, State> { constructor(props: Props) { super(props); this.state = { currentNameIndex: 0} } render() { const name = this.props.names[this.state.currentNameIndex].toUpperCase() return ( …

8 javascript  reactjs  typescript 

私は、Reactフレームワークを使用するJavaScriptレガシープロジェクトを使用しています。まったく異なるTypeScript Reactプロジェクトで再利用したいReactコンポーネントがいくつか定義されています。 JS Reactコンポーネントは、controls.jsxファイルで定義され、次のようになります。 export class MyComponent extends React.Component { render() { return <h1>Hi from MyComponent! Message provided: {this.props.message}</h1>; } } 私のTypeScript Reactプロジェクトでは、次のように使用しようとしています。 import * as React from "react"; import * as ReactDOM from "react-dom"; import { MyComponent } from "../JavaScriptProject/controls"; ReactDOM.render( <MyComponent message="some nice message"/>, document.getElementById("documents-tree") ); しかし、次のエラーが発生します。 エラーメッセージは言う： …

8 javascript  node.js  reactjs  typescript  single-page-application 

私はJavascriptの初心者です。多くのJavaScriptおよびJqueryプラグインを試してHTMLテーブルをソートし、がっかりした結果、HTMLテーブルをソートするための独自のJavaScriptコードを実装することにしました。私が書いたコードはW3Schoolsからのアップデートです。 function sortFunctionNumeric(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("reportingTable"); switching = true; //Set the sorting direction to ascending: dir = "asc"; /*Make a loop that will continue until no switching has been done:*/ while (switching) { //start by saying: no …

8 javascript 

vuejs + vuetifyにプロジェクトがありますが、プロジェクトはChromeブラウザーで正常に実行されていますが、Internet Explorer 11でプロジェクトを実行すると、セッションページしか表示されず、ログインボタンをクリックすると、このエラーが発生します 未処理のプロミス拒否SyntaxError：予期された '：' コンソールで、アプリに入るにはログインボタンを2回押す必要があります。ここでは、ページのメインコンテンツが表示されず、サイドバーメニューのみが表示され、メインコンテンツがレンダリングされず、コンソールにエラーが表示されます。 未処理のプロミス拒否NavigationDuplicated：現在の場所（/ dashboard / home / something）へのナビゲートは許可されていません これは私のpackage.jsonです "dependencies": { "@types/leaflet": "^1.5.1", "algoliasearch": "^3.33.0", "amcharts3": "^3.21.14", "auth0-js": "^9.11.3", "axios": "^0.19.0", "babel-polyfill": "^6.26.0", "chart.js": "^2.8.0", "echarts": "^4.2.1", "firebase": "^6.4.2", "instantsearch.css": "^7.3.1", "jquery": "^3.4.1", "leaflet": "^1.4.0", "moment": "^2.22.2", "nprogress": "^0.2.0", "screenfull": "^4.2.1", "slick-carousel": "^1.8.1", "velocity-animate": …

8 javascript  vue.js  internet-explorer-11  vuetify.js 

<input type="text" role="spinbutton" />HTML / JavaScriptの要素を使用して、インクリメント/デクリメントの動作でアクセス可能な入力を実装するのに苦労しています。しかし、VoiceOverでは、予期しない方法で入力の値を変更するインクリメント/デクリメントのためのカスタム（偽？）入力イベントがあるようです。 ユーザーが支援技術を使用してページをナビゲートしているときに、ウィジェットを操作しようとしているときにVoiceOverから不適切なガイダンスを受け取らないようにするにはどうすればよいですか？ たとえば、次のような大幅に削減されたコードを使用します。 function logIt(...args) { document.getElementById('output').appendChild( document.createTextNode(`${args.join(', ')}\n`) ); } document.getElementById("myInput").addEventListener('input', (e) => { debugger; logIt(e.type, e.data, String(e)); e.target.setAttribute('aria-valuenow', e.target.value); }, false); document.getElementById("myInput").addEventListener('keydown', (e) => { logIt(e.type, e.data, String(e)); }, false); <input id="myInput" type="text" role="spinbutton" autocomplete="off" defaultValue="1" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" /> </div> <pre id="output"></pre> …

8 javascript  html  accessibility  wai-aria  voiceover 

インターネットで見つけたコードを理解しようとしています。whileループでは、なぜそれが無限ループではないのか理解できません。たとえばに変更するとcalculator.appendChild、console.log永久に実行されます。 window.location.hash = 1; var calculator = document.createElement("div"); calculator.id = "height-calculator"; while (document.body.firstChild) { calculator.appendChild(document.body.firstChild); } document.body.appendChild(calculator); document.title = calculator.clientHeight; 基本的に、空ではないサイトには常に最初の子がいるため、条件は常にtrueです。誰かがこの方法でそれが永遠に実行されない理由を説明できますか？

8 javascript  html 

ナビゲート時にポップアップするシンプルな読み込みスピナーを作成しようとしています。ナビゲートするときに「beforeunload」イベントを使用して表示され、完了したら「load」イベントを使用して再び非表示にします。 問題は、ページをスマートフォンのバックグラウンドに数時間置いたままにすると、「beforeunload」イベントがトリガーされ、スピナーが表示されることです。おそらく、Android上のChromeがメモリを節約するためにページを部分的にアンロードしているためです。スピナーはそれ自体で消えることはありませんし、エレガントな方法でスピナーを再び消す方法を理解できていないようです。 代わりに使用すべき他のイベントはありますか？ window.addEventListener("load", function() { topSpinner.classList.add("closed"); }); window.addEventListener("beforeunload", function() { topSpinner.classList.remove("closed"); });

8 javascript  android  google-chrome 

いくつかの依存関係をインポートする必要があり、ES6スタイルのインポートステートメントを使用したいが、エラーが発生するintellijでjavascriptテストを書き込もうとしています / usr / local / bin / node / workspace / rr-sample / node_modules / mocha / bin / _mocha --ui bdd --reporter "/ Users / me / Library / Application Support / IntelliJIdea2019.1 / NodeJS / js / mocha- intellij / lib / mochaIntellijReporter.js "tests / *。test.js /workspace/rr-sample/tests/App.test.js:3 …

8 javascript  intellij-idea  mocha  chai