相关疑难解决方法(0)

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万
查看次数

最好导出包含函数的对象,或者只导出ES6中的多个函数(是否存在约定?)

这是一个惯例问题.我是ES6的新手,但我正在尝试使用模块系统.从单个文件导出多个函数或导出包含这些函数的单个对象是首选/更常见的.

例:

utils.js

export function add(num1, num2) {
  return num1 + num2;
}

export function minus(num1, num2) {
  return num1 - num2;
}
Run Code Online (Sandbox Code Playgroud)

并像这样使用它:

import {add, minus} from 'utils.js';
Run Code Online (Sandbox Code Playgroud)

VS

utils.js

const utils = {
  add: (num1, num2) => {
    return num1 + num2;
  },

  minus: (num1, num2) => {
    return num1 - num2;
  }
}

export default utils;
Run Code Online (Sandbox Code Playgroud)

在包含50-100个函数的utils文件中,第二种方式似乎是明显的赢家.但是对我来说只有一些感觉不对的东西,我不知道为什么.

javascript ecmascript-6

18
推荐指数
2
解决办法
7967
查看次数

创建新类与使用export const之间的差异

建立:

  • BabelJS(es2015,反应,阶段-1)
  • 的WebPack
  • React/redux

CommonJS和ES6的新功能.我知道对象实例和方法的静态容器之间的区别,但我不确定它们在分离到模块时的行为方式.所以我想知道返回一个实例之间的区别是什么(这个模式是否有效?):

// StateParser.js

class StateParser {
    constructor() {
     }

     method1() {
        ...
     }

}

export default new StateParser()
Run Code Online (Sandbox Code Playgroud)

并导出const方法:

// StateParser.js

let state = {
}

export const method1 = () => { ... }
Run Code Online (Sandbox Code Playgroud)
  1. 方法A:每次导入时都会有新的实例吗?
  2. 方法B:使用对象解构的能力之一是:

    import { method1 } from '../utils/StateParser.js';
    
    Run Code Online (Sandbox Code Playgroud)

    然后使用method1,就好像它存在于本地?

  3. 方法A:在构造函数中初始化状态的能力有哪些好处?

所以基本上我不确定何时使用哪个实用程序类,并希望您的输入.

commonjs ecmascript-6 reactjs babeljs

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

使用ES6导入加载特定名称比导入名称空间更快吗?

我已经找到了至少两种从像Ramda这样的模块导入函数的方法.可能还有一些方法可以做一些非常相似的事情const R = require('ramda');

选项1是导入某些功能:

import { cond, T, always, curry, compose } from 'ramda';
Run Code Online (Sandbox Code Playgroud)

选项2是导入整个模块,如:

import * as R from "ramda";
Run Code Online (Sandbox Code Playgroud)

我更喜欢引用调用函数的模块,如下所示:

R.T();
Run Code Online (Sandbox Code Playgroud)

但是如果使用第二个选项,它是否会引入每个Ramda函数,而不仅仅是我正在使用的模块中使用的函数?如果使用选项2,是否会对实际内存使用或带宽使用产生影响?有可能以某种方式这样做:

// invalid syntax below:
import R { cond, T, always, curry, compose } from 'ramda';
R.T();
Run Code Online (Sandbox Code Playgroud)

我的问题与此问题有点相关,但它有点不同 导入R(ramda)到typescript .ts文件

javascript bundling-and-minification ecmascript-6 es6-modules

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

es6模块如何导入自己?

我有一个名为的模块fooModule.在这个模块中,我导入fooModule(本身):

import * as fooModule from './fooModule';

export function logFoo() {
  console.log(fooModule)
}
Run Code Online (Sandbox Code Playgroud)

logFoo()被调用时,我可以看到所有的fooModule的出口.这是如何运作的?

javascript ecmascript-6 webpack es6-module-loader

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

使用ES6静态函数时,我得到"没有这样的方法"

我正在尝试创建一个带有静态函数的"utils"类,用于我在本机中工作的项目.

我读到了如何在StackOverFlow 问题中创建静态函数,但由于某些奇怪的原因,它对我不起作用.

//utils.js
'use strict'

export default {
  textFormat(args) {
      var s = args[0];
      for (var i = 0; i < args.length - 1; i++) {
          var reg = new RegExp("\\{" + i + "\\}", "gm");
          s = s.replace(reg, args[i + 1]);
      }
      return s;
  }
}


//main file
import * as Utils from './utils/utils';
/**
/...
**/
var text = Utils.textFormat(rowData.text, "<Text style={{color:'blue'}}>Hey there</Text>");
Run Code Online (Sandbox Code Playgroud)

但我一直得到这个错误'Utils.textFormat不是一个函数',我做错了什么?

javascript ecmascript-6 reactjs

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

带有静态方法的类与导出函数的打字稿

我一直在尝试对此进行研究,但找不到任何建议。我继承了一个代码库,其中团队使用带有静态方法的类,而不是辅助方法的函数。我从未见过采用这种方法并试图决定是否应该让它们返回并使用它们创建函数。我觉得这很不干净,因为您要导入整个类而不只是要使用的功能,所以导入很膨胀?

一种方法比另一种更好吗?

例如,在我不清楚的情况下:

    export class StringUtil {
      public static alterString(str: string) {
        return alteredString;
      }
    }
Run Code Online (Sandbox Code Playgroud)

    export function alterString(str: string) {
      return alteredString;
    }
Run Code Online (Sandbox Code Playgroud)

然后将这样使用:

import { StringUtil } from '../StringUtil';

getString(str: string) {
  return StringUtil.alterString(str);
}
Run Code Online (Sandbox Code Playgroud)

import { alterString } from '../helper-functions';

getString(str: string) {
  return alterString(str);
}
Run Code Online (Sandbox Code Playgroud)

typescript

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

ES6静态方法调用私有方法

我无法从类中的静态方法调用私有或非静态方法,下面是示例

class a {
 fun1(){
  console.log('fun1');
 }
 static staticfun(){
  console.log('staticfun');
  this.fun1();
 }
}

a.staticfun();
Run Code Online (Sandbox Code Playgroud)

我试图仅公开 staticfun 方法,该方法在内部调用所有私有方法,但这给我的this.fun1不是一个函数。我试图找到很多方法来用“this”找到它,但它确实有效。

如何在静态方法中调用私有实例方法?

javascript oop jquery

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

如何导入命名空间?

我有一个 JavaScript 文件,其中包含以下内容:

const api = {
  call(type, url, data) {
    console.log(type + "bar");
  },

  get(url, query) {
    this.call("foo");
  }
}
Run Code Online (Sandbox Code Playgroud)

我希望能够api.get()在必要时跨多个不同的文件进行调用,但我在导入时遇到问题。

  1. import当我尝试访问变量时,单独加载文件会给我一个 ReferenceError api

    import "services/api.js";
    console.log(api);
    
    Run Code Online (Sandbox Code Playgroud)

    未捕获的引用错误:api 未定义

  2. 给导入一个名称(of api)会返回一个对象,但它没有内部方法:

    import api from "../../services/api.js";
    console.log(api);
    console.log(api.get);
    
    Run Code Online (Sandbox Code Playgroud)

    对象 {}
    未定义

我究竟做错了什么?

javascript ecmascript-6 babeljs

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

如何在ES6中导出静态功能?

基本代码main.js:

class Something {
  static ThisIsStaticFunction () { ... }
}

export default Something;
Run Code Online (Sandbox Code Playgroud)

其他文件xxx.js:

import xxx;

// I want to call `ThisIsStaticFunction()` without having to
// write `Something.ThisIsStaticFunction()` how can I achieve this?
Run Code Online (Sandbox Code Playgroud)

我想打电话ThisIsStaticFunction()而不必写Something.ThisIsStaticFunction()我怎样才能做到这一点?

javascript static ecmascript-6 babeljs

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

如何使用 System.js 导入类似服务的单例类?

我有一个FooService通过import-map加载的 Singleton-Class 。我想(a)等待它并在各种异步函数中使用它,如下所示:

declare global {
  interface Window {
    System: System.Module
  }
}

const module = window.System.import('@internal/foo-service')
const fooService = module.FooService

async function func1() {
  await fooService.doBar()
  .
  .
}

async function func2() {
  await fooService.doBar2()
  .
  .
}
Run Code Online (Sandbox Code Playgroud)

但我只能让它像这样工作:

declare global {
  interface Window {
    System: System.Module
  }
}

async function getfooService() {
  const module = await window.System.import('@internal/foo-service')
  return module.FooService
}

function func1() {
  getfooService().then(fooService => fooService .doBar())
  .
  .
}

function func2() {
  getfooService().then(fooService …
Run Code Online (Sandbox Code Playgroud)

javascript typescript system.js import-maps

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

如何在一个es6模块中创建类并将其导入另一个模块?

我有两个文件:User.jsLogin.js.登录成功后我想调用logInUser类的静态方法.我有奇怪的行为.我究竟做错了什么?

文件内容User.js:

// user/User.js

// I also tried export default class User
export class User { 
  static logIn (token) {
  }

  static logOut (token) {
  }

  static isAuthorized () {
  }
}
Run Code Online (Sandbox Code Playgroud)

Login.js:

// login/Login.js

import React from 'react';
import GoogleLogin from 'react-google-login';
// I also tried import User from './../user/User';
// I also tried import {User} from './../user/User';
import * as User from './../user/User';

class Login extends React.Component { …
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6 es6-modules

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