Javascript 处理外部函数导入

关于如何处理外部函数的导入和导出函数，这可能是一个相当普遍的问题

所以我有一个

组件

，如下所示：

import React, {Component} from "react";
import {handleChange} from "./path";
//imports from different files...

class Foo extends Component {
    constructor(props) {
        super(props);

        this.bindFunctions();

        this.state = {...};
    };

    //Arrow functions to bind them
    alreadyBound = () => {};

    render() {
        return (
            <div>
                Some text
            </div>
        );
    }

    bindFunctions = () => {
        this.handleChange = handleChange.bind(this);
        //dozens of functions to follow...
    }
}

export default compose(
    translate('translations'),
    connect()
)(Foo);

import * as path from  "./path";

class Foo { }

---

现在这个效果很好，但令人恶心。我的文件越来越大，总是

绑定这些函数是一件痛苦的事情。我有必要导入函数/组件，但我真的必须以这种方式绑定它们吗？类似于
arrow
的函数将非常简洁，可以节省大量的冗余输入。提前谢谢
 < P>作为替代设计，你可以考虑混音（如：
）。
let clickable = (superclass) => class extends superclass {  

    constructor(props) { super(props); };

    handleClick = () => { console.log( "clicked ", this ); };
};

class Foo extends clickable(Component) {
    constructor(props) { super(props); this.state = { ... };};

    render() { return <div onClick={this.handleClick}>foobar</div>; }
}   

let clickable=（超类）=>类扩展超类{
构造函数（props）{super（props）；}；
handleClick=（）=>{console.log（“clicked”，this）；}；
};
类Foo扩展可点击（组件）{
构造函数（props）{super（props）；this.state={…}；}；
render（）{return foobar；}
}   
一个人可以一次导入多个方法，如下所示：

import React, {Component} from "react";
import {handleChange} from "./path";
//imports from different files...

class Foo extends Component {
    constructor(props) {
        super(props);

        this.bindFunctions();

        this.state = {...};
    };

    //Arrow functions to bind them
    alreadyBound = () => {};

    render() {
        return (
            <div>
                Some text
            </div>
        );
    }

    bindFunctions = () => {
        this.handleChange = handleChange.bind(this);
        //dozens of functions to follow...
    }
}

export default compose(
    translate('translations'),
    connect()
)(Foo);

import * as path from  "./path";

class Foo { }

然后我们可以将它们指定为静态方法：

Object.assign( Foo, path );

或作为原型方法：

Object.assign( Foo.prototype, path );

如果你想绑定上下文，那就有点困难了。这可以在构造函数中完成：

import * as path from  "./path";

class Foo { 
  constructor(){
    for(var key in path) this[key] = path[key].bind(this);
  }
  //...
}

或者，如果您只想绑定一些函数（可能更快）：

我会将它重构为一组mixin（添加handleChange，…）或非成员函数（handleChange（this，value，target））；如果您使用这些作为事件，那么mixin是唯一的alternative@MassimilianoJanes我想放弃成员函数或传递此

，因为此样式已经过时。你说混合是什么意思？有一个很好的说法

。bind（）

在这里不是必需的…@Jonasw-True，但我仍然需要键入另一行代码。不过，这帮我省去了一些烦人的麻烦，谢谢。我想他想减少自己的loc。我看不出这会如何减少loc？@Felix，因为没有必要像他现在这样手动将mixin成员绑定到“this”。。。（看看//要遵循的几十个函数……行）这似乎很花哨，但我对引入这样的新结构感到犹豫，而不是使用我已经使用的功能have@Nocebo，我想混音是相当标准的；如果你想要一个反应型的替代品，看看更高阶的组件……就像魅力一样。但是，

Object.assign（Foo，path）这不正确t@nocebo不，他们是不同的。第一个方法分配静态方法，因此它们只能直接在类本身上使用（aka
Foo.sth（）
）。其他方法（原型方法或只是方法）是类实例的一部分，因此
foo=newfoo（）；method（）
@nocebo调用静态方法类methods@Nocebo, ... 嗯，我不认为这等同于您的原始代码，因为‘path’函数不像arrow属性函数那样绑定到组件实例；这意味着，如果将这些函数作为react事件传递，代码将无法工作。。。（当然，假设这是您的原始意图）@Nocebo，在构造函数中，您可以为（路径中的乐趣）this[fun].bind（this）添加类似于
的内容