小编use*_*888的帖子

在 VueJS 中使用按钮进行水平滚动

我希望使用 VueJS 中的按钮实现水平滚动。我有一个容器,它有几个水平堆叠的 div,我想使用按钮滚动它们。

是关于 JQuery 的 SO 上的相同线程。这个demo是JQuery中的解决方案。它应该说明我所追求的效果。

如何使用 VueJS 实现这种效果?

我已经看过的一些库包括vue-scroll-tojump

  • Vue-scroll-to 要求用户指定要滚动到的元素,而我想在特定元素内水平滚动一定数量的像素。

  • Jump 允许在定义数量的像素上滚动,但只能垂直工作并且只能在窗口上滚动。

编辑:我在 VanillaJS 中找到了一个小库:https : //github.com/tarun-dugar/easy-scroll

html javascript css scroll vue.js

6
推荐指数
3
解决办法
1万
查看次数

切换路由时VueJS内存泄漏

每当我切换路线时,我注意到我的应用程序中的Vue组件永远不会被破坏,只会被创建(当我在路线之间切换时,#Deleted列始终为0)。更明确地说,创建的新组件数始终等于该路线上显示的组件数,即,当重新访问路线时,不会销毁任何Vue组件,并且会重新创建该路线上的每个组件。

在此处输入图片说明

我一直在研究调试问题,并且我知道以下通常是VueJS中内存泄漏的元凶。

  • 使用全局事件总线以及无法注销回调。这在这里清楚地详细说明。虽然在应用程序的某些区域中确实使用了全局事件总线,但是我也没有在全局事件总线上创建任何事件侦听器的页面上遇到内存泄漏,这使我相信这不是问题所在这里。
  • 使用第3方库时无法手动清理内存,这是VueJS文档概述的问题。同样,我一直在不使用第三方库的页面上查看内存使用情况,但仍在这些页面上遇到内存泄漏。

我遇到的另一个潜在问题是我不太了解。在这个github线程中,OP关于VueJS中内存泄漏的潜在原因说了以下几点:

所以我确保我不会做任何愚蠢的事情,例如在Vuex商店中存储对此的引用...

有人可以解释一下OP对Vuex和内存泄漏的含义吗?

此外,还有哪些其他潜在问题导致我遗漏的VueJS中的内存泄漏可能会影响我的应用程序?

除了使用Chrome devtools中的“内存”标签以外,我还应该如何调试内存泄漏?

javascript memory-leaks vue.js vue-router vuex

6
推荐指数
1
解决办法
2702
查看次数

我应该使用全局变量在整个服务器上共享 socket.io 实例吗

以下是我的 node.js 应用程序中的 server.js 文件。我希望我的服务器上的其他文件可以访问我的 socket.io 实例,以便从我的 API 发出事件(listingRoutesApi, userRoutesApi etc.) (refer to code)

我的问题是我的路由是在创建服务器之前声明的;但是,socket.io 实例是在创建服务器之后创建的。

我使用的解决方案是声明一个全局io变量,它允许我从我的网络应用程序中的任何地方发出事件,如下所示:

global.io.of('/analytics').to(listing._id).emit('message', "There was a post.");
Run Code Online (Sandbox Code Playgroud)

我的问题是:这样做是否有任何陷阱/危险,从长远来看我会遇到任何可扩展性问题吗?此外,是否有更好的方法来实现我的目标?

我的 server.js 文件中的代码:

const app = express();    

app.use('/api', listingRoutesApi);
app.use('/api', userRoutesApi);
app.use('/api', imageRoutesApi);
// ...plenty more endpoints here...

app.use(serveStatic(path.join(__dirname, "/dist")));
app.use(history());
app.use(serveStatic(path.join(__dirname, "/dist")));

const server = app.listen(port, () => { console.log('server started ' + port); });

/* Start socket. */
global.io = socketio(server);

const analytics = global.io.of("/analytics");

analytics.on('connection', (socket) => {
    socket.on('join', (data) …
Run Code Online (Sandbox Code Playgroud)

websocket node.js socket.io

6
推荐指数
1
解决办法
6619
查看次数

如何销毁由 <keep-alive> 缓存的 VueJS 组件

我有一个 Vue 组件,它使用 Vue 的元素保持活动状态以进行缓存。但是,我现在遇到的问题是,一旦我注销一个帐户并在我的 Vue 应用程序上创建一个新帐户,我“保持活动”的组件就会反映给新用户(这显然不是与新用户相关)。

因此,我想在用户退出后销毁该组件。解决这个问题的最佳方法是什么?

javascript vue.js vue-router vue-component

5
推荐指数
1
解决办法
1万
查看次数

如何在 Webpack 中通过 CDN 异步包含外部库

在发布此问题之前,我咨询了有关此主题的以下主题:

如何将外部 CDN 链接包含到 webpack 项目中

Webpack 和外部库

如何使用 webpack 在 js 文件中加载 CDN 或外部供应商 javascript lib,而不是在 html 文件中 如何在 Webpack 中包含 jQuery CDN?

Webpack 外部文档

基于以上所有内容,似乎为了通过 CDN 加载第三方库,标准方法是使用 webpack externals,它会在 index.html 文件(每个 Webpack 文档)中生成以下脚本标记。

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>
Run Code Online (Sandbox Code Playgroud)

如果您有一个或两个库,则此解决方案有效,但您应该如何使用 Webpack 中的外部组件通过 CDN 异步加载 10 个库(为了参数)(以最大化页面加载性能)?

我目前解决这个问题的方法是在我的 index.html 文件中手动包含以下脚本标签,并带有相关的“async”和“defer”标签;但是,每次我包含一个新库时,我都需要更新我的 dist 文件夹中的 index.html 文件,这让我相信我这样做完全错误。下面是我的 index.html 文件当前的样子,它也复制到了 dist 文件夹中。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>App</title>
        <link rel="stylesheet" href="https://afeld.github.io/emoji-css/emoji.css">
    </head>

    <body>
        <div id="app"></div>
    </body>

    <script src="https://cdn.jsdelivr.net/npm/moment@2.20.1/moment.min.js" async defer></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js" async defer></script> …
Run Code Online (Sandbox Code Playgroud)

javascript performance asynchronous cdn webpack

5
推荐指数
1
解决办法
2641
查看次数

猫鼬insertMany()。exec()返回TypeError

以下函数由async / await函数调用,因此我需要一个真正的Promise从Mongoose返回,因此每个文档该SO线程都使用“ .exec()” 。

// where data is an array of documents
function insertNewResults(data) {
    return Model.insertMany(data).exec();
}
Run Code Online (Sandbox Code Playgroud)

这样做给我以下错误:

TypeError:Model.insertMany(...)。exec不是insertNewResults的函数

如果删除exec(),我将能够插入Many,而不会出现任何问题。我使用exec()的其他查询似乎没有引发任何错误,这使它更加令人困惑。

有人可以解释为什么会这样吗?

编辑1:下面是我的模式代码

const mongoose = require('mongoose');

const schema = new mongoose.Schema({
    date: { type: Date, required: true },
    price: { type: Number, required: true },
    result: { type: String, required: true }
}, { usePushEach: true });

schema.index(
    { date: -1 }
);
mongoose.model('Model', schema);
Run Code Online (Sandbox Code Playgroud)

database asynchronous mongoose mongodb node.js

5
推荐指数
1
解决办法
1045
查看次数

polyfill 应该是依赖项还是 devDependency?

正如这篇SO post所解释的,polyfills 应该在依赖文件夹中。

但是,Array.find() polyfill具有以下安装说明。

npm install --save-dev jspolyfill-array.prototype.find

我不应该将这个 polyfill 作为正常依赖项安装吗?

dependencies package node.js npm

5
推荐指数
0
解决办法
280
查看次数

OSX 的 Cython 链接错误

我有一个与这篇文章非常相似的问题;但是,在实施建议的修复后 - 我仍然收到以下错误。

我正在尝试编译由 Cython 生成的 C 文件。

cython ConnectFour.pyx --embed
Run Code Online (Sandbox Code Playgroud)

我尝试像这样编译我的 c 文件:

gcc -I /usr/local/Cellar/python3/3.7.0/Frameworks/Python.framework/Versions/3.7/Headers -o ConnectFour ConnectFour.c
Run Code Online (Sandbox Code Playgroud)

但是我收到以下错误:

Undefined symbols for architecture x86_64:
  "_PyBaseObject_Type", referenced from:
      ___Pyx_InBases in ConnectFour-3c26d7.o
  "_PyBytes_FromStringAndSize", referenced from:
      ___pyx_pymod_exec_ConnectFour in ConnectFour-3c26d7.o
      ___Pyx_InitStrings in ConnectFour-3c26d7.o
  "_PyCFunction_NewEx", referenced from:
      ___pyx_pymod_exec_ConnectFour in ConnectFour-3c26d7.o
  "_PyCFunction_Type", referenced from:
      ___Pyx_PyObject_CallOneArg in ConnectFour-3c26d7.o
      ___Pyx_PyObject_CallNoArg in ConnectFour-3c26d7.o
      ___Pyx_PyObject_Call2Args in ConnectFour-3c26d7.o
      ___Pyx_PyCFunction_FastCall in ConnectFour-3c26d7.o
      ___pyx_pf_11ConnectFour_36eval_heuristic_score in ConnectFour-3c26d7.o
      ___pyx_pf_11ConnectFour_38list_valid_col_idxs in ConnectFour-3c26d7.o
      ___pyx_pf_11ConnectFour_40deep_copy_board in ConnectFour-3c26d7.o
      ...
  "_PyCode_New", referenced from:
      ___Pyx_InitCachedConstants in ConnectFour-3c26d7.o …
Run Code Online (Sandbox Code Playgroud)

c python cython cythonize

5
推荐指数
1
解决办法
1797
查看次数

如何将 _Generic 与 C 中类型定义的结构一起使用?

我是 C 新手,目前正在通过在 C11 中使用 _Generic 来探索函数重载的概念。

这篇 SO 帖子中,@Lundin 提供了以下代码片段,我运行它没有任何问题:

#include <stdio.h>

void func_int (int x) { printf("%d\n", x); }
void func_char (char ch) { printf("%c\n", ch); }

#define func(param)          \
  _Generic((param),          \
    int:  func_int(param),   \
    char: func_char(param)); \

int main() 
{
  func(1);
  func((char){'A'});
}
Run Code Online (Sandbox Code Playgroud)

@Lundin 还提到了以下内容:

更好的方法是使用单个结构参数创建一个函数接口,该结构参数可以适应包含所有必要的参数。有了这样的接口,你就可以使用上面基于_Generic的简单方法了。类型安全且可维护。

所以我决定扩展上面的例子来structs看看它的实际效果。

以下是我的尝试:

#include <stdlib.h>
#include <stdio.h>

typedef struct args_int Args_int;
typedef struct args_char Args_char;

void func_int(Args_int args);
void func_char(Args_char args);

struct args_int {
    int val;
};
struct …
Run Code Online (Sandbox Code Playgroud)

c generics struct overloading

5
推荐指数
1
解决办法
1049
查看次数

从Firebase模块仅导入身份验证软件包

SO线程重点介绍了如何将独特的Firebase功能导入Web应用程序。

在我的VueJS SPA中,我只想在我的Web应用程序中包含firebase / auth。根据线程,以下所有片段都是必需的。

import * as firebase from 'firebase/app';
import 'firebase/auth';
Run Code Online (Sandbox Code Playgroud)

不幸的是,该线程中的答案/评论没有指定此导入操作的确切位置,也没有说明代码段的任何部分。

我尝试将上述代码添加到我的main.js文件(应用程序的入口以及初始化Firebase的位置)中;但是,在相应地更改了导入语句之后,整个firebase仍捆绑在我的应用程序中(如下所示)。

在此处输入图片说明

我的问题是,我的网络应用程序中还需要在哪里包含上述代码段?每次将Firebase导入使用Firebase函数的Vue组件时,需要同时包括两个导入行吗?

另外,我觉得我的问题源于对进口实际情况的不了解。为什么我们必须import * as firebase然后import 'firebase/auth'呢?

这篇中级帖子还演示了如何导入特定的Firebase程序包,并引用了“摇树”,但没有做进一步解释。阅读有关“摇树”的文档可以帮助我理解该概念,但不能理解它与Firebase示例相关的工作方式。

注意,我目前正在使用Webpack v3.6.0作为捆绑程序。

firebase webpack

4
推荐指数
1
解决办法
730
查看次数