抹桥的博客
Language
Home
Archive
About
GitHub
Language
主题色
250
1174 文字
6 分
知乎フロントエンド面接問題解答

問題1:JavaScript を使用して以下の動的効果を実装してください#

お好みの方法やライブラリを使用できます。できるだけエレガントな実装を心がけてください。コードが完成したら、このアプローチの利点と欠点を簡潔に説明してください。 これは私がネイティブjsで実装したものです。inputタグのreadonly属性を使用しました。実装は以下の通りです:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>第一题</title>
    <style>
      body {
        width: 900px;
        margin: 0 auto;
        line-height: 30px;
      }
      a {
        text-decoration: none;
      }
      .head {
        background-color: #059ed3;
      }
      .row {
        height: 30px;
        border-bottom: 1px solid #888;
      }
      input {
        margin-left: 10px;
        margin-top: 6px;
        border: none;
        outline: none;
        float: left;
      }
      .title {
        border: 1px solid #999;
      }
      a {
        float: right;
      }
      ###add {
        background-color: #cccccc;
        width: 100%;
        height: 30px;
      }
      ###add a {
        display: block;
        text-align: right;
        font-size: 14px;
        font-weight: bolder;
        color: #008000;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="head">现在共有:<strong>4</strong> 个条目</div>
    <div id="list">
      <div class="row">
        <input type="text" value="标题" /><a href="javascript:;" class="change"
          >修改</a
        >
      </div>
      <div class="row">
        <input type="text" value="标题" /><a href="javascript:;" class="change"
          >修改</a
        >
      </div>
      <div class="row">
        <input type="text" value="标题" /><a href="javascript:;" class="change"
          >修改</a
        >
      </div>
      <div class="row">
        <input type="text" value="标题" /><a href="javascript:;" class="change"
          >修改</a
        >
      </div>
    </div>
    <div id="add"><a href="javascript:;">新增条目</a></div>
    <script>
      window.onload = function () {
        change();
        add();
      };
      change = function () {
        var list = document.getElementById("list");
        var titles = list.getElementsByTagName("input");
        var changes = list.getElementsByTagName("a");
        for (var i = titles.length - 1; i >= 0; i--) {
          titles[i].readOnly = "readonly";
        }
        for (var j = changes.length - 1; j >= 0; j--) {
          changes[j].index = j;
          changes[j].onclick = function () {
            if (this.text == "修改") {
              this.text = "保存";
              titles[this.index].readOnly = "";
              titles[this.index].className = "title";
            } else {
              this.text = "修改";
              titles[this.index].readOnly = "readonly";
              titles[this.index].className = "";
            }
          };
        }
      };
      add = function () {
        var addBtn = document
          .getElementById("add")
          .getElementsByTagName("a")[0];
        addBtn.onclick = function () {
          var newRow = document.createElement("div");
          newRow.className = "row";
          newRow.innerHTML =
            '<input type="text" value="未命名" /><a href="javascript:;" class="change">修改</a>';
          var list = document.getElementById("list");
          // console.log("click",list);
          // e = e || window.event;
          list.appendChild(newRow);
          change();
          // e.cancelBubble = true;
          update();
        };
      };
      update = function () {
        var list = document.getElementById("list");
        var lth = list.getElementsByTagName("div").length;
        var count = document.getElementsByTagName("strong")[0];
        count.innerHTML = lth;
      };
    </script>
  </body>
</html>

問題2:正しい myName の値を出力するには、プログラムをどのように修正すればよいですか?また、その理由を説明してください。#

foo = function () {
  this.myName = "Foo function.";
};
foo.prototype.sayHello = function () {
  alert(this.myName);
};
foo.prototype.bar = function () {
  setTimeout(this.sayHello, 1000);
};
var f = new foo();
f.bar();

thisは、そのメソッドを呼び出す現在のオブジェクトを指すため、コード内のsetTimeoutはグローバル関数であり、完全な表記はwindow.setTimeoutです。したがって、setTimeout(func,time)func引数内のthiswindowを指すべきです。以下のように修正できます:

foo.prototype.bar = function () {
  var That = this;
  setTimeout(function () {
    That.sayHello();
  }, 1000);
};

問題3:以下の要件に従って、対応するHTMLとCSSを記述してください。#

現在、A、B、Cの3つの並列カラムレイアウト構造があり、左から右へ順にA、B、Cと並んでいます。幅はそれぞれ180px、600px、180pxです。HTML構造を変更せずにCSSで実現する要件は以下の通りです:ABC、CBA、BACの3種類のレイアウト、およびCBAの配置でBの幅を自動調整(3カラムの合計幅100%)すること。ブラウザ固有のCSSハックは使用できません。

<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <title>第三题</title>
    <style>
      .content {
        width: auto;
        margin: 0 auto;
        position: relative;
        height: 50px;
        overflow: auto;
      }
      .a {
        background-color: red;
        width: 160px;
      }
      .b {
        background-color: blue;
        width: 600px;
      }
      .c {
        background-color: yellow;
        width: 160px;
      }
      .a,
      .b,
      .c {
        height: 50px;
      }
      /*		ABC*/
      .a1,
      .b1,
      .c1 {
        float: left;
      }
      /*		CBA*/
      .c2 {
        position: absolute;
        top: 0;
        left: 0;
      }
      .a2 {
        float: right;
      }
      .b2 {
        margin-left: 160px;
        width: auto;
      }
      /*		BAC*/
      .b3 {
        float: left;
      }
      .a3 {
        position: absolute;
        top: 0;
        left: 600px;
      }
      .c3 {
        float: right;
      }
    </style>
  </head>
  <body>
    <p>
      从左至右依次为 A, B, C, 宽度分别为180px, 600px,
      180px。用CSS实现:ABC,CBA,BAC
      三种布局及在CBA排列下使B宽度自适应(三列总宽度100%).
    </p>
    <p>ABC,结构</p>
    <div class="content">
      <div class="a a1">A</div>
      <div class="b b1">B</div>
      <div class="c c1">C</div>
    </div>
    <p>CBA,B宽度自适应</p>
    <div class="content">
      <div class="a a2">A</div>
      <div class="b b2">B</div>
      <div class="c c2">C</div>
    </div>
    <p>BAC结构</p>
    <div class="content">
      <div class="a a3">A</div>
      <div class="b b3">B</div>
      <div class="c c3">C</div>
    </div>
  </body>
</html>

まとめ#

問題1では、readonly属性を使用したため、実装は比較的簡単でした。しかし、元の問題のデモから推測すると、彼の実装方法はinputタグを動的に追加し、同時にinputdisplay属性を制御するものでした。それは複雑すぎると感じたため、その方法は使用しませんでした。 問題2では、JavaScriptにおけるthisの指す先の問題について、私の理解はまだ不十分であり、さらに深く学ぶ必要があります。 問題3は、非常に簡単に解決できました。

この記事は 2015年1月15日 に公開され、2015年1月15日 に最終更新されました。3917 日が経過しており、内容が古くなっている可能性があります。

知乎フロントエンド面接問題解答
https://blog.kisnows.com/ja-JP/2015/01/15/zhihu-interview-question/
作者
Kisnows
公開日
2015-01-15
ライセンス
CC BY-NC-ND 4.0