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引数内のthisはwindowを指すべきです。以下のように修正できます：
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タグを動的に追加し、同時にinputのdisplay属性を制御するものでした。それは複雑すぎると感じたため、その方法は使用しませんでした。 問題2では、JavaScriptにおけるthisの指す先の問題について、私の理解はまだ不十分であり、さらに深く学ぶ必要があります。 問題3は、非常に簡単に解決できました。