当前位置: 代码迷 >> HTML/CSS >> 服务器端HTML处置使用phpQuery
  详细解决方案

服务器端HTML处置使用phpQuery

热度:331   发布时间:2012-12-17 09:31:40.0
服务器端HTML处理使用phpQuery
在我们一天一天web开发任务,这是必要的,我们的工作与客户端和服务器端代码。我们用PHP编写的业务逻辑和生成在用户的浏览器显示的HTML。然后,我们使用的框架,如jQuery或原型,提供客户端交互。
现在想想如何可以改变和操作使用服务器端的PHP代码生成的HTML。phpQuery是最终的解决方案,将来到你的头脑。如果你还没有听说过有关phpQuery在这篇文章中,您可能会感兴趣,因为我给你一个简短的介绍的phpQuery和解释如何可以使用它在现实世界中的项目。
什么是phpQuery
phpQuery是服务器端,链式,CSS3选择器驱动的文档对象模型(DOM)API jQuery JavaScript库的基础上。
这是官方给出的定义phpQuery项目页面。如果你已经使用jQuery,那么你将有一个想法如何,它可以简化许多任务需要DOM操作。phpQuery提供完全要在你的服务器端PHP代码使用相同的功能。凌乱的HTML代码生成,使用echo语句和类似的方法,你可以说再见。
你将有机会获得大部分由jQuery的在phpQuery提供的功能,它可以大致可分为以下提到的4个任务分为:
创建DOM元素
选择和操作元素
遍历DOM的
打印输出到浏览器
您可以执行的任务使用由phpQuery这被称为提供的功能,让我们来看看第一功能“移植jQuery的部分。”
选择 -找到根据给定条件的元素。
属性 - DOM元素的属性的工作。
穿越 -穿越选定元素的列表。
操作 -添加和删除选定的元素含量。
阿贾克斯 -创 ??建服务器端的Ajax请求。
活动 -结合DOM对所选元素的事件。
公用事业 -通用功能,以支持其他功能。
您可以下载从项目页面code.google.com / P / phpquery phpQuery库。复制到Web服务器的文件夹,你都准备好了。安装是如此简单,上手,你可以执行demo.php文件。
如何使用phpQuery的
我要告诉你如何创建一个两列的无序列表头和不同行的颜色为奇数和偶数行,在下面的图片所示:
 


首先,让我们创建一个HTML文档,使用phpQuery:

1 <?php
2 require("phpQuery/phpQuery.php");
3 $doc = phpQuery::newDocument("<div/>");

上面的代码将创建一个具有一个基本的HTML文档的div标签。该库提供了创建文档的各种方法,我用最简单的一个,但你可以找到在其他demo.php和文档。
现在我们需要创建一个无序列表,并把它添加到我们的HTML文件。

1 <?php
02 ...
03 $doc["div"]->append("<ul><li>Product Name</li><li>Price</li></ul>");
04 $products = array(
05     array("Product 1","$30"),
06     array("Product 2","$50"),
07     array("Product 3","$20"));
08
09 foreach($products as $key=>$product) {
10     $doc["div ul"]->append("<li>$product[0]</li><li>$product[1]</li>");
11 }
12 print $doc;

你可以看到,我们现在的无序列表。但所有的元素是在一个单一的列,这是默认的。我们必须移动到第二列的清单,甚至元素。
1 <?php
2 ...
3 $doc["div ul"]->attr("style", "width:420px;");
4 $doc["div ul"]->find("li:even")->attr("style","width:200px; float:left; padding:5px; list-style:none;");
5 $doc["div ul"]->find("li:odd")->attr("style","width:200px; float:left; padding:5px; list-style:none;");

我使用的样式属性定义CSS样式需要我们的例子,但它不建议使用内联样式,除非它真正需要的。始终使用CSS类添加样式。
现在,让我们突出的头和偶数行使用phpQuery方法。

1 <?php
2 ...
3 $doc["div ul"]->find("li:nth-child(4n)")->attr("style","background:#EEE; width:200px; float:left; padding:5px; list-style:none;");
4 $doc["div ul"]->find("li:nth-child(4n-1)")->attr("style","background:#EEE; width:200px; float:left; padding:5px; list-style:none;");
5 $doc["div ul"]->find("li:lt(1)")->attr("style","background:#CFCFCF; width:200px; float:left; padding:5px; list-style:none;");
 

 

我们已经完成了我们的简单的例子,你现在应该有一个想法如何的phpQuery可以用来简化HTML生成服务器端。我们所做的一切是将用jQuery做的几乎一样,除了我们对所有动作$ doc对象。
对phpQuery的重要性
即使我解释,功能phpQuery,你一定会奇怪,为什么我们需要时,我们有客户端的jQuery库。我带你去phpQuery使用一个实际情况的重要性。
 
考虑以下情况:假设我们有一个像下面的表,其中有关于Web开发谁去采访的所有信息。


现在,这里的名单在这种情况下我们要发展的要求:
谁得到超过60大关考试的申请人应以蓝色突出显示。
超过3年以上工作经验的申请人,应在标有“高级软件工程师”和其他申请人的申请,应该有链接“应用软件工程师”前面有一个环节。
公司拥有一支经验的基础上的薪酬结构:
1年 - $ 5,000
2年 - $ 10,000
3年 - 20000美元
3年以上 - $ 50,000
salary列应以绿色突出显示符合条件的申请人。
这是应该如何输出:


开发者可能会提供以下解决方案来满足使用纯PHP代码的要求。



01 <?php
02 // retrieve applicants from database
03 //...
04
05 echo <<<ENDHTML
06 <div id="main">
07  <div class="row_head">
08   <div>Name</div>
09   <div>Marks</div>
10   <div>Experience</div>
11   <div>Position</div>
12   <div>Expected Salary</div>
13  </div>
14 ENDHTML;
15 foreach ($applicants as $applicant) {
16     echo '<div class="row">';
17     echo "<div>" . $applicant["name"] . "</div>";
18     echo '<div class="' . marksClass($applicant["marks"]) . '">' . $applicant["marks"] . "</div>";
19     echo "<div>" . $applicant["experience"] . "</div>";
20     echo "<div>" . positionLink($applicant["experience"]) . "</div>";
21     echo '<div class="' . salaryClass($applicant["experience"], $applicant["salary"]) . '">' . $applicant["salary"] . "</div>";
22     echo "</div>";
23 }
24 echo "</div>";
25
26 function marksClass($info) {
27     return ($info > 60) ? "pass" : "fail";
28 }
29
30 function positionLink($experience) {
31     return ($experience > 3)
32         ? '<a href="#">Apply for Senior Software Engineer</a>'
33         : '<a href="#">Apply for Software Engineer</a>';
34 }
35
36 function salaryClass($experience, $salary) {
37     switch ($experience) {
38         case 1:
39             return ($salary < 5000) ? "accept" : "reject";
40         case 2:
41             return ($salary < 10000) ? "accept" : "reject";
42         case 3:
43             return ($salary < 20000) ? "accept" : "reject";
44         default:
45             return ($salary < 50000) ? "accept" : "reject";
46     }
47 }
现在,让我们做它用phpQuery和比较代码和优势。
01 <?php
02 require("phpQuery/phpQuery.php");
03 $doc = phpQuery::newDocument('<div id="main"></div>');
04 phpQuery::selectDocument($doc);
05
06 // retrieve applicants from database
07 //...
08
09 $doc["#main"]->append('
10 <div id="main">
11  <div class="row_head">
12   <div>Name</div>
13   <div>Marks</div>
14   <div>Experience</div>
15   <div>Position</div>
16   <div>Expected Salary</div>
17  </div>');
18
19 foreach ($applicants as $key => $applicant) {
20     $doc["#main"]->append('<div class="row" id="app_' . $key . '"></div>');
21     foreach ($applicant as $field => $info) {
22         $doc["#main"]->find("#app_" . $key)->append('<div class="_' . $field . '">' . $info . "</div>");
23         if ($field == "experience") {
24             $doc["#main"]->find("#app_" . $key)->append('<div style="width:400px" class="_position">-</div>');
25         }
26     }
27 }
28
29 addMarksClass($doc);
30 addSalaryClass($doc);
31 addPositionLink($doc);
32
33 print $doc;
34
35 function addMarksClass(&$doc) {
36     $marks = pq("._marks");
37     foreach ($marks as $appMark) {
38         if (pq($appMark)->html() > 60) {
39             pq($appMark)->addClass("pass");
40         }
41         else {
42             pq($appMark)->addClass("fail");
43         }
44     }
45 }
46
47 function addSalaryClass(&$doc) {
48     $marks = pq("._salary");
49     foreach ($marks as $appMark) {
50         $experience = pq($appMark)->parent()->find("._experience" )->html();
51         $salary = pq($appMark)->html();
52
53         switch ($experience) {
54             case 1:
55                 pq($appMark)->addClass(
56                     ($salary < 5000) ? "accept" : "reject"
57                 );
58                 break;
59             case 2:
60                 pq($appMark)->addClass(
61                     ($salary < 10000) ? "accept" : "reject"
62                 );
63                 break;
64             case 3:
65                 pq($appMark)->addClass(
66                     ($salary < 20000) ? "accept" : "reject"
67                 );
68                 break;
69             default:
70                 pq($appMark)->addClass(
71                     ($salary < 50000) ? "accept" : "reject"
72                 );
73         }
74     }
75 }
76
77 function addPositionLink(&$doc) {
78     $experience = pq("._experience");
79     foreach ($experiece as $appExp) {
80         if (pq($appExp)->html() > 3) {
81             pq($appExp)->parent()->find("._position")->html('<a href="#">Apply for Senior Software Engineer</a>');
82         }
83         else{
84             pq($appExp)->parent()->find("._position")->html('<a href="#">Apply for Software Engineer</a>');
85         }
86     }
87 }

phpQuery是很容易的,如果你已经使用jQuery的知识。最上面的代码将是不言自明。我想提一提,PQ()虽然是指到当前文档。所有其他的jQuery函数。
尽管两者看起来很相似,代码使用phpQuery提供更好的质量和可扩展性。想想如何脆的原代码可以是,如果你以后添加额外的功能。假设我们要添加额外的工作经验为基础的商标验证。在这种情况下,你必须添加另一种方法和分配的foreach循环内返回的结果。这意味着你要改变已经写好的代码,违反了开闭原则:
软件实体(类,模块,函数等)应该对扩展开放,对修改关闭。
有了第二次的例如使用phpQuery的,首先生成代码没有任何验证,然后传递到每个功能表,并放置到原始表的变化。每个功能并不影响其他功能,所以我们可以写任何新要求的新的功能和使用外循环与其他功能。我们不修改现有的代码,这听起来不错吧?这被称为装修:
Decorator模式是一种设计模式,它允许被添加到现有对象的行为动态。

站长行业门户(http://www.software8.co/wzjs/PHPshili/284.html)文章,希望大家可以留言建议

  相关解决方案