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

ECMAScript(JavaScript / JS)とそのさまざまな方言/実装(ActionScriptを除く)でのプログラミングに関する質問。このタグが単独で使用されることはほとんどありませんが、ほとんどの場合、[node.js]、[jquery]、[json]、および[html]タグに関連付けられています。

4
divボーダーの一部が切り取られている
他の要素をいくつか保持しているコンテナ要素がありますが、画面サイズによっては、その一部がさまざまな部分で不可解に切り取られます。HTMLページの幅を調整(クリックしてドラッグ)すると、コードサンドボックスリンクの動作を確認できます。メインコンテナーの境界線のみがレンダリングされ、子要素が影響を受けないようにするにはどうすればよいですか? https://codesandbox.io/s/focused-tree-ms4f2 import React from "react"; import styled from "styled-components"; const StyledTextBox = styled.div` height: 15vh; width: 30vw; display: flex; flex-direction: column; margin: 0 auto; border: 1px solid black; background-color: #fff; > * { box-sizing: border-box; } `; const InputBox = styled.span` height: 35%; width: 100%; display: flex; border: none; …

1
なぜsetTimeout()はアプリを遅延させますが、Rxjs timer()。subscribe(…)は遅延させないのですか?
100ms間隔でコメントを「遅延読み込み」するコンポーネントがあります。 setTimeoutを使用すると、実際に遅延します。 成分 <div *ngFor="let post of posts"> <app-post [post]="post" ></app-post> </div> これにより、アプリケーションが遅くなります(平均fps 14、アイドル時間51100ms): while(this.postService.hasPosts()){ setTimeout(()=> { this.posts.push(this.postService.next(10)); },100); } これにより、アプリケーションがスムーズになります(平均fps 35、アイドル時間40800ms) while(this.postService.hasPosts()){ timer(100).subscribe(()=> { this.posts.push(this.postService.next(10)); }); } 説明はありますか、なぜrxjsタイマーがはるかにうまく機能するのですか? 私はFirefoxでランタイム分析を行いました。最初の例では、フレームレートは14 fpsに下がります。他の例では、35 fpsになります。 アイドル時間も20%短くなります。 この方法はさらにスムーズです(平均fps 45、アイドル時間13500ms): interval(100).pipe(takeWhile(this.postService.hasPosts()).subscribe(()=> { this.posts.push(this.postService.next(10)); }); }

3
フレックストランジション:コンテンツに合わせてストレッチ(またはシュリンク)
選択したdivを展開し、残りのスペース(幅が固定されている最初のものを除く)に合わせて均等にストレッチすることで他のdivを適切に動作させるスクリプトを(ここでユーザーの助けを借りて)コード化しました。 そして、これが私が達成したいことの写真です: そのために、フレックスとトランジションを使用します。 それはうまく機能しますが、jQueryスクリプトは「400%」のストレッチ値を指定します(これはテストに最適です)。 ここで、選択したdivを「400%」の固定値ではなく、コンテンツに正確に合わせて拡大/縮小したいと思います。 どうすればいいのかわかりません。 出来ますか ? divを複製してコンテンツに適合させ、その値を取得し、この値を使用してトランジションを行おうとしましたが、これはパーセンテージでの初期幅ですが、ピクセルでのターゲット値であることを意味します。それはうまくいきません。 ピクセル値をパーセンテージに変換すると、何らかの理由で結果がコンテンツに正確に適合しません。 すべての場合において、これはとにかく私が欲しいものを達成するための少し複雑な方法のようです。 選択したdivのコンテンツに合わせるために移行できるflexプロパティはありませんか? ここにコードがあります(より読みやすくするために編集/簡略化されています): var expanded = ''; $(document).on("click", ".div:not(:first-child)", function(e) { var thisInd =$(this).index(); if(expanded != thisInd) { //fit clicked fluid div to its content and reset the other fluid divs $(this).css("width", "400%"); $('.div').not(':first').not(this).css("width", "100%"); expanded = thisInd; } else …

7
このコードブロックを改善および短縮するにはどうすればよいですか?[閉まっている]
休業。この質問は意見に基づいています。現在、回答を受け付けていません。 この質問を改善してみませんか?この投稿を編集して、事実と引用で回答できるように質問を更新してください。 3か月前に閉鎖。 この関数は、「GTCA」などのDNAの文字列を取り、正しく一致するDNAペアを含む配列を返します。 function pairDNA(dna) { const pairs = [] for (let i = 0; i < dna.length; i ++) { if (dna[i] === "C" | dna[i] === "c") { pairs.push("CG"); } else if (dna[i] === "G"| dna[i] === "g") { pairs.push("GC"); } else if (dna[i] === "T"| dna[i] …

2
Javaで書き直されたJavaScript関数は異なる結果をもたらします
私がJavaで書き直そうとしているこのJavascript関数があります: function normalizeHash(encondindRound2) { if (encondindRound2 < 0) { encondindRound2 = (encondindRound2 & 0x7fffffff) + 0x80000000; } return encondindRound2 % 1E6; } 私のJava適応: public long normalizeHash(long encondindRound2) { if (encondindRound2 < 0) { encondindRound2 = (((int) encondindRound2) & 0x7fffffff) + 0x80000000; } return (((int) encondindRound2) % 1_000_000); } 渡すと-1954896768、Javascriptバージョンが返され70528、Javaが返されます-896768。理由はわかりません。違いは、ifの条件内で開始しているようだ:Javascriptの機能であれば後にencodingRound2 = …

2
エラーのためにJestでpostメソッドをテストできません。未定義のmockImplementationを読み取れません
APIを呼び出すためのさまざまなメソッドがあるAPIサービスがあります。すべてのGETリクエストのテストに成功しましたが、POSTリクエストのテストに問題があります。 これがメソッドです: export default class ApiService { static makeApiCall = <T>( url: string, oneCb: <T>(d: Data) => T, secondCb: (d: T) => void, errorCb?: (a: ErrorModel) => void, method = 'get', data = {}, ): Promise<void> => { const config: AxiosRequestConfig = {}; if (method === 'post') { config.headers = …

2
eslintがjsconfigにマップされたパスを解決する方法
私のnextjsプロジェクトでは、jsconfig.json絶対インポートを簡単にするためにパスをマッピングしました { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["./*"] }, "target": "es6", "module": "commonjs", "experimentalDecorators": true } } インポートパスは次のようになります import { VIEW } from '@/src/shared/constants'; 私のeslintrc.js設定は module.exports = { ... , settings: { "import/resolver": { alias: { extensions: [".js"], map: ["@", "."] } } } } 「@ / what …

2
スクロール時に要素が固定から相対に
私はAirpods Proページで Appleと同じ効果をアニメーション化したラッパーを作成しました。基本的にはビデオです。ビデオをスクロールすると、少しずつ再生されます。ビデオの位置は固定されているので、テキストはうまくスクロールします。ただし、テキストは、特定の分割のオフセット間(テキスト表示)にある場合にのみ表示されます。 その部分は正常に動作します。ここで、ユーザーがビデオの最後までスクロールしてアニメーションが終了したときに、video-effect-wrapperが固定位置から相対位置に移動するようにします。そのため、そのWebサイトは、通常、ビデオアニメーションの後にコンテンツをスクロールします。 JSFIDDLEコード+デモ これは私がすでに試したことの例です: //If video-animation ended: Make position of video-wrapper relative to continue scrolling if ($(window).scrollTop() >= $("#video-effect-wrapper").height()) { $(video).css("position", "relative"); $("#video-effect-wrapper .text").css("display", "none"); } この種の作品...しかし、スムーズ以外はすべてです。また、Webページを逆方向に逆スクロールできるようにする必要もあります。 この問題を修正しようとしたときに発生した問題: スクロール、および固定から相対への移行は、自然でスムーズな感じがする必要があります ラッパー自体は固定されておらず、.text要素が含まれています。ビデオは固定されているため、.text要素はビデオ要素を通過できます(エフェクトを作成します)。これらの.text要素は、解決策を見つけようとして問題を引き起こします

3
Webpackで、スクリプトを評価せずにインポートするにはどうすればよいですか?
私は最近、いくつかのウェブサイト最適化作業に取り組んでおり、次のようなimportステートメントを使用して、webpackでコード分割を使用し始めます。 import(/* webpackChunkName: 'pageB-chunk' */ './pageB') これでpageB-chunk.jsが正しく作成されます。ここで、このチャンクをpageAでプリフェッチしたいとします。これを行うには、次のステートメントをpageAに追加します。 import(/* webpackChunkName: 'pageB-chunk' */ /* webpackPrefetch: true */ './pageB') その結果、 <link rel="prefetch" href="pageB-chunk.js"> HTMLの先頭に追加されると、ブラウザはそれをプリフェッチします。 問題は、私がここで使用するインポートステートメントであり、jsファイルをプリフェッチするだけでなく、jsファイルを評価します。つまり、そのjsファイルのコードが解析されてバイトコードにコンパイルされ、そのJSの最上位コードが実行されます。 これはモバイルデバイスでの非常に時間のかかる操作であり、最適化したいのですが、プリフェッチ部分だけが必要です。評価と実行の部分は必要ありません。後でユーザーインタラクションが発生したときに解析がトリガーされるためです。自分を評価する 私は最初の2つのステップをトリガしたい↑↑↑↑↑↑↑↑、写真から来https://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/ ↑↑↑↑↑↑↑ ↑↑ 確かに私はプリフェッチリンクを自分で追加することでこれを行うことができますが、これはプリフェッチリンクに配置する必要があるURLを知る必要があることを意味します、webpackはこのURLを確実に知っています。 これを達成する簡単な方法はありますか?

1
反応でクラスコンポーネントをテストする方法
私はいくつかのユニットテストを試みています、私は偽の例でサンドボックスを作成しましたhttps://codesandbox.io/s/wizardly-hooks-32w6l(実際にはフォームがあります) class App extends React.Component { constructor(props) { super(props); this.state = { number: 0 }; } handleSubmit = (number1, number2) => { this.setState({ number: this.handleMultiply(number1, number2) }) } handleMultiply = (number1, number2) => { return number1 * number2 } render() { const { number } = this.state; return ( <div …

1
Swiper 5で3Dホイールをシミュレートするカスタム効果
無限に回転する3Dホイールをシミュレートする1​​2項目のカルーセルを作成する必要があります。明確にするために、私はこの効果を正確に作成する必要があります: https://codepen.io/SitePoint/pen/yXWXaw(ここにあります) ただし、これらの追加機能を使用すると(特にデスクトップおよびモバイルでは)、次のようになります。 スライドはスワイプの手順を追う必要があります。つまり、スライドはスワイプ中に移動する必要があります(Swiperと同じ)。 速いスワイプで、勢いのある多くのスライドをスクロールするはずです(Swiperがで行うように freeScroll)。 次に、ホイールが回転を停止すると、(Swiperがと同様freeModeStickyに centeredSlides)前のスライドにスナップし、ユーザーから選択されたものになります。 slideChanged(Swiperのように)スライドが変わるたびに(のようなイベント)コールバックが必要です。 これらすべての理由から、Swiper 5.3.0が良い出発点になると思いました。 私はさまざまな回避策を試しましたが、この設定の方が優れていますが、これloop: trueはひどい回避策であり、問​​題を引き起こします(コメントを確認してください)。 var swiper = new Swiper(el_class, { slidesPerView: 1.5, spaceBetween: 25, centeredSlides: true, grabCursor: true, speed: 550, loop: true, // <== repeat infinitely the 12 items. with fast scroll at the end of a cycle it waits a …

2
Safari 13以降のiframeがCORS Cookieをブロックする
Safariのフラットアウトでは、親ドメインとは異なるドメインのiframeにcookieを設定できません。サーバー側のCORSヘッダーは抑制されます。 明確にするために:ユーザーはdomainA.comにいます。domainB.comのiframeが開いていて、iframe内のdomainB.comのユーザーを認証しようとします。Set-Cookieヘッダーは、必要なすべてのヘッダーとともに、domainB.com iframe内のサーバーから返されますが、Safariは後続の呼び出しでそれを送り返しません。 以前の回避策は、iframeからフォームを送信し、応答にCookieを設定することでした。ユーザーがフォームをクリックして何かを送信するのが好きだったのではないでしょうか。フォームの送信にはコールバックがないため、Cookieをポーリングして応答がいつ返されたかを確認する必要があります。また、HttpOnly Cookieの場合はできませんでしたが、うまくいきました。それがなかったまで。 次に、より最近の回避策は、ユーザーを真新しいウィンドウ/タブでiframeドメインにリダイレクトし、そこにランダムなCookieを設定し、その瞬間から、そのサブドメインがiframe内で「信頼」されたことです。ここでも、新しいウィンドウ/タブを開くにはクリックが必要で、新しいタブが開いていることを視覚的に示すこともありました。多くのセキュリティ、そのような標準。 そして今、Safari 13以降-回避策はありません。安全なiframe Cookie設定はもうありません 🤬 その他の認証スキームは、私たちには適していません(例:Auth-Xヘッダー)。HttpOnlyセキュアCookieを使用する必要があります。これは、そのトークンがJavaScriptクライアント側からアクセスできないようにするためです。 明確にするために、すべてが他のブラウザでうまく機能します。 関連するWebKit Bugzilla 誰か提案はありますか? 編集: リンク@tomschmidtをありがとう、それは正しい方向のようです。AppleのStorage Access APIを使用してみましたが、残念ながら、APIを使用してログインロジックを初期化する前にアクセスをリクエストするようにしていますが、 requestStorageAccess = async() => { return new Promise(resolve => { //@ts-ignore document.requestStorageAccess().then( function () { console.log('Storage access was granted'); resolve(true); }, function () { console.log('Storage access was denied'); resolve(false); } ); …

5
「RNCSafeAreaView」がUIManagerに見つかりませんでした
バンドルを開こうとしましたが、Androidの実行中に次のメッセージが表示されます 2020-01-05 23:15:45.366 26210-26210 / com.note.principal W / .note.principa:隠しフィールドLandroid / view / View;-> mAccessibilityDelegate:Landroid / view / View $ AccessibilityDelegate;へのアクセス (ライトグレーリスト、反射)2020-01-05 23:15:45.470 26210-26242 / com.note.principal E / ReactNativeJS:不変の違反:requireNativeComponent: "RNCSafeAreaView"がUIManagerに見つかりませんでした。 This error is located at: in RNCSafeAreaView in Unknown in Unknown in n in Unknown in Unknown in C in P …

1
「React」が「react」からのデフォルトのエクスポートである場合、「React」の代わりに他の名前を使用できないのはなぜですか
だから、私はこの質問に対するいくつかの答えを探していたところ、インポート中に「React」はデフォルトのエクスポートであり、名前付きエクスポートではないため、{}にある必要はないことがわかりました。まあ、それは正しいですが、デフォルトのエクスポートをインポートするときに、インポート時に任意の名前を使用できます。ただし、この場合、使用できるのは以下のインポートのみです。 import React from 'react'; ではなく import Somename from 'react';

1
ページの読み込み時に依存するドロップダウンを「読み込む」方法は?
依存するドロップダウンのあるフォームがあります。このセカンダリドロップダウンは、選択されたプライマリオプションにセカンダリオプションがない場合、およびページが最初に読み込まれたときに非表示になります。フォームが送信されると、最初のフィールドのみがクリアされます。これは、ほとんどの場合ドロップダウンが同じであるためです。ただし、スクリプトはプライマリドロップダウンに変更があった場合は常に機能します。変更を構成するのではなく、選択/送信されたオプションをプライマリドロップダウンに保持し、選択されたプライマリオプションにセカンダリオプションがある場合でも、空のセカンダリドロップダウンを表示します。私はJSのほとんどを、チュートリアルのドロップダウンからよく知りません。より視覚的に理解するために: これは、ページが最初にロードされたときのフォームです セカンダリオプションがあるオプションを選択すると、もう1つのドロップダウンが表示されます ステーションを選択して送信すると、従業員番号はクリアされますが、他の2つは残っているはずですが、送信時にページがリロードされると、次のようになり、ステーションがないため、ステーションはステーションによってクリアされました技術的に。駅の整理についてはあまり気にしていませんが、空にしてはいけない空のドロップダウンがないことのほうが重要です。 フォームに残ったデータを見ると、ドロップダウンから別のオプションを選択するまで依存ドロップダウンが読み込まれず、ボックスアセンブリオプションを再び表示できるようにしたい場合は、作業領域のみが残りました。 、別のオプションをクリックしてから、(たとえば)ボックスアセンブリに戻る必要があります。 この問題を解決するにはどうすればよいですか?残されたオプションがトリガーされているかどうかに関係なく、セカンダリオプションがあるかどうかをチェックするように、JavaScriptが最初にロードするように強制する方法はありますか? forms.py class WarehouseForm(AppsModelForm): class Meta: model = EmployeeWorkAreaLog widgets = { 'employee_number': ForeignKeyRawIdWidget(EmployeeWorkAreaLog._meta.get_field('employee_number').remote_field, site, attrs={'id':'employee_number_field'}), } fields = ('employee_number', 'work_area', 'station_number') def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.fields['station_number'].queryset = Station.objects.none() if 'work_area' in self.data: try: work_area_id = int(self.data.get('work_area')) self.fields['station_number'].queryset = Station.objects.filter(work_area_id=work_area_id).order_by('name') except (ValueError, …

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.