注: 只要你会做了这道题目, 你的能力已经可以进入百度了! 如果别的部门不要你, 请你给我发邮件, 我一定尽我所能强烈推荐你! 如果你不想加入百度, 而别的公司又不要你, 只能说明那家公司瞎眼了.
题目: 见图片, 该图是某网页的一个区域的截图, 用于显示商品或者其它信息的分类. 该分类的每一项可以折叠和收起(展开和收缩, 如果有子分类的话). 分类的级数不固定. 现有一个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 ...
1.用户的最大等待时间是3秒,这个只是整个页面的一部分,因此它的加载速度应该小于3秒,也就是说在56kb速度的情况下该模块最大显示时间不能多于3秒,超过3秒用户就会跳转,那你做出来后谁来看?
2。作者说这个数据量和层级是无限制的,如果全部直接往页面输出的话就会造成服务器与带宽的压力,而在未全部渲染完之前用户是无法看到数据的,因此会造成网站假死的现象,这也是没有任何实用价值的。
3.数据量是无限制的,而用户想要看的内容只是一部分,不会全部遍历整个树,因此加载整个树的数据是毫无必要的,而且大数据传输也很耗时间。
4.大家只是在单用户请求情况下做的开发,如果用户数突破万人,这样的情况怎么解决?
5.过多的DOM对象会拖慢页面的访问速度,和吃掉用户的内存,而很多情况下这些DOM是不会显示的。
我的解决方案,不成熟,大家可以讨论下:
1.后台数据格式使用json,这个好处大家都知道,就不说明了
2.php只输出第一层级的数据,其他数据通过ajax实现
3.当页面加载完成后,开始载入二到三级的数据,再多也没必要,因为用户点不点都不知道
4.当鼠标悬停在某一个栏目上时,即时加载相应的数据
5.设定定时器,清除不使用的目录数据,减少DOM,释放内存 Reply
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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
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">
<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
请看效果图:
纯HTML+JS实现
http://www.bllarchitects.com/demo/demo.html
限于虚拟主机只支持ASP,所以只给出ASP实现代码
楼主的方法不够面向对象,我还可提供ASP/PHP/JSP/C#面向对象实现代码。
另外如果分类太多,最好用AJAX获取2级分类,如需要代码,可email给我 Reply