Questions tagged «javascript»

我有一个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 = …

9 javascript  reactjs  testing  ecmascript-6  jestjs 

在我的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: ["@", "."] } } } } 我仍然收到错误消息说无法解决“ @ / …

9 javascript  webpack  babel  eslint 

我制作了一个包装纸，在其Airpods Pro页面上制作了与Apple相同的效果。基本上是视频，当我滚动视频时会一点一点地播放。视频的位置是固定的，因此文本可以很好地滚动。但是，只有在特定分隔的偏移量之间（文本显示），文本才可见。 那部分工作正常。现在，我希望当用户滚动到视频的末尾并结束动画时，将视频效果包装器从固定位置转到相对位置。这样该网站将在视频动画后正常滚动其内容。 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"); } 这种工作...但是除了顺利以外，其他所有事情都是如此。并且还需要使网页反向滚动。 尝试解决此问题时遇到的问题： 滚动以及从固定需求到相对需求的过渡，感觉自然而流畅 包装器本身不是固定的，包含.text元素，视频是固定的，因此.text元素可以覆盖video元素（创建效果）。这些.text元素会导致尝试找到解决方案的问题

9 javascript  jquery  html  css 

我最近正在从事一些网站优化工作，并且通过使用如下的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的头部后，浏览器会预取它，到目前为止效果很好。 问题是我在这里使用的import语句不仅预取js文件，还评估js文件，这意味着该js文件的代码已解析并编译为字节码，并执行了该JS的顶级代码。 这是在移动设备上非常耗时的操作，我想对其进行优化，我只想要预取部分，而不想要评估和执行部分，因为稍后当某些用户交互发生时，我将触发解析并自我评估 ↑↑↑↑↑↑↑↑我只想触发前两步，图片来自https://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/ ↑↑↑↑↑↑↑ ↑↑ 当然，我可以通过自己添加预取链接来做到这一点，但这意味着我需要知道应该在预取链接中放入哪个URL，webpack绝对知道该URL，如何从webpack中获取它？ webpack有没有简单的方法来实现这一目标？

9 javascript  webpack  lazy-loading  prefetch 

我正在尝试一些单元测试，我用一个伪造的示例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 …

9 javascript  reactjs  jestjs 

我需要用12个项目构建一个轮播，以模拟无限旋转的3D车轮。为了清楚起见，我需要精确地创建这种效果： 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 …

9 javascript  css  carousel  swiper 

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); } ); …

9 javascript  cookies  iframe  safari  storage-access-api 

我尝试打开一个包，但是当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：在UIManager中找不到“ RNCSafeAreaView”。 This error is located at: in RNCSafeAreaView in Unknown in Unknown in n in Unknown in Unknown in C in P …

9 javascript  android  reactjs  react-native  gradle 

因此，我在寻找这个问题的答案时发现，在导入时，{React'不需要在{}中，因为它是默认导出而不是命名导出，是的，但是我也看到了在导入默认导出时，我们可以在导入时使用任何名称。但是在这种情况下，我们只能使用以下导入， import React from 'react'; 并不是 import Somename from 'react';

9 javascript  reactjs 

我有一个带有依赖项下拉列表的表格。只要所选的主要选项没有任何辅助选项，并且首次加载页面时，该辅助下拉菜单都将隐藏。每当提交表单时，由于大部分时间下拉列表都保持不变，因此仅清除第一个字段，但是，由于只要主下拉列表发生更改，脚本便会工作，因此加载并不构成更改，它只是将选择/提交的选项保留在主下拉菜单中，并且即使选择的主选项确实具有辅助选项，也只会显示一个空的辅助下拉列表。我从一个教程的下拉菜单中获得了大部分JS，因为我不太熟悉它。为了更直观地理解： 这是页面首次加载时的形式 当您选择具有次要选项的选项时，将出现另一个下拉列表 选择工作站并提交后，将清除Employee＃，但其他两个应保留，但是，提交后重新加载页面时，看起来像这样，并且由于没有调试器，工作站已根据调试器清除从技术上讲。我不太关心站点清理，但更关心的是没有不应该为空的空下拉菜单。 当我查看保留在表单中的数据时，仅保留了工作区，因为只有从下拉菜单中选择另一个选项，并且希望再次看到Box Assembly选项时，依赖下拉列表才会加载，则必须单击另一个选项，然后返回到Box Assembly（例如） 我该如何解决这个问题？有没有一种方法可以强制javascript首先尝试加载，以便它检查剩余的选项是否确实具有次要选项，无论它是否已被触发？ 表格 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 …

9 javascript  python  html  django 

我有Markdown的很小一部分，还有一些我想解析为React组件的自定义html。例如，我想将以下字符串转换为： hello *asdf* *how* _are_ you !doing! today 放入以下数组： [ "hello ", <strong>asdf</strong>, " ", <strong>how</strong>, " ", <em>are</em>, " you ", <MyComponent onClick={this.action}>doing</MyComponent>, " today" ] 然后从React渲染函数返回它（React会将数组正确渲染为格式化的HTML） 基本上，我想让用户选择使用一组非常有限的Markdown来将其文本转换为样式化的组件（在某些情况下是我自己的组件！） 危险地使用SetInnerHTML是不明智的，并且我不想引入外部依赖关系，因为它们都非常繁重，并且我只需要非常基本的功能。 我目前正在做这样的事情，但是它非常脆弱，并且不能在所有情况下都起作用。我想知道是否有更好的方法： function matchStrong(result, i) { let match = result[i].match(/(^|[^\\])\*(.*)\*/); if (match) { result[i] = <strong key={"ms" + i}>{match[2]}</strong>; } return …

9 javascript  arrays  regex  reactjs  markdown 

我希望用户能够对待办事项列表进行排序。当用户从下拉列表中选择一项时，它将设置，sortKey这将创建的新版本setSortedTodos，并依次触发useEffectand调用setSortedTodos。 下面的示例完全按照我想要的方式工作，但是eslint提示我将其添加todos到useEffect依赖项数组，如果执行此操作，则会导致无限循环（正如您期望的那样）。 const [todos, setTodos] = useState([]); const [sortKey, setSortKey] = useState('title'); const setSortedTodos = useCallback((data) => { const cloned = data.slice(0); const sorted = cloned.sort((a, b) => { const v1 = a[sortKey].toLowerCase(); const v2 = b[sortKey].toLowerCase(); if (v1 < v2) { return -1; } if (v1 > v2) { …

9 javascript  reactjs  react-hooks  eslint 

我停留在显示购物车页面的位置，其中列出了由用户添加到购物车的产品。我有两个数组：一个包含产品详细信息。 productDetails: [ { productID: 1, productTitle: 'Product Title 1', productPrice: 2000 }, { productID: 2, productTitle: 'Product Title 2', productPrice: 5000 }, { productID: 3, productTitle: 'Product Title 3', productPrice: 1000 }, { productID: 4, productTitle: 'Product Title 4', productPrice: 10000 } ], 另一个带有购物车产品详细信息，其产品ID和数量仅由用户选择。 cartProducts: [ { productID: 1, …

9 javascript  arrays  dictionary  filter 

我的标记有问题，我希望标记可以拉伸以标记进度条上的任何位置 如下图所示 问题：我想选择进度条上的任意点并能够拉伸标记，该标记可以是多个标记点。 我不知道如何使用下面的代码： var player = videojs('demo'); player.markers({ markerStyle: { 'width':'9px', 'border-radius': '40%', 'background-color': 'orange' }, markerTip:{ display: true, text: function(marker) { return "I am a marker tip: "+ marker.text; } }, breakOverlay:{ display: true, displayTime: 4, style:{ 'width':'100%', 'height': '30%', 'background-color': 'rgba(10,10,10,0.6)', 'color': 'white', 'font-size': '16px' }, text: …

9 javascript  jquery  html  video.js 

每当我在保持模拟器运行的同时运行react-native run-android时，都会出现此错误。react-native run-ios程序完全正常。 Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081 :ReactNative:Failed to parse React Native CLI configuration: groovy.json.JsonException: Unable to determine the current character, it is not a string, number, array, or object The current character read is 'E' with an int value of 69 Unable to determine the current character, …

9 javascript  java  android  node.js  react-native