vAgent开发--HTML和Javascript彻底分离

laowei00

2008-07-16

关注关注

传统瘦客户端开发，HTML/CSS/Javascript，彻底分离？理想主义吧？

对，就是有理想主义。没有理想，就不会尝试实践；不尝试实践，怎么能前进?日本人水都能发动汽车了，html/js分类算鸟？试试看吧：）

在vAgent项目中，需求的来源是客户认为我们的网页上javascript代码很多，影响SEO(国外客户对SEO都是有整理策略的，马上有一篇小文介绍ON-SiteSeo)

而我们遇到的困难是：

1.很多onclick事件充斥在html元素中

2.ROR程序员可能都遇到Helper问题，CakePHP采用类似的机制，比如GoogleApi就是借助了一个我们自己编写的JavascriptHelper直接在页面中调用简化输出，结果导致传回浏览器时即时解析的javascript就混杂在页面当中

3.有些javascript的变量是依赖于后台数据库输出结果的

下面看一个典型页面应用（该页面是澳洲的州介绍）

针对上面我们提到的困难，我们逐步重构.基本思路是，定义一个页面同名.js文件用<script>标签包含进来，该例子中js文件名为destination.js

1.很多onclick事件充斥在html元素中

比如，页面右侧的+和-点击后分别展开和合并，那么起初我们的写法类似：

<a href="" onclick="expand(..)" >+</a>

实际上前端开发经验丰富的人都知道如何剥离这段代码，特别是使用了prototype或者jquery框架之后。下面是使用prototype为例：

首先重新定义+，加入id属性

<a href="" id="state1" >+</a>

在destination.js中(伪代码)

Event.observe("state1", 'click' , function() {
      expand(this);
      show_left_of_page(this);
    });

这个问题经过我们反复分析得出结论：不使用javascripthelper.

3.有些javascript的变量是依赖于后台数据库输出结果的

其实这个问题才是困扰我们的最大问题，很多程序员不假思索地否定了该种情况的javascript代码剥离.

对于上面的页面例子，澳大利亚各州的数据（名称，介绍和图片）都是后台数据库取出的，每次load后，这些数据作为一个数组被存储到javascript变量中，以供+/-点击后切换叶面左边介绍。

原(伪)代码片断如下：

<script>
  // destination要用来存放后台州的数据，是javascript变量
  var destination = new Array();

  <?php
    $dests = array();
    // $destinations存放的是数据库中取出来的数据，是php变量
    foreach($destinations as $destination) {
      $dests[$destination['Destination']['id']] = 
        '<h2>'.$destination['Destination']['name'].'</h2>'.
        '<p>'. $destination['Destination']['description'].'</p>'.
        '<p>'.$html->image('/files/destinations/area'.$destination['Destination']['id'].'.gif','</p>';
    }
    foreach($dests as $key=>$value) {
      echo 'destination['.$key."]='". $value ."';" . "\r\n";
    }
  ?>
</script>

剥离思路:php输出json串存在html页面隐藏div中，然后javascript通过dom找到这个字符串用json库反解析

经过改进后，在html页面中

<div id="json_dests" style="display:none">
<?php 
 // $distionation是php数组存放的是澳大利亚州数据
  echo $javascript->Object($destinations));
?>
</div>

在destination.js中：

function extract_destinations(){
  var json_dests = document.getElementById('json_dests').innerHTML;
  var destJsObj  = JSON.parse(json_dests);
  // 接下来输出destJsObj对象到destination数组变量中
}

经过以上三步，vAgent网站的网页"一干二净"。

---执拗于面向初学者写烂文的人于2008年7月（进入我的博客看更多烂文）

javascript html代码 html文件