Question

这是我的第一个问题。所以我会简单的。

我不知道如何在htmlobj2中使用方法“htmlobj1.paint”。我尝试使用电话，但我认为我做错了。所以这是代码：

PD：htmlobj1.paint有效。我非常感谢你想给我继续这段代码的任何建议。谢谢！

<body>
    <table id="table">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
        <th>Id</th>
        <th>Adress</th>
        <th>Mutant</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>22</td>
        <td>???</td>
        <td>Berkley St 304</td>
        <td>Yes</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>??</td>
        <td>???</td>
        <td>Conecticut Av 904</td>
        <td>Yes</td>
      </tr>
    </table>
    <p id="demo"></p>

    <h1>Text</h1><br>
    <h1>Text</h1><br>
    <h1>Text</h1><br>
    <h1>Text</h1><br>
    <h1>Text</h1><br>
    <h1>Text</h1><br>
</body>
var htmlobj2 = {
    e: document.getElementsByTagName("h1"),
}
var htmlobj1 = {
    e: document.getElementsByTagName("td"),
    paint: function(e){
        e = this.e;
        for (var i = 0; i < arr.length; i++) {

            if (i % 2 == 0) {
                e[i].style.backgroundColor = "red";
                e[i].style.color = "white";
            }
            else {
                e[i].style.backgroundColor = "green"
                e[i].style.color = "white";
            }
        }       
    }
}
var arr = [].slice.call(htmlobj1.e);
var arr2 = [].slice.call(htmlobj2.e);
var myFunction = htmlobj1.paint();

Answer 1

惯用代码的一个示例是使用构造函数（或更新的class语法）来创建通过方法共享行为的对象实例。

function MyCtor(tagName) {
  this.e = document.getElementsByTagName(tagName)
}
MyCtor.prototype.paint = function(){
    for (var i = 0; i < this.e.length; i++) {
        if (i % 2 == 0) {
            this.e[i].style.backgroundColor = "red"
        } else {
            this.e[i].style.backgroundColor = "green"
        }
        this.e[i].style.color = "white";
    }       
}
var htmlobj1 = new MyCtor("td")
var htmlobj2 = new MyCtor("h1")

htmlobj1.paint()
htmlobj2.paint()

现在你有一个构造函数，它产生继承paint方法的对象。此方法可以使用this对调用构造函数时获取的集合进行操作。

使用现代功能，您可以像这样重写代码：

class MyCtor {
    constructor(tagName) {
      this.e = Array.from(document.getElementsByTagName(tagName))
    }
    paint(){
        for (var [i, el] of this.e.entries()) {
            el.style.backgroundColor = i % 2 == 0 ? "red" : "green"
            el.style.color = "white";
        }       
    }
}
var htmlobj1 = new MyCtor("td")
var htmlobj2 = new MyCtor("h1")

htmlobj1.paint()
htmlobj2.paint()

请注意，我在var语句中使用了const而不是for-of。 const声明会更好，但在Firefox中只能处于该位置。

另请注意，在使用条件运算符设置backgroundColor时，我稍微缩短了一些内容。这也可以在第一个例子中完成。

Answer 2

将评论中所说的全部放在一起：

function createCustomObj(tag){
   return {
     elems: [...document.getElementsByTagName(tag)], //convert to array, the ES6 way...
     paint: function(){
         this.elems.forEach((elem,index)=>{
            if (index % 2 == 0) {
              elem.style.backgroundColor = "red";
              elem.style.color = "white";
            }else {
               elem.style.backgroundColor = "green"
               elem.style.color = "white";
            }
         });       
     }
};
}

像这样使用：

htmlobj1=createCustomObj("h1");
htmlobj1.paint();

我不知道在这种情况下如何使用其他对象中的对象的方法

2 个答案: