プログラミング javascript

4

SignalRを使用してウェブサイト上のデータを転送しています。ただし、SignalRは一定期間のみデータを送信でき、その期間が経過した場合は接続を強制終了する必要があります。 $.connection.hub.stop()要求がまだ保留中で完了していない場合、Stop-Function はキャンセルされます。ただし、このリクエストは、送信されたデータ量に関係なく強制的にキャンセルする必要があります。どのように私はすることができます殺す SignalR-接続の？

10 javascript c# asp.net-mvc signalr

1

最適化せずに高性能のJavascriptコードを書く

大きな数値配列を操作するJavascriptでパフォーマンスに敏感なコードを書くとき（線形代数パッケージ、整数または浮動小数点数を操作することを考えてください）、JITができる限り役立つことを常に望んでいます。これはおおよその意味です。整数計算と浮動小数点計算のどちらを実行するかに応じて、常に配列をパックSMI（短整数）またはパックDoubleにする必要があります。私たちは常に同じタイプのものを関数に渡したいので、それらが「メガモーフィック」とラベル付けされて最適化されないようにします。たとえば、常にvec.add(x, y)両方xを呼び出しyてパックされたSMI配列、または両方をパックされたDouble配列で呼び出す必要があります。関数をできるだけインライン化したい。これらのケースから外れると、突然の大幅なパフォーマンス低下が発生します。これは、さまざまな無害な理由で発生する可能性があります。のような一見無害な操作を介して、パックされたSMI配列をパックされたDouble配列に変換できmyArray.map(x => -x)ます。パックされたDouble配列は依然として非常に高速であるため、これは実際には「最良の」悪いケースです。たとえば、（予期せず）返された、nullまたはを返した関数に配列をマッピングすることにより、パックされた配列を一般的なボックス配列に変換できundefinedます。この悪いケースはかなり簡単に回避できます。あなたはvec.add()あまりにも多くのタイプの物を渡して、それをメガモーフィックに変えることによってなど、関数全体を最適化解除するかもしれません。これは、「ジェネリックプログラミング」を実行する場合に発生する可能性vec.add()があります。これは、タイプに注意していない場合（多くのタイプが入っていることがわかる）と、最大のパフォーマンスを引き出したい場合の両方で使用されます。（たとえば、ボックス化されたdoubleのみを受け取る必要があります）。私の質問は、上記の考慮事項に照らして高性能のJavascriptコードを記述しながら、コードを見やすく読みやすく保つ方法についての、やさしい質問です。私が目指している答えの種類がわかるように、いくつかの特定のサブ質問：（たとえば）パックされたSMI配列の世界にとどまりながらプログラミングする方法に関する一連のガイドラインはありますか？マクロシステムのようなものを使用せずにJavaScriptで汎用の高性能プログラミングvec.add()を呼び出しサイトにインライン化することは可能ですか？メガモーフィックな呼び出しサイトや最適化解除などの観点から、高性能のコードをライブラリにモジュール化する方法を教えてください。たとえば、線形代数パッケージAを高速で楽しく使用している場合B、に依存するパッケージをインポートしますがA、Bそれを他のタイプで呼び出して最適化を解除すると、突然（コードを変更せずに）コードの実行が遅くなります。何か良いがある使いやすい JavaScriptエンジンがタイプで、内部でやっていることを確認するための測定ツールは？

10 javascript v8 jit spidermonkey

2

特定の副作用のために新しいサブスクリプションを作成する必要があるのはいつですか？

先週、私はRxJSに答えました質問「特定の副作用ごとにサブスクリプションを作成するべきか、それともサブスクリプションを最小限に抑えるべきか」について、別のコミュニティメンバーと話し合いました。完全なリアクティブアプリケーションアプローチの観点からどの方法を使用するか、またはいつ切り替えるかを知りたい。これは私とおそらく他の人たちが不必要な議論を避けるのに役立ちます。セットアップ情報すべての例はTypeScriptにありますサブスクリプションのライフサイクル/コンストラクターの使用に関する質問に焦点を当てず、フレームワークを無関係に保つ想像してみてください：サブスクリプションはコンストラクター/ライフサイクルの初期化で追加されます想像してみてください：登録解除はライフサイクル破棄で行われます副作用とは（角度サンプル） UIでの更新/入力（例 value$ | async）コンポーネントの出力/アップストリーム（例@Output event = event$）異なる階層の異なるサービス間の相互作用使用例： 2つの機能： foo: () => void; bar: (arg: any) => void 2つのソースオブザーバブル： http$: Observable<any>; click$: Observable<void> fooがhttp$発行された後に呼び出され、値は必要ありません barclick$エミット後に呼び出されますが、現在の値が必要ですhttp$ ケース：特定の副作用ごとにサブスクリプションを作成する const foo$ = http$.pipe( mapTo(void 0) ); const bar$ = http$.pipe( switchMap(httpValue => click$.pipe( …

10 javascript angular typescript rxjs reactive-programming

10

localStorageをデバイス間で拡張する方法（DBなし）

目標：localStorage自分のアプリに既に実装されているものを拡張して、ローカルでないと思います。ローカルストレージAPIで簡単なユーザー設定を保存する実装が好きです。私はこれをWebアプリのニーズに合わせて機能させていますが、唯一の問題は、使用/保存されているそのマシン/ブラウザーに対してローカルであることです。このための古典的なMySQLスタイルのテーブルにアクセスできません。ローカルストレージを他のブラウザに引き継ぐように拡張または調整したいと思います。または、ユーザーのJSオブジェクトとJSオブジェクトのプロパティにユーザー設定を保存します。各ユーザーでJSONまたはJavaScriptオブジェクトを作成するだけのアイデアが好きです。新しいユーザーが存在する場合は常に、名前を取得し、オブジェクトまたは名前を作成し、object[key]最初にフィールドプロパティのデフォルト変数を設定します。ユーザーがそれらを保存するとオーバーライドされます。または、上記が嫌われている場合; 私のlocalstorage実装がうまく機能していることを維持し、これを保存して別の場所に再レンダリングできるようにするプラグイン/ライブラリ/拡張機能を見つけたいと思います。これは以前に考えられてきました。私はそれをクライアント側に保ちたいですが; 私はnode.jsソリューションとpythonソリューションを利用できますが、単純な種類のデータフレームで十分機能するはずです。 localStorageデータでファイルを生成するのはどうですか？おそらく.csvファイル（これは機密データでlocalStorageはありません）で、私のように更新しますか？

10 javascript node.js json cookies local-storage

1

クリップボードAPI呼び出しは、onPermissionRequest（）を呼び出さずにNotAllowedErrorをスローします

ボタンが付いたシンプルなページがあります。ボタンを押すと、非同期クリップボードAPIを使用してクリップボードに書き込みます。 <body> <button type="button" onclick="testClipboard();"> Test Clipboard </button> </body> function testClipboard() { navigator.clipboard.writeText("Clipboard API Test").then( v => alert("Success"), e => alert("Fail\n" + e)); } これは、ChromeとFirefox、デスクトップとモバイルの両方で機能します。ただし、Android Webviewでは次のエラーがスローされます。 NotAllowError: Write permission denied. WebChromeClient.onPermissionRequest()権限を付与するためにオーバーライドする必要があると考えましたが、不思議なonPermissionRequest()ことに呼び出されていないようで、同じエラーがまだスローされます。 public class WebChromeController extends WebChromeClient { @Override public void onPermissionRequest(PermissionRequest request) { Log.d("myTag", "Permission request"); Log.d("myTag", request.getResources().toString()); request.grant(request.getResources()); } …

10 javascript android android-webview clipboard

1

グループレベルの選択によるSlickGridマルチレベルグループ化

カスタム選択モデルとカスタムチェックボックス選択プラグインを備えた滑らかなグリッドを実装しました。また、グループレベルのチェックボックスを追加して、トップレベルでの選択の切り替えを可能にしました。私の要件の1つは、折りたたまれたグループ化が親レベルのグループ化チェックボックスを介して引き続き選択可能であることです。私の障害は、現在グループに表示されていない行を選択する方法を理解できないことです。滑らかなグリッドは視覚的に選択されたアイテムのセットを保持し、グリッドデータビューは選択されたアイテムの完全なセットを表示または非表示に維持します。しかし、折りたたまれた行のグループチェックボックスをクリックしたときにデータにパイプする方法がわかりません。私はグリッドを次のように構成しています： let checkboxSelectionModel = new Slick.CheckboxSelectionModel(); this.grid.setSelectionModel(checkboxSelectionModel); this.grid.registerPlugin(new Slick.Data.GroupItemMetadataProvider()); let onSelectedRowIdsChanged = this.dataProvider.syncGridSelection(this.grid, true, true); onSelectedRowIdsChanged.subscribe( function(e: any, args: any) { //business logic stuff } ); let groupedCheckboxSelector = new Slick.GroupedCheckboxSelectColumn({ cssClass: "slick-cell-checkboxsel", onSelectedRowIdsChangedHandler: onSelectedRowIdsChanged }); let columns = this.grid.getColumns(); columns.unshift(groupedCheckboxSelector.getColumnDefinition()); this.grid.setColumns(columns); this.grid.registerPlugin(groupedCheckboxSelector); ここに含まれるように、あまりにも長い間、カスタムプラグインにGIST あなたがラインを見れば、具体的57にslick.checkboxselectionmodel： $.each(dataItem.rows, function(index, groupRow) …

10 javascript jquery typescript slickgrid

3

useEffectの詳細/ useEffectの使用？

useEffectフックの詳細を理解しようとしています。どの方法をいつ使用するのか、なぜ知りたいのですか？ 1.useEffect with no second paraments useEffect(()=>{}) 2.useEffect with second paraments as [] useEffect(()=>{},[]) 3.useEffect with some arguments passed in the second parameter useEffect(()=>{},[arg])

10 javascript reactjs react-redux

3

SAP B1、ItemImageから取得した画像を表示する方法

SAP B1サービスレイヤーからイメージをフェッチしています。郵便配達員では、と表示できますimage/pngが、表示に問題があります。それを表示する正しい方法は<img />何ですか？ require(fetchedImage) -機能しません画像を取得してクライアントに渡すCloud Functionを作成しましたが、その方法がわかりません。このような超奇妙なオブジェクトを持っている data: > '�PNGörönöu001aönöu0000öu0000öu0000örIHDRöu0000öu......... それを経由して渡す方法がわからないres.send(IMAGE IN PNG)ので、クライアント側で画像を取得できます。チェックbase64変換が、私はそれらを使用するかどうかはわかりません。更新郵便配達員のリクエスト：（これは正常に機能しています） GET：https : //su05.consensusintl.net/b1s/v1/ItemImages（ 'test'）/ $ value ヘッダ：のSessionId：あなたがしようとしたときに確認します何らかの理由で、フロントエンドで直接画像を取得できず、ミドルウェアを作成する必要があるので、 Firebase Cloud Function だからここに画像を取得し、それを渡す方法がわからない関数があります。 Firebase Cloud Functionの関数は次のとおりです。 if (!req.body.productId) { res.status(400).send({ error: "productId is required" }); return; } console.log("Starting the process"); const productId = …

10 javascript node.js api sap sapb1

4

Woocommerce：[カートに追加]ボタンがクリックされた場所を検出し、別のコードを実行します

eコマースストア：ホームページに表示されているアイテムがあり、各アイテムの下に[カートに追加]ボタンがあります。このボタンをクリックすると、アイテムがカートに追加されます。このボタンをもう一度クリックすると、カートに既に存在する商品の数量が1増えます。これはループだと思います。ここまでは順調ですね。単一の製品ページに、「カートに追加」ボタンがあります。このボタンをクリックすると、アイテムがカートに追加されます。数量を変更するために使用できる数量入力テキストボックスもあります。これも結構です。問題：ループ内でクリックされた[カートに追加]ボタン（現在はホームページですが、アーカイブページなどの他のページでも使用できます）とクリックされた[カートに追加]ボタンを区別する必要があります単一の製品ページ。この差別化に基づいて、ここに私がする必要があるものがあります：ループ内に表示される[カートに追加]ボタンがクリックされた場合は、を使用してカートに既に存在するこのアイテムの数量を取得し、$cart_item_key1増やして、追加の処理を実行して詳細を保存するカスタム関数に送信します再びカートに入れます。 [単一の商品]ページに表示される[カートに追加]ボタンをクリックした場合は、を使用してカートに既に存在するこのアイテムの数量を取得し、$cart_item_key3を掛けて、追加の処理を実行して保存するカスタム関数に送信します再度カートに入れる詳細。上記のどちらの場合も、さまざまなロジックに基づいて数量が変更され、この数量をカスタム関数呼び出しに送信する必要があります。私が試したもの：私は次のコードを試しました： add_action('woocommerce_add_to_cart', 'custom_action_add_to_cart', 20, 6); function custom_action_add_to_cart($cart_item_key, $product_id, $quantity, $variation_id, $variation, $cart_item_data) { $cart = WC()->cart->get_cart(); $product = wc_get_product($product_id); // NEED TO RUN CUSTOM CODE HERE BASED ON THE CHECKS if (add to cart within loop is clicked) { …

10 javascript php jquery wordpress woocommerce

1

Typescriptを使用してgetInitialPropsでNext.jsのすべての単一ページに小道具を渡す

UIがちらつくのを避けるために、ページがサーバー側でレンダリングされ、Next.jsを使用して返信される前に、ユーザーがログインしているかどうかを知る必要がある場合があります。ユーザーが既にこのHOCコンポーネントを使用してログインしている場合に、ユーザーが一部のページにアクセスできないようにする方法を見つけることができました... export const noAuthenticatedAllowed = (WrappedComponent: NextPage) => { const Wrapper = (props: any) => { return <WrappedComponent {...props} />; }; Wrapper.getInitialProps = async (ctx: NextPageContext) => { let context = {}; const { AppToken } = nextCookie(ctx); if (AppToken) { const decodedToken: MetadataObj = jwt_decode(AppToken); const isExpired = …

10 javascript reactjs typescript next.js

1

react-router-domのリンクを外部ライブラリに渡す

外部（node_modules）パターンライブラリからコンポーネントをレンダリングしています。私のメインアプリでは、次のLinkようにインスタンスをreact-router-dom外部ライブラリのコンポーネントに渡します。 import { Link } from 'react-router-dom'; import { Heading } from 'my-external-library'; const articleWithLinkProps = { url: `/article/${article.slug}`, routerLink: Link, }; <Heading withLinkProps={articleWithLinkProps} /> 私のライブラリでは、それを次のようにレンダリングしLinkています： const RouterLink = withLinkProps.routerLink; <RouterLink to={withLinkProps.url} > {props.children} </RouterLink> RouterLinkクリックされたときにURLに移動しても正しくレンダリングされているようだ、と。私の問題は、がRouterLink私のAppのreact-router-domインスタンスから切り離されているように見えることです。をクリックするとHeading、「ハード」にナビゲートし、Link通常のようにシームレスにルーティングするのではなく、ページをポストバックします。この時点でシームレスにナビゲートできるようにするために何を試したらよいかわかりません。何か助けや助言をいただければ幸いです。よろしくお願いします。編集：ルーターの設定方法を示しています。 import React from 'react'; import { hydrate, unmountComponentAtNode } from 'react-dom'; …

10 javascript reactjs react-router-dom

3

スクロール位置の維持は、メッセージdivの下部近くにない場合にのみ機能します

私は他のモバイルチャットアプリを模倣しようとしています。send-messageテキストボックスを選択して仮想キーボードを開くと、一番下のメッセージがまだ表示されています。CSSでこれを驚くほど実行する方法はないようです。そのため、JavaScript resize（明らかにキーボードが開いているときと閉じているときを確認する唯一の方法）イベントと手動でスクロールして救助します。誰かが提供するこのソリューションを、私は見つけたこのソリューションの両方が動作するように見えます。 1つの場合を除いて。以下のためにいくつかのあなたが以内であれば理由、MOBILE_KEYBOARD_HEIGHT（私の場合は250個のピクセル）メッセージのdivの下のピクセルモバイルキーボードを閉じると、奇妙な何かが起こります。前者のソリューションでは、一番下までスクロールします。後者のソリューションでは、代わりにMOBILE_KEYBOARD_HEIGHTピクセルを下から上にスクロールします。この高さより上にスクロールすると、上に提供された両方のソリューションが問題なく機能します。彼らがこの小さな問題を抱えているのは、あなたが底辺りにいるときだけです。多分それは私のプログラムがこれを引き起こしているいくつかの奇妙な迷子のコードだと思っていましたが、いいえ、私はフィドルを再現しさえしており、それはまさにこの問題を抱えています。これをデバッグするのが非常に困難になったことをお詫びしますが、電話でhttps://jsfiddle.net/t596hy8d/6/show（ショーのサフィックスは全画面モードを提供します）にアクセスすると、同じ動作。その動作は、十分に上にスクロールすると、キーボードの開閉によって位置が維持されます。ただし、下部のピクセル内でキーボードを閉じると、MOBILE_KEYBOARD_HEIGHT代わりに下部にスクロールすることがわかります。これは何が原因ですか？ここでのコードの再現： window.onload = function(e){ document.querySelector(".messages").scrollTop = 10000; bottomScroller(document.querySelector(".messages")); } function bottomScroller(scroller) { let scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight; scroller.addEventListener('scroll', () => { scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight; }); window.addEventListener('resize', () => { scroller.scrollTop = scroller.scrollHeight - scrollBottom - …

10 javascript android html css reactjs

11

その下のdivにぶつかったときにdivが上にスクロールしないようにしますか？

私は昨日、同様の質問をしましたが、説明が不十分であり、純粋なCSSソリューションへの私の希望を明記していませんでした。基本的に、スクロール可能なメッセージのdivとその下に入力フィールドがあるという問題があります。ボタンをクリックしたときに、メッセージのdivもスクロールせずに、入力フィールドを100ピクセル増やしたいと思います。ここに問題全体を示すフィドルがありますご覧のように、「マージンを追加」ボタンをクリックすると、メッセージのdivも上にスクロールします。そのままにしてもらいたいです。同様に、少し上にスクロールして最後から2番目のメッセージしか表示できない場合、ボタンをクリックしても、クリックしたときにその位置が維持されるはずです。興味深いのは、この動作が「ときどき」維持されることです。たとえば、状況によっては（かなり推測することはできません）、スクロール位置が保持されます。私はそれが一貫してそのように振る舞うことを望みます。 window.onload = function(e) { document.querySelector(".messages").scrollTop = 10000; }; function test() { document.querySelector(".send-message").classList.toggle("some-margin"); } .container { width: 400px; height: 300px; border: 1px solid #333; display: flex; flex-direction: column; } .messages { overflow-y: auto; height: 100%; } .send-message { width: 100%; display: flex; flex-direction: column; } .some-margin …

10 javascript html css scroll scrollbar

4

「for .. of」ループを使用して、Vanilla JavaScriptのSelectタグからオプションを削除する

選択からオプションを削除しようとすると、常に1つ残っていますが、なぜですか？ <select id="form-select"> <option>111</option> <option>222</option> <option>333</option> </select> このJSは機能していません： var t = document.querySelector('#form-select'); for(var i of t.options) { t.remove(i.index) } そして、これも機能していません： for(var i of document.querySelector('#form-select').options) { i.remove() } それを達成するための他の解決策があることを知っていますが、なぜそれが想定どおりに機能しないのかを理解したいと思います

10 javascript

1

JavaScript-ファイルのアップロード。画像の背景が透明かどうかを確認する

画像の透明度を確認し、画像の背景が透明でない場合にエラーメッセージを表示したい。私はfunction hasAlpha(file)それがファイルが透明な背景を持っていることを確認する必要がありますが、それを通過させる方法がわかりませんfunction uploadFile(file)、ファイルサイズのため、すでにチェック機能。 if内部でファイルサイズのステートメントを複製してif (xhr.upload) {}、アップロードされた画像が透明かどうかを確認できると思いますfunction hasAlpha(file)が、を残りのコードに組み込む方法がわかりません。 // File Upload // function ekUpload() { function Init() { console.log("Upload Initialised"); var fileSelect = document.getElementById("file-upload"), fileDrag = document.getElementById("file-drag"), submitButton = document.getElementById("submit-button"); fileSelect.addEventListener("change", fileSelectHandler, false); // Is XHR2 available? var xhr = new XMLHttpRequest(); if (xhr.upload) { // File Drop fileDrag.addEventListener("dragover", fileDragHover, false); …

10 javascript

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

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