史上最も強力な PHP Web 面接の質問 (それができれば、Baidu に入社できます)

注: この質問ができる限り、あなたの能力はすでに Baidu に入ることができます。他の部門があなたを望まない場合は、私にメールを送ってください。あなたを推薦するために最善を尽くします。 Baidu に参加したくないし、他の企業もあなたを望んでいません。それは、その企業が盲目であることを示しているだけです。

タイトル: 画像は、ある領域のスクリーンショットです。製品の分類やその他の情報を表示するために使用される Web ページ。このカテゴリの各項目は折りたたむことができます (サブカテゴリがある場合は展開および縮小できます)。PHP 変数があります。 :

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

これを変更するには、PHP コードを記述してください。配列に含まれる機密データは、CSS スタイルを考慮せずに、図に示されている機能を実現できる HTML/JavaScript コードを生成します。 ??-

注: この質問の範囲は PHP、HTML、JavaScript、CSS、再帰など非常に幅広く、上記のスキルをすべて本当に習得した場合にのみ完全な機能を実現できます。そうでない場合は分業に頼る必要があります。申請者の達成度が高いほどスコアが高くなります

申請者の申請立場が HTML/JS/CSS を除く場合、質問は次のように変更できます: 上記の PHP データをフォーム内のファイルに保存します。インデントと改行テキストのファイルを読み取って同じ PHP 配列を生成します (シリアル化とカスタム形式のシリアル化の逆)

このブログを読んでいる読者で、既に参加していて個人的に Baidu に参加したい場合は、返信してください。コメントにURLを記載してご希望を説明していただければ、私からご連絡させていただきます。または、プログラムをパッケージ化してお送りください。

原文: http://www.ideawu.net/blog/ archives/585.html



ディスカッションに返信（解決策）

たとえそれができても、そんなクソみたいな場所には行かない

学んで学んでください

array->xml->xmltreeは完成しましたが、xmtree は他の人が書いたものです、へへ

array->xml->xmltree は完成しましたが、xmtree は他の人が書いたものです、へへ

はは、もちろん自分で書く必要があります

そんなもの単純なこと！

今日は特別な日だということに突然気づきました。また Baidu の罠にはまりたくないです

できますが、時間がかかります。面接で解決するには長すぎます。

上記は大げさすぎます、もちろん面接で解決できます（30分、長くても1時間程度で終わると思われます）

そんな単純なことは要件にはなり得ないと言いました。百度。 。 。

vb vb 頑張ってください

できますが、時間がかかります。面接で解決するには長すぎます。

百度の扉は一生を通じてあなたに開かれています

私が作ったのですが、とても醜いです。また、Firefox では正常に実行されるだけですが、IE ではうまく動作しません。

エフェクトの表示:

http://life161.web-48.com/t.php

コード:

<?PHPheader("content-type:text/html;charset=utf-8");$cats = array(    array(        'id' => 1,        'name' => '学术和教育',        'children' => array(            array(                'id' => 9,                'name' => '自然科学',                'children' => null,            ),            array(                'id' => 8,                'name' => '社会科学',                'children' => null,            ),            array(                'id' => 23,                'name' => '哲学',                'children' => null,            ),            // ...        ),    ),    array(        'id' => 3,        'name' => '科技与发明',        'children' => array(            array(                'id' => 4,                'name' => '航天科技',                'children' => null,            ),            array(                 'id' => 5,                 'name' => '火箭技术',                 'chileren' => null,            ),            array(                'id' => 6,                'name' => '卫星技术',                'children' => null,            ),            // ...        ),    ),    // ...);echo "<script type=\"text/javascript\">var myarr=".json_encode($cats).";</script>\n";//echo json_encode($cats) ;?><style type="text/css">ul { list-style-type: none; margin:0px; width:100px}ul li a{ display:block;  background:#ccc; }ul li a:hover{ background:#999; }</style><script type="text/javascript">var out='' ;function showout(arr){  for(var i=0;i<arr.length;i++){    if(arr[i]['children']!=null){      out += "</ul><li class='item'><a href='#'><b>"+arr[i]['name']+"</b></a></li><ul class='list'>";      showout(arr[i]['children']);    }else{      out += "<li class='item'><a href='#'><b>"+arr[i]['name']+"</b></a></li>";    }  }  return out ;}var outstr = "<ul class='list'>"+showout(myarr)+"</ul>";document.write(outstr);</script><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="ul.js"></script>

ul.js:

$(document).ready( function() {	$("li + ul").hide();		$("li").click( function(){		//alert($(this).text());		$(this).find("+ul.list").toggle();	});});

とても落ち込んでいるように見えるので、アドバイスをお願いします。

      这种效果用PHP做是不是有点远水解近渴了，这个效果就是前端的EXT或JQUERY-UI里的节点数tree吧，为什么一定要用PHP来达到这个效果，JAVASCRIPT完成不是更好吗？而且配置也灵活，数据.JSON数据组织形式如：
[{
"id":1,
"code":"01",
"name":"name1",
"addr":"address1",
"col4":"col4 data",
"iconCls":"icon-ok",
"children":[{
"id":2,
"code":"0101",
"name":"name11",
"addr":"address11",
"checked":true
},{
"id":3,
"code":"0102",
"name":"name12",
"addr":"address12",
"state":"closed"
}]
},{
"code":"02",
"name":"Languages abc",
"addr":"address2",
"col4":"col4 data",
"state":"closed",
"children":[{
"code":"0201",
"name":"Java",
"col4":"col4 data",
"state":"closed",
"children":[{
"code":"02013",
"name":"jdk1"
},{
"code":"02014",
"name":"jdk2"
}]
},{
"code":"0202",
"name":"C#",
"col4":"col4 data"
}]
}]
这个结构我觉得整体应用上应该比PHP来得更实际些！

      个人看法：我不明白楼主为什么把这种应用称为史上最强大的PHP应用，还有用JS我觉得不管是性能上还是易用上都强过PHP，毕竟处理部分是交给客户端来展示分析效果的，而后台仅仅只是提供一些数据，以JSON形式返回给前端部分，没有必要让PHP去处理那么多的事务，其实我觉得这个要求和TREE树几乎是一样的，区别只是数据组织上的平台不同而已。换汤不换用，原理早就在生产实践中应用了，楼主说用JS的会应用百度引擎，那我就实在不理解了！难道纯PHP能实现节点树吗？

一定要进百度？

不就递归的应用吗，。。。。

代码中的json数据通过php服务器端取得。html,js,css代码如下，未使用任何js框架。支持全浏览器。

<!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>php</title><script type="text/javascript">	var treeData = [{		id: 1,		name: "学术和教育",		children: [			{				id: 2,				name: "自然科学",				children: null			},			{				id: 3,				name: "社会科学",				children: [					{						id: 4,						name: "建筑学",						children: null					}				]			},			{				id: 4,				name: "哲学",				children: [					{						id: 4,						name: "建筑学",						children: null					}				]			}		]	},	{		id: 5,		name: "科技与发明",		children: null	}];	(function() {		var isIE = /msie/i.test(navigator.userAgent) && !window.opera;		function createElement(tagName, styles, props) {			var tag = document.createElement(tagName);			if (styles) {				for (var styleName in styles) {					if (isIE && styleName == "cssFloat") {						styleName = "styleFloat";					}										tag.style[styleName] = styles[styleName];				}			}			if (props) {				for (var prop in props) {					tag[prop] = props[prop];				}			}			return tag;		}		function addNode(currentObj, parentNode) {			var dlTag = createElement("dl");			var ddTag = createElement("dd", {					cursor: "pointer"				}, {					id: currentObj.id				});			var textNode = document.createTextNode(currentObj.name);			var childTag = createElement("div");			var children = currentObj.children;			if (children) {				for (var index = 0; index < children.length; index++) {					addNode(children[index], childTag);				}			}			ddTag.onclick = function(e) {				var event = e || window.event;				if (event.stopPropagation) {					event.stopPropagation();				} else {					event.cancelBubble = true;				}								var childrenDiv = this.getElementsByTagName("div")[0];				if (childrenDiv.style.display == "none") {					childrenDiv.style.display = "block";				} else {					childrenDiv.style.display = "none";				}			};						ddTag.appendChild(textNode);			ddTag.appendChild(childTag);			dlTag.appendChild(ddTag);			parentNode.appendChild(dlTag);		}		function initDisplay(container) {			var childrenDivs = container.getElementsByTagName("div");			for (var index = 0; index < childrenDivs.length; index++) {				childrenDivs[index].style.display = "none";			}		}		JTree = function(containerId, datas) {			var container = document.getElementById(containerId);			for (var index = 0; index < datas.length; index++) {				addNode(datas[index], container);			}						initDisplay(container);		};	})();	window.onload = function() {		new JTree("container", treeData);	};</script></head><body>	<div id="container"></div></body></html>

重新改了下，代码更简洁

<!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>php</title><script type="text/javascript">	var treeData = [{		id: 1,		name: "学术和教育",		children: [			{				id: 2,				name: "自然科学",				children: null			},			{				id: 3,				name: "社会科学",				children: [					{						id: 4,						name: "建筑学",						children: null					}				]			},			{				id: 4,				name: "哲学",				children: [					{						id: 4,						name: "建筑学",						children: null					}				]			}		]	},	{		id: 5,		name: "科技与发明",		children: [{			id: 6,			name: "导弹",			children: [				{					id: 4,					name: "流体力学",					children: null				}			]		}]	}];	(function() {		var isIE = /msie/i.test(navigator.userAgent) && !window.opera;		function createElement(tagName, styles, props) {			var tag = document.createElement(tagName);			if (styles) {				for (var styleName in styles) {					if (isIE && styleName == "cssFloat") {						styleName = "styleFloat";					}										tag.style[styleName] = styles[styleName];				}			}			if (props) {				for (var prop in props) {					tag[prop] = props[prop];				}			}			return tag;		}		function addNode(currentObj, parentNode) {			var dlTag = createElement("dl");			var ddTag = createElement("dd", {					cursor: "pointer"				}, {					id: currentObj.id				});			var textNode = document.createTextNode(currentObj.name);			var childTag = createElement("div", {display: "none"});			var children = currentObj.children;			if (children) {				for (var index = 0; index < children.length; index++) {					addNode(children[index], childTag);				}			}			ddTag.onclick = function(e) {				var event = e || window.event;				if (event.stopPropagation) {					event.stopPropagation();				} else {					event.cancelBubble = true;				}								var childrenDivs = this.getElementsByTagName("div");				if (childrenDivs[0] && childrenDivs[0].style.display == "none") {					childrenDivs[0].style.display = "block";				} else {					for (var index = 0; index < childrenDivs.length; index++) {						childrenDivs[index].style.display = "none";					}				}			};						ddTag.appendChild(textNode);			ddTag.appendChild(childTag);			dlTag.appendChild(ddTag);			parentNode.appendChild(dlTag);		}		JTree = function(containerId, datas) {			var container = document.getElementById(containerId);			for (var index = 0; index < datas.length; index++) {				addNode(datas[index], container);			}		};	})();	window.onload = function() {		new JTree("container", treeData);	};</script></head><body>	<div id="container"></div></body></html>

很想学,目前的能力还做不出~

学习了,很多都还不会

请问楼主 
这个东西有难度吗

这东西就能进baidu。。。。。。呵呵呵。。。。哈哈哈

一看发帖时间是3.31而不是4.1不知是不是提前过愚人节呢

高手是有点多啊

应该是愚人节吧

代码中的json数据通过php服务器端取得。html,js,css代码如下，未使用任何js框架。支持全浏览器。
HTML code
nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

不错! 代码很简洁. 不过, 有点小瑕疵, 那就是收缩再展开后, 并没有恢复到收缩前的状态, 和一般的体验不一致. 兄弟要是有兴趣, CSS也不错的话, 可以试投一下前端相关的职位.

百度代理公司的飘过
这个我弄过几个,没什么难度,不过确实很需要比较全面的知识
需要逆着去推,知道怎样可以构造一个收缩展开的html+css, 攥写配套js, 然后要写个php类来能够根据传入的数组构造html进行输出. 

自己弄实现,不依赖现成的,会有个地方比较费时间
弄那种虚线的对准的css

百度是这个门槛啊，哈哈，表示不想进

この質問ができる限り、あなたの能力はすでに Baidu に参入することができます。Baidu に関するこの小さな情報で、Baidu はどのようにして儲かっているのでしょうか? Baidu はテクノロジー (新製品の開発) から収益を上げているのではなく、Baidu は広告から収益を上げています。 。 。百度はテクノロジーがなくてもお金を稼ぐことができるので、上記の研究開発部門に加えて、数人の優秀な人材を見つけ、他のすべての部門がフロントデスクに行って電話に出ることができます

21 階の Rainsilence からの返信を引用:

コード内の json データは PHP サーバーを通じて取得されます。 html、js、cssのコードは以下の通りです。jsフレームワークは使用しません。すべてのブラウザをサポートします。
HTML コード
このような？ http://hr.baidu.com/www/job/jobDetail.action?jobId=1966

php で実装すると、js ほど速くないようです

php で実装すると、js ほど速くないようです

出力 HTML は直接 php を使用する方が便利です

特定の要件を満たす配列を入力した後、関数を使用して html を再帰的に出力します

もちろん、php で json を出力し、js を使用して効果を組み立てることもできます。フロントエンドですが、この場合、操作はより複雑になります


あなたでも、あのいまいましい場所に入らずにそれを行うことができます

彼らは全員マスターです！

これは少し難しいです

投稿者は自分でやり方を知りません

ギミックを作って他の人に手伝ってもらいますか?...



csdn マスターは雲のようなものです

私にはできません写真を見てください

簡単すぎます さあ

私は専門家ではありません... この質問は難しいですか~~~ 誰か知っていますか

悪くありません。 。

うわー、このレベルだと百度に入ったらただの便利屋になってしまいそう。 。 。

そうでなければ、Baidu の Web 開発レベルは低すぎます。 。 。

そうでなければ、LZ は人々を騙そうとしている。 。 。

経験はほぼ1年です。

勉強してください....

OK!!!

簡単なようですが、実際には時間がかかります。

1. PHP 再帰を使用して json + JS をアセンブルし、HTML とエフェクト + CSS をアセンブルします

2. PHP 再帰を使用して HTML + CSS + JS エフェクトを直接アセンブルします

3. jquery を使用して JS を作成しないでください。質問者さんに嫌われてます。

機能は非常に強力ですが、少し難しいです

LZ は Baidu の HR ですよね?笑

私の能力が何なのかは分かりませんが、人を騙すのは得意です。

人を騙しているのですか？ 古典的な質問ですが、それほど難しくありません

これはとても複雑で奥深いものではないでしょうか？ ?

すごい、これは採用ではなくイベント マーケティングです

これが Baidu でできることですか

プログラムのビジネス ロジックをリクエスト処理のフロントエンド ビューから分離するため

このデータがモデルです
処理リクエストページ
新しいサービスページを作成 データを json
に変換してフロントページに返します。

Java ループを使用して json を処理し、dom に追加します。
各ノードの先頭にイベントをバインドして、dom ノードの表示と非表示を制御します。



再改訂され、コードがより簡潔になりました

HTML コード

とても興味があるので、試してみます

レンダリングをご覧ください:

純粋な HTML+JS 実装
http://www.bllarchitects.com/demo/demo.html

仮想ホストに限定ASP のみをサポートしているため、ASP 実装コードのみを提供します

投稿者のメソッドは十分なオブジェクト指向ではありませんが、ASP/PHP/JSP/C# オブジェクト指向実装コードも提供できます。

また、カテゴリが多すぎる場合は、AJAX を使用して第 2 レベルの分類を取得するのが最善です。コードが必要な場合は、私にメールしてください

この種のことは、たとえそれができるかどうかをテストします。それで何ですか? 成長できるプログラマーは理解していません php CSS を始めるのが絶対に早いです 将来あなたが書くものは今書ける人よりも劣ることはありません

それは元の投稿者が方法を知らないからですか？この種のアプリケーションには複雑なアルゴリズムはありません。大規模に実行できない人でも、少し知っている人なら誰でも実行できます。 PHP HTML CSS Javascript くらいならできますし、そういう才能はたくさんあります

実装するのは難しくありません

まず表示して、それからjqueryで表示・非表示にするだけです

ちょっとした再帰で誰でも解決できます。ツリー構造を書いたら簡単に書けるはずです

こんな簡単なものがBaiduに組み込まれるなんてすごいですよね

ただのツリーメニューですが、コードの実装には良い面と悪い面があります。 . 最高のものを得るのはとても難しいです

上記は大げさすぎますが、もちろん面接で解決できます（最短で30分、最長で1時間で完了できます）

難しいことではありません、時間。 -消費

それは実際には難しくありません

Baidu を進めるのは実際には非常に簡単です。私の友達の多くがそこに行きました。 。 。 PHPやってる人もいます