Question

我有一个javascript对象，我已经添加了许多原型函数，这些函数主要取决于对象的成员。

myForm() {
    this.property1 = "Prop1";
    this.property2 = "Prop2";
}

myForm.prototype.loadValues = function(){ /*...*/);

myForm.prototype.setValues = function(){ /*...*/);

myForm.prototype.doStuff = function(){ /*...*/);

它有足够的功能/代码，它当前位于~4000行，每次我必须使用dev工具/ firebug进行调试时，它会让我疯狂。我正在考虑将其拆分。

myForm.js -

myForm(){
    this.property1 = "Prop1";
    this.property2 = "Prop2";
    new myFormLoadActions();
    new myFormSetActions();
    new myFormDoStuffActions();
}

myFormLoadActions.js

myFormLoadActions(){
    myForm.prototype.loadValues = function(){ /*...*/);
}

myFormSetActions.js

myFormSetActions(){
    myForm.prototype.setValues = function(){ /*...*/);
}

myFormDoStuffActions.js

myFormDoStuffActions(){
    myForm.prototype.doStuff = function(){ /*...*/);
}

我试过这个，它似乎在功能上有效。这是处理大量原型函数的推荐方法，还是有更好的方法？

Answer 1

保留旧代码，但只是将分配分散到多个文件的原型中：

档案0

myForm() {
    this.property1 = "Prop1";
    this.property2 = "Prop2";
}

档案1

myForm.prototype.loadValues = function(){ /*...*/);

文件2

myForm.prototype.setValues = function(){ /*...*/);

正如我在评论中所指出的，这只是一个课程做得太多的问题，但你意识到这一点，只是想要更小的文件，所以在这里你去：）

Answer 2

对我来说，这看起来有点奇怪。我的意思是，你正在为他们的“副作用”构建对象（向不同对象的原型添加属性），然后立即扔掉它们：

myForm(){
    ...
    new myFormLoadActions();
    ...
}

你已经“新建”的对象在实例化之后实际上并没有做任何事情，并且你没有持有对它的实例的引用，所以最好只是成为一个可调用的函数：

myForm(){
    ...
    myFormLoadActions(this);
    ...
}

这只是我的拙见，随意争辩！

Answer 3

我会推荐这种方法，因为它看起来更整洁，也不难调试。

myForm() {
    this.property1 = "Prop1";
    this.property2 = "Prop2";
}

myForm.prototype = {
    loadValues: function(){ /*...*/),
    setValues: function(){ /*...*/),
    doStuff: function(){ /*...*/),
    .
    .
    .
}

另一种方法：

myForm(){
    this.property1 = "Prop1";
    this.property2 = "Prop2";
    addFunctionsToPrototype();
}
addFunctionsToPrototype(){
    myForm.prototype.loadValues = function(){ /*...*/);
    myForm.prototype.setValues = function(){ /*...*/);
    myForm.prototype.doStuff = function(){ /*...*/);
}

使用大量原型函数重构javascript对象

3 个答案: