Question

我刚刚开始研究一种工具，它基本上有助于识别在应用程序中重写的组件的功能和CSS。应用程序覆盖完全可以，因为它可能想要自定义特定组件。框架提供了一个基本组件，应用程序可能会也可能不会使用它，具体取决于要求。

现在，可能会发生应用程序在覆盖时错误地给出了一些错误的代码，这反过来会影响组件的正常工作。考虑从框架方面提供的以下非常基本的按钮组件。在应用程序端，创建了一个实例，并根据需要进行了一些修改，但由于一些不良的代码和样式（无法完全看到按钮上的应用程序文本），它失败（请参阅控制台日志以获取错误）。

http://jsfiddle.net/8yyt3a3e/

/*Framework Provided Support*/
function framework(){
    var btnf= document.createElement("button");
    btnf.id='btn_f';
    btnf.setAttribute('class','btnframe');
    var btnfContent = document.createTextNode("Framework");
    btnf.onclick=function(){
       alert(this.textContent);
    };
    btnf.changeContent= function(newContent){
       this.textContent= newContent;
    };
    btnf.appendChild(btnfContent);
    return btnf;
}
/*Application code*/
function application(){
    var container= document.getElementById('app');
    var btn= framework();
    btn.id='btn_a';
    //App overrides style
    btn.style.cssText='background-color:blue;width:100px';
    //App override click event handler
    btn.onclick=function(){
     control.render();    //bad code in application side   
     alert(this.textContent);
    };
    //API to change content of new Button
    btn.changeContent('Application');
    container.appendChild(btn);
}
var btnComponent=new application();

这是非常简单的情况，但在生产方面，应用程序和框架代码大小可能很大，很难找到Application中任何组件故障背后的根本原因。需要花费大量时间来确定问题是框架还是应用程序！我想要创建的工具的使用，它列出了所有被覆盖的数据，使得更容易直接查看差异。我无法猜测我应该从哪里开始。哪种脚本语言会更好？该方法应该是什么......？

希望澄清我的问题陈述！任何帮助表示赞赏！

Answer 1

您需要将btnf.appendChild(btnfContent)（在framework()功能的末尾）更改为document.body.appendChild(btnfContent)。否则，这意味着将您正在创建的按钮放在您正在创建的按钮内。（而不是document.body您可以将现有元素的ID放在您正在创建的按钮之外。

您是否在代码的其他部分（例如control.render()或function control.render(){...}）中定义了control.render=function(){...}功能？否则，它不会起作用，因为control.render()不是预定义的函数。

用于标识框架组件的Application中的覆盖的工具

1 个答案: