2011-03-31

史上最强大的PHP Web面试题(会做就能进百度)

Views: 71842 | 58 Comments

注: 只要你会做了这道题目, 你的能力已经可以进入百度了! 如果别的部门不要你, 请你给我发邮件, 我一定尽我所能强烈推荐你! 如果你不想加入百度, 而别的公司又不要你, 只能说明那家公司瞎眼了.

题目: 见图片, 该图是某网页的一个区域的截图, 用于显示商品或者其它信息的分类. 该分类的每一项可以折叠和收起(展开和收缩, 如果有子分类的话). 分类的级数不固定. 现有一个PHP变量:

$cats = array(
    array(
        'id' => 1,
        'name' => '学术和教育',
        'children' => array(
            array(
                'id' => 2,
                'name' => '自然科学',
                'children' => null,
            ),
            // ...
        ),
    ),
    // ...
);

请写一段PHP代码, 将该数组所包含的分类数据生成一段能实现如图片所示功能的HTML/JavaScript代码, 可不考虑CSS样式.

----------

注解: 这道题目考察的范围非常广, 包括PHP, HTML, JavaScript, CSS, 递归, 只有真正掌握了如上几种全部技能, 才能实现完整的功能, 否则必须依赖分工. 应聘者所能实现的程度越大, 得分就越高.

如果应聘者的应聘职位不包括HTML/JS/CSS, 那么题目可改为: 把上面的PHP数据用缩进换行文本的形式保存到文件, 并读取文件生成一个同样的PHP数组.(自定义格式的序列化和反序列化)

看到这篇日志的读者, 如果已经做了出来, 并且个人想加入百度, 请在评论中回复URL并说明你的意愿, 我会主动联系你. 或者你可以把程序打包发给我.


----------

你想加入百度吗?

  查看结果

Loading ... Loading ...

Related posts:

  1. 史上最强大的PHP MySQL操作类
  2. 最简单的JavaScript两级联动示例
  3. 程序员薪水调查 – 80%月薪不超过10K
  4. JavaScript+jQuery两栏选择控件
  5. 如何让 PHP json_encode 函数不转义中文?
Posted by ideawu at 2011-03-31 16:57:24 Tags:

58 Responses to "史上最强大的PHP Web面试题(会做就能进百度)"

  • 简单来分析下吧

    1.用户的最大等待时间是3秒,这个只是整个页面的一部分,因此它的加载速度应该小于3秒,也就是说在56kb速度的情况下该模块最大显示时间不能多于3秒,超过3秒用户就会跳转,那你做出来后谁来看?

    2。作者说这个数据量和层级是无限制的,如果全部直接往页面输出的话就会造成服务器与带宽的压力,而在未全部渲染完之前用户是无法看到数据的,因此会造成网站假死的现象,这也是没有任何实用价值的。

    3.数据量是无限制的,而用户想要看的内容只是一部分,不会全部遍历整个树,因此加载整个树的数据是毫无必要的,而且大数据传输也很耗时间。

    4.大家只是在单用户请求情况下做的开发,如果用户数突破万人,这样的情况怎么解决?

    5.过多的DOM对象会拖慢页面的访问速度,和吃掉用户的内存,而很多情况下这些DOM是不会显示的。

    我的解决方案,不成熟,大家可以讨论下:

    1.后台数据格式使用json,这个好处大家都知道,就不说明了

    2.php只输出第一层级的数据,其他数据通过ajax实现

    3.当页面加载完成后,开始载入二到三级的数据,再多也没必要,因为用户点不点都不知道

    4.当鼠标悬停在某一个栏目上时,即时加载相应的数据

    5.设定定时器,清除不使用的目录数据,减少DOM,释放内存 Reply
    to aokihu: 分析得不错! Reply
  • 用了php进行解析数组成json格式,然后通过纯JS实现了相关的树,要用PHP来直接建树的话更容易,前面已经有同学写过相关函数,我这就不再写了,发一份用php解析数组成json格式,然后用js建树的代码,并且本人也更想走前端开发;代码中的图片用了滑动门,即一张图片有2种箭头,点击时改变背景图片位置。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tree</title>
    <style type="text/css">
    .treePanel{
    width:15em;
    overflow:hidden;
    }
    .tree li{
    list-style-type:none;
    margin:0;
    padding:0;
    }
    .tree a{
    display:block;
    width:15em;
    text-decoration:none;
    padding-top: 5px;
    margin:0;
    }
    .tree .leaf:hover,
    .tree .leaf:focus,
    .tree a:hover,
    .tree a:focus{
    background-color:#6CF;
    }
    .tree .parentNode{
    position:relative;
    background-color:#CFF;
    left:16px;
    }
    .tree .parentNode ul{
    display:none;
    }

    .tree .parentNode span{

    padding-left: 16px;
    background:url(arrows.gif) no-repeat;
    }
    .tree .leaf span{
    background:none;
    }
    </style>
    </head>

    <body>
    <?php
    //源数据模拟用,实际数据从数据库读取
    $data = array(
    array(
    ‘id’ => 1,
    ‘name’ => ‘学术和教育’,
    ‘children’ => array
    (
    array(
    ‘id’ => 2,
    ‘name’ => ‘自然科学’,
    ‘children’ => null,
    ),
    array(
    ‘id’ => 3,
    ‘name’ => ‘人文社科’,
    ‘children’ => array(
    array(
    ‘id’ => 9,
    ‘name’ => ‘英语’,
    ‘children’ => null
    ),
    array(
    ‘id’ => 10,
    ‘name’ => ‘政治’,
    ‘children’ => null
    )
    ),
    ),
    array(
    ‘id’ => 4,
    ‘name’ => ‘期刊会议’,
    ‘children’ => null,
    )
    // …
    ),
    ),
    array(
    ‘id’ => 5,
    ‘name’ => ‘体育运动’,
    ‘children’ => array
    (
    array(
    ‘id’ => 6,
    ‘name’ => ‘乒乓球’,
    ‘children’ => null,
    ),
    array(
    ‘id’ => 7,
    ‘name’ => ‘羽毛球’,
    ‘children’ => null,
    ),
    array(
    ‘id’ => 8,
    ‘name’ => ‘篮球’,
    ‘children’ => null,
    )
    // …
    ),
    ),
    // …
    );

    //关联数组解析成json格式
    function arrayToJsonStr($keyValue)
    {
    $strarray = array();
    foreach($keyValue as $key => $value)
    {
    if($key === ‘children’)
    {

    $value === null? $strarray[] = ‘children:null’ : $strarray[] = ‘children:’ .arrayReader($value);
    }
    else
    {
    $strarray[] = $key. ‘:’ . ‘"’. $value . ‘"';
    }
    }
    return ‘{‘. implode(‘,’, $strarray) . ‘}';
    }

    //将php形式的数据数组解析成JavaScript形式的数组字符串
    function arrayReader($arrayData)
    {
    $str = ‘[';
    foreach($arrayData as $value)
    {
    $str .= arrayToJsonStr($value) . ',';
    }
    return substr($str, 0, -1). ']‘;
    }
    $str = arrayReader($data);
    echo ‘<script type="text/javascript">
    var data = ‘ .
    $str. ‘;</script>';
    ?>
    <script type="text/javascript">
    window.baidu = {}; //命名空间
    baidu.Tree = function(data)
    {
    this.data = data;
    };
    //JSON数据格式转化为树结构
    baidu.Tree.prototype.jsonToTreeStr = function(jsonData, keytoshow)
    {
    var arrayStr = [];
    if(jsonData.children)
    {
    arrayStr.push("<li class=’parentNode’><a href=’#’><span class=’parent’>");
    arrayStr.push(‘</span>’);
    arrayStr.push(jsonData[keytoshow]);
    arrayStr.push(‘</a>’);
    arrayStr.push(‘<ul>’);
    for(var i = 0, len = jsonData.children.length; i < len; ++i)
    {
    arrayStr.push(this.jsonToTreeStr(jsonData.children[i], keytoshow));
    }
    arrayStr.push(‘</ul>’);
    arrayStr.push(‘</li>’);
    }
    else
    {
    arrayStr.push("<li class=’leaf’><a href=’#’><span>");
    arrayStr.push(‘</span>’);
    arrayStr.push(jsonData[keytoshow]);
    arrayStr.push(‘</a>’);
    arrayStr.push("</li>");
    }
    return arrayStr.join(”);
    };
    //带子节点数被点击时的响应函数
    baidu.Tree.prototype.onTreeClick = function(evt)
    {
    var evt = evt || window.event,
    target = evt.target || evt.srcElement;
    switch (target.nodeName.toLowerCase())
    {
    case ‘span':
    var children = target.parentNode.parentNode.childNodes;
    if(target.className === ‘parent’)
    {
    if(target.getAttribute(‘expanded’) === ‘true’){
    target.style.backgroundPosition = ‘0px 0px';
    target.setAttribute(‘expanded’, false);
    for(var i = 0, len = children.length; i < len; ++i)
    {
    if(children[i].nodeName.toLowerCase() === ‘ul’)
    {
    children[i].style.display = ‘none';
    }
    }
    }
    else
    {
    target.setAttribute(‘expanded’, true);
    target.style.backgroundPosition = ‘-16px 0px';
    for(var i = 0, len = children.length; i < len; ++i)
    {
    if(children[i].nodeName.toLowerCase() === ‘ul’)
    {
    children[i].style.display = ‘block';
    }
    }
    }
    }

    }
    }
    baidu.Tree.prototype.create = function(elementToRender)
    {
    if(typeof this.data !== ‘object’)
    {
    return;
    }
    var htmlStrArray = [];
    htmlStrArray.push(‘<ul class="tree">’);
    for(var i = 0, len = data.length; i < len; ++i)
    {
    htmlStrArray.push(this.jsonToTreeStr(data[i], ‘name’));
    }
    htmlStrArray.push(‘</ul>’);
    var panel = document.createElement(‘div’);
    panel.className = ‘treePanel';
    elementToRender == null ? document.body.appendChild(panel) : elementToRender.appendChild(panel);
    panel.innerHTML = htmlStrArray.join(”);
    panel.firstChild.onclick= this.onTreeClick;
    return panel;
    }
    </script>
    <script type="text/javascript">
    window.onload = function()
    {
    var tree = new baidu.Tree(data);
    var treepanel = tree.create();
    treepanel.onmousclick = function()
    {

    }

    }
    </script>
    </body>
    </html> Reply
  • 题目已经看过了,很想去百度看看,
    如果能做这个就能进百度,只能说明百度的技术人员太好混了。我们公司最初级的程序员,恐怕也很快就能写出这样的程序来。
    不知道这样这样的程序员在百度能拿多少的money,还是算个实习的。 Reply
  • <?php


    class Category{
    private $cats = array(
    array(
    ‘id’ => 1,
    ‘name’ => ‘学术和教育’,
    ‘count’ => 4368,
    ‘children’ => array(
    array(
    ‘id’ => 2,
    ‘name’ => ‘自然科学’,
    ‘count’ => ‘2’,
    ‘children’ => array(
    array(
    ‘id’ => 123,
    ‘name’ => ‘科学原理’,
    ‘children’ => NULL
    ),
    array(
    ‘id’ => 124,
    ‘name’ => ‘科学实践’,
    ‘children’ => NULL
    )
    )
    ),
    array(
    ‘id’ => 3,
    ‘name’ => ‘人文社科’,
    ‘children’ => NULL
    ),
    array(
    ‘id’ => 4,
    ‘name’ => ‘期刊会议’,
    ‘children’ => NULL
    )
    )
    ),
    array(
    ‘id’ => 5,
    ‘name’ => ‘生活’,
    ‘count’ => 3651,
    ‘children’ => array(
    array(
    ‘id’ => 6,
    ‘name’ => ‘图片’,
    ‘children’ => NULL
    )
    )
    )
    );
    /**
    *
    * Enter description here …
    * @var string
    */
    private $_show = null;
    public function show(){

    $this->_show = $this->build();

    return $this->_show;
    }

    private function build(){
    return $this->_render($this->cats);
    }

    private function _render($cats, $children = FALSE){

    if (!is_array($cats)) return false;

    $cat_str = $children ? ‘<ul id="p’. $children. ‘" class="children">’ : ‘<ul>';
    //$cat_str = ‘<ul>';
    foreach ($cats as $cat){
    //$children ? $cat_str = str_replace(‘#id’, ‘id="’. $cat['id'] .’"’, $cat_str): NULL;

    $cat_str .= !is_null($cat['children']) ? ‘<li onclick="show(\’p’ . $cat['id'] . ‘\’)" class="parent">’ : ‘<li>';
    $cat_str .= $cat['name'] . ( !is_null($cat['count']) ? ‘(‘ . $cat['count'] .’)’ . ‘</li>’ : ‘</li>’);

    if (!is_null($cat['children'])){

    $cat_str .= $this->_render($cat['children'], $cat['id']);
    }
    }
    $cat_str .= ‘</ul>';


    return $cat_str;
    }
    }

    $ca = new Category();

    //echo $ca->show();
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>test</title>
    <script type="text/javascript" src="jquery-1.5.2.js"></script>
    <style type="text/css">
    .children{
    display: none;
    }
    li{
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <?php echo $ca->show(); ?>
    <script type="text/javascript">
    function show(obj_var){
    var obj = document.getElementById(obj_var);
    //alert(obj_var);
    /*
    if(obj.style.display == ‘block’){
    obj.style.display = ‘none';
    }else{
    obj.style.display = ‘block';
    }*/
    obj.style.display = (obj.style.display == ‘block’ ? ‘none’ : ‘block’) ;
    }
    </script>
    </body>
    </html> Reply
  • 凭一段代码说明不了什么~ Reply
  • 很敢兴趣,我来试一下

    请看效果图:

    纯HTML+JS实现
    http://www.bllarchitects.com/demo/demo.html

    限于虚拟主机只支持ASP,所以只给出ASP实现代码

    楼主的方法不够面向对象,我还可提供ASP/PHP/JSP/C#面向对象实现代码。

    另外如果分类太多,最好用AJAX获取2级分类,如需要代码,可email给我 Reply
  • 哈哈,我的项目就正好是这样做的……我可以进百度了…… Reply
  • 域名+空间+html+js+css+php+ice+python+linux,招不招 Reply
    to idjay: 如果有兴趣可以投吧. 可以把简历发给我或者直接在网站在投. Reply
  • 本来想的。。。看到你这题目不想了。。。。 Reply
    to nate: 因为我的一道题目而改变自己的职业生涯决定, 其实是你自己对自己的不负责. Reply
  • 不会吧?我就是在FF3.6.13下调试通过的,在ie8和chrome下也顺利运行。不知你用的哪个版本? Reply

« [1][2][3][4][5][6] » 3/6

Leave a Comment