抹桥的博客

Seize the day.

0%

知乎前端面试题解答

发表于 更新于 分类于 阅读次数： Valine：

第一题：请使用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>

第二题：请说明要输出正确的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);
}

第三题：请按下列要求写出相应的 Html 和 CSS

现有并列的三列布局结构，从左至右依次为 A, B, C, 宽度分别为180px, 600px, 180px。要求在不改变 Html 结构的情况下用CSS实现：ABC，CBA，BAC 三种布局及在CBA排列下使B宽度自适应（三列总宽度100%），不能使用针对浏览器的CSS Hack.

<!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>

总结

第一题中，因为用到了readonly属性，实现起来比较简单。但是根据原题目的演示，猜测到他的实现方法是动态的添加input标签，同时控制input的display属性来实现，感觉太麻烦就没有用那种方法。
第二题中，关于js中this的指向问题，我的理解还是不够深刻，需要继续深入了解。
第三题，很轻松的就解决了。

如果觉得此文章对你有帮助，可以请我喝咖啡O(∩_∩)O