Question

我正在使用对象和所有方法作为原型将我的一个小项目重构为一个有序的类，如结构。这是一个凌乱的代码，但原理却很简单，我正在创建一个对象构造函数，该对象构造函数在init上设置了所有必要的道具，在外部，我通过ObjectName.prototype.funcname

定义了所有方法

现在在每个方法内部，如果我想调用另一个方法，我正在使用“ this.methodname（）”，并且如果我想再次访问对象属性，则我正在使用“ this.someprop”，但效果很好当发生特定情况时，我实际上是在创建另一个对象（不是通过构造函数，因为我不需要，所以我只需要存储一些属性），然后我想用新对象作为“ this”调用另一个方法，所以我正在调用this.someMethod.call(newobj)，但我搞砸了所有事情，因为现在如果该方法尝试调用其他方法，它将失败，但是如果它将访问属性，则它将成功。我的目标是将新的Obj存储在主obj（通过构造函数创建）中，作为“嵌套”对象，如果满足某些条件，则可以使用this作为新的“嵌套”对象来调用某些方法，并且仍然能够调用我的主要obj方法。有什么最佳实践吗？我的第一个猜测是在构造函数中添加一个参数，因此，如果我需要另一个“嵌套”对象，我可以使用该参数调用构造函数，而只是得到一个小对象，而不是也调用某些方法的“大”对象。

编辑：我的构造函数看起来像这样：

function IframeMain (IframeNode,Html){
    this.IframeDomReady(IframeNode);
   Object.assign(this,this.CreateContext(window.location.href,IframeNode));
    this.ParsedDoc = this.HtmlParser(Html);
    this.DocReady = false; 
    this.Appender(this.ContentDocument.head,this.ParsedDoc.Head).then(data => {
        this.Appender(this.ContentDocument.body,this.ParsedDoc.Body)
    }).catch(err => {
        console.error(err);
    });     
}

我正在调用“ Object.assign”以将我的新对象（此）与从“ CreateContext”方法返回的对象合并。之后，我将一些html并将其附加到提供给构造函数的iframe中，现在在某些情况下html中还有另一个iframe，因此我要附加它，然后我需要使用此iframe contentWindow /创建一个新对象文档，以便我可以将html附加到嵌套的iframe中，那么您认为此处的最佳做法是什么？如果我要在主对象内创建一个嵌套对象，并用一些参数调用构造函数以仅返回部分主对象并填充它呢？

CreateContext方法：

IframeMain.prototype.CreateContext = function (src,IframeNode){
    if(!IframeNode.contentWindow || !IframeNode.contentDocument || !IframeNode.contentWindow.document)console.error("Context Problem!");

    return {
        NodesArray : [],
        Natives: {},
        DocReady: null,
        NestedContexts : {},
        IframeNode: IframeNode,
        ContentWindow : IframeNode.contentWindow,
        ContentDocument: IframeNode.contentDocument || IframeNode.contentWindow.document,
        Src : src,
        Location: this.ParseUrl(src),
    };

};

HtmlParser方法：

IframeMain.prototype.HtmlParser = function(HtmlString){
let doc = new this.ContentWindow.DOMParser().parseFromString(HtmlString, 'text/html');
//Some more code...... and return parsed html

Appender方法：

IframeMain.prototype.Appender = async function(target,nodes){
// append each node recursively to the iframe document 
//More calls here to different methods and if we hit an iframe we create another context and i would like to call the exact same methods and not change a thing because on each method i'm using "this" so technically i can do this recursively for 1000 nested iframes.
so what do you think is best practise here?

我正在像这样创建一个新实例：

让Iframe =新的IframeMain（iframeel，html）;

这就是逻辑开始立即执行的方式，我尝试避免创建另一个实例，因为它将再次执行它，而我不需要它。

当我遇到新的iframe时，我会打电话给：

IframeMain.prototype.nestedframes = async function(iframeNode,html,PrevSrc){

this.NestedContexts = this.NestedContexts || {};
this.NestedContexts[UID] = this.CreateContext(PrevSrc,IframeEl);
// more code ...
and then i would like to call my appender method like this:
 await this.NestedContexts[UID].Appender(this.NestedContexts[UID].ContentDocument.head,this.NestedContexts[UID].ParsedDoc.Head);

but obviously my created context doesn't contain those methods and if i will call my method like so:

await this.Appender.call(this.NestedContexts[UID],this.NestedContexts[UID].ContentDocument.head,this.NestedContexts[UID].ParsedDoc.Head);

// i will have problems in the appender method because my this is my new object but inside appender i can't call my methods because they doesn't exist for that obj.

Answer 1

我仍然不太确定，但是我认为您真正要寻找的是一个单独的Context类：

class Context {
    constructor(src, iframeNode) {
        if (!iframeNode.contentWindow || !iframeNode.contentDocument || !iframeNode.contentWindow.document) throw new Error("Context Problem!");
        this.nodesArray = [];
        this.natives = {};
        this.nestedContexts = {};
        this.iframeNode = iframeNode;
        this.contentWindow = iframeNode.contentWindow;
        this.ontentDocument = iframeNode.contentDocument || iframeNode.contentWindow.document,
        this.src = src;
        this.location = Context.parseUrl(src);
    }
    static parseUrl(src) { … } // if it needs properties of IframeMain, make it a method there
                               // and pass the parsed location to the Context constructor
    htmlParser(htmlString) {
        const doc = new this.ContentWindow.DOMParser().parseFromString(HtmlString, 'text/html');
        // Some more code...... and return parsed html
    }
    async append(target, nodes) {
        // append each node recursively to the iframe document 
        // More calls here to different methods and if we hit an iframe we create another context 
    }
    async nestedFrames(iframeNode, html, prevSrc) {
         const nested = this.NestedContexts[UID] = new Context(prevSrc, iframeEl);
         // more code ...
         await this.nestedContexts[UID].append(nested.contentDocument.head, nested.parsedDoc.Head);
    }
    // etc

我正在调用“ Object.assign”以将我的新对象（this）与从“ CreateContext”方法返回的对象合并。

不要那样做。我认为这是您的主要问题。不要使上下文成为普通对象，而应使它们成为具有它们所需的所有方法和属性的类实例。

如果您的IframeMain所做的不只是该 minimum Context类，请引入第二种对象。成为Context的子类，或者可能成为better use composition的子类。

class IframeMain {
    constructor(iframeNode, html) {
        this.IframeDomReady(IframeNode); // ???
        this.context = new Context(window.location.href, iframeNode);
        this.parsedDoc = this.context.htmlParser(Html);
        this.docReady = false;
    }
}

不确定它们之间的确切区别是什么。在您的nestedFrames方法中，您使用了上下文的parsedDoc属性-如果每个上下文都应该有一个已解析的文档，请将该属性也放在那里。或者，如果仅IframeMain负责管理nestedContexts的集合，则将其放在那里（而不是每个上下文都具有树状结构的子上下文）。

也许我判断错了，您实际上并不需要两个不同的数据结构。如果是这样，只需将Context构造函数保持最小，并且不调用任何方法，而仅初始化属性。该工作应在单独的功能中完成，然后：

 async function iframeMain(iframeNode, html) {
     const context = new Context(html, iframeNode);
     await context.append(context.contentDocument.head, context.parsedDoc.head);
     await context.append(context.contentDocument.body, context.parsedDoc.body);
 }
 try {
     const iframe = await iframeMain(iframeel, html);
} catch (err) {
    console.error(err);
}

调用不带“ this”前缀的对象方法

1 个答案: