小编Aar*_*ron的帖子

ES6 Singleton vs实例化一次类

我看到使用ES6类使用单例模式的模式,我想知道为什么我会使用它们而不是仅仅在文件底部实例化类并导出实例.这样做有什么负面的缺点吗?例如:

ES6导出实例:

import Constants from '../constants';

class _API {
  constructor() {
    this.url = Constants.API_URL;
  }

  getCities() {
    return fetch(this.url, { method: 'get' })
      .then(response => response.json());
  }
}

const API = new _API();
export default API;
Run Code Online (Sandbox Code Playgroud)

用法:

import API from './services/api-service'
Run Code Online (Sandbox Code Playgroud)

使用以下Singleton模式有什么区别?是否有任何理由使用另一个?我真的更好奇,知道我给出的第一个例子是否会有我不知道的问题.

单身模式:

import Constants from '../constants';

let instance = null;

class API {
  constructor() {

    if(!instance){
      instance = this;
    }

    this.url = Constants.API_URL;

    return instance;
  }

  getCities() {
    return fetch(this.url, { method: 'get' })
      .then(response => response.json());
  }
} …
Run Code Online (Sandbox Code Playgroud)

javascript es6-class

36
推荐指数
3
解决办法
2万
查看次数

TypeError:不是函数typescript类

我在我的打字稿类中得到以下错误,无法理解为什么.我正在做的就是尝试调用传递令牌的辅助函数.

错误:发布错误:TypeError:this.storeToken不是函数(...)

类:

/**
 * Authentication Service:
 *
 * Contains the http request logic to authenticate the
 * user.
 */
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';

import { AuthToken } from './auth-token.service';

import { User } from '../../shared/models/user.model';

@Injectable()
export class Authenticate {

  constructor(
    private http: Http,
    private authToken: AuthToken
  ) {}

  post(user: User): Observable<any> {
    let url = 'http://localhost:4000/';
    let body = …
Run Code Online (Sandbox Code Playgroud)

javascript typescript angular

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

使用 React 前向引用时如何附加复合组件(forwardRefExoticComponent 上不存在属性)

我有一个面板组件,可以选择允许用户使用复合组件。该面板有一个包含关闭功能(按钮)的默认标题,我这样做的主要原因是让用户可以选择使用带有自己的按钮的自定义标题以及他们想要的任何其他内容,所以我选择使用复合组件并允许面板组件检查其子组件中是否存在该组件,如果存在,则不会使用默认标头。我已经一切正常,但我似乎无法弄清楚如何清除打字稿错误。

下面是与 Typescript 相关的代码和我收到的错误。我还链接到一个沙箱,其中包含有错误的工作代码。

我尝试了谷歌搜索的大量变体,但在一天之内找不到解决方案。

沙盒:https://codesandbox.io/s/panel-513yq? file=/src/Panel/Panel.tsx:510-4061

应用程序.js:

export default function App() {
  const [open, setOpen] = React.useState(false);

  const handleClose = () => {
    setOpen(false);
  };

  const handleOpen = () => {
    setOpen(true);
  };

  return (
    <div id="page" data-test-id="component-app">
      <header id="header">
        <button onClick={handleOpen}>Open</button>
      </header>
      <main id="main">
        <Panel open={open} onClosed={handleClose} renderPortal={true}>
          <Panel.Header>
            <div>
              <button onClick={handleClose}>Close</button>
            </div>
          </Panel.Header>
          <Panel.Content>Panel Content</Panel.Content>
        </Panel>
      </main>
    </div>
  );
}
Run Code Online (Sandbox Code Playgroud)

面板组件:

interface ModalPropsComposition {
  Header?: React.FC<PanelHeaderProps>;
  Content?: React.FC<PanelContentProps>;
}

export interface PanelProps
  extends React.HTMLAttributes<HTMLDivElement>,
    ModalPropsComposition { …
Run Code Online (Sandbox Code Playgroud)

typescript reactjs

6
推荐指数
2
解决办法
4025
查看次数

Observable - 401 导致 forkJoin 出错

我正在使用 forkJoin 发出多个服务器请求。这是我在整个应用程序中经常使用的一种模式,并且效果很好。然而,我们刚刚开始实现在后端完成的用户角色。我不确定实现角色的最佳实践是什么,因为我主要是前端开发人员,但这是我遇到的问题:

我们的应用程序具有成员和管理员成员角色。

  1. 从每个视图中,我都必须为成员和管理员成员角色调用后端,而不管角色是否在前端确定。

  2. 由于成员和管理员成员都拥有个人数据,因此始终为这两个角色返回成员数据。

  3. 仅当用户是管理员时才返回对管理员数据的请求。每当用户没有管理员访问权限时,请求都会返回 401 错误。这是我遇到问题的地方。

每当调用返回 401 时,就会调用我的 subscribe 方法中的错误方法,而我无权访问所进行的任何调用,包括与成员数据关联的调用。

在我包含在 forkJoin 中的代码中,有五个调用传递到该方法中。如果用户是管理员,则第三次和第四次调用仅返回数据,而其余调用始终为成员或管理员返回。

当用户不是管理员时,第三次调用返回 401,流停止并调用我的 subscribe 方法中的错误处理程序。这显然不是我想要的。我希望流继续,以便我可以使用 _data 方法中的数据。

我只使用了 6 个月的 RXJS 并且正在学习。也许我应该使用不同的模式,或者有办法解决这个问题。任何有关代码示例的帮助将不胜感激。在我的代码示例下方,我包含了另一个代码示例,其中我尝试通过使用 catch 方法来解决问题。它没有用。

我的视图获取方法:

private getZone() {
  this.spinner.show();
  this.zonesService.getZone(this.zoneId)
    .map(response => {
      this.zone = response['group'];
      return this.zone;
    })
    .flatMap(() => {
      return Observable.forkJoin(
        this.teamsService.getTeam(this.zone['TeamId']),
        this.zonesService.getZoneAssociations(this.zone['id'], '/myDevices'),
        this.zonesService.getZoneAssociations(this.zone['id'], '/devices'),
        this.zonesService.getZoneAssociations(this.zone['id'], '/groupMembers'),
        this.sitesService.getSite(this.zone['SiteId'])
      );
    })
    .subscribe(
      _data => {
        // data handling...
      },
      _error => {
        // error handling ...
      }
    );
}
Run Code Online (Sandbox Code Playgroud)

我试图修复:

private …
Run Code Online (Sandbox Code Playgroud)

javascript fork-join observable rxjs angular

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

Typescript 属性 concat 不存在

我的代码按预期工作,但 Typescript 显然对我所做的事情有问题,我想了解它是什么。Typescrpt 报告以下错误:

在此处输入图片说明

下面是工作代码。

getZones() {
  this.spinner.show();
  this.zonesService.getZonesByUserId(this.userId)
    .mergeMap(zones => Observable.from(zones))
    .mergeMap(zone => this.zonesService.getAssociations(zone['id'], '/team')
      .catch(() => Observable.of(null))
      .map(team => {
        if (team['team']) {
          return Object.assign({}, zone, { teamName: team['team']['name'] });
        } else {
          return zone;
        }
      })
    )
    .mergeMap(zone => this.zonesService.getAssociations(zone['id'], '/site')
      .catch(() => Observable.of(null))
      .map(site => {
        if (site['site']) {
          return Object.assign({}, zone, { siteName: site['site']['name'] });
        } else {
          return zone;
        }
      })
    )
    .reduce((zones, zone) => {
      return zones.concat(zone);
    }, [])
    .subscribe(
      _data => { …
Run Code Online (Sandbox Code Playgroud)

javascript typescript angular

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

从后台打开本机深层链接应用程序

Ive启用了深层链接,当应用程序打开时,一切正常。当我使用url moderatorapp:// hello从关闭状态打开应用程序时,它会记录正确的url,但是当从后台状态打开应用程序时,如果应用程序被深层链接,则它将无法正常工作。我的代码如下:

componentDidMount() {
    // Storage.clear();
    Storage.getItem('data_moderator')
        .then(_data => {
            if (_data && _data.tokens) {
                this.autoLogin(_data.tokens);
            } else {
                Actions.loginForm();
            }
        }
    );

    Linking.getInitialURL()
        .then(url => {
            console.log('Initial Url then ', url);
            if (url) {
                console.log('Initial Url ', url);
            }
        })
        .catch(error => console.log(error));

    Linking.addEventListener('url', this.handleOpenURL);
}
Run Code Online (Sandbox Code Playgroud)

显然这是因为此时未调用componentDidMount方法。

我尝试过的

我试图将链接代码包装到一个事件中,该事件检测到应用程序进入活动状态并且不起作用,它记录了与应用程序关闭时的初始尝试相同的URL。当我尝试使用url moderatorapp:// goodbye从后台状态深入链接到应用程序时,它将记录moderatorapp:// hello。因此,它不知何故没有更新。

AppState.addEventListener('change', (state) => {
    if (state === 'active') {
        console.log('state active');
        Linking.getInitialURL()
            .then(url => {
                console.log('Initial Url then ', url);
                if (url) {
                    console.log('Initial Url ', …
Run Code Online (Sandbox Code Playgroud)

javascript react-native react-native-ios

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

Django CMS - 创建第一页时模板不存在错误

我按照说明在我的mac上安装Django CMS.当我运行"manage.py cms check"时,一切都很好,除了它说找不到template_1.html.当我进入管理员创建页面时,模板位于模板下拉列表中.当我尝试保存页面时,它会在"/ admin/cms/page/add /"中给出"TemplateDoesNotExist".

也许这是值得注意的,我在此错误之前遇到了问题.我无法打开管理员,甚至无法在浏览器中显示主页面.搜索堆栈溢出后,我发现了同样的问题.我将url模式从"urlpatterns = i18n_patterns"更改为标准.那很有效.现在我有这个问题.任何援助将不胜感激.谢谢.

如果需要,链接到Traceback:http: //dpaste.com/hold/1430437/

django-cms

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

JavaScript“in”运算符是否在幕后执行循环?

我正在研究一些常见算法的解决方案,并且遇到了一些我很好奇的东西。我试图通过谷歌搜索和查看一些规格来自己找到答案,但我无法找到我的问题的答案。下面的算法主要检查第一个数组中的每个项目是否在第二个数组中都有对应的项目平方。天真的解决方案(正如他们所说)将具有某种嵌套循环并被视为 O(n2)。写出下面解决方案的人说这是 O(n)。

我不明白这怎么可能是 O(n) 因为他在循环内使用了 Javascript“in”运算符。据我所知,运算符检查它所比较的​​值是否存在于对象中。如果它没有循环遍历引擎盖下的对象,它是如何做到这一点的?这真的是线性时间复杂度吗?

function same(arr1, arr2) {

  if (arr1.length !== arr2.length) {
    return;
  }

  let frequencyMap1 = {};
  let frequencyMap2 = {};

  for (let val of arr1) {
    frequencyMap1[val] = (frequencyMap1[val] || 0) + 1;
  }

  for (let val of arr2) {
    frequencyMap2[val] = (frequencyMap2[val] || 0) + 1;
  }

  for (let key in frequencyMap1) {
    if (!(key ** 2 in frequencyMap2)) {
      return false;
    }

    if (frequencyMap2[key ** 2] !== frequencyMap1[key]) {
      return false …
Run Code Online (Sandbox Code Playgroud)

javascript algorithm

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